画面に動きを与え、画面を自由自在に変化させる魔法 〜JavaScript, Console, エラーログ〜
プログラム自学案内の10回目です。前回までの記事ではHTML/CSSを案内しました。今回から、何回かに渡ってJavaScriptを紹介します。JavaScriptは、Webの画面に動きを与えるために用いられるプログラミング言語です。
これまでの記事はこちら。
JavaScriptとは:Webブラウザに対する命令の集まり
JavaScriptは、Webブラウザ(ChromeやSafariなど)を用いて、画面を操るためのプログラム言語です。ですから、一般にはJavaScriptで書かれるプログラムは、Webブラウザに対する命令の集まりであると言うことができます。
ところで、Webブラウザに対する命令、という意味では、HTMLやCSSも同類の言語と言えます。HTMLは画面に表示するモノを、CSSは表示スタイルを、それぞれWebブラウザに指示しているからです。では、これらとJavaScriptは何が違うのでしょうか?
HTMLやCSSでは指定できない変化を画面に与え、画面に動きを生み出せること。これがJavaScriptのHTMLやCSSとの違いです。画面を変化させるために、JavaScriptでは「変化のタイミング」「変化させる内容」を自由に指示することができます。
さっそく実例を見てみましょう。
はじめてのJavaScript
まずは以下の内容のindex.htmlを準備します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptことはじめ</title>
</head>
<body>
<button id="myFirstButton">ボタンを増やすためにクリック!</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ポイントはbodyタグの最下部にあるこの部分です。CSSファイルはheadタグに指定しましたが、scriptはbodyタグの一番下に書くのがセオリーです。
<script type="text/javascript" src="script.js"></script>
さて次に、index.htmlと同じフォルダにscript.jsファイルを作ります。
そして、以下の内容をコピペして、上書き保存します。つまり、これがはじめてのJavaScriptです。
console.log('Hello, World. m(__)m I\'m sorry to be born.');
document.getElementById('myFirstButton').onclick = function() {
console.log('ボタンを追加します');
addButton('追加されたボタン');
console.log('さらにボタンを追加しようか どうしようか 迷っています');
console.log('迷ったあげくに追加します');
addButton('迷ったあげくに追加されたボタン');
}
function addButton(name) {
const button = document.createElement('button');
button.textContent = name;
document.querySelector('body').appendChild(button);
console.log('ボタンを追加しました');
}
例によってLiveServerでブラウザから確認してみましょう。ボタンを押すと画面が変化するはずです。
console.log('Hello, World.');
ひとまず、1行目(や、4,6,7,15行目)のイディオム、console.log()の意味を教えたいと思います。
console.log('Hello, World. m(__)m I\'m sorry to be born.');
いったいこれはWebブラウザに何を指示しているのでしょうか。
「F12で出てくるアレ」から「Console(コンソール)」を見ると、その結果を確認できます。
つまり、console.log('xxx'); とは、「DevToolsのコンソールに、xxxというメッセージを表示しなさい」というWebブラウザに対する指示なのですね。
かなり地味でツマラナイ指示のように見えますが、これを1番最初に紹介するには、理由があるのです。
Hello タイプミス
プログラミングにはタイプミスがつきものです。
意図的にタイプミスをしてみましょう。script.js の5行目をこんな感じに変えて上書き保存しましょう。addButton の大文字のBを小文字に変えるだけです。
addbutton('追加されたボタン');
さてどうなるでしょう。修正前まで機能していた、ボタン増設ボタンがまったく機能しなくなったはずです。
JavaScriptは、"Case Sensitive" 、すなわち、大文字小文字の違いに敏感な言語であると言われます。なんとデリケートなんでしょうか!
コンソールは JavaScriptプログラミングの命綱
なにかの折に、JavaScriptがびくとも動かなくなったとします。これは、上にあげた16行もあるプログラムのうちのどこかで、誤字脱字をして、上書き保存してしまったのかもしれない、ということを意味します。
では、いったいどこに間違いが? 整備された山道を歩いていたつもりが、小石にけっつまずいただけで、突然遭難してしまうような理不尽さに、茫然とするような気分です。では、本当に茫然とするほかに手が無いのでしょうか。いいえ。
手はあります。DevToolsのコンソールを見るのです。
この画像を見ると、4行目までは上手く動いており、5行目でトラブルが発生していること、"addbutton" という名前に問題があるらしいことが分かりますね。この赤い文字は、Webブラウザがプログラマに対して問題を知らせるメッセージで、エラーメッセージや、エラーログなどと言います。メッセージを伝えてくれるDevToolsのコンソールは、プログラマを支える命綱と言えるのではないでしょうか。
いじって遊ぶ
命綱を確かめたところで、コピペしたscript.jsの中身をいじって遊んでみましょう。
・ 行を削ってみる
・ 行をコピペして膨らませてみる
・ 書かれているコードをググってみる
・ どっかのサイトに書いてあるサンプルコードをコピペして足してみる
・ 一重引用符に囲まれている文字列を変えてみる
などです。
思い通りに動かなくても、ガッカリする必要はありません。なぜなら、まだあなたはJavaScriptについてほとんど知らないのですから。
まとめと次回予告
今回はJavaScriptの実例と、DevToolsのコンソールを紹介しました。次回は「DOM」というものを紹介するとともに、今回のボタン増殖プログラムの解説をします。
#コラム #プログラミング #初心者 #独学 #案内 #JavaScript #Console #Log #HelloWorld
この記事が気に入ったらサポートをしてみませんか?