JavaScriptで最初に作るプログラムは、ブラウザの画面に "hello, world" というメッセージを表示するもので、実質1行の簡単なプログラムだ。
目次
サンプル・プログラム
プログラムを実行する
ダウンロードしたZIP書庫ファイルを解凍すると、"hello.html" というHTMLファイルが得られる。これをダブルクリックまたはタップすると、既定のブラウザが起動し、画面に次のようなメッセージが表示されるだろう。
hello, world
では、プログラムの中身を見ていこう。
writeメソッド
hello.html
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> タグで囲まれた部分だ。
メッセージを表示するようブラウザに命令するのが、write メソッドだ。表示するメッセージをシングルクォーテーション（またはダブルクォーテーション）で囲むのを忘れないこと。命令や記号は半角で書くこと。また、writeメソッドのような命令や計算式などの最後はセミコロン ";" を付けること。👉コラム「行末のセミコロンは不要か？」参照
ピリオドの左にある document は、このHTML文書を指すオブジェクトであるが、いずれ説明する。ここでは "document.write('なんとか');" と書けば画面にメッセージを表示すると覚えておこう。「なんとか」の部分を書き換えてみてほしい。
もちろん日本語や絵文字（マルチバイト文字）の表示もできるが、その場合、"hello.html" を UTF-8 形式で保存すること。
この中でJavaScriptのプログラムに相当するのが <script>～</script> タグで囲まれた部分だ。
メッセージを表示するようブラウザに命令するのが、write メソッドだ。表示するメッセージをシングルクォーテーション（またはダブルクォーテーション）で囲むのを忘れないこと。命令や記号は半角で書くこと。また、writeメソッドのような命令や計算式などの最後はセミコロン ";" を付けること。👉コラム「行末のセミコロンは不要か？」参照
ピリオドの左にある document は、このHTML文書を指すオブジェクトであるが、いずれ説明する。ここでは "document.write('なんとか');" と書けば画面にメッセージを表示すると覚えておこう。「なんとか」の部分を書き換えてみてほしい。
もちろん日本語や絵文字（マルチバイト文字）の表示もできるが、その場合、"hello.html" を UTF-8 形式で保存すること。
サーバサイドとクライアントサイド・プログラム
一般的に、Webアプリケーションは上図のような仕組みになっている。
ブラウザからサーバへ向かってインターネット経由で(1)リクエストが発行されると、サーバ側からHTMLファイルやCSSファイルといった(3)レスポンスがブラウザへ返る。
このときサーバ側では、(2)サーバサイド・プログラムを使って、リクエストに応じたレスポンスを作り出すことがある。サーバサイド・プログラムの代表例としては、PHP、Python、Javaがある。
一方の JavaScriptは、レスポンスが返った後にブラウザが実行する(4)クライアントサイド・プログラムである。
ここで、クライアントサイド・プログラムはHTMLやCSSと同様、リクエストを発行しなくても（レスポンスが返らなくても）、ブラウザで開ける場所にプログラムを置けば実行できるという特長がある。
「1.1 はじめに」で紹介したように、サーバや開発環境を構築しなくても簡単に実行できるという点において、JavaScriptは入門者向けのプログラミング言語である。
では、JavaScriptがサーバサイド・プログラムに比べて劣っているかというと、そういうことはない。
JavaScriptの原型が作られたのは1995年（平成7年）5月で、ブラウザ「Netscape Navigator 2.0」のベータ版に搭載されたのは同年9月である。最初の PHPがリリースされたのは1995年（平成7年）6月、Javaは少し遅れて1996年（平成8年）1月である。長い歴史の中で JavaScriptは進化を続け、手続き型言語、オブジェクト指向言語、関数型言語といったモダンなプログラミング言語の主要な機能を備えるようになった。
ただし、クライアントサイド・プログラムを書くための言語であるから、セキュリティ面などの制約がある。これは逆に、初心者にとっては、考慮すべき点が多く複雑なセキュリティ対策をあまり気にせずにプログラムを書けるというメリットになる。
JavaScriptを習得したら、静的な型付けを加えて大規模な開発に対応した TypeScriptに進むのもいいだろう。
また、PHP、Python、Javaと基本的な文法概念は変わらないので、これらのサーバサイド・プログラムを学ぶハードルも下がるだろう。
同様に C# や Swiftを学ぶことも容易になるはずだが、これらは言語そのものより、OSが提供する機能の理解が前提となるので、WindowsやiOSを学ぶ時間が必要になるだろう。
ブラウザからサーバへ向かってインターネット経由で(1)リクエストが発行されると、サーバ側からHTMLファイルやCSSファイルといった(3)レスポンスがブラウザへ返る。
このときサーバ側では、(2)サーバサイド・プログラムを使って、リクエストに応じたレスポンスを作り出すことがある。サーバサイド・プログラムの代表例としては、PHP、Python、Javaがある。
一方の JavaScriptは、レスポンスが返った後にブラウザが実行する(4)クライアントサイド・プログラムである。
ここで、クライアントサイド・プログラムはHTMLやCSSと同様、リクエストを発行しなくても（レスポンスが返らなくても）、ブラウザで開ける場所にプログラムを置けば実行できるという特長がある。
「1.1 はじめに」で紹介したように、サーバや開発環境を構築しなくても簡単に実行できるという点において、JavaScriptは入門者向けのプログラミング言語である。
では、JavaScriptがサーバサイド・プログラムに比べて劣っているかというと、そういうことはない。
JavaScriptの原型が作られたのは1995年（平成7年）5月で、ブラウザ「Netscape Navigator 2.0」のベータ版に搭載されたのは同年9月である。最初の PHPがリリースされたのは1995年（平成7年）6月、Javaは少し遅れて1996年（平成8年）1月である。長い歴史の中で JavaScriptは進化を続け、手続き型言語、オブジェクト指向言語、関数型言語といったモダンなプログラミング言語の主要な機能を備えるようになった。
ただし、クライアントサイド・プログラムを書くための言語であるから、セキュリティ面などの制約がある。これは逆に、初心者にとっては、考慮すべき点が多く複雑なセキュリティ対策をあまり気にせずにプログラムを書けるというメリットになる。
JavaScriptを習得したら、静的な型付けを加えて大規模な開発に対応した TypeScriptに進むのもいいだろう。
また、PHP、Python、Javaと基本的な文法概念は変わらないので、これらのサーバサイド・プログラムを学ぶハードルも下がるだろう。
同様に C# や Swiftを学ぶことも容易になるはずだが、これらは言語そのものより、OSが提供する機能の理解が前提となるので、WindowsやiOSを学ぶ時間が必要になるだろう。
コラム：JavaScript，Java，ECMA Script
JavaScript と Java は別のプログラミング言語である。
JavaScript は、1995年（平成7年）5月にWebブラウザ Netscape Navigator 用のスクリプトとして原型が作られ、同年9月に LiveScript という名前で Netscape Navigator 2.0 のベータ版に搭載された。
一方の Java は、サン・マイクロシステムズが、家電に内蔵されたマイコンを制御するためのプログラミング言語として開発を始め、その後にWebブラウザに搭載する方向へ方針転換した。1995年（平成7年）5月にはネットスケープと業務提携し、Netscape Navigator にJavaアプレットを搭載することを発表、1996年（平成8年）2月に正式版がリリースされた。
こうした流れを受けて、1995年（平成7年）12月に LiveScript は JavaScript に名称変更した。
JavaScript は、1995年（平成7年）5月にWebブラウザ Netscape Navigator 用のスクリプトとして原型が作られ、同年9月に LiveScript という名前で Netscape Navigator 2.0 のベータ版に搭載された。
一方の Java は、サン・マイクロシステムズが、家電に内蔵されたマイコンを制御するためのプログラミング言語として開発を始め、その後にWebブラウザに搭載する方向へ方針転換した。1995年（平成7年）5月にはネットスケープと業務提携し、Netscape Navigator にJavaアプレットを搭載することを発表、1996年（平成8年）2月に正式版がリリースされた。
こうした流れを受けて、1995年（平成7年）12月に LiveScript は JavaScript に名称変更した。
1996年（平成8年）8月に公開されたマイクロソフトのブラウザ「Internet Explorer 3」には、JavaScriptに似た JScript というスクリプトが搭載された。版権の関係で、JavaScript と同一のスクリプトを搭載できなかったためだ。JScript は JavaScript に似ている部分も多いのだが、違う部分もあり、ユーザーに混乱をもたらした。
そこで、ヨーロッパの標準化団体 Ecma International が JavaScript と JScript の共通部分を ECMA-262 として標準化し、ECMAScriptと名付けた。1998年（平成10年）には ISO/IEC 16262 としても制定され、日本では JIS X 3060:2000 として標準化された。ECMAScript は JavaScript の一部機能を標準化したもので、2026年（令和8年）現在も、ブラウザによって JavaScript の機能に違いがある。ECMAScript は JavaScript の最大公約数的な仕様だと考えておくといいだろう。
ECMAScript エディション1は1997年（平成9年）6月に公開された。1999年（平成11年）12月に発表されたエディション3では、正規表現や例外処理、数値フォーマットが定義され、プログラミング言語としての体裁を整えたが、その後10年近くにわたって更新が停止してしまった。
エディション4をスキップし、2009年（平成21年）12月に、ようやくエディション5が公開される。strictモードが追加になり、JSONライブラリをサポートした。
2015年（平成27年）6月に発表されたエディション6では、クラスやモジュール、イテレータ、let、constなど多くの要素が追加になり、オブジェクト指向プログラミング言語としてほぼ完成をみた。このエディションから毎年更新となり、ES2015 と略称で呼ばれるようになった。
そこで、ヨーロッパの標準化団体 Ecma International が JavaScript と JScript の共通部分を ECMA-262 として標準化し、ECMAScriptと名付けた。1998年（平成10年）には ISO/IEC 16262 としても制定され、日本では JIS X 3060:2000 として標準化された。ECMAScript は JavaScript の一部機能を標準化したもので、2026年（令和8年）現在も、ブラウザによって JavaScript の機能に違いがある。ECMAScript は JavaScript の最大公約数的な仕様だと考えておくといいだろう。
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
|
プログラミング言語Ｃ | ||
| 著者 | ブライアン・W．カーニハン/デニス・M・リッチー/石田晴久 | ||
| 出版社 | 共立出版 | ||
| サイズ | 単行本 |
|
|
| 発売日 | 1981年07月01日頃 | ||
| 価格 | 2,989円（税込） | ||
| ISBN | 9784320021457 | ||
1978年（昭和53年）2月、『プログラミング言語Ｃ』（原題：The C Programming Language）という書籍がアメリカで出版された。著者であるブライアン・カーニハン (Brian W. Kernighan) とデニス・リッチー (Dennis M. Ritchie) の頭文字を取ってＫ＆Ｒと呼ばれるプログラミング入門書の古典である。石田晴久が訳した日本語版は1981年（昭和56年）7月に出版された。
この本の最初の例題として掲げられているプログラムは、"hello, world" というメッセージを画面に表示するものである（けっしてアニメ映画のタイトルではない）。
この後、C言語以外のプログラミング言語の入門書でも、最初に "hello, world" を表示するプログラム例が掲げられるようになった。このシリーズの構成もＫ＆Ｒを参考にしており、これに倣った。
私は1985年（昭和60年）頃に日本語版を購入した。当時、ようやくFORTRANやBASICを使ってプログラムを書けるようになった私にとって、ポインタなど難解な部分はあったものの、これ以外に適当な入門書もなく、本に書かれているとおりのプログラムを打ち込んで試行錯誤したものである。
この本の最初の例題として掲げられているプログラムは、"hello, world" というメッセージを画面に表示するものである（けっしてアニメ映画のタイトルではない）。
この後、C言語以外のプログラミング言語の入門書でも、最初に "hello, world" を表示するプログラム例が掲げられるようになった。このシリーズの構成もＫ＆Ｒを参考にしており、これに倣った。
私は1985年（昭和60年）頃に日本語版を購入した。当時、ようやくFORTRANやBASICを使ってプログラムを書けるようになった私にとって、ポインタなど難解な部分はあったものの、これ以外に適当な入門書もなく、本に書かれているとおりのプログラムを打ち込んで試行錯誤したものである。
Oh! MZ
並行して、雑誌『Oh! MZ』や『マイコンBASICマガジン』に掲載されているプログラムを手入力することでプログラミングの勉強をした。
大学で「電算機概論」「電算機実習」を履修したものの、独学で他人が書いたプログラムを入力し、改造することが一番勉強になった。
大学で「電算機概論」「電算機実習」を履修したものの、独学で他人が書いたプログラムを入力し、改造することが一番勉強になった。
行末のセミコロンは不要か？
実は、JavaScriptには改行を文の区切りと見なしてセミコロンを補う自動セミコロン挿入（ASI: Automatic Semicolon Insertion）という仕組みが ECMAScript の仕様として定義されており、セミコロンを省略しても動くことが多い。
ただし return の直後で改行した場合や、次の行が ( や [ で始まる場合など、意図しない解釈になることがある。
ただし return の直後で改行した場合や、次の行が ( や [ で始まる場合など、意図しない解釈になることがある。
下記の JavaScript プログラムは自動セミコロン挿入によって正しく動作する。
document.write('hello, world')
一方、下記のプログラムは、自動セミコロン挿入によって "return;" と同義と解釈され、1 + 1 は実行されず、 undefined が返る。
function hoge() {
return
1 + 1
}
次の行が ( [ + - / ` ではじまる場合には自動セミコロン挿入が働かず、次の行と連結される。
下記のプログラムは、1[1, 2, 3] と解釈されエラーになってしまう。
下記のプログラムは、1[1, 2, 3] と解釈されエラーになってしまう。
const a = 1
[1, 2, 3].forEach(console.log)
下記のプログラムは、1 + 2 が実行される。
const result = 1
+2
こうした、ややこしい違いがあるため、本連載では常にセミコロンを付けることにする。
（この項おわり）
