第3章 JavaScriptの実行方法入門
JavaScript学習の第一歩として、足し算・引き算・掛け算・割り算の簡単なコードで、それらの計算結果をconsole.log()を使ってブラウザのコンソールに表示する作業を通して、JavaScriptの実行方法をマスターしましょう。
前回までの講座で、
について学びました。今回はそれらを一読された前提での続編になります。
退職後、「何か自分で作りたい！」という強い思いが湧き上がり、長年親しんできた海の世界、特に潮の満ち引きに関する知識を活かしたいと考え、潮汐Webアプリ『タイドウェザー』を開発しました。
振り返れば、私のDIY人生は意外と早くから始まっていたのかもしれません。
1994年、まだ珍しかったパソコンを自費で購入し、九州の養殖場で育てていたブリ、カンパチ、ヒラメの在庫管理をエクセル化したのが、プログラミング的なことへの最初の挑戦でした。手作業での管理から解放された時の感動は忘れられません。
このWebサイトのWordPressテーマも自作です。既製品では満足できない、そんなDIY精神が私の原動力です。
漁師さんが採ってきた稚魚に1年間エサをやり、育てた成魚を市場に出荷していました。
還暦を迎えた今も、自分で考え、試行錯誤しながら何かを作り上げる喜びは変わりません。
学習用コード
以下の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というファイルを新規作成します。
Windowsのエクスプローラーで右クリック▶新規作成▶テキストドキュメント、と進んで
ファイル名を「index.js」に書き換えます。このような警告が出ますので「はい」で進んでください。
VSCodeで作成したindex.jsを開いて、
console.log(5 + 5);とコードを書きます。
次に、index.htmlファイルにindex.jsファイルを読み込むコードと書き換えます。
<script src="index.js"></script>次のようになります。
<!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()を書いてバグの発生場所を特定するのによく使われます。
今後のこの講座の中でそれらのテクニックを紹介できればと思っています。
