Angular2入門!ゼロから始めたぼくの勉強方法

Angular2
スポンサーリンク

ぼくは今までAngularJSを使ったことがなかったんです。
でも最近Angular2を使い始めて、なんとなく理解できるようになってきました。

巷では、Angular2が採用している技術は、最先端なものが多くてハードル高いって言われてます。

確かにざっと見るとハードル高いんですよ。

  • Angular2のAPI
  • SystemJS もしくは モジュールバンドラー
  • TypeScript
  • RxJS
  • Zone.js
  • 公式ドキュメントを読み解く英語力

なんかもう、従来のJavaScriptとは違う言語な感じ。

でもね、これ覚えちゃえばトレンド網羅できちゃうから一石二鳥かも!? 
はっきり言って超えられないハードルではないし、もちろんJavaScriptコードも動きますしね。
ぼくは注目すべきフレームワークだと思っています。

あんまり深く考えずに、一緒にやってみましょう!

初めて触った時のぼくのステータス

  • AngularJSは全く触ったことない。
  • Backboneは前に何度も経験アリ。
  • 仕事では主にjQueryがメイン。
  • TypeScriptの知識はなんとなくある。

Angularに関しては、ひよこちゃんでした。

5 MIN QUICKSTART (公式チュートリアル)

まず始めに公式チュートリアルにあるクイックスタートをやったんです。

正直5分では終わらなかったですが、Hello World的な内容です。
全体の雰囲気つかむためにやっておくと理解が早いです。

以前、2015年のアドベントカレンダー用に日本語訳を書いたので、一度読んでみてください。

新しく翻訳記事を書きました。

ちなみにGithubにあるソースコードは他のチュートリアルでも使うのでスターターキットみたいな感じです。

白石さんのデモを試す

このページで紹介されている白石さんのスターターキットをダウンロード・セットアップして、
ページの流れと同じく実際にやってみました。

とにかくわかりやすくて、イベントってこうやって設定するのかとか、テンプレートはこうやって書くのかとか、
内容は入門的なものですぐ理解できるので、ワクワク感とモチベーションが増しましたね。

とにかく試してみて損はないかと!

白石さんが紹介されているスターターキットはこちら

Tour of Heroes(公式チュートリアル)

これも公式チュートリアルなんだけど、Quickstartの次のレベルのもの。

コンポーネントやディレクティブやDI、Routerなど一通りのAPIに触れるので、かなりオススメです!

これをやり終わった時の満足感高かったですね。
ぼくはこの次に、 Http Client について知りたくなりました。

TodoMVCを眺める

Angularを始める時に、@Tkashiro先生から「TodoMVCをやるのがオススメ!」、と助言をもらっていたので、このタイミングで試しました。
ダウンロードして、実際に動かしてみて、コードを眺めました。

ほかのフレームワークと一貫した処理を実装するので、違いがわかりやすいです。

関連書籍で勉強する

なにしろTypeScriptはなんとなく使ったことがある程度だったので、腰を据えて勉強することを誓いました。
すぐに書籍を購入。

この本良かったですよ!言語仕様をこの1冊で網羅できます。
そんなに厚い本ではないですし、サラッと読んでおくだけでもかなり違います。

もうAmazonの在庫がないようなので、セブンネット
や楽天ブックスで買うのをオススメします。

また、2017年1月に待望のAngular書籍が発売されました!

その気になる内容は、初心者にオススメの内容になっています。

・第1章: 基本アーキテクチャ変更に伴うWebアプリ開発の変化の解説
・第2章: 開発言語として使用するTypeScriptとJava/JavaScriptとの違いの説明
・第3章: 最新の開発環境の準備と使用方法の説明
・第4章: Angular2独自の実装技術の解説
・第5章: 開発手順確認のためのアプリ作成のチュートリアル
・第6章: 基本機能理解のためのアプリ作成のチュートリアル
・付録A: 有用なデバッグツール/テストツールの紹介とAngularのコマンドラインオプションなどの説明

チュートリアルが2本用意されているのがありがたいですね。まずは手を動かすことが大事ですからね。
これはぜひゲットして、すぐ手の届くところに置いておきたいです。

もしJavaScript自体に精通していなければ、こちらの記事からJavaScript書籍を選んでみてください。

【関連記事】心を込めて贈る、JavaScript初心者のためのオススメ書籍3選

何か作ってみる (今ココ)

よし、なんか作りましょう! いますぐ作りましょう!

TodoMVCでもいいですし、管理画面でもいいですし、とにかくトライしましょう!

とにかく動くものを作るのが一番理解できます。
何かでハマったら、公式リファレンスかググればなんとかなりますよ!

RxJSの勉強 (今ココ)

あと、今理解できてるか微妙ですがRxJSの勉強もしています。
そんなに理解してなくても動いてしまうので、必要に迫られたら覚えればいいと思います。

Stream, Observer, Observable, Subject など抑えておくと良いと思います。

とにかく触ってみることが第一歩

今回はぼくの勉強方法について紹介しましたが、どうでした?
とにかく触って慣れる!これしか近道はありません

Angular2を使えるようになって、周りの一歩先を行きましょう。

Angular2の技術情報は、一覧ページにまとめています。

スポンサーリンク