シアトル生活はじめました

20年以上すんだ東海岸から西海岸に引っ越してきました。MicrosoftのUniversal Storeで働いてます。

JavaScriptの基礎の基礎の勉強

JavaScriptがやっぱりよく分からない

使ってるうちに分かって来るだろう・・・と思いながら使ってきた。だけどやっぱりなんだかモヤモヤしてて分からない部分がある。混乱したら、ググって解説を読む。しばらくしたらまた忘れてまた調べる。その繰り返し。

しかもどうやら記事によっては不完全だったり間違っていたりして、むしろさらに混乱を深めるのに役立っているような気がする。

つまり、ハマってしまったってこと。

こういう時は体系だてて、ゼロから積み上げて学習するのが一番の近道だったりする。

混乱したら仕様を読むべし

まず、参考にする情報は「JavaScript language specifications (言語仕様)」をメインとする。

ECMAScript Language Specification - ECMA-262 Edition 5.1

なんといっても、いろんな「JavaScriptの実装」は、この仕様をもとにしているわけであって、これこそが本家。実装が間違っていたり、バグで仕様のとおりに動かない場合だってあるわけで、迷ったら正しい答えは仕様にある、ということ。

ちなみに最新のECMAScript 2015 - いわゆるES6もしくはJavaScript6、は今回は先送りして勉強の対象にはしない。混乱のもとを絶つためにも、5に集中する。

ecmasCRIPT 2015の言語仕様はこちら:

ECMAScript 2015 Language Specification – ECMA-262 6th Edition

ブラウザさえあれば何もいらない(?)

言語の勉強といえばたいてい

 

  1. ファイルにプログラムを書く
  2. コンパイルする)
  3. 実行する(デバッガー付きだとなお良し)
  4. 結果を検証する

 

という流れになる。

だけどJavaScriptは動的プログラミング言語インタープリター式で実行するんで、上の手順の手間をほとんど省いて、会話式で学ぶ方が効率もいいし、言語の動的特徴を直感的に理解できて良い。

ということで、JavaScriptの実行環境はブラウザに付いてくるエンジンがもっとも便利。

つまりは全て無料で学習する環境がある。

勉強する環境を整える

まずは前置きとして、ブラウザの開発ツールの解説から。

コンソールを使えるようになれば準備完了。

qiita.com

 

JavaScript オブジェクト種類

つぎに、仕様書にある native と host オブジェクトの違いを理解し、さらに native の中でも最重要な built-in オブジェクトというものがあるということを知る。

javaScriptの実行環境で使えるものが何かを知るところからスタート。

自分が定義するオブジェクトやフレームワークは、それらに足りない部分を拡張してるに過ぎない。拡張部分を理解するためにも「拡張されている基礎の部分」の理解は重要。

qiita.com

 

JavaScriptコンストラクタとプロトタイプを理解する 

これはC++C#になれている人が混乱してしう原因の一つだと思う。とくに継承の仕組みがプロトタイプという概念をベースに構築されている点が、中途半端な理解だと常にストレスの原因になるので、これを機会にガッツリ理解する。

プロトタイプが理解できたら、ほぼ「JavaScriptでのOOPは分かっている」と宣言しても差し支えないと思う。

qiita.com

 

new を使うが使わないのか?

JavaScriptだらしない柔軟性に富んでいる理由の一つに、同じ結果を得るのに何通りものやり方がある、とうのがある。

オブジェクトのインスタンスを作成するのも一通りとは限らない。

qiita.com

 

Object.createを使ってオブジェクト・インスタンスを作る

JavaScriptでオブジェクト・インスタンスを作成する最も根源的な方法はObjectオブジェクトのcreateメソッドを使うやり方。他の方法は、これの別名やショートカットだと理解しても差し支えないと思う。

逆に、これを理解の出発点にすれば混乱が防げると思う。

qiita.com

 

まとめ

今回はここまで調べて書いた。

次は prototype に変数やメソッドをひとつづつ足して、いわゆる「クラス」のようなものを作ることにする。最終的にはJavaScriptでのクラスの定義の仕方に繋げていく。

JavaScriptの最新仕様であるES6では仕様のレベルでクラスを定義できる文法が加えられているが、ここはあえてES5の仕様でやる。(こういうと聞こえはいいが、ぶっちゃけ「知らない」というのが答え・・・)