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

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

[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はなんとなく使ったことがある程度だったので、腰を据えて勉強することを誓いました。
すぐに書籍を購入。

この本良かったですよ!言語仕様をこの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]

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.