JavaScript本格入門 コア部分からモダンスタイルまでを一気に理解

ブラウザーで動くアプリ開発に関わっていれば、JavaScriptは避けて通れない重要な技術の一つなのですが、本質的なコア部分を学ぶことなく、なんとなく書けるって人は意外に多い印象(自分も)

ブラウザーベンダーによる個々の仕様拡張によるクロスブラウザー問題や、断続的なセキュリティホールの発見などマイナスイメージが強いJavaScriptも、2005年にAjax技術の登場により復権!!

今ではスマホアプリもJavaScriptで作れるし、アニメーションやSPA(React/Vue)の流行も人気に拍車をかけ、もはやJavaScriptを知らないとWEBの世界では生きていけない気がします。

“なんとなく書ける”で終わらせず、本質的な理解を深めるため、こちらを手にとってみました。

言語自体の仕様や現場での応用(Ajaxやツールの使い方)は勿論、最近のモダンスタイル(ES6)では利用する事も少ないDOM操作やプロトタイプなどコア部分にも触れながら、初心者は勿論、なんとなく書けるレベルの人が技術者として一歩上に行ける手助けをしてくれる良書だったと思います。

本書の内容

本書の構成は大体こんな感じで、初心者にもサンプルを交えて丁寧に説明されています。

1.イントロダクション

2.変数・定数・型・演算子・制御構文

3.オブジェクト

4.関数

5.プロトタイプとクラス

6.DOM操作

7.クライアントサイド開発

8.現場での応用技術

1〜5章は言語仕様について説明されている感じです。

ページ数も膨大なので気になった箇所だけ一部抜粋して紹介。

undefinedとnull

未定義値(undefined)はある変数の値が定義されていないことを表すもの。

またnullは該当する値がないことを意味しており、空であるという状態を表すもの。

どちらも似ているようで実は結構違っていますが、結論としてはコチラ↓

POINT意図した空を表すにはnull、そうでない場合はundefinedと区別.

個人的にはnullの多用しているかな。

関数定義の評価タイミング

JavaScriptで用意されている関数定義は以下の4種類。

・function命令

・Functionコンストラクター

・関数リテラル表現

・アロー関数定義(ES6)

Functionコンストラクター定義は知りませんでしたが、特別理由が無ければメリットはなく、原則としてはfunction命令、または関数リテラル/アロー関数での定義が望ましいようです。

POINTJavaScriptでの関数は、データ型の一種でリテラルとして表現可能.

以下は直感的にエラーになりそうですが、言語としては正しいコード(可読性的に微妙ですが)

またそれぞれの関数定義は解析/コンパイルタイミングが違うことも重要なポイント。

POINTfunction命令は静的な構造を宣言し、その他は実行時に評価される.

function命令では記述の順番を意識せずに呼び出しが可能。

一方でFunctionコンストラクターや関数リテラルは、コード解析/コンパイル時に関数が登録されず、実行時(代入時)に評価されるので、関数定義前に呼び出されるとエラーになります。

無名関数はJavaScriptで重要な概念なので、整理して理解すべきポイント!!

変数定義のスコープ

JavaScriptでは元々、スクリプト全体から参照可能なグローバルスコープ、関数内で参照可能なローカルスコープがありましたが、ES6からブロックスコープが導入されました。

しかしvarやlet命令がされていない変数はグローバルと見なされるの注意。

なかなか目視で気付くのも難しいので、var・let・const命令を使っての宣言が望ましい。

最後に厄介な変数の巻き上げですが、ローカル変数は関数の中で有効な変数だと分かるサンプル。

ローカル変数は関数全体で有効ですが、testFuncの先頭行でローカル変数scopeが有効になっても、確保されているだけでvar命令は実行されていないので未定義として扱われてundifined表示(ちなみにローカル変数をlet宣言するとエラーになります)

こんなコード書くことは無いでしょうけど、環境が許す(=最新ブラウザ対応のみでBabel利用可)のであれば、積極的にletやconstを利用し、それ以外の環境ではvarで我慢する感じでしょうか。

ECMAScript2015

標準化団体ECMAのおかげでJavaScriptに様々な機能が追加されましたが、特にclass命令の導入は画期的で、今まで何かと不便(プロトタイプ)だったのが随分と楽に書けるようになりました。

ECMAの登場で今後プロトタイプで書くことも無いだろうし、プロトタイプベースで書かれたコードに業務で出会った事がほぼ無いので、プロトタイプ部分は一読するくらいで良いかなぁと。

あとSPAの登場で直接DOM操作するコードは減っていくと思いますが、jQueryをはじめとしたレガシーな環境はまだまだ現役なので、DOMに関する部分は結構読んでおいて損はないと思います。