画面に動きを与え、画面を自由自在に変化させる魔法〜JavaScript, Console, エラーログ〜

watanabe_kf1983

2021年10月8日 12:59

プログラム自学案内の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

この記事が気に入ったらサポートをしてみませんか？