JavaScriptプログラミングで泣かないための、たった5つの基本ルール：初心者のためのWebアプリ開発超入門（2）（1/2 ページ）

初めてJavaScriptのWebアプリを作ってみたいという人に向けてJavaScriptでプログラムを書く際の基本的な文法について解説する。

[金城俊哉，著]

連載目次

※本稿は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター（2015年6月27日発行）』の中から、特に＠IT読者に有用だと考えられる箇所を編集部が選び、著者及び出版社の許可を得て転載したものです。
ご注意：本稿は、タイトルを除き、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは＠ITのそれとは一致しません。あらかじめご了承ください。

　これまでにいくつかのプログラムを作ってみましたが、JavaScriptのソースコードの記述から実行までの一連の流れがおわかりいただけたのではと思います。

　これから先も、このような流れでプログラムを作っていくのですが、先に進む前にJavaScriptを書くときのルールについて確認しておくことにしましょう。

Point　JavaScriptプログラミングのキホン

　数あるプログラミング言語がそうであるように、JavaScriptにも基本的な書き方のルールがあります。とはいえ、JavaScript特有のものではなく、そのほとんどがプログラミング言語全般に共通するルールです。

　これはもうおわかりでしょうが、半角の英数字でソースコードを記述します。全角文字が使えるのは、Webページやダイアログボックスに表示するテキストの場合のみです。この大前提さえ押さえておけば、あとは細かなルールに従うだけです。

　このセクションでは、JavaScriptプログラミングの流れについて見たあと、実際にコードを書きながら、記述に関するルールについてお話ししたいと思います。

プログラムの起点ってどこでもアリなんですね

　JavaScriptによるプログラムの基本的な流れについて確認しておきましょう。これまでにやってきたことなので、今回は、もう少し深い部分まで見ておくことにしましょう。

JavaScriptプログラミングの流れ

　JavaScriptでプログラミングをするとなれば、「こんなプログラムが作りたい」という動機が当然あるわけですが、作りたいものが決まったら、次の手順でプログラムを開発していきます。

●HTMLドキュメントの用意

　JavaScriptのプログラムは、Webページ上で動作させることになるので、まずは土台となるWebページを用意します。Webページは、ページ記述言語のHTMLを使って作成しますので、プログラミングの観点で見た場合、「HTMLドキュメント」と呼ぶ方がしっくりきます。また、Webページという場合は、HTMLドキュメントに組み込まれたJavaScriptも含めることもあるので、双方を区別するために、Webページの骨格の部分はHTMLドキュメントという呼び方を用いることにします。

●JavaScriptのソースコードを記述

　HTMLドキュメントを用意したら、JavaScriptのソースコードを記述していきます。「プログラムとして実行したいこと」を書いていくというわけです。

　ソースコードは、文字の装飾情報がない「プレーンテキスト」形式で記述します。このため、本書では、Windowsでは「Notepad++」、Macでは「エディットテキスト」を使用することを前提としています。もちろん、ワープロソフトを使うのはNGです。

Onepoint

JavaScriptのコードは、HTMLドキュメントの内部だけでなく、拡張子が「.js」の専用ファイルを用意して、このファイルにまとめて書いておくこともできます。これについては後の回で紹介します。

●プログラムの動作確認

　プログラムが作成できたら、実際にWebブラウザーでページを表示して、動作を確認します。本書では、動作確認の際に、直接、対象のページをブラウザーで開くのではなく、パソコン上でWebサーバーを稼働させ、Webサーバーを通してページのデータを読み込むようにしています。

●プログラムの修正

　プログラムを実行した結果、何らかのエラーが発生したり、期待していた動きをしなかったりした場合は、不具合の原因を見つけて修正を行います。簡単なプログラムでは、不具合の箇所を見つけるのも修正するのも容易ですが、プログラムの規模が大きい場合や構造が複雑な場合は、結構骨の折れる作業になります。ですので、ソースコードを記述するときは、文法的な間違いやスペルミスに極力、気を付けましょう。

プログラムはデバッグを経て完成する

　「プログラムの動作確認」と「プログラムの修正」をまとめて「デバッグ」と呼んでいます。プログラムを開発するときは、一度ソースコードを書いてしまえばそれで終わり、ということはまれで、「動作確認」→「修正」を何度か繰り返すことが多いですよね。ですので、この2つの作業をデバッグと呼んでひと括りにしているのです。

ところでプログラムの起点は？

「JavaScriptのコードってHTMLドキュメントにも専用のソースファイルにも書けるんですよね？」

「そうですね。どちらに書いてもかまいません。ソースコードの量が多かったり、複数のページから同じプログラムを使う場合はソースファイルに書くことになります」

「ところで、そんなふうにあちこちに書けるってことになると、プログラムが実行される起点はどうなるんですか？

例えば、JavaやC#ですと、main()という関数がプログラム開始時の起点になるので、最初に実行したいコードをこの中に書きますよね」

「JavaScriptには、起点となるものは存在しません。

プログラムを書いた場所が起点になるので、何かの関数の中に最初の処理を書かなくてはならない、という決まりはいっさいないんです」

「へー、書いたところが起点なんて、ずいぶんユルイというか柔軟性があるというか……」

「ただし、実行されるタイミングは大事です。

例えば、『ページが読み込まれたとき』とか『ボタンがクリックされたとき』のように、何らかのきっかけで動くようにすることは必要です」

「あ、イベントってやつですね」

「イベントはJavaScriptにおける重要な要素です。これから何度も出てきますので期待しててください」