「JavaScript エンジニア養成読本」を読みました

先日、この本の著者の一人である @watilde 氏より「JavaScript エンジニア養成読本」を献本していただきましたので、本書の書評をもってお礼の挨拶にかえさせていただきます。

本書は、以下のような制作者を対象にしていると示されています。

  • 複数人で開発するスキルも身につけたい
  • 新しく仕事で JavaScript を使うことになるので、基本的な開発フローについて知っておきたい
  • jQuery を使って動きを変えることはできるけど、最初から JavaScript を書いたことがない
  • JavaScript を書くことはできるけど、自分のやり方が効率的か不安
  • 複数ページから使われる JavaScript をどう書いてよいかわからない

([巻頭特集] 第1章 JavaScript を書こうより抜粋)


コードレビューの習慣が無かったり、基本的に一人で作業が完結するので今は問題ないけれど、今のやり方を今後も続けていくのは不安…という方にとっては、まさに助け舟となるような本になるのではないかと思います。

本書は、近年の Webアプリ開発の定番技術となっている「Backbone.js, CoffeeScript, Grunt」を取り上げ、4つの特集、4〜8個の章によって構成され、実際に最前線で開発を行っているエンジニアの方々によって書きあげられています。

以下が目次となります。

目次

[巻頭特集] JavaScriptによる開発の現場
〜10分でわかる最新動向と歴史

  1. JavaScriptを書こう! 〜本書の対象読者と前提知識
  2. JavaScriptの歴史 〜AjaxHTML5ECMAScript
  3. JavaScriptはどこで使われているか 〜より広範囲に多様化する利用シーン
  4. 現場で必要なJavaScriptの知識  〜MVCフレームワーク/AltJS/タスクランナー
  5. JavaScript開発に必須のツール  〜これだけは押さえておきたい

[特集1] 【 複雑化するコードを構造化!】Backbone.js で学ぶ MVC フレームワーク[実践] 入門

  1. クライアントサイドフレームワークが必要な理由
    jQueryによる開発を構造化するBackbone.js
  2. モデル実装入門
    〜Backbone.Modelによるモデルの定義,属性値の設定/取得/検証,イベント処理
  3. モデル実装入門
    〜Backbone.Modelによるモデルの定義,属性値の設定/取得/検証,イベント処理
  4. ビュー,コントローラの実装
    〜Backbone.Viewによるモデルデータの表示,elプロパティ,DOMイベント
  5. ビュー,コントローラの実装
    〜Backbone.Viewによるモデルデータの表示,elプロパティ,DOMイベント
  6. [実践編]モデルを定義し,メモの一覧を表示する
    〜メモ帳アプリケーションの作成①
    • コラム:AngularJSとBackbone.jsどちらを使うのがよい?
  7. [実践編]メモの新規作成,削除,編集を行う
    〜メモ帳アプリケーションの作成②
  8. [実践編]検索機能を追加する
    〜メモ帳アプリケーションの作成③

[特集2][シングルページ時代の大規模開発を支えるAltJS] CoffeeScript入門
〜高品質なアプリケーション開発を実現

  1. CoffeeScriptファーストステップ  〜基本機能の紹介と開発環境の準備
  2. CoffeeScript文法入門  〜簡易な文法と一貫したコーディングスタイルを理解しよう
  3. 実践デザインパターン  〜CoffeeScriptでわかりやすいコードを書くために
  4. 開発環境の整理  〜便利なツールと代表的なディレクトリ構造
  5. APPENDIX :最適なAltJSの選び方[TypeScript vs. CoffeeScript]  〜そもそもなぜAltJSが普及したのか

[特集3]開発現場を支えるタスクランナー] Grunt活用入門
〜開発効率化の必須アイテム

  1. 開発の「作業」に欠かせないタスクランナー入門 〜Gruntが選ばれる理由
  2. 環境構築とタスクの記述  〜Gruntを使ってみよう
  3. Grunt プラグインの活用 〜CoffeeScript/ファイル結合/構文チェック/圧縮
  4. ケーススタディで学ぶタスクの追加と実行  〜Gruntfile.jsを書いてみよう
  5. 注目のタスクランナー gulp.js  〜新生,gulp.jsを選ぶべき場面

書評

以下でそれぞれの特集ごとに書評を書かせていただきました。


[巻頭特集] JavaScriptによる開発の現場

巻頭特集では、JavaScript とはそもそもなんなのか、これから開発の現場においてこの言事どのように向き合っていけばよいのかを歴史、利用シーン、取り巻く開発ツール、デバッグの方法を通して学ぶことができます。


[特集1] 【 複雑化するコードを構造化!】Backbone.js で学ぶ MVC フレームワーク[実践] 入門

この特集ではクライアント JavaScript フレームワーク Backbone.js について, Backbone.js を通して Web アプリケーションにおけるフレームワークの必要性と Backbone.js で採用されている MVC というデザインパターンについて学習していき、後半の章では Backbone.js を利用してメモ帳アプリケーションを作成します。

