先日、UdemyのAngular講座「はじめてのAngular入門実践シングルページアプリケーション（SPA）構築」を修了しました。

日本語で見れるAngular動画講座は少ないので、動画でAngularを学びたい！という方にとってまず選択肢になるかと思います。

こちらの講座ですが、2019/05/18時点で対応バージョンがAngular v5ということもあり少々情報が古い箇所が何点かありましたので、現行バージョン（Angular v7, Angular CLI v7）との比較を記録しておきたいと思います。

ブログラミングに入門したばかりだと、少しでも違うところがあるとどうしたらよいかわからない場合もあるかと思います。そんな方の参考になれば幸いです

バージョン

「はじめてのAngular入門実践シングルページアプリケーション（SPA）構築」（以下Angular講座）

Angular (5.0.2)
Angular CLI (1.5.0)
Node.js (8.8.1)

筆者

Angular (7.2.15)
Angular CLI (7.3.9)
Node.js (10.15.0)

Angular cli

ng new でルーティングとCSSフォーマットが聞かれるようになった。

$ng new <ProjectName>
Would you like to add Angular routing? (y/N)
Which stylesheet format would you like to use? 
  CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]

新しくプロジェクトを作成するさいne new <プロジェクト名>コマンドを実行すると、「Angularルーターを使用するか」と「CSSフォーマット」をあらかじめ選べるようになりました。

ルーター

まずルーティングはデフォルトではNoになっています。ここをYesにすると予め@angular/routerがセットアップされます。

最初デフォルトでrouterが含まれてればいいのになんでだろうなと思ったんですが、例えばOnsenUIやIonicなどのUIライブラリを使うと、それぞれ独自のルーターがあるからなんですね。そのためルーティングを必要としても@angular/routerを使わない可能性があります。

CSSフォーマットの種類

CSSフォーマットの種類は「CSS、SCSS、Sass、Less、Stylus」の５種類から選べるようになっています。

Angular講座上ではCSSは基本コピペということもあり、進める上では特に利点はありませんが、自分でカスタマイズしてみようと思う場合、特にSCSSが使えると楽でした。

設定ファイル名が変わってる

.angular-cli.jsonからangular.jsonに変わっています。

Guardの生成時、何のメソッド(interface)を一緒に生成するか聞かれるようになった。

$ng generate <Name>

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ CanActivate
 ◯ CanActivateChild
 ◯ CanLoad

CanActive、CanActiveChild、CanDeactive の3つから複数選択可で、生成すると選択したメソッドのテンプレートを予め作ってくれます。

Bootstrap

bootstrapをインストールする際、Angular講座のコマンドだとうまくいきませんでした。調べた所こちらのサイトの方法ですとうまく反映されました。

Angular6でBootstrap4を使ってみる

詳しくはぜひこちらをご覧ください。とてもわかりやすくまとめてくださっています。

こちらではAngular講座との差異だけを簡単にまとめたいと思います。

bootstrapのインストール

Angular講座だとbootstrap@next --saveでしたがこれだとうまくいきませんでした。

npm install --save bootstrap && npm install --save jquery popper.js

bootstrapとjQuaryもインストールする形ですが、こちらですとうまく反映されるようになりました。

bootstrapのcssファイルの設定をbuild用とtest用２箇所に書く

bootstrapのcssファイルを設定する場所が２箇所に増えているので注意。
デフォルトのroot設定が変更されている
Angular講座だと"src"。ver7時点で""。

firebase

パッケージ名の変更

firebaseのパッケージ名がangularfire2から@angular/fireに変更されてます。

リージョンの選択が増えている

firabaseでプロジェクトの初期設定をする際、リージョンが選べるようになっています。デフォルトのままでも問題ありませんが、asia-northeastが東京リージョンなので通信速度のためにもこちらに変更するのがおすすめです。

その他細かいUI

firebaseはバージョンアップが頻繁に行われているため、細かいUIはかなり違っていると思いますが、基本的には見た目しか変わっていないと考えて大丈夫かと思います。

RxJS(ver6)

Angular講座を進めている時こちらの変更は特にハマりました。Observableの使い方がRxJSのv6から色々変わっています。RxJSの変更はこちらの記事を特に参考にさせていただきました。

RxJS v5を小さくバンドルする方法。import文の書き方で容量が変わる(v6の書き方も紹介)

importの書き方による容量の違いや、各バージョンごとの細かい仕様の変更が分かりやすくまとまっているのでぜひご覧ください。

インポート方法の変更

オペレータを使用する際は、Observableをインポートするだけではなくオペレータ自身も別個インポートしなければいけません。
例えばmapを使いたい場合、import {map} from 'rxjs/operators';のように書く必要があります。

pipe式

こちらもAngular講座との大きな変更点です。
Angular講座ではmapなどのオペレータをメソッドチェーンのように使えましたが、RxJS(v6)からpipe式を使用するように変更されています。

auth.guard.ts(Angular講座レクチャー59)

//Observable型に直接オペレーター
return this.afAuth.authState.map(user => {処理});

auth.guard.ts(修正)

//pipe()の中にオペレーター
return this.afAuth.authState.pipe(map(user => {処理}));

筆者はもともとRubyから始めたのもあり、メソッドチェーン方式の方が見慣れているんですが、pipe式の方が全体としては見通しがよくなるかも知れません。

まとめ

Angularは学習コストが高い＝入門の時点である程度他の言語での経験値がある場合(プログラミング経験者)が多いのではないかと思います。

上記の違いは小さいものですが、完全な入門者にとって教科書に載ってない事態はとても怖いものです。そんな方の助けになれば幸いです。

Angularの学習コストが高いという前評判に食わず嫌いをしていましたが、いざやってみると意外と他のフレームワークと変わらず、逆にTypeScriptの安心感やフルスタックゆえの技術選定コストの低さに好感を持ちました。

UdemyのAngular講座の感想

テキストの方がやりやすいところは正直多いかなぁとは思います。自分のペースで進められますし、見返しもしやすい。他にもAngularの公式チュートリアルや、Qiitaでの入門記事などもありますし。

その上でAngular講座で良かった所は、講師の方が意外と間違えるところです:)

テキストになると正しい結果だけしか残されませんが、動画でコーディングする過程が見れると、Typoしやすいところや、忘れがちなimport、小さなエラーの原因などを知れ、とてもためになりました。

Udemy「はじめてのAngular入門」 現行バージョン(Angular v7)との違い