(1/2)初めてJavaScriptのWebアプリを作ってみたいという人に向けてJavaScriptでプログラムを書く際の基本的な文法について解説する。Web開発パーフェクトマスター(2015年6月27日発行)』の中から、特に@IT読者に有用だと考えられる箇所を編集部が選び、著者及び出版社の許可を得て転載したものです。ご注意:本稿は、タイトルを除き、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは@ITのそれとは一致しません。これまでにいくつかのプログラムを作ってみましたが、JavaScriptのソースコードの記述から実行までの一連の流れがおわかりいただけたのではと思います。これから先も、このような流れでプログラムを作っていくのですが、先に進む前にJavaScriptを書くときのルールについて確認しておくことにしましょう。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です。OnepointJavaScriptのコードは、HTMLドキュメントの内部だけでなく、拡張子が「.js」の専用ファイルを用意して、このファイルにまとめて書いておくこともできます。これについては後の回で紹介します。●プログラムの動作確認プログラムが作成できたら、実際にWebブラウザーでページを表示して、動作を確認します。本書では、動作確認の際に、直接、対象のページをブラウザーで開くのではなく、パソコン上でWebサーバーを稼働させ、Webサーバーを通してページのデータを読み込むようにしています。●プログラムの修正プログラムを実行した結果、何らかのエラーが発生したり、期待していた動きをしなかったりした場合は、不具合の原因を見つけて修正を行います。簡単なプログラムでは、不具合の箇所を見つけるのも修正するのも容易ですが、プログラムの規模が大きい場合や構造が複雑な場合は、結構骨の折れる作業になります。ソースコードを記述するときは、文法的な間違いやスペルミスに極力、気を付けましょう。プログラムはデバッグを経て完成する「プログラムの動作確認」と「プログラムの修正」をまとめて「デバッグ」と呼んでいます。何度か繰り返すことが多いですよね。この2つの作業をデバッグと呼んでひと括りにしているのです。どちらに書いてもかまいません。「JavaScriptには、起点となるものは存在しません。「ただし、実行されるタイミングは大事です。「イベントはJavaScriptにおける重要な要素です。関連記事JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ——LiveScriptからAngularJS/React.jsまで@ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた@ITの豊富なWeb開発関連記事とともに振り返る。ようこそJavaScriptの世界へJavaScriptで本格的なプログラミングの世界に触れてみよう。JavaScriptの復権Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。