JavaScriptプログラミングをdocument.writeやalertで始める際の基礎知識をパーフェクトに解説する:初心者のためのWebアプリ開発超入門(1)(2/5 ページ)
初めてJavaScriptのWebアプリを作ってみたいという人に向けて「Hello World!」などの文字列を表示する方法について解説する。
●ページに文字を表示するには「write()」メソッドを使う
「さて、Webページ上に文字を表示するときは、『write()』というメソッドを使います。『Hello world!』と表示するのであれば、『write('Hello world!')』のように書けばOKです。では、この部分を書いて、命令文を完成させることにしましょう」
「このように書けば、Webブラウザーで表示したWebページに『Hello world!』が表示されます。writeのあとに続く( )の中に表示したい文字を書いておけば、その文字がそのまま表示される仕組みになっています」
●文字の前後は「'」で囲むのが決まり
「「『'』と『'』、あるいは『"』と『"』で囲まれた部分は文字として認識されます。『認識』って『誰が?』ということになりますが、ここではJavaScriptの実行環境のことを指しています。具体的には、ソースコードを読み込んで実行するJavaScriptエンジンのことですね。JavaScriptエンジンは、『'』または『"』で囲まれている部分を『これは文字だ』と認識します。もし、このどちらかの記号で囲んでいないと、Hello world!は文字ではなく、プログラム上で使用する何らかのキーワードだと認識された揚句、そんなキーワードは存在しないのでエラーが発生し、プログラムが止まってしまうことになります。こうならないために、文字の前後には『'』または『"』を付けて『これは文字である』と主張しておくというわけなのです」
「『'』と『"』のどちらでもいいんですか?」
「どちらを使ってもかまいません。ただし、HTMLでも値の設定に『"』を使うことがあるので、重複しないように『'』の方を使う傾向があります」
「じゃあ、今後は『'』を使うことにします」
●命令文の最後には「;」を付ける
「あと、命令文の最後に『;』(セミコロン)を付けています。これは『命令文はここで終わり』ということを示す記号です」
「Javaなんかでも『;』を付けますよね。『;』を付けて、命令文の終わりを示すというわけですね」
「ところがですよ、JavaScriptでは『;』は必須ではないんです。文の終わりに『;』が付いていなくても前後の文脈から文の終わりだと判断されればエラーにはならないんです」
「えーっ、結構ゆるいんですねぇ」
「このあとにもJavaScript特有の『ユルさ』が出てきます。ある程度わかりきったことは厳密にチェックせずに、それよりもコードを書きやすくしようって考えなのですね」
何で「write(××)」と書いただけで××が表示されるの?
ざっと進んできましたが、そもそも何でwrite()と書いただけで( )の中の文字が表示されたのか不思議ですよね。たんに文字を表示するといっても、最低でも次のようなことをパソコンの内部で行わなければなりません。
- 表示する文字を認識する。
- 文字を表示する画面(ウィンドウ)がディスプレイ上のどの画面であるかを調べる。
- 文字を表示する画面を指定したうえで、ディスプレイに信号を送って文字を描画する。
このほかにもフォントがどうであるとか、文字の大きさはどのくらい(ピクセルの数)だの細々とした処理が行われます。また、ディスプレイに文字を描画するということになれば、OSに処理を依頼することになり、文字を表示するだけでもとてつもなく複雑な処理が行われるのですね。でも、こんなことを聞くと「文字を表示するだけでも大変なんだからJavaScriptでプログラムするのはもう無理!」と言いたくなりますよね。
何かをしてくれる「小さなプログラム=メソッド」の呼び出し
「write("なにがし")と書けば文字が表示されました。簡単ですね」
「write()と書いたことで、文字を表示する機能を持った関数かなんかが呼び出されたってことですよね」
「そうです、write()という名前の関数が呼び出されたのですね。JavaScriptでは名前が付けられた関数のことをメソッドと呼びます。メソッドは、それ自体が何らかの処理を行う小さなプログラムですので、内部にはいろいろなソースコードが書き込まれています。write()の場合は、冒頭の説明にあったような処理を行うためのコードがまとめられているわけです。write()と書くことで、このメソッドを呼び出して、文字を表示する処理を実行してもらっていたのです」
write()の本体はどこにあるの?
「ところで『メソッドを呼び出す』ってどこから呼ぶんです? どっかにメソッドをまとめたライブラリとかがあるんですか?」
「そうですね、JavaとかC/C++などの多くのプログラミング言語は、基本的な機能をまとめたライブラリが実行環境の中に用意されていますよね。JavaScriptの場合は、実行環境がWebブラウザーですから、基本的な機能は各ブラウザーの内部に用意されています」
「てことは、JavaScriptに用意されているメソッドは、プログラムが実行される時点で、ブラウザーに組み込まれたJavaScriptの実行環境から呼び出されるってわけですね」
「write()のほかにも様々なメソッドが用意されているのですが、メソッド名()と書いたことによって、JavaScriptエンジンがこれを読み込んでメソッド本体の呼び出しを行います。あとは、呼び出されたメソッドの本体部分のコードが実行されるわけです」
「これから先、様々な処理を行っていくにあたって、いろいろなメソッドを呼び出して目的の処理を実行していくことになりますね」
「他の言語でもそうであるように、JavaScriptにおいても『必要なときに適切なメソッドを呼び出して処理を行う』ことでプログラムを組み立てていきます。ちなみに、メソッド名のあとには必ず( )を付けるようになっています。この( )は、メソッドに処理してもらいたいデータを渡すためのものです」
「write("Hello world!")と書くことで( )の中の文字をメソッド本体に渡して、画面に表示してもらったわけですね」
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
- JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS/React.jsまで
@ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた@ITの豊富なWeb開発関連記事とともに振り返る。 - ようこそJavaScriptの世界へ
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず!?(編集部) - 第1回 JavaScriptの復権
Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック。