【レポート】 ng-kyoto、ng-japan meetup 2019 Spring合同開催！Angular好きが集まる勉強会に参加してきました！ #ng_jp #ng_kyoto

どうも！大阪オフィスの西村祐二です。

2019/5/29(金)にng-kyoto Angular Meetup #10に参加してきました。

この勉強会は東京開催のng-japan meetup 2019 Springとの合同開催となっており、大阪会場と東京会場をビデオ会議ツールでつなぎ中継するというスタイルとなっていました。

勉強会のスタイルとしては Angular Japan User Group代表のlacoさんによるNG-Conf 2019レポート＋東京会場と大阪会場からそれぞれ3件のLTという形の勉強会でした。

つまり、大阪にいながら、東京の発表がきけるなんともお得で素晴らしい勉強会でした。

ちなみにAngular v8がリリースされた日というめでたい日でもありました。

会場

大阪、東京ともにサイボウズさんのオフィスで開催されました。

私は大阪に住んでいるので、大阪オフィスから参加しました。

サイボウズさんのイベントルームの設備がすばらしすぎて大阪会場と東京会場をつないでも音が聞こえずらいや見づらいなどは特になくとても快適でした。 めっちゃくちゃ羨ましい。。

#ng_jp #ng_kyoto 会場準備中です！ pic.twitter.com/ba65vmUmgJ

— ニシえもん (@N372Drag) 2019年5月29日

東京の会場も広くてめっちゃいい感じですね！イベントページの募集人数から想像するに90名は入れる広さみたいです。

#ng_jp 設営中です！本日19時開場！ pic.twitter.com/XktGdIs95K

— 奥野賢太郎 Crescware (@okunokentaro) 2019年5月29日

NG-Conf 2019 レポート

はじめはlacoさんによるNG-Conf 2019レポートでこれからのAngularの方向性や取り組み、最新動向についての話でとても興味深い内容でした。

スライドは埋め込みできなかったので、こちらから確認ください。

ng-confのサイトは↓です
https://www.ng-conf.org/

セッションはほぼすべてYouTubeで公開されています。

https://www.youtube.com/channel/UCm9iiIfgmVODUJxINecHQkA

内容をかいつまんでまとめると

• 10~11月にv9の予定

• Angular v8の目玉機能Differential Loadingについて

  • 必要なブラウザのみES5 BundleをLoadすること制御し、初期ロードがはやくなる
• Angularの今までのターゲットはエンタープライズ向けで堅牢性を重視してたけど、小・中規模向けにも使いやすくしていく方針
• 実験的なプロジェクトが動いている
  • Angular photon
  • ビルドにBazelをつかって高速化
  • Angular Materialを改革（MDC Webを用いたデザインの統一化）

特に印象に残っているのはスライド32ページ目でIvyとDifferential Loadingによってバンドルサイズが14KBまで減る可能性があるという内容の話があり、v9や今後のアップデートが楽しみでなりません。

東京側LT

Our track to Modern Angular

ソラコムのYuta ShimuzuさんのLTはAngularJSからAngularに移行しているお話でAngularJSからAngularとのハイブリッド構成にいたるまでの貴重なお話がきけました。

TypeScriptを導入してから開発速度、質が向上した話、E2EテストツールをCypressにした話、downgradComponentを使ってフリーズする問題が解消した話などどれも貴重なお話でした。

Lesson learned after using Bazel

AngularのCollaboratorになったJia LiさんからBazelに関する内容のLTでした。

Bazelの概念や考え方、動作などデモ交えての発表でした。私には少し難しくて一回チュートリアルをやってから資料を読み直したと思います。

小規模チームにおけるドキュメント駆動開発のすすめ

飯塚航平さんによるLTはドキュメント自動生成するツールを使って海外チームとの連携コストを削減したという内容のLTでした。

ドキュメントの自動生成にCompodocを使っているとのことでした。

コンポーネント、モジュールがどういう関係になっているか見える化してくれるので、とても便利そうです。

私としてもバックエンドをLambdaなどサーバレスアーキテクチャで構築し、フロントエンドもSPAで実装するということが多々あり、ドキュメント類に工数をかけたくないときがありますので試しに使ってみたいと思います。

また、最後にAngularDocのデモもあってとても参考になりました。

大阪側LT

Angular 7から8にあげてみた

ng-kyoto代表のsayanakaさんのLTの内容は社内プロダクトをAngular 7から最新のv8に上げてみたというお話でした。

Angular CLIのng updateコマンドが便利すぎるという話で、メジャーバージョンアップしても、このコマンドで依存関係含めてよしなにアップデートしてくれるという内容でした。

CLIの便利さもAngularの強みだと感じますね。

アップデートの手順やアップデート後のファイル差分についても解説した内容があってとても参考になりました。

今回のアップデートで確認された大きな差分は下記とのことでした。

• polyfill.tsでの変更点
• @ViewChild/@ComponentChildの第２引数が追記されていた（必須になった）

大規模案件にAngularを使ったお話

@s_kozakeさんのLTの内容は Angular + Java Spring Bootで大規模案件と格闘していた話で、大規模ならではの話や課題にどう立ち向かったのかなどの貴重なお話が聞けました。

特にUIにprimeNGを採用した話、タブレットでの挙動の遅さをChangeDetectionStrategy.OnPushでパフォーマンス改善した話などとても参考になりました。

ワンオペアプリでAngularでよかったことベスト5 with Ionic (Angularはいいぞ！)

榊原昌彦さんのLTの内容はアプリを作るとき、運用するときに感じた良かったことをまとめた内容のLTでした。

簡単にまとめると下記のような内容でした。

• ng updateが便利で、バージョンアップが簡単でフレームワークの進化についていきやすい
• Semverでバージョンアップがスケジュールされており、破壊的変更に対する計画がしやすい
  • 破壊的変更が予定される関数などはこちらから確認できます
• 周辺ツールがAll in Oneでどれを選択すれば良いか悩まなくていい（流行り廃りに振り回されない）
• 認証時やAPIコールするときなどHTTP通信するときにインターセプトできるIntercepterが便利
• TypeScriptで堅牢性アップ、型の不一致でコンパイルエラーしてくれて不具合を教えてくれる

Angularってどんな特徴があるのか知りたい人にピッタリな内容でした。また、誰かにAngularをオススメするときはこの内容をもとにして伝えると良さそうだなと思いました。

さいごに

最新の動向であったり、ノウハウが詰まったとても有意義な勉強会でした。

次回は機会があれば登壇してみたいと思います。

誰かの参考になれば幸いです。