[aside type=”boader”]
この記事は内容が古くなっています。
2018/01/16現在(v5時点)のAngular入門の最適な方法は、ぼくが熟考を重ねて作成したはじめてのAngular入門コースを受講することです。
このページ以上に効率的に入門できるので、ぜひ受講を検討してみてください!
そして朗報です!
数量限定のスペシャルクーポンを用意しました。
動画コンテンツで効率的に学習してみてはいかがでしょうか。
次のリンクからのみ有効ですので、お早めにどうぞ。
【クーポン適用】【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築
[/aside]
ぼくは今まで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はなんとなく使ったことがある程度だったので、腰を据えて勉強することを誓いました。
すぐに書籍を購入。
JavaScriptプログラマのための 実践的TypeScript入門
この本良かったですよ!言語仕様をこの1冊で網羅できます。
そんなに厚い本ではないですし、サラッと読んでおくだけでもかなり違います。
ただ、もう古いのでどこにも在庫がない。。
そこで、2017年6月に出たばかりのぼくが崇拝している山田祥寛さんのTypeScriptのkindle本。
お手頃な値段の割に、TypeScriptの全てを網羅されているので必見の価値アリです。
これが現時点でTypeScriptの最新情報じゃないでしょうか!!
また、Angular書籍はいくつか出ていますが、中でもこちらが良書です!
本書は、JavaScriptの定番SPA開発フレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入といったAngularを理解するための基本要素をはじめ、ディレクティブ/パイプ、フォーム、ルーティング、モジュール/コンポーネントの技術解説、ディレクティブ/パイプ/サービスの自作やテストなどの応用的なテーマまでを網羅。また、Angular 4に対応し、5以降のアップグレードにも留意した解説を行っています。Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!
現時点(2017年8月時点)での最新バージョンが解説されています。(Angular4)
こちらも山田祥寛さんの本なので、買って間違いありません!
これはぜひゲットして、すぐ手の届くところに置いておいて欲しい。そのくらいの良書です。
もしJavaScript自体に精通していなければ、こちらの記事からJavaScript書籍を選んでみてください。
[kanren postid=”499″]
何か作ってみる (今ココ)
よし、なんか作りましょう! いますぐ作りましょう!
TodoMVCでもいいですし、管理画面でもいいですし、とにかくトライしましょう!
とにかく動くものを作るのが一番理解できます。
何かでハマったら、公式リファレンスかググればなんとかなりますよ!
RxJSの勉強 (今ココ)
あと、今理解できてるか微妙ですがRxJSの勉強もしています。
そんなに理解してなくても動いてしまうので、必要に迫られたら覚えればいいと思います。
Stream
, Observer
, Observable
, Subject
など抑えておくと良いと思います。
とにかく触ってみることが第一歩
今回はぼくの勉強方法について紹介しましたが、どうでした?
とにかく触って慣れる!これしか近道はありません。
Angular2を使えるようになって、周りの一歩先を行きましょう。
[aside]
Angularの技術情報は、一覧ページにまとめています。
Angular 記事一覧
[/aside]