1.2 画面にメッセージを表示する

(1/1)
hello, world
JavaScriptで最初に作るプログラムは、ブラウザの画面に "hello, world" というメッセージを表示するもので、実質1行の簡単なプログラムだ。

目次

サンプル・プログラム

プログラムを実行する

ダウンロードしたZIP書庫ファイルを解凍すると、"hello.html" というHTMLファイルが得られる。これをダブルクリックまたはタップすると、標準ブラウザが起動し、画面に次のようなメッセージが表示されるだろう。
hello, world
では、プログラムの中身を見ていこう。

writeメソッド

   1: <!DOCTYPE html>
   2: <html lang="ja">
   3: <head>
   4: <meta charset="UTF-8">
   5: <title>hello</title>
   6: </head>
   7: <body>
   8: 
   9: <script>
  10: document.write('hello, world');
  11: </script>
  12: 
  13: </body>
  14: </html>

"hello.html" をメモ帳アプリやワープロ・アプリで開くと、上図のようになる。このシリーズでは説明の都合で行番号や色分け表示しているが、実際のファイルは行番号や色分けがないテキスト・ファイルである。
この中でJavaScriptのプログラムに相当するのが <script>~</script> タグで囲まれた部分だ。

"hello.html" を表示するようブラウザに命令するのが、write メソッドだ。表示するメッセージをシングルクォーテーション(またはダブルクォーテーション)で囲むのを忘れないこと。命令や記号は半角で書くこと。また、witeメソッドのような命令や計算式などの最後はセミコロン ";" を付けること。

ピリオドの左にある document は、このHTML文を指すオブジェクトであるが、いずれ説明する。ここでは "document.write('なんとか');" と書けば画面にメッセージを表示すると覚えておこう。「なんとか」の部分を書き換えてみてほしい。

もちろん日本語や絵文字(マルチバイト文字)の表示もできるが、その場合、"hello.html" を UTF-8 形式で保存すること。

サーバサイドとクライアントサイド・プログラム

サーバサイドとクライアントサイド・プログラム
一般的に、Webアプリケーションは上図のような仕組みになっている。
ブラウザからサーバへ向かってインターネット経由で(1)リクエストが発行れると、サーバ側からHTMLファイルやCSSファイルと行った(3)レスポンスがブラウザへ返る。
このときサーバ側では、(3)サーバサイド・プログラムを使って、リクエストに応じたレスポンスを作り出すことがある。サーバサイド・プログラムの代表例としては、PHPPythonJavaがある。
一方の JavaScriptは、レスポンスが返った後にブラウザが実行する(4)クライアントサイド・プログラムである。

ここで、クライアントサイド・プログラムはHTMLやCSSと同様、リクエストを発行しなくても(レスポンスが返らなくても)、ブラウザに表示できる場所にプログラム・れば実行できるという特長がある。
1.1 はじめに」で紹介したように、サーバや開発環境を構築しなくても簡単に実行できるという点において、JavaScriptは入門者向けのプログラミング言語である。

では、JavaScriptサーバサイド・プログラムに比べて劣っているかというと、そういうことはない。
最初の JavaScriptがブラウザ「Netscape Navigator 2.0」に搭載されたのは1995年(平成7年)5月で、その1ヶ月後に最初の PHPがリリースされた。Javaは少し遅れて1996年(平成8年)である。長い歴史の中で JavaScriptは進化を続け、手続き型言語、オブジェクト指向言語、関数型言語といったモダンなプログラミング言語の機能を全て備えるようになった。
ただし、クライアントサイド・プログラムを書くための言語であるから、セキュリティ面などの制約がある。これは逆に、初心者にとって複雑で対策ケースが多いセキュリティ面を心配せずにプログラムを書くことができるというメリットになる。