jQuery は使えるようになったし、作りたいものも作れるようになったけど、もっと綺麗に書きたい、メンテナンス性の高いコードを書きたいという人が、フレームワークを勉強しはじめるにはぴったりの内容になっているのではないかと思います。

また、当特集の 5章と6章の間では今話題のフレームワーク AngularJS との違いをサンプルコードや長所短所などを通してみることができますので、興味があれば章内で作成したメモアプリを AngularJS でも作成して、自身で違いを実感してみるのも面白いかもしれません。


[特集2][シングルページ時代の大規模開発を支えるAltJS] CoffeeScript入門~高品質なアプリケーション開発を実現

特集2 では、AltJS のひとつである CoffeeScript の入門特集が組まれています。

前半の章では CoffeeScript で利用できる基本文法一覧が掲載されています。

各文法のセクション中では、実務経験を踏まえた考察を見ることができるので、自由度の高い CoffeeScript の扱いに悩み始めた技術者が改めて CoffeeScript と向き合い、学び直すのにもよい特集となっています。

それぞれの文法のコード例では、CoffeeScript で書いたものとコンパイルして吐出される JavaScript を比較することができるので、吐出されるコードを意識しながら学習を行うことができます。

後半の章は CoffeeScript をより「わかりやすいコード」を書くための「実践編」な章編成となっています。

第三章では、クラス内部での => を徹底し、this の拘束する理由や継承の判定ミックスインなど、デザインパターンを使ってコードの体裁を保つ例が掲載されています。

この辺りのことは普段の作業で違和感を感じていても、知らないとその場しのぎのコードで対応することも多いのでないかと思います。 ある程度 CoffeeScript を書くようになると生まれてくる課題がここで解決できるかもしれません。

現在色々な AltJS が出ていて、何から手をつけたらいいか悩んでいる人、今使用している AltJS に疑問を持っている方は Appendix の最適な AltJS の選び方を読んでみると良いかもしれません。

これだけ AltJS が表舞台にでてきた背景や、同じ AltJS である TypeScript との違い、実案件での使い分けの基準などが書かれています。自分が利用している AltJS がプロジェクトで利用するのに適切なものなのか、改めて考えることができます。


[特集3]開発現場を支えるタスクランナー] Grunt活用入門~開発効率化の必須アイテム

特集3では、ここ1、2年でフロントエンド開発の定番ツールとなったタスクランナーのひとつである Grunt の特集となっています。

第一章では なぜ今 Grunt が利用されているのかを、タスクランナーの歴史と経緯から紐解いていきます。Grunt の今後のロードマップ情報も書かれていますので、チェックしておくといいかもしれませんね。

第二章からは実際に利用するための環境構築の作業手順が書かれています。 インストーラーなどで一発!…というわけにはいかないので、ターミナルなどを使ってコマンドを打っていくことになります。

一つ一つのコマンド実行の後に何が起こるのかそれぞれの実行時に注意する点などが書かれているので、 コマンドを打つのに慣れていない方でも Grunt を利用するための環境構築を安心して行えるようになっています。

第三章に入ると実際に Grunt プラグインを活用して、CoffeeScriptコンパイル、複数ファイルの結合、構文チェック、コードの圧縮を行っていきます。

それぞれのプラグインの内容だけでなく設定できるオプション一つ一つの解説があるので、これどういうオプションだっけ…といった時の教科書としても利用できるようになっています。

前章で学んだ CoffeeScript のコードを使って、Grunt を実行できることを確認し、その後オプションを変更しながら出力される結果を比較してみたりしていくとより理解が深まるのではないかと思います。

Appendix では Grunt に代わるタスクランナーになるのではないかと近年人気が急上昇している gulp.js について取り上げられています。

gulp.js の Grunt より優れている点、インストール、タスクの作成方法、gulp.js に移行すべきなのかが書かれています。

これからタスクランナーを導入しようとしているけど Grunt か gulp.js で迷っている方や, gulp.js の名前は聞くけど今後のプロジェクトは gulp.js で運用していったほうがいいのか... などで迷っている方などは、Appendix を読んでメリット・デメリットを理解した上で、プロジェクトに利用するタスクランナーの選択するとよいのではないでしょうか。


まとめ

ここ最近「養成読本シリーズ」に限らず、「考えて書く」「考えて作る」ためのテーマを取り上げた技術本が多く出版されているような気がします。

これは、フロントエンドの技術者が「作れる」ことを重視されていた時代から、「制作物の保守性」や「チーム全体の効率」が意識されはじめ、重要視されるように変化してきたことと、技術者として最低限求められるスキルの基準が底上げされているということがWeb制作会社全体を通して見ても言えるようになってきているのではないかと思います。

JavaScript を書いている方はもちろん、デザイナーさんやディレクターさんなど直接コードを書かない方へ向けて、JavaScript を使った開発の「」をチーム全体で共有するのにも最適な一冊になることでしょう。


今回紹介させていただいた書籍

JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] (Software Design plus)

JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] (Software Design plus)