JavaScript/はじめに
まず、簡単なJavaScriptのプログラムの例と、どこにプログラムを書けばいいのかを解説します。
目次
Hello World[編集]
Hello Worldとは、画面に「Hello World!」と表示する、プログラミングの本の最初に書いてあるプログラムです。
JavaScriptのHello Worldプログラムは次のようになります。
<script>
alert('Hello World!');
</script>
では、上記のコードを分析しましょう。
まず、JavaScriptの命令をブラウザで実行するには、コードをHTMLの<script>〜</script>タグの中に書く必要があります。
alertメソッドは、Webページ上に警告ダイアログを表示します。
alert("Hello World!");
では、alertメソッドを例に、javascriptでの命令の記述方法を勉強しましょう。
まず、文字列の表示命令などのように、文字列を処理する際には""または''で囲んで表すことで、その（囲まれた）部分が文字列である事を明言したことになります。
また、alertメソッドにかぎらず一般に、命令の文の終わりには;をつけます。
;は「行の終わり」を表します。
1行のプログラムなら;は無くても良いです。
ですが、2行以上にする時に、;が無いとエラーが出てしまいます。
REPL[編集]
REPL（read–eval–print loop）とは、コマンドプロンプトのようにコードを入力して実行結果を手軽に確認できるツールのことですが、ここではオンラインのサービスのことを指します。
BabelのREPLを使うと上記のHello Worldプログラムを簡単に動かすことができます。
ブラウザでの確認[編集]
まず、プログラムを制作する必要があります。そのため、メモ帳などのテキストエディタを開き、下記のHTMLマークアップをコピーし、hello.htmlなどの適当なファイル名でデスクトップに保存してください。hello.html.txtのようにファイル名の後ろに余計な.txtがつかないようご注意ください。
hello.html
<script>
alert('Hello World!');
</script>
作成したhello.htmlをダブルクリックして開くと（ブラウザ上にhello.htmlをドラッグしても開くことができます）、画面に「Hello World!」と表示されます。
JavaScriptでは文字列は必ず''で囲むということを忘れないでください。決して
alert(Hello World!); // SyntaxError
としてはいけません。
完全なHTMLドキュメント[編集]
この本ではHTMLの知識を仮定しないため、簡単にscript要素のみを用いますが、参考までに完全なHTMLドキュメントの例を示しておきます[1]。
hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Program</title>
<script>
alert('Hello World!');
</script>
</head>
<body>
<h1>Say Hello to the World</h1>
<p>Seeing is believing.</p>
</body>
</html>
<!DOCTYPE html>はDOCTYPE宣言と呼ばれるもので、古いブラウザ[2]を標準モードでレンダリングさせるためにHTML5の仕様上必要とされていますが[3]、現代ではほとんど意味はありません。
すべての要素はhtml要素で囲まれます。
head要素にはヘッダ（メタデータ）が入ります。
<meta charset="utf-8">は文字エンコーディングがUTF-8であることを示す記述です（この例では日本語を含まないので必須ではありません）。
title要素はWebページのタイトルを表します。
script要素の中にJavaScriptのコードを記述します。
body要素にはWebページの内容が入ります。h1要素は大見出し、p要素は段落を表します。
外部スクリプト[編集]
HTMLドキュメントにJavaScriptコードを埋め込むのではなく、外部ファイルに分離することもできます。こうすると興味の集中ができますし、JavaScriptを書くのにHTMLファイルを編集する必要がなくなります。
hello.htmlを次のように変えます。
hello.html
<script src="hello.js"></script>
そして新規テキストファイルを作成し、以下のJavaScriptコードをコピーし、hello.jsという名前でデスクトップ（hello.htmlと同じディレクトリ）に保存してください。
hello.js
alert('Hello World!');
hello.htmlを開くと、さっきと同じように「Hello World!」と表示されます。
今後はhello.htmlは変えずに、hello.jsの方にプログラムを書いていくことになります。
JavaScriptコンソール[編集]
たいていのブラウザには、わざわざHTMLファイルを作成しなくても、JavaScriptコードをその場で書いて実行できるJavaScriptコンソール（インスペクタ）と呼ばれるツールが搭載されています。
IE、Chrome、Firefox、Safariなど多くのブラウザでは、F12（またはfn+F12）を押すとコンソールが起動します。
あるいはWebページの適当なところを右クリックして「要素を調査」を選択したり、ブラウザ上部のツール（開発）メニューをクリックしたりしてコンソールを起動することもできます。
ひとまずコンソールが起動できたとしましょう。
コンソールではalertメソッドを使わなくても、単にJavaScriptコードを入力するだけで実行結果を確認することができます。
- コンソールの出力例（◀が実際に入力したコード、▷が出力結果）
19:26:22.453 ◀ 'Hello World!' 19:26:22.458 ▷ "Hello World!" 19:26:25.882 ◀ 1 + 1 19:26:25.886 ▷ 2 19:26:32.775 ◀ Math.pow(2, 1023) 19:26:32.780 ▷ 8.98846567431158e+307 19:26:49.043 ◀ var x = 2 19:26:49.048 ▷ undefined 19:27:03.064 ◀ x 19:27:03.069 ▷ 2 19:27:15.321 ◀ x + x === x * x 19:27:15.326 ▷ true 19:27:17.489 ◀ unko 19:27:17.494 ✖ ReferenceError: unko is not defined 19:31:52.231 ◀ new Date() 19:31:52.237 ▷ Date 2016-02-16T10:31:52.238Z
コンソール上で↑キーを押すと、以前に入力したコードをもう一度編集して実行することができます。
Shift+Enterを押すと改行でき、複数行のプログラムを入力することができます。
console.logメソッドを使用すると、明示的にコンソール上に文字列を出力することができます。たとえばプログラムの途中で結果を出力したり、hello.jsからコンソールに文字列を出力したりするのに使えます。
console.log('Hello World!');
Firefoxでは、Firebugという拡張機能をインストールするとさらに高機能なデバッガを利用することができます（Firefox最新版においても組み込みのインスペクタでは物足りないとされており、Firefoxを使うすべてのプログラマはFirebugをインストールすることが推奨されます）。
コンソールは、プログラムのどの行でエラーが発生しているのかを確認するなど、JavaScriptプログラマにとって欠かせないツールです。hello.jsにプログラムを書く場合であっても、必ずコンソールを起動し、エラーが出ていないかどうか確かめるようにしましょう。
プログラムは一発で完璧に書こうとするものではなく、少しずつ書いては実行し、わざとエラーを出させてはそれを直すを繰り返して、「とりあえずここまではできた」「ここまでは間違っていない」という範囲を徐々に広げていって完成させるものなので、エラーを恐れないでください。
コンソールは即座にプログラムを実行できるので練習には便利なのですが、使用には多少の慣れが必要かもしれません。
以降はコンソールにプログラムを書いても、hello.jsに書いてもかまいません。自分に合った方法でプログラミングを継続してください。
Node.js[編集]
ブラウザを使わずに、JavaScriptの処理系をインストールしてシェル（ターミナル）でJavaScriptを実行することもできます。シェルを使える方にはこの方法をおすすめします。
さまざまな処理系が存在しますが、GoogleのV8エンジンをベースにした、Node.jsと呼ばれるランタイムを利用するのが最も現代的で手軽な選択肢になります。
Node.jsの公式サイトからインストーラーをダウンロードし、インストールしてください。なお、Ubuntuでは次のコマンドを実行してNode.jsをインストールできます（管理者権限が必要です）。
$ sudo apt-get install node
また、MacではHomebrewと呼ばれるパッケージマネージャーをインストールし、インストールするとよいでしょう。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install node
Node.jsインタプリタを起動するには、シェルでnodeコマンドを実行します。
$ node
> console.log('Hello World!')
Hello World!
undefined
>
Node.js/V8以外の処理系にはSpiderMonkey、Rhino、KJSなどがあります。
$ sudo apt-get install libmozjs-24-bin rhino kdelibs-bin
コメント[編集]
JavaScriptでは、//から行末までの部分、および/*〜*/で囲まれた部分はコメントとして扱われます。コメントは無視されるので、コードの説明など好きな文章を書くことができます。
/*
1 から n までの整数の合計を求める（初期値は n = 10）
複数行のコメントを書くことが可能
*/
var n = 10;
console.log(n * (n + 1) / 2); // 一行コメント: ガウスのアルゴリズムを使用
複数行コメントは次のように星をつなげて書くと綺麗です。
/**
* @file JavaScript による円周率出力プログラム
* @version 3.14
* @author ウィキブックス
* @license パブリックドメイン
*/
console.log(Math.PI);
これはJSDocと呼ばれる形式で、JavaScriptにおけるドキュメント方式の事実上の標準になっています。一般公開するプログラムでは、すべてのメソッド定義にJSDoc形式でドキュメントを書くことが推奨されます。JSDocの書き方を手っ取り早く習得したい方は、GoogleのClosure Libraryの例をご覧ください。
ただし、練習用のプログラムでは面倒なのでコメントは書かなくてもよいでしょう。
JavaScriptに限りませんが、一般的に
var x = 1; // x に 1 を代入
のような、自明なコードをただ日本語に翻訳しただけの無意味なコメントは愚かなものとされます。それが何のための変数なのかなど、クリエイティブな構想をコメントには書くべきです。JavaScriptの構文はJavaScriptのまま理解すべきで、いちいち日本語に翻訳して理解すべきではありません。
GNU LibreJS[編集]
この節は書きかけです。この節を編集してくれる方を心からお待ちしています。
スタイル[編集]
JavaScriptではインデントはスペース2つ、変数名はキャメルケースを用いる慣習になっています。その他のJavaScriptの慣習を知りたい方はGoogle JavaScript Style Guide（和訳）をご覧ください。
Closure Linterをインストールすると、gjslintコマンドを使ってプログラムがGoogle JavaScript Style Guideに合ったスタイルになっているかどうかチェックできます。
$ sudo apt-get install closure-linter # Ubuntu $ brew install closure-linter # Mac $ gjslint hello.js
脚注[編集]
- ^ Google HTML/CSS Style GuideではHTML5のタグの省略（和訳）を用いることも提案されていますが、初心者にとってはかえってHTMLの構造がわかりづらいと考えられるため、ここでは用いていません。
- ^ Activating Browser Modes with Doctype § Appendix: Handling of Some Doctypes in
text/html - ^ HTML Standard § 12.1.1 The DOCTYPE（和訳）