JavaScriptを習得したら、その文法を拡張することで大規模なデスクトップアプリも書けるようになった TypeScriptに進むのもいいだろう。
また、PHPPythonJavaと基本的な文法概念は変わらないので、これらのサーバサイド・プログラムを学ぶハードルも下がるだろう。
同様に C#Swiftを学ぶことも容易になるはずだが、これらは言語というより、OSの機能を知っていることが前提となるので、WindowsやiOSを学ぶ時間が必要になるだろう。

コラム:JavaScript,Java,ECMA Script

Java
JavaScriptJava は別のプログラミング言語である。
Java は、1995年(平成7年)5月にWebブラウザ Netscape Navigator 用のスクリプト LiveScript として誕生した。
一方の Java は、サン・マイクロシステムズが家電に内蔵されているマイコンを制御するためのプログラミング言語として開発がスタートし、その後にWebブラウザに搭載する方向へ方針転換した。1995年(平成7年)5月にはネットスケープと業務提携し、Netscape Navigator にJavaアプレットを搭載することを発表し、1996年(平成8年)1月にリリースした。
こうした流れを受けて、LiveScriptJavaScript に名称変更した。
1996年(平成8年)8月に公開されたマイクロソフトのブラウザ「Internet Explorer 3には、JavaScriptに似た JScript というスクリプトが搭載された。しかし、JavaScriptと違う部分も多くユーザーに混乱をもたらした。
そこで、ヨーロッパの標準化団体 Ecma InternationalJavaScriptを ISO/IEC 16262 として標準化し、ECMAScript (エクマスクリプト) と名付けた。日本では JIS X 3060:2000 として標準化された。
ECMAScript エディション1は1997年(平成9年)6月に公開された。1999年(平成11年)12月に発表されたエディション3では、正規表現や例外処理、数値フォーマットが定義され、プログラミング言語としての体裁を整えたが、その後10年近くにわたって更新が停止してしまった。
エディション4をスキップし、2009年(平成21年)12月に、ようやくエディション5が公開される。strictモードが追加になり、JSONライブラリをサポートした。
2015年(平成27年)6月に発表されたエディション6では、クラスやモジュール、イテレータ、let、constなど多くの要素が追加になり、オブジェクト型プログラミング言語としてほぼ完成をみた。このエディションから毎年更新となり、ES2015 と略称で呼ばれるようになった。

コラム:hello, world

表紙 プログラミング言語C
著者 ブライアン・W.カーニハン/デニス・M・リッチー/石田晴久
出版社 共立出版
サイズ 単行本
発売日 1981年07月01日頃
価格 2,989円(税込)
ISBN 9784320021457
1978年(昭和53年)2月、『プログラミング言語C』(原題:The C Programming Language)という書籍がアメリカで出版された。著者であるブライアン・カーニハン (Brian W. Kernighan) とデニス・リッチー (Dennis M. Ritchie) の頭文字を取ってK&Rと呼ばれるプログラミング入門書の古典である。石田晴久が訳した日本語版は1981年(昭和56年)7月に出版された。
この本の最初の例題として掲げられているプログラムは、"hello, world" というメッセージを画面に表示するものである(けっしてアニメ映画のタイトルではない)。
この後、C言語以外のプログラミング言語の入門書でも、最初に "hello, world" を表示するプログラム例が掲げられるようになった。このシリーズの構成もK&Rを参考にしていることもあり、これに倣った。

私は1985年(昭和60年)頃に日本語版を購入した。当時、ようやくFORTRANやBASICを使ってプログラムを書けるようになった私にとって、ポインタなど難解な部分はあったものの、これ以外に適当な入門書もなく、本に書かれているとおりのプログラムを打ち込んで試行錯誤したものである。
Oh! MZ
Oh! MZ
並行して、雑誌『Oh! MZ』や『マイコンBASICマガジン』に掲載されているプログラムを手入力することでプログラミングの勉強をした。
大学で「電算機概論」「電算機実習」を履修したものの、独学で他人が書いたプログラムを入力し、改造することが一番勉強になった。
(この項おわり)
header