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

Angular2

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

ぼくは今まで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冊で網羅できます。
そんなに厚い本ではないですし、サラッと読んでおくだけでもかなり違います。
ただ、もう古いのでどこにも在庫がない。。

そこで、2017年6月に出たばかりのぼくが崇拝している山田祥寛さんのTypeScriptのkindle本。
お手頃な値段の割に、TypeScriptの全てを網羅されているので必見の価値アリです。
これが現時点でTypeScriptの最新情報じゃないでしょうか!!

また、Angular書籍はいくつか出ていますが、中でもこちらが良書です!

本書は、JavaScriptの定番SPA開発フレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入といったAngularを理解するための基本要素をはじめ、ディレクティブ/パイプ、フォーム、ルーティング、モジュール/コンポーネントの技術解説、ディレクティブ/パイプ/サービスの自作やテストなどの応用的なテーマまでを網羅。また、Angular 4に対応し、5以降のアップグレードにも留意した解説を行っています。Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

現時点(2017年8月時点)での最新バージョンが解説されています。(Angular4)
こちらも山田祥寛さんの本なので、買って間違いありません!
これはぜひゲットして、すぐ手の届くところに置いておいて欲しい。そのくらいの良書です。

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

JavaScript初心者に心を込めて贈る、オススメ書籍3選

2016.12.28

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

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

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

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

RxJSの勉強 (今ココ)

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

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

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

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

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

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


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。