第3章 JavaScriptの実行方法入門
JavaScript学習の第一歩として、足し算・引き算・掛け算・割り算の簡単なコードで、それらの計算結果をconsole.log()を使ってブラウザのコンソールに表示する作業を通して、JavaScriptの実行方法をマスターしましょう。
前回までの講座で、
について学びました。今回はそれらを一読された前提での続編になります。
目次
学習用コード
以下のindex.htmlファイルの内容をこの章の学習の出発点にします。
一応このファイルを自サーバーに準備してあります。必要な方はダウンロードして解凍してください。(※ファイルの解凍方法は第1章のファイルの展開(解凍)方法で触れています)
第3章の学習用ファイル(chapter03.zip)のダウンロード
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
<script>
console.log(5 + 5);
</script>
</body>
</html>scriptタグにJavaScriptコードを書いて実行する
ウェブページでJavaScriptのコードを実行する方法は2つあり、そのひとつはscriptタグに書くことです。
scriptタグの中のconsole.log(5 + 5)の意味は、「カッコ内の5 + 5の計算結果(10)をブラウザのコンソールにログ(log：記録の意味)」です。
ちなみに、ログ(log)はブログのログです。ブログはWeb+logの造語で「Web上の記録」という意味です。Weblogを省略してblog(ブログ)になっています。
まずはブラウザでindex.htmlを開きます。(※開く方法は第1章のhtmlファイルをブラウザで開く方法で触れています)
このように表示されます。
次に、JavaScriptの実行結果をブラウザのコンソールに表示する方法を見ていきましょう。
ブラウザのコンソールを開く
ブラウザのコンソールを表示します。この講座ではブラウザはChrome(かEdge)推奨です。この2つのブラウザは元は同じChromiumという無料でソースコードが公開されているブラウザです。
Googleがこのブラウザの開発とメンテナンスの支援をしています。
GoogleとMicrosoftがそれぞれ独自にこのChromiumに機能を追加してChromeとEdgeになっています。
Chromeのコンソールを開く
Chromeブラウザをお使いでしたら、index.htmlを開いている状態で、ブラウザのメニュー▶その他のツール▶デベロッパーツールをクリックします。
Chromeのデベロッパーツールはこのようになります。
5 + 5の計算結果の10が表示されています。
Edgeのコンソールを開く
Edgeの場合は、ブラウザのメニュー▶その他のツール▶開発者ツールをクリックします。
Edgeの開発者ツールはこのようになります。
5 + 5 の計算結果である10がコンソールに表示されています。
ChromeもEdgeも元は同じChromiumブラウザからの派生ですので、両者のツールはとても良く似ています。
私はChromeを使って解説を続けます。
外部ファイルにコードを書いてそれを読み込み実行する
ウェブページでJavaScriptのコードを実行するもうひとつの方法は、拡張子が.jsである外部のファイルにJavaScriptのコードを書いて、それをhtmlファイル側で読み込んで実行することです。
index.htmlと同じ階層にindex.jsというファイルを新規作成して、コードを書き込みます。
次に、index.htmlファイルにindex.jsファイルを読み込むコードを書きます。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
<script src="index.js"></script>
</body>
</html><script src="index.js"></script>でindex.jsの内容を取り込んで実行しています。
src属性のsrcは「source」(ソース)の略です。このソースはニュースソースのソース(情報源)です。
この属性を使って、htmlファイルから見て外部のファイルであるindex.jsという情報源の場所を指定し、それに書かれているコードをHTML側に読み込むことができます。
もし、index.jsファイルがjsというフォルダの中にある場合、
のsrc属性は、jsフォルダの中のindex.jsという意味で"js/index.js"となり、
<script src="js/index.js"></script>のようになります。
このjs/index.jsは相対パスといいます。ここではその説明を割愛します。詳しく知りたい方は「相対パス 絶対パス」でググってください。
JavaScriptの四則演算
ここまでで、5 + 5 の足し算の計算結果である10をブラウザのコンソールに表示することができました。
引き算の場合は 5 - 5ですが、掛け算と割り算は一般的な算数とは記号が異なります。
掛け算は×のかわりにアスタリスク「 * 」を、割り算は÷のかわりにスラッシュ「 / 」を使います。
index.jsにこのコードをコピペして、index.htmlを開いているブラウザをリロード(再読み込み)してください。
console.log(5 + 5);
console.log(5 - 5);
console.log(5 * 5);
console.log(5 / 5);コンソールはこのようになります。
上から順番に計算されて、そのままその順番で計算結果が表示されました。
プログラミングはprogram+ingです。program(プログラム)とは運動会のプログラムと同じ意味で、進行表という意味です。「運動会のプログラム」も「JavaScriptのプログラム」も書かれている上から順番に実行されます。
余談ですが、掛け算の「5 * 5」を「5アスタリスク5」とは読まないので「5かける5」と読んでください。
割り算も同様で「5 / 5」は「5スラッシュ5」ではなく「5わる5」です。
今回学んだことをクイズゲームで確認しよう！
このページで解説したことを全問のクイズ形式のゲームにしました。
ゲーム感覚で復習すると記憶に定着する助けになります。
下の「クイズを開始」ボタンでゲームを開始すると「YES」「NO」ボタンが現れますので、上から降ってくる問題が正しければ「YES」を、間違っているなら「NO」ボタンを押してください。
まとめ
JavaScriptでの四則演算とconsole.log()の使用方法について解説しました。
console.log()は、プログラムが思い通りに動かないときにコードの要所要所にconsole.log()を書いてバグの発生場所を特定するのによく使われます。
今後のこの講座の中でそれらのテクニックを紹介できればと思っています。
