2019/01/23【実践技術書】ブレイクスルー JavaScript
初心者から次のステップへ進むために、オブジェクト指向やSPAのことが書かれています。 再利用性、保守性、拡張性を備えたプログラムを書くためのコツを学ぶことができます。
言語の基礎的なことはわかっている前提で、実務で使うような実装方法を紹介しています。
jQueryを使ってDOMの操作くらいならできるようになりました、くらいの人が次のステップへ進むために良さそうです。オブジェクト指向などについて知識がまったくないと、ちょっと難しいですが取っ掛かりとして読むのも良さそうです。
本の概要
「フロントエンドエンジニアとして超えるべき5つの壁」として5つの章に別れています。保守性や拡張性、再利用性などを高めるための実装方法のコツなどを知ることができ、一つレベルアップできると思います。
基本的にどのサンプルもソースコードの量はそれほど多くないです。書くのも読むのも比較的すぐにできると思います。
-
オブジェクト指向
プロトタイプ、クロージャ、オブザーバ、thisの仕様と使い方を学ぶことができます。 すぐに使いこなせるものではないと思うので、できるとこから利用していくのがいいです。他の人のプログラミングを読むときの助けになることもあると思います。
リアルタイムで文字数と必須入力のバリデーションを行うフォームを練習で作ります。
-
UI・インタラクティブ表現
イベント処理についての勉強です 画像をモーダルで表示するプログラムを作りながら、clickイベントなどの実装を行います。
-
グラフィック表現
Canvasを使っての表現を練習します。あまり使う機会は無い？でしょうか。基本的な使い方を知っておくといざというときに困らないので、さくっと学んでおくのがいいです。パーティクルシステムという、ぼやっとした円が動き回って重なったりするやつを実装します。
-
Ajax・API連携・データ検索
Ajaxでデータを取得して、取得したデータに対して加工を行い、表示します。 PromiseやDeferredなどを利用して、非同期通信を実装します。この辺はよく使うものなのでしっかり身につけたいです。
Underscore.jsを利用します。何かよくわからず使っていることがあるので、この機会に概要だけでも確認していきたいです。
フィルタ・ソート機能付きの表を作成します。 この章からサーバを用意しないとプログラムが正常に動作しません。XAMPPなどのローカルサーバを用意するとか、Github pagesを使ってもいいと思います。
-
シングルページアプリケーション
SPAのページを作成します。ライブラリなどは使わずに実装することで概念を学ぶことができます。 URLハンドリングや、ページ切替時のアニメーションなども実装します。
主にルーターと呼ばれるようなURL管理を行う機能の実装です。
本の特徴
入門書ではないので、ある程度理解している人向けです。JavaScript、jQueryを使ってDOMの操作ができるようになった！くらいの人なら、ちょうど得られる知見は多いと思います。
コードの説明はちょっとだけ足りないことなどがあります。サンプルコードをダウンロードしておき、詰まったら確認しながら進むのがよいです。 サンプルコードにコメントが無いので、ちょっとわかりにくいと思いました。コメントがあったらもっと良かったです。
オブジェクト指向の教科書でもあるので、考え方に全く触れたことのない人にはちょっと難しいかもしれません。ですが最初はそんなものなのでとりあえず進むのがいいと思います。詳細なオブジェクト指向の考え方やデザインパターンは別の本で調べてみることをおすすめします。
フロントエンドのソースコードは複雑になりがちです。非同期でリクエストを投げたりなど、処理自体も複雑になってきているので、そこを解決するような実装方法を紹介しています。 再利用性や保守性、拡張性を考慮したソースコードを書けるようになるといいことばかりです。あとから修正や改修を行う人または未来の自分のためになるので、身につけておくと良いです。
おわりに
ある程度フロントエンドの実装ができるようになった人で、一度立ち止まってオブジェクト指向の考え方を身に着けたい人などにおすすめです。自分の書いたソースは拡張性、保守性、再利用性が悪いなあと感じたら、一度読んでみるといいです。周りからも一目置かれるのではないでしょうか。
Ajaxによる非同期通信なども学べるので、WEBフロントエンドで必要になる知識の概要は知ることができます。より詳細な実装は、気に入ったWEBサイトなどを見て学ぶのがいいと思います。オブジェクト指向は意識的につかていかないと身につかないと思うので、初心者こど早めに知っておきたい情報かなと思います。
