JavaScriptで学ぶ 文系の人にもわかるプログラミング入門
第3章 JavaScriptの第１歩
準備運動が終わったので， いよいよプログラミングの世界に入りましょう。 まず， JavaScriptというプログラミング言語を使って， ともかく「プログラム」を作ってみましょう。 単純なプログラムですが， HTMLを使ってはできないことを実現してくれるものです。
最初のプログラム ── ダイアログボックスの表示
まず図3-1のような「ダイアログボックス」を表示するプログラムを作ります。 ダイアログボックスを表示することは， HTMLだけの範囲ではできません。 また， 第2章のプログラム2-1の例に書いてあるように， 多くの言語ではダイアログボックスを表示できるようになるまでには， 何日も勉強する必要がありますが， JavaScriptではあっという間にできてしまいます。
|
| 図3-1 「ダイアログボックス」の表示 |
プログラムを見てみましょう。 JavaScriptのプログラムは， HTMLファイルの中に埋め込む形で作るので， 全体はHTMLのファイルになります（このため， HTMLを最初に学んだのでした）。 次のように， 特別なタグを使ってJavaScriptのプログラム（「ソースコード」）をHTMLコードの中に埋め込みます。
プログラム3-1 example03-01.html 初めてのJavaScriptプログラム（←クリックするとこの例がブラウザに表示されます）
では， 初めて出てきたタグや属性などについて説明しましょう。 目新しいのは， 次の行だけです。
<script type="text/javascript" >
alert("Hello!");
</script>
<script>タグは， JavaScriptなどのプログラムを書くときに使うもので， このタグから</script>の前までがプログラムであることを示します。
メモ
JavaScriptのプログラムは「スクリプト（script）」とも呼ばれます。 また， 「ソースコード（source code）」あるいは省略して「ソース」と呼ばれることもあります。
プログラミング言語には， 「インタプリタ（interpreter）型の言語」と「コンパイラ（compiler）型の言語」の２種類があり， JavaScriptなどのインタプリタ型言語のプログラムは「スクリプト」とも呼ばれます。
コンパイラ型の言語では「コンパイル」という操作を行ってからプログラムを実行します。 これに対して， インタプリタ型の言語ではコンパイルなしに実行できます。 つまり， 実行しながらコンパイルに相当する操作（コンピュータが直接実行できる低レベルの命令に変換する操作）を行っているわけです。
「ソースコード」あるいは「ソース」という言葉は， コンパイル型の言語の場合も， インタプリタ型の言語の場合も使われます。
この<script>タグには， typeという属性が指定されています。 これはスクリプトの種類を表すもので， 「テキスト形式」のjavascriptのコードであることを表しています。 現在のところ， ウェブページで使われるスクリプト言語としてはJavaScriptがもっとも多く使われており， じつはこの属性を書かなくても一般的なブラウザならどれでもJavaScriptとして解釈されます。 そうはいっても， 将来他の言語が使われるようになっても大丈夫なようにtype="..."は指定しておいたほうがよいでしょう。
当面は， JavaScriptのプログラム（スクリプト）は次のように， <script>タグに囲まれると憶えておいてください（約束事が多くて申し訳ありませんが， 約束事の詳細は一旦棚に上げて置いた方が効率的なのです）。
<script type="text/javascript" > 【プログラム】 </script>
次の１行がJavaScriptのプログラムで， これがダイアログボックスを表示するものです。
alert("Hello!");
この行は， alertという名前の「関数（function）」を呼び出して「Hello!」という文字列をダイアログボックスに表示するJavaScriptの「文（sentence）」です。 JavaScriptのプログラムは， このような文が集まってできています。 普通の文章（たとえば， このコラム）も「文」が集まってできていますが， プログラムも「文」の集まりというわけです。
さて， ものは試し， このページをブラウザで表示してどうなるか試してみましょう。 エディタを使って， 上の例のような内容をもつファイルを作り， example03-01.htmlという名前でテキスト形式で保存して， ブラウザに読み込みます（ファイルをブラウザのウィンドウ内にドラッグ＆ドロップするのが簡単です）。 まず上の図3-1のようなダイアログボックスが表示され「OK」をクリックすると， 続いて図3-2のような文字列がブラウザウィンドウ内に表示されます。 ダイアログボックスの大きさやメッセージ， 色などはブラウザによっていろいろなので， この図と少し違っているかもしれません。
|
| 図3-2 「OK」を押すと続いて表示される内容 |
注意！
もしダイアログボックスが出なかった場合は， まず<script>と</script>に挟まれた文字がすべて同じように入力されているかチェックしてください。 １文字でも違っていると動かないことがあります。
また， ブラウザによってJavaScriptの実行が禁止されている可能性もあります。 この場合， 「インターネットオプション」あるいは「初期設定」「設定」などのメニューを選択して表示される画面で， 「Webコンテンツ」「詳細」「セキュリティ」などの項目を選択して， 「JavaScriptスクリプト（アクティブスクリプト）を有効にする」のところにチェックを入れれば使えるようになるはずです。 こうしておいてから， 「再読込」を実行すれば， 大丈夫なはずです。 この設定は， ブラウザやそのバージョンによって異なるので， 類似のメニューを探してみてください。 通常， JavaScriptは実行できるようになっていますので， この設定は不要なはずです。
もしIneternet Explorerを使っていてうまく行かないようでしたら， Firefoxというブラウザで試してみてください。 こちらからダウンロードできます（Windowsパソコンに最初から入っているInternet Explorerは， 実は， JavaScriptのプログラミングをするのにはあまり向いていませんので， Firefoxなどほかのブラウザのほうがおすすめです）。
これでも直らないときは， <script>...</script>の中に， 全角のスペースが入っていないか確認してください。 HTMLについても書きましたが， 全角のスペースは， 半角のスペースとは違って， 区切り文字とは扱われないので（"ab"などの余計な文字が書いてあるのと同じことになってしまい）， エラーになります。
引数 ── 関数の動作を変化させる
上の例ではalertに「Hello!」という文字列を渡しましたが， これを別の文字列にすれば， 当然表示される文字列も変わります。 このように， 関数に「渡す」もののことを「引数（ひきすう）」あるいは「パラメータ」と呼びます（英語ではparameterあるいはargument）。 では， 引数を次のように「Hi!」に変えて同じように実行してみましょう。 今度は「Hi!」という文字列が表示されるはずです。
alert("Hi!");
この引数には日本語の文字列を指定することもできます。 たとえば， 次のように変えて試してみてください。
alert("こんにちは！");
"..." と '...'
上ではalertに渡す文字列は "..." （二重引用符， ダブルクオーテーションあるいはダブルクオート）で囲みました。 このほか '...' （一重引用符， シングルクオーテーションあるいはシングルクオート）で囲んでもまったく同じ動作をします。 つまり次の２つは同じ動作をすることになります。
alert("こんにちは")
alert('こんにちは')
メモ
ES2015という新しい規格のJavaScriptでは `...` （バッククオート。 多くのキーボードでは「Shift+@」で入力可能）で文字列を囲むことができます。 HTMLではタグの属性を書くのに引用符を使う必要があるので， `..."..."...` といったように中に引用符がかけるので便利な場合があります。 また `...` を使うと， この内側で変数を使ったり計算をしたりすることができます。 これについては， もう少し後ろのほうで紹介しましょう。
HTMLとして書く ── document.write()
alertの引数を変えて別の文字列を表示してみましたが， 今度はalertの代わりに他の関数を使ってみましょう。 先の例の<script>...</script>の部分を次のようにして， document.writeという関数を使います（プログラム3-2に全体を書きます）。
<script type="text/javascript">
document.write("<h1>Hi!</h1>");
</script>
プログラム3-2 example03-02.html document.writeを使う
|
| 図3-3 document.writeを使う |
document.writeを使うと引数に指定した文字列をHTMLのコードとして書き出す（出力する）ことができます。 つまり次のように書いてあったのと同じことになるわけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Hi!</h1> <!-- ←ここが入れ替わった -->
<p>ごあいさつでした。 </p>
</body>
</html>
この程度ならHTMLで直接上のように書けばよいので， わざわざJavaScriptを使う必要はないのですが， 後のほうでdocument.writeのありがたみが， だんだんわかってきます。
メモ
HTMLの文書（コード）は， 第2章では我々（人間）が書きました。 しかし， ここでは， 「<h1>Hi!</h1>」の部分をプログラムが書いています。 第2章で説明したウェブエディタも， 人間がワープロと同じように入力するものを， 裏で（一所懸命）HTMLコードに直しているのです。 そして， HTMLコードに直すためのプログラムは， 人間が書いたものです。
なにやら， こんがらがってしまったと思いますが， 要するに， JavaScriptを使うと（人間の代わりに）HTMLのコードを書いてHTML文書を作成することができるわけです。 ですから， 人間ならとても書く気にならないような複雑な文章や， 単純な作業の繰り返しによってできあがるきれいな表なども， プログラムを作れば， いくつでも好きなだけ作ることができるわけです。 最後のほうの章で， そのような例を作成します。
メモ
実は本格的なプログラムを作る場合にはdocument.writeはあまり使わないほうがよいのですが， ここでは初心者向けにわかりやすさを優先してこの関数を使うことにします。 document.writeは動作がブラウザによって違ったりして不安定な面があるので， 「非推奨」とされているのです。
上のdocument.writeの文は， たとえば次のように書くことができます。
document.body.innerHTML += "<h1>Hi!</h1>");
少しだけ説明をしておくと， 上のコードは document.body.innerHTML に代入しているわけですが， これは<body>...</body>の中のHTMLコードを書き換えてしまっているのです。 JavaSciptを使うとブラウザの中身を自由に変えてしまうことができるのです...）。
イベント駆動型のスクリプト ── 何かが起こったときに実行される
上の例では， <body>...</body>のあいだに， <script>...</script>を埋め込んで， JavaScriptのスクリプトを実行しましたが， スクリプトの実行方法には別種のものがあります。 上で見たものを「<body>部埋め込み型のスクリプト」と呼ぶことにすると， 下で紹介するのは「イベント駆動型のスクリプト」と呼ぶことができるものです。
これも例を見ましょう。
プログラム3-3 example03-03.html イベント駆動型のスクリプト
上のプログラム（スクリプト）をファイルに入力して保存し， 実行してみましょう。 図3-4のように表示されるはずです。
|
| 図3-4 「イベント駆動型」のスクリプトの実行 |
結果は最初のプログラムと同じだったはずです。 しかしプログラムの内容は違っています。 先ほどは<body>...</body>に囲まれていた<script>タグが， <head>...</head>に囲まれています。 また， <body>タグにonload属性が指定されており， その値が "sayHello();" になっています。 だいたい想像がつくかもしれませんが， このページは次のように動作します。
- <head>...</head>にあるJavaScriptのコードが解釈され， 記憶される。
- <body>...</body>のあいだの文字列やタグが解釈され， ウィンドウに文字列「ごあいさつです。 」が表示される。
- <body>タグのonload属性に指定されている関数sayHello()が実行される。
この結果， 図3-4のようにダイアログボックス内に「Hi!」が， ウィンドウ内に「ごあいさつです。 」の文字列が表示されるわけです。
onload属性の値として指定されている関数sayHello()ですが， これは上にあるfunctionの後に書かれている文字列と同じであることに注意してください。 onload="xxx"と指定された場合， xxxという名前の関数が実行される約束になっているわけです。 この例は， ブラウザにページがロードされるという「イベント（出来事）」に付随する形で起動されるスクリプトです。
メモ
ここから， このコラムでは関数（やメソッド）の名前には()をつけてそれが関数であることを明示します。 まだ， それほど混乱はしませんが， 長いプログラムを書くようになると， このような約束事をしておいたほうがわかりやすくなります。
自作の関数
このプログラム3-3の10行目から12行目にある次はsayHello()という名前の関数の「定義」で， これがHTMLファイルの読み込み時に実行されます。 このように， 自分で関数を作る（「定義する」）こともできるのです。
function sayHello() {
alert("Hi!"); // ダイアログボックスを表示
}
sayHello()の後にある「{」は， sayHello()の定義がここから始まることを示すものです。 HTMLで言えば開始タグです。
同様に最後の「}」は， 終了タグのようなもので， sayHello()の定義の終わりを示します。 sayHello()の内容は， おわかりでしょう。 alert()はダイアログボックスを表示する関数ですから， 引数として "Hello!" を渡されれば， この文字列をボックス内に表示します。
alert()の呼び出しの後にある「 // ダイアログボックスを表示」は「コメント（comment）」で， プログラムの動作にはまったく関係しないものです。 「//」から行の終わりまでに書かれた文字は（JavaScriptを解釈するプログラム ── JavaScriptの処理系 ── には）無視されます。 HTMLではコメントを<!-- と -->に挟んで書きました。 言語によってコメントの表し方はいろいろです。
機械にとっては無意味でも， 人間にとってはこのようなメモがあると， 他の人が作ったプログラムを読む場合や， 自分が作ったプログラムを１ヶ月後に（あるいは10年後に！）読む場合に， 何をしているのかを理解するための大きな助けになります。
メモ
JavaScriptではもう１種類 /* ... */という形式のコメントも書くことができます。 この形式の場合「...」の部分は複数行にまたがって書けます。 たとえば次のようなものもコメントです。
/********************************************** * プログラミング入門用サンプル * 作成者 難野何兵衛 * 作成日 2024.04.20 **********************************************/
この例では， 「*」をたくさん並べてコメントであることをわかりやすく表示しています。 このように， 「/*」で始まったら， 「*/」に出会うまでは何を書いてもコメントになります。
クリック時に実行
もうひとつイベント駆動型のプログラムを作ってみましょう。 次のプログラムは， 表示されている文字列をマウスでクリックしたり指でタップしたりするとダイアログボックスを表示するものです。 こちらの例のほうが， イベント（マウスのクリック）に反応して何かが起こるという感じがわかりやすいでしょう。
先程の例ではonloadを使いましたが， 今度の「イベントハンドラ」はonclickです。 <p>タグの属性に onclick="..." を指定すると， クリックやタップが行われたときに "..." に書かれているJavaScriptのコードが実行されます。 この例の場合は関数sayHelloが呼ばれるので， 「Hi!」という文字列が書かれたダイアログボックスが表示されます。
メモ
実は本格的なプログラムを作る場合にはタグにonclick， onloadなどの属性は指定しないほうがよいとされています。 ひとつの理由は， HTMLのコードとJavaScriptのコードが混在してしまうことです。 現場では， HTMLのコードを書くデザイナーとJavaScriptのコードを書くプログラマーが共同で作業をすることも多いのですが， そうした場合， HTMLのコードの中にJavaScriptのコードが混ざっているとファイルの担当が曖昧になったりしてしまいます。
次のようにするとイベントの処理をJavaScriptの範囲内だけで書くことができます。
少しだけ説明をしておくと， "hello" というIDをつけられた<p>...</p>の部分にイベントを監視（listen）するものを付加するのがaddEventListenerという関数です。 この場合は "click" が監視されて， クリックされるとsayHelloという関数が実行されるわけです。 なお， document.getElementById("hello")で， "hello" というIDを含む要素を処理する「オブジェクト」を取得しています。
まとめ
この章では初めてのJavaScriptプログラムを作ってみました。 また， 関数とその引数について簡単な例を見ました。 さらに， JavaScriptではマウスのクリックなどの「イベント」をきっかけとして何かの処理をすることができることを説明しました。
プログラム関連の概念
- 関数 ── 一連の処理をまとめて名前をつけたもの
- 引数 ── 関数に渡して関数の動作を変化させるもの
HTML
- <script>...</script> ── JavaScriptのスクリプト（プログラム）を囲むHTMLタグ
- <body onload="関数名()"> ── ページが読み込まれたときに「関数名」の関数を実行
- <xx onclick="関数名()"> ── <xx>...</xx>内の要素がクリックされたときに「関数名」の関数を実行
JavaScriptの関数（メソッド）
- alert() ── ダイアログボックスを表示する
- document.write() ── HTMLのコードをJavaScriptから出力する
JavaScriptで学ぶ 文系の人にもわかるプログラミング入門
第3章 次の章へ