JavaScriptがちょっと理解しにくいとお嘆きの方へ・・・

それは私のことです！
C/C++、そしてC#などメインに使ってきたんでJavaScriptなどのスクリプト言語はいろいろと理解しずらい。Strong-typingではなく、動的で自由度も高く、いくつものやり方で同じ結果を得られたりする、そういうところが今まで扱ってきた言語と大きくことなるから。そこで効率よく学習できる方法は何だろうとずっと考えていた。

結論としては、Chromeなどのブラウザー開発者ツールのconsole（コンソール）と「JavaScript言語の仕様書（Language specifications）」を使って実験と確認を繰り返すという「会話式の方法」が自分には効果的だと分かった。ググって見つかるチュートリアルやブログも参考になるんだけど、場合によっては著者も深く理解していない場合もあったりして、かえって混乱してしまうことがあるから。その点、仕様書は正確。

JavaScript Language specifications（言語仕様）

現段階で JavaScirptの仕様を読むとなると下の二つになる。

JavaScript 5
JavaScript 5.1 Language Specification （2011年頃出た）

JavaScript 6
ECMAScript 2015(HTML形式)（2015年6月に正式に承認）

これら言語仕様を軸足にする。そうすれば間違った解釈をしてしまっているチュートリアル記事などに惑わされずに学習できる（この記事もそれに含まれる可能性があることは断っておく）

まずは JavaScript 5 から始める

最新の6は、私の好きなStrong-typeな言語に近い雰囲気。だけど私にとって混乱のもとになっている5から始めることにした。

ブラウザ開発ルールのコンソールと対話できる環境を作る

このステップはとても簡単。これを読んでいるということはおそらくChromeがインストールされている状況なので、ほかにインストールするものはない。

まずは、下の内容のHTMLファイルを作る。
<script>ブロックを含むことに注意。
ファイル名は適当でよい（例： index.html）

<html>
<body>
  <script>
    console.log(Date());
  </script>
</body>
</html>

次にファイルをブラウザーで実行する。
ファイルをダブルクリックするなどして、Openすると大抵はブラウザにロードされる。（Atomのようなエディタならエクステンションでブラウザのロードできて便利）。

ページがロードされたら「F12キー」でブラウザの開発者ツール開く。

これで、学習環境はできたので、さっそくコンソールを使ってみる。

コンソールを使って任意のウェブサイトを表示する

window.location = 'http://google.com'

と打ち込んでみると、ブラウザがグーグルのホームページをロードする。

そう、コンソールだけで、どのURLにも移動できるわけだ。

コンソールにはロードされたスクリプトやブラウザーからのトレースや警告、そしてエラーなどのアウトプットが表示される。

コンソールをすっきりクリアーしたい場合は、左上の「Clear console log」ボタンを押す。

コンソールを使って前のページに戻る

ブラウザでよく使う「Back（戻る）」ボタンがあるが、コンソールでも同じことが出来る。

window.history.back()

うまく元のページに戻ってこれた。

このように、コンソールを使うだけで、JavaScriptの実行環境やブラウザとページの内容をアウトプットを通して理解できるだけでなく、コンソールに直接ステートメントを打ち込むことで、JavaScript実行環境やブラウザを操作することも出来る。

要点

コンソールを通して JavaScript実行環境と会話をすることが出来る。これはスクリプトをファイルに保存して、いちいちロードして実行させるやり方よりも直感的にJavaScript実行環境を理解できるし、会話式で少しずつコンセプトを理解しながら学習を進めることができる。

その２へつづく