ダレカン和泉Web制作・開発基礎カリキュラム

Step 3 プログラミング導入 » 授業1

STEP 3 | 授業 1/6

JavaScriptの最初の一歩

HTMLが骨組み、CSSが内装なら、JavaScriptは「電気設備」。ボタンを押したら明かりがつくように、ページに動きをつけます。今日のゴールはただ1つ、「自分の書いた命令で、何かが動く」体験です。

この授業のゴール 「ボタンを押したらメッセージが出る」ページを自分で作り、「動いた!」を体験する。

1. JavaScriptはどこに書く?

JavaScript(略してJS)は、HTMLの中の <script> タグの中に書きます。場所は </body> の直前が定番です。

<body>
  <h1>JSの練習</h1>

  <script>
    // ここにJavaScriptを書く
  </script>
</body>

// から始まる行はコメント(メモ書き)で、実行されません。そして大事な言葉を一つ: <script> と </script> のあいだのことを、この先の説明では「script の中」と呼びます。

  1. VS Code で web-renshu フォルダを開くStep 2 授業2「VS Codeをはじめる」の4章と同じ手順です。
  2. js-renshu.html を作る「新しいファイル」アイコン → 名前を js-renshu.html にして Enter。
  3. ひな形と script タグを書く半角の ! + Tab でひな形を出し、</body> の直前に、上の見本のとおり <h1> と <script></script> を書きます。これで準備完了です。

2. console.log ― プログラムのつぶやき

最初の命令は console.log()。「コンソールに文字を出す」という命令です。コンソールは、Step 2 の授業5「ブラウザと開発者ツール」の発展でちらっと見た、開発者ツール(F12)の中にあります。

  1. script の中 (= <script> と </script> のあいだ) に、次の1行を書く1章で書いた // ここにJavaScriptを書く の下の行でOKです。 
    console.log("やっほー!");
    文字は "(半角のダブルクォート)で囲みます。最後の ;(セミコロン)は「ここで文おわり」の印です。
  2. Ctrl + S で保存して、Go Live でページをブラウザに表示する(Go Live の場所を忘れたら Step 2 授業2の5章へ)。ページの画面には「JSの練習」の見出しだけで、やっほー!は出ません。それで正解です。
  3. F12 を押して開発者ツールを開き、上に並ぶタブから「コンソール (Console)」をクリックするそこに「やっほー!」が出ていたら大成功。あなたは今、はじめてプログラムに命令を出しました。
もう一つの実行方法: コンソールには、命令を直接打ち込むこともできます。コンソールの入力欄(> の印のところ)をクリックして console.log("テスト") と打ち、Enter を押すと、その場で実行されます。ファイルに書く方法 (残る) と、コンソールに打つ方法 (その場かぎりの実験用)、両方知っておくと便利です。
ヒント: console.log は「プログラムが今どうなっているか」をのぞく窓として、プロが毎日使う道具です。この先、困ったらまず console.log。これを合言葉にしましょう。

3. alert ― 画面に出てくるメッセージ

もう1つ、見た目が派手な命令も試しましょう。script の中の、さっきの console.log の行の下に、次の1行を足して Ctrl + S で保存します。

alert("こんにちは!");

保存するとブラウザが自動で読み直され、その瞬間にメッセージの小窓(ダイアログ)が飛び出します。console.log との違いは「誰に見せるか」です。alert は使う人に、console.log は作る人(自分)に向けたメッセージです。

注意: alert は便利ですが、出すぎるとうっとうしいので、本物のサイトではほとんど使いません。今日は「動きが目に見える練習道具」として使います。

4. やってみよう ― ボタンで動かす

やってみよう

いよいよ今日のメイン。「ページを開いた瞬間」ではなく「ボタンを押したとき」に動くようにします。

  1. ボタンを置く<body> の中、<script> タグより上に、次の1行を書きます。 
    <button id="aisatsu-btn">あいさつする</button>
    id="..." は「この部品だけの名前」です。クラス(みんなで使う名札)と違って、idは1ページに1つだけです。
  2. 「ボタンが押されたら」を書くscript の中に、次の3行を書きます。(2〜3章で書いた console.log や alert の行は、もう消してOKです) 
    var btn = document.getElementById("aisatsu-btn");
btn.addEventListener("click", function () {
  alert("ボタンが押されました!");
});
    意味はこうです。「aisatsu-btn という名前の部品を探してきて(1行目)、それがクリックされたら(2行目)、メッセージを出してね(3行目)」。
  3. Ctrl + S で保存して、ブラウザに出てきた「あいさつする」ボタンをクリックするメッセージの小窓が出たら完成です! 何度でも押せます。
  4. メッセージの文を自分の好きな言葉に変えて、もう一度動かしてみましょう。

動いたら、スタッフに見せてください。この「部品を探す → きっかけを待つ → 動かす」が、Step 3 全体で繰り返し出てくる基本の形です。

5. エラーが出たら ― おめでとうございます

動かないときは、コンソール(F12)に赤い文字が出ていないか見てください。それがエラーメッセージ、つまり「コンピュータからのヒント」です。

  • Uncaught SyntaxError … 書き方の間違い。" や ;、かっこの閉じ忘れが多いです。
  • ... is null … 部品が見つからない。idの名前が、HTML側とJS側でぴったり同じか確かめましょう(大文字小文字も区別されます)。
  • エラーの右端に出る「js-renshu.html:7」のような表示は「7行目あたりが怪しい」という意味です。

エラーは失敗ではなく、プログラミング学習の通常運転です。「赤い文字を読む → 行番号を見る → 直して保存」の流れに慣れていきましょう。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • JSを別ファイルに分けてみましょう。main.js を作って script の中身を引っこし、HTML側は <script src="main.js"></script> にします。CSSの style.css と同じ「分業」の考え方です。
  • ボタンを2つに増やして、それぞれ違うメッセージを出してみましょう。idの付け方がポイントです。
  • console.log(1 + 1)、console.log("あ" + "い") など、いろいろな「計算」をつぶやかせて、数字と文字で + の意味がどう変わるか観察してみましょう。

できたチェック