どうも、れいです。
今回はJavaScriptの言語を使ったプログラミングについて、簡単なやり方を説明していきたいと思います。
超簡単な数行ほどのプログラムを超詳しく解説しているので、この記事を読むとプログラミングとは何なのか、その基礎の基礎について理解することができます。
初心者の方でもわかりやすいように、専門用語をかみ砕いて説明するのでご安心ください。
- プレイ済ゲーム300以上
- 所持ハード20以上
- PC自作経験とGBASP改造経験
- インディーゲー好き
- デザイン等のクリエイティブなことが好き
よろしくね！
＠れい
そもそもプログラミングとは？
プログラミングとは、コンピュータに「これをやってほしい」と伝えるために、人間の言葉を機械が理解できる形に翻訳する作業です。
私たちが「料理を作って」とお願いするだけでは具体的に何をすればいいかわからないように、コンピュータにも「どう動くか」を細かく教える必要があります。
たとえば、「材料を取り出す」「切る」「炒める」という手順を一つひとつ教える感じです。
この技術を使えば、ウェブサイトを作ったり、スマホアプリを動かしたり、日常の面倒な作業を自動化することができます。
また、日本語、英語、フランス語、ドイツ語など世界に様々な言語があるように、プログラミングにも沢山の言語があります。
今回は沢山あるプログラミング言語の中の、JavaScriptというものについて説明していきます。
れいJavaScriptは略して「JS」とも呼ばれるね！名前が似たプログラミング言語で「Java」というものがあるけど、全くの別物だよ！
JavaScriptとは？
JavaScriptは、ウェブサイトに動きをつける言語です。
ボタンを押したらメッセージが出たり、画像が動いたり、そんな「動く仕掛け」を作れます。
たとえば、これ👇
ボタンを押すと「こんにちは！」って表示されます。
<button onclick="alert('こんにちは！')">クリックしてね</button>実際のコードはこんな感じ。たったのこれだけでプログラムが動作するんです。
難しそうに見えても、実はとっても簡単です。
JavaScriptがあれば、ウェブページに動きをつけて、コンテンツの表現の幅を広げることができます。
使えると楽しいので、ここで一緒に学習していきましょう。
JavaScriptの動作を理解しよう！
先ほどのコードについて説明します。
<button onclick="alert('こんにちは！')">クリックしてね</button>
このコードは、全部がJavaScriptの言語で記述されてるわけではなく、htmlにJavaScriptが追記される形で表示されています。
つまりどういうことかというと、
<button>クリックしてね</button>この部分がhtmlです。
htmlとは？
HTMLは、ウェブページを作るための土台です。
文章や画像、ボタンなど、「ここにこれを置くよ！」と指定する役割があります。
ウェブサイトの設計図みたいなものです。
「onclick=”alert(‘こんにちは！’)”」の部分(JavaScriptの部分)を削除しました。
下のボタンを押してみてください。
「こんにちは！」が出てきませんよね。
JavaScriptが記述されないと、このように「動き」がなくなってしまいます。
ちなみに、「onclick=”alert(‘こんにちは！’)”」は、「クリックしたら、こんにちはと書かれたアラートを表示するよ」という意味です。
ちゃんと見てみると、いくらプログラミング言語でもちょっとは意味を理解できそうな感じですよね。
また、このコードでは、htmlとJavaScriptが一体になって表示されていますが、基本はバラバラで記述します。
今回はそのやり方を説明していくので、一緒にプログラムを作っていきましょう！
必要なもの
- PC1台
- WindowsのPCに標準で入ってる「メモ帳」
この2つだけです。
使える人はテキストエディタを使ってもいいですが、今回は超初心者向けの解説なので、「メモ帳」主体で説明していきます。
メモ帳ってどこにあるの？って方は、ホーム画面左下のWindowsの検索バーで「メモ帳」と入力してみましょう。
メモ帳の見つけ方(クリックで開きます)
準備段階
htmlファイルの作成
メモ帳を開いたら、以下の内容をコピーして、メモ帳に貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>コピーして貼り付けるだけでいいです。
貼り付けたら、一旦そのメモ帳を保存しましょう。
もちろん左上の「ファイル」から「保存」を選んでもいいです。
「index.html」という名前で、わかりやすく「デスクトップ」に保存しておきましょう。
index.htmlという名前で保存できたら、このようになるかと思います。
ブラウザ(Edge)のアイコンになっているのが分かりますか？
こうなれば保存は成功です。
ブラウザアイコンが表示されない場合
もしかして、このような状態になっていませんか？
このアイコンで保存されているようであれば、「テキストファイル」として保存されていることになっています。
ファイル名を修正して「htmlファイル」に直してあげましょう。
以下の手順を踏めば、簡単に直すことができるので大丈夫です。
開くフォルダは何でもいいです。
Enterを押します。
そしたら、index.htmlをダブルクリックして開いてみましょう。
真っ白なブラウザ画面が出てくると思います。
それは、ネット上に表示される自分だけのキャンバスのようなものです。
ネット上に表示といっても、そのキャンバスを見れるのは自分だけなのでご安心ください。
JavaScriptファイルの作成
次はJavaScriptファイルを作っていきましょう！
手順はhtmlの時と同じです。
メモ帳を新しく作り、「test.js」という名前にして、デスクトップに保存しましょう。
このように表示されていればOKです。
さっそく作ってみよう！
htmlファイルへの記述
index.htmlファイルの<body>と</body>の間に下記を追記しましょう。
<button id="myButton">クリックしてね</button>
<script src="test.js"></script>追記したらしっかり保存(ctrl+S)して、先ほどの真っ白だったブラウザを更新(ctrl+R)してみてください。
ブラウザにボタンが表示されたはずです。
1行目に「id=”myButton”」と書かれていますが、これは「ボタン」に「myButton」っていう固有の名前(ID)を付けますという意味です。
これがあると、たとえ同じ「ボタン」が複数ある場合でもmyButtonという名前を持った子を見つけることができます。
これにより、ボタンがたくさんあっても、特定の名前が付いたボタンだけ呼び出せるようになるわけです。
ちなみに、2行目のコードが無いと、いくらJavaScriptファイルに記述したとしても、絶対にhtmlファイルに反映させることはありません。
つまり、「動き」をつけることができないってわけです。
JavaScriptファイルへの記述
続いてJavaScriptファイルに記述していきましょう。
下記をtest.jsファイルにコピペして保存してください。
const button = document.getElementById('myButton');
button.onclick = function() {
alert('こんにちは！');
};ブラウザで更新をかけて、ボタンをクリックしてみてください。
「こんにちは！」のアラートが出てきたはずです。
これでプログラムは完成ですが、パッと見ただけじゃ理解できないですよね。
ちゃんと1つずつ説明していくので安心してください。
まず、１行目の部分です。
const button = document.getElementById('myButton');説明しやすいように、このコードを大きく3つに分けて説明しますね。
- 「const button」
- 「=」
- 「document.getElementById(‘myButton’);」
- ① const button
-
buttonの部分は「箱の名前」を表しています。
なんでも入るおもちゃ箱だと思ってください。
「const」の部分は、「どんな箱か」を表しています。
constについて詳しく説明すると難しくなってしまうので、簡単に説明すると、「二度と値を変更することができません」という意味です。
「一度箱に入れたものは、二度と変更することができませんよ」と意味づけしているのです。
つまり、「const button」の意味は「値の変更することのできないbuttonという名前の箱」という意味になります。 - ② =(イコール)
-
算数だと「等しい」という意味ですが、プログラミングでは全く異なる意味になります。
プログラミングでの意味は「代入する」、「入れる」という意味です。
「＝」の後ろにあるものを「＝」の前にあるものに入れます。
おもちゃ箱にポンポン投げ入れてくれる役割です。
つまり、const buttonという箱に、「document.getなんちゃら(割愛)」を入れますよという意味です。 - ③ document.getElementById(‘myButton’);
-
見ただけで鳥肌立ちそうな羅列ですが安心してください。ちゃんと説明します。
まず、「document」の部分ですが、これは真っ白いキャンバス、つまりブラウザ画面のことです。
「このブラウザ画面上でこれからなんかしてやるぞ～！」と意気込んでるわけです。
次は「getElementById(‘myButton’)」この部分ついてです。
getElementById(‘myButton’)→ myButtonという名前のidの要素をゲット(取得)してきますよ
という意味です。
れいid？ myButton？なんか聞いたことあるぞ？
と思った方、素晴らしいです。
index.htmlを見返してみてください。<button id="myButton">クリックしてね</button>と記述されたコードがあるはずです。
よく見ると、「id=”myButton”」と書かれてますよね。
つまり、「getElementById(‘myButton’)」はmyButtonという名前のidの要素(つまりボタン)をhtmlからゲット(取得)しているわけです。この子がゲットされました。
以上でこのコードの説明が終わりました。
const button = document.getElementById('myButton');まとめると、ブラウザ上にある、myButtonという名前のidの要素(=ボタン)をhtmlからゲット(取得)して、値が二度と変更できないbuttonという箱に入れますよという意味です。
長いので分かりやすく分けてみるとこんな感じですね。
①、②、③の順番で読み解きます。
②const button ③= ①document.getElementById(‘myButton’);
- ① document.getElementById(‘myButton’);
-
ブラウザ上にある、myButtonという名前のidの要素(=ボタン)をhtmlからゲット(取得)して、
- ② const button
-
値が二度と変更できないbuttonという箱に
- ③ =
-
入れますよ
左から右の順番でわかりやすく読み解きたい方はこちら
左から右へ順に意味を理解したい人に向けて、もう一つの考え方を提案します。
この考え方だと、コードを左から右へ順番に読み解くことができます。
const button = document.getElementById('myButton');①const button ②= ③document.getElementById(‘myButton’);
- ① const button
-
値が二度と変更できないbuttonという箱に
- ② =
-
入れますよ
れい何を入れるの？
- ③ document.getElementById(‘myButton’);
-
ブラウザ上にある、myButtonというidの要素(=ボタン)を
図で表すと超簡単ですね。
htmlとJavaScriptの全体のやりとりを図で表すとこんな感じです。
続いて以下のコードについてです。
button.onclick = function() {
alert('こんにちは！');
};まず、外側のこれを説明しますね。
button.onclick = function() {
};これは簡単にいうと、「クリックしたときの動作を｛｝内に指定します」というプログラムです。
現在、myButtonというボタンは、さっきの説明の通りbuttonという箱に入っています。
「button.onclick = function()」とすることで、「myButtonというボタンをクリックしたときに、｛｝内の動作を行います」となるわけです。
では｛｝内に書かれているコードを見てみましょう。
alert('こんにちは！');これはもう見たまんまの意味です。
「こんにちは！」と書かれたアラートを表示させますという意味になります。
button.onclick = function() {
alert('こんにちは！');
};なのでこれは、myButtonというボタンをクリックしたときに、「こんにちは！」と書かれたアラートを表示させるという動作をします。
この子をクリックすると「こんにちは！」のアラートが出てくるってわけですね。
最終的なコード
最終的なコードは以下の通りです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="myButton">クリックしてね</button>
<script src="test.js"></script>
</body>
</html>test.js
const button = document.getElementById('myButton');
button.onclick = function() {
alert('こんにちは！');
};まとめ
いかがでしたでしょうか。
思った以上に説明が長くなってしまいましたが、これ以上ないくらい簡単に詳しく解説してみました。
今回解説した言語はJavaScriptですが、どの言語も基本は一緒です。
「箱」があって、その箱に「値」をいれて、「箱」を使っていろんなことをやらせる流れになっています(例外もありますが)。
1つずつ理解していけば、プログラミングへの理解はどんどん深まっていきます。
以上、「【JavaScript】使うのはメモ帳だけ！初心者でも簡単プログラミング解説」でした。
htmlとcssにも触れてみよう！
この記事が気に入ったら
フォローしてね！
コメント