松本ぽんたのITブログ

入社4年目のIT社員のしがないブログ

Angularお勉強 アプリのアップデートと今後について

Angular7.0へのアップデート!

チュートリアルをやっているうちにAngularのバージョンが6.1から7.0に上がってしまった!!(驚愕)
Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

いや僕が更新おせーよってだけなんですが・・ていうかいつまでチュートリアルやってんの?っていう・・・
チュートリアル自体は先行してほぼ全てやったのだけど、記事に出来ていなかった
というかAngularは日本語の翻訳サイトもあるし公式のドキュメントも充実してるしで、
最初のプロジェクト構成とかはともかくチュートリアルの内容を記事にする意味とは?みたいな疑問と戦ってました。。

Angular7.0について

詳しくはリンク先にいってみてもらえばいいのだけど、気になった変更は下記

Angular Material Design

Material Designは興味ある方多いのでは?と思いますが、Angularで利用した場合に細かい表示の仕方等を吸収したようです。
f:id:ponta-matumoto:20181027095640j:plain

仮想スクロールとドラッグ&ドロップ

これもリンク先見てもらえば一発ですが凄いですね!(わかってない)
仮想スクロールはスクロール状態に合わせてDOMが動的に変更されているので、軽い!とかそういうこと?
ただこういうDOM制御はテスト難しくなるのでは・・・?と一抹の不安が。。
僕は仕事ではSlickGridのような動的グリッドを触ってますが、
こういうのってユーザ体験は良いと思うものの、ちょくちょく開発に縛りとして影響すると思ったり。。

ドラッグ&ドロップはパッと見もかっこいいしいいと思う!

プロジェクトのアップデート

といってもチュートリアルプログラムをアップデートするだけなので、普通に開発している方の参考には1ミリもならないと思いますが。。
まずバージョンを確認する
f:id:ponta-matumoto:20181027101037j:plain

次にng updateで更新を確認する
f:id:ponta-matumoto:20181027101258j:plain

僕の場合6.1.2がすでに入っているので、特に考えることはなさそう。
(C:\とか見えてるのは良いのか悪いのか・・)
というわけでng update --allをを実行するとプロジェクトのアップデートが始まる
アップデートは10分くらいかかってコアライブラリのバージョンとかが更新されている
更新後ng serveでアプリが動くことが確認できた

またコマンドプロンプトからng versionでCLIのバージョンを確認すると、ちゃんと7.0.2に上がっていることが確認できる
f:id:ponta-matumoto:20181027102117j:plain

補足

プロジェクトのバージョンを上げた一方で、npm list -gでグローバルにインストールされているAngularCLIのバージョンを確認すると6.1.2のままだったりする
つまりng new とかで新しく作った場合は6.1.2ができるってこと?と思って試してみたところ案の定(というか当たり前か)古いバージョンでプログラムができたので、新規に作る場合は注意が必要

npmの方でグローバルにインストールしたパッケージのバージョンを上げる
この辺のコマンドを使って既存のパッケージの確認

>npm list -g --depth=0
>npm outdated -g

Package Current Wanted Latest
@angular/cli 6.1.2 6.2.6 7.0.3

Latestは7.0.3だが、Wantedが6.2.6なのでnpm updateだと6.2.6までしか上がってくれない
今回は7.0.3を使いたいので、npm install -g @angular/cli@latestを実行してバージョンを上げる
実行後エラーがなければちゃんとバージョンが上がっているハズ

✖ npm update -g @angular/cli@latest
○ npm install -g @angular/cli@latest

今後のブログ更新について

Angularのチュートリアルを進めてて、思った以上に公式のドキュメントが詳しいので、
チュートリアルをなぞるより、個人的にポイントと思ったところに絞って更新していきたい
もうちょっと更新頻度あげねば・・