書評:ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁

書評:ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁

5つの壁とは

本書のサブタイトルになっている5つの壁とは目次にもなっている

  1. オブジェクト指向の考え方
  2. UI・インタラクティブ表現としてのイベント
  3. Canvas APIによるグラフィック表現
  4. Ajaxを利用したAPI連携とデータ検索
  5. シングルページアプリケーションの実装

以上の5つでJavaScriptを学んでいれば制作現場で必要になることが多い知識。(Canvas APIはほかと比べると使用されないことが多いので2→4といったん飛ばして読んでも良いかも)

本書はJavaScriptの入門書ではなくJavaScriptとjQueryの入門書を読み終えた人を対象とした本なので興味があってもまずはこの2つを習得してからでないとコードの意味が理解できない。

チャプター別のサンプルファイルが作業工程順にわけてあるので入門書を読み終えた人にもわかりやすくなっている。
https://www.shoeisha.co.jp/book/download/9784798139050

オブジェクト指向の考え方

プロトタイプ(prototype)、クロージャー(Closure)、オブザーバー(Observer)、thisに付いての解説。

オブザーバーは個人的にはJavaScriptフレームワークのものを使用することが多く、1からコンストラクタから作成したことがないので勉強になった。(おそらく、そういう方は多いと思う)

本書のコードとは少し違うがオブザーバーはコードを少なくしてこのように理解した。
Observerのサンプル

this以外はJavaScript入門書では説明されることが少ないので必ず覚えておきたい内容。プロトタイプ、クロージャー、オブザーバー、thisを学んだあとはこれらを使用したリアルタイムバリデーションの説明に入るのでこれらを完全に修得するまではを先のページに進まないほうが良い。

作成する際にModelとViewのコンストラクタを作成して実装するので再利用性・保守性・拡張性に優れたコードになっている。

UI・インタラクティブ表現としてのイベント

モーダルウィンドウを作成してDOMイベントについて学ぶ。

モーダルウィンドウは画像のサムネイルが複数あってクリックすると大きな画像がモーダルウィンドウで表示されるタイプ。

DOMイベントについて記載されているのはclick, resize, loadしかないので読んだあとにほかのDOMイベントについても自身で調べたほうが良い。
MDNのEvent referenceがおすすめ

Canvas APIによるグラフィック表現

HTML5の普及に伴って注目されているCanvas APIのグラフィック表現をパーティクルシステムを作成して解説。

ただし、Canvasは使用されることはほかのチャプターの内容と比べるとまだ少ないので、このチャプターはいったん飛ばして先にChapter4の「Ajaxを利用したAPI連携とデータ検索」を読んだほうが良さそう。

Ajaxを利用したAPI連携とデータ検索

Ajaxを利用したAPI連携とデータ検索と書かれてあるが非同期の処理に使用されるPromise・DefferedやUnderscore.jsについても解説されている。

単純にAjaxを使用するだけではなくテンプレートエンジンを使用したメンテなブルな構築方法となっている。

Underscore.jsについては少ししか解説されていないが使用頻度の高いライブラリなので別途公式サイトで本書に書かれているメソッド以外も調べておくと良い。
Underscore.js 公式サイト

シングルページアプリケーションの実装

シングルページアプリケーション(SPA)の作成にはAngular.js, Backbone.js, React.jsなどのライブラリが使用されることが多いが本書ではこれらのライブラリは使用せずライブラリで使用されるルーターを自身で作成してSPAについて学ぶ。(jQueryは少し使用)

1から作成して構造やAPIについて1つずつ学んでいくためSPAについて体系的に理解できるようになっている。

History APIを使用するのでローカルサーバーの構築が必要。

普通にhistory.pushState()が使用されているがこれはIE9以下では使用できないのでPCサイトで使用するのは控えたほうが良い。

if( window.history && window.history.pushState ){のチェックがコード内にほしいところ。