Jump to the content

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

(Updated: ) 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

    ×