Jump to the content

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

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の技術情報は、一覧ページにまとめています。

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×