書籍「AngularJSリファレンス」の感想とおすすめの活用方法

書籍「[AngularJSリファレンス] (http://www.impressjapan.jp/books/1114101042)」を@zoetroさんから献本いただきました。ありがとうございます。
そこで、御礼ととも個人的な感想を書いておきたいと思います。

本書を読む前

まず、この本を読む前の私のAngularJSの経験をまとめておきます。

• jQuery、Knockout.jsなどでのJavaScript開発経験あり
• AngularJSを最近の開発で利用
  • AngularJSのcode schoolで基礎を把握
  • 後は公式サイトを中心にネット記事から学ぶ

JavaScriptの知識はあるという状態で、AngularJSについては書籍は利用せずに公式サイトを中心にオンラインの記事で勉強していました。
英語が苦手なため、公式サイトもなんなくの理解になっている面があり、どうにか使えるけれど詳細が詰め切れていないという知識レベルになっていました。

本書の全体的な感想

本書の感想をまとめていきますが、まず最初に気になった欠点を書いておきます。
本書は、誤字脱字や文章表現がわかりにくい箇所が多くあるというのが残念でした。
また、説明もなく後半で解説する内容がサンプルなどに含まれることが多いので、頭から順に読み込もうとするのは辛いのではという印象があります。

そのため、本書を読むには最初は分からないところは置いておいて、とりあえず終わりまで読み切った方がよいかと思います。

内容については、「リファレンス」とタイトルにありますが、あまりリファレンス感はありません。
最初の４章までは標準機能を一通り説明しているのでリファレンスっぽいですが、この本の真髄は後半の独自のサービス、ディレクティブの作成方法などの
実践的なサンプルが紹介されている部分ではないかと思います。

章別の感想

実際にどのような事柄が身に付くのかを紹介できればと思い、章別に感想をまとめておきます。

Chapter 01　基本機能の概要
Chapter 02　ビルトインディレクティブ
Chapter 03　フィルター・サービス・フォームバリデーション
Chapter 04　グローバルAPI

これらの章ではAngularJSの標準機能を一通り押さえてくれていますので実際に開発をする前に目を通しておくと大きな助けになると思います。
私自身、知らなかったものが多く、 先にng-cloakを知っていれば無駄な機能を作らなくてよかった、underscore.jsとの併用構成にしたけれど不要だったのでは、などと思っています。

ただし、個々の説明は概要程度の内容なので、詳細は英語の公式サイトを参照するのがよいと思います。

Chapter 05　モジュールとDI
Chapter 06　スコープとコントローラ
Chapter 07　ルーティングと通信

AngularJSでのDI機能はとても便利なのですが、DI用にサービスを登録する方法であるvalue、constant、service、factory、providerなどの使い分けは公式サイトを読んだ限りではいまいち理解できていませんでした。
上記の章ではまさにそのことを説明していて、今後の実装において汎用的な部品の作り方を知ることができました。

Chapter 08　カスタムフィルター
Chapter 09　カスタムサービス
Chapter 10　カスタムディレクティブ

私自身の開発でも独自のフィルタやディレクティブを作成していましたが、いまいち作り方の全容が分からず単純な機能しか実現できていませんでした。
上記の章では、それぞれの機能の実践的な活用方法例が示されており、本来のフィルタやディレクティブの真価を知ることができました。

Chapter 11　テスト

テスト関連はAngularJS公式サイトそのものではあまり記載がなく、KarmaなりProtractorなりのそれぞれの公式サイトを調べる必要がありました。
本章では、テストで使えるヘルパーメソッドを一覧で整理してくれているので、
それだけでも助かります。
また、独自のフィルタやディレクティブなどの実際のテスト方法は、実践するにあたって非常に参考になります。

Chapter 12　セキュリティ

AngularJSは、最初から色々なセキュリティ対策が組み込まれているようです。
これらの機能は裏側で作用しているものであるため、なかなか意識的に調べようとは思わない事柄だと思います。
そのため、開発を進める中でできると思ったことができない自体に突然突き当たり、それがセキュリティ対策のブロックであることに後々に気づくということになるような気がします。
本章の内容を先に頭に入れておくと、こういったハマるポイントを回避できるのではないかと思います。

Chapter 13 ツール

本章で紹介されているAngularJSの便利な共有モジュールやお助けツールは、ぜひにも開発で使っていきたいところです。
先に知っておくことで、無駄に機能を自作することなく開発を進めることができるのではないかと思います。

まとめ

AngularJSは公式サイトのドキュメントが結構充実しているプロダクトだと思います。
そのため、下手にネット上で調べるよりは公式サイトを読んだ方がよいように思います。
しかし、公式の文書の内容は機能の定義ばかりが詳しく、逆にサンプルが簡易すぎるというような内容であるため、実践的な使い方がいまいち理解できませんでした。
（私が英語が苦手で読解できていないからというのもあると思いますが）
本書では、個々の機能についての実践的な使い方が示されており、ちょうど不足していた部分を埋めることができました。

なお、本書はJavaScriptの知識があることが前提になっています。
また入門本ではないため段階的にAngularJSを身につけられる構成にはなっていませんので、ある程度はAngularJSを知っている方が読みやすいと思います。

そういったことを踏まえると、以下のような人には本書を一読することをお勧めします。

• 元々JavaScriptの開発を行っていて、次にAngularJSを使うことを検討している
• そして、基礎知識としてAngularJSを勉強したところである
• そろそろ実際の開発に取り入れていこうとしている

全体的に、文章や章立てが荒いという印象を受けますが、一読しておくことで得るものは多くあるかと思います。

おすすめのAngularJS学習方法

最後におまけとして、現時点で私が考えるAngularJSの学習方法を整理してみたいと思います。

Step.1 Code Schoolを一通りやってみてAngularJSの基礎を学ぶ

• Shaping up with Angular.js
  http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

AngularJSが公式で用意しているオンラインのe-learning教材です。
宝石を販売するECサイトの構築を例題として、動画による機能の説明と実際のWeb上でのコーディング問題を繰り返すことでAngularJSの使い方を身につけることができます。
全編英語ですが、JavaScriptのコードが読めれば何となく何がしたいのかは分かると思います。

Step.2 yeomanでangularjsプロジェクトの初期構成を作ってみて
必要なファイル構成や初期のテンプレートを把握する

• yeoman/generator-angular
  https://github.com/yeoman/generator-angular

コードのテンプレート構成を生成してくれるyeomanにはAngularJSで作るSPAサイトのテンプレートが登録されています。
これで生成されるプロジェクトを見てみることで、ファイル構成や設定ファイルの内容などを把握することができるかと思います。
このテンプレートをそのまま使わなくても、AngularJSの各機能の分け方や、karma、jshintなどの組み込み方などは参考になります。

Step.3 本書 AngularJSリファレンスを読む

ここまでのAngularJSの基礎的な知識があれば、本書はとりあえず読み切れるかと思います。
分からないところが残ったとしても、後の実践の中で気づいたときに読み返すと理解できるようになるでしょう。
実際に開発をする前に本書を読んでおくことで、色々な点がスムーズに解決できると思います。

Step.4　実践

これ以降は、実践の中でぶつかったことを適宜調べつつ進めることになると思います。
以下のようなところを中心に調べるとよいかと思います。

• AngularJS本家サイトを参照する

  • AngularJS — Superheroic JavaScript MVW Framework
    https://angularjs.org/
  • AngularJS 1.2 日本語リファレンス | js STUDIO
    http://js.studio-kingdom.com/angularjs

  本家を日本語化していただいているサイトがあります。
  ですが、個人的には先に本家の方を見に行くようにしています。
  この日本語リファレンスのことではないですが、どうしても日本語版だと訳されていない箇所があったり、訳し方でわかりにくくなっていることもあるので。

• AngularJS (Tutorial)
  https://docs.angularjs.org/tutorial

  公式のチュートリアルです。英語である上に解説よりもサンプルコートの例示がメインのような感じがあります。
  章ごとに機能を拡張していく形式で、テストコードも同時作っているのでテストの書き方など参考になります。

• QiitaなどでAngularJS関連記事を読む
  @zoetroさんが色々とAngularJSネタを投稿されているので目を通しておくとよいと思います。

その他

また、私はあまり利用していないので上記にあげませんでしたが、以下のようなサイトも参考になるかと思います。

• AngularJS入門 (全12回) - プログラミングならドットインストール
  http://dotinstall.com/lessons/basic_angularjs

追記: (2014/09/16 10:30) 読むのに必要な時間

読むのにかかる時間を書き忘れていたので追記します。
私はこの本を、期間としては一週間、実際の時間としては10時間ぐらいで読み終わりました。
事前に開発で使っており、大まかなことは把握していたので早く読めた方だと思います。
ですが、初めてAngularJSを始める人でも、そんなにかからずに読めるのではないかと思います。