ng-japan meetup 2019 Spring の発表資料です。

1. Our track to
Modern
Angular
ng-japan meetup 2019 Spring LT
Yuta Shimizu @pachirel

2. Angular 8.0 Release
🎉 🎉 🎉

3. Angular に関わっているみなさま
おめでとうございます！
＆
ありがとうございます！

4. 私自身は
何も貢献できていませんが
Angular が前に進み続けてい
ることに勇気づけられていま
す

5. なぜなら・・・
Angular ユーザーだからです！

6. 自己紹介
Yuta Shimizu @pachirel
Software Engineer @
• AngularJS / Angular / Node.js /
TypeScript
• Ruby on Rails / AWS etc.
• Hobby: Splatoon, Board games
• Challenge: Triathlon
• Community: Kawasaki.rb

7. SORACOMは
サービスローンチ時から
Angular を使っています
kintone も使っています！！！
https://weekly.ascii.jp/elem/000/000/411/411367/

8. ごめんなさい嘘です

9. SORACOMは
サービスローンチ時から
AngularJS を使っています

10. ということで・・
これからする話は
Angular で開発している皆様に
は
役にたちません

12. 当時の構成
• Angular 1.2
• pure JS
• bootstrap
• Bower でパッケージ管理
• Grunt でビルド＆デプロイスクリプトを作成
• CircleCI

13. AngularJS を採用した経緯
• 一通りの機能が揃っていて、ある程度規模の大
きいアプリケーションに向いていると感じた。
• 社長が作った最初のプロトタイプが AngularJS
だったから

14. Q: React を使おうとは思わなかったの？
• 正直迷った
• SPA をゴリゴリ開発したことのあるメンバーが
居ない＆他のコンポーネントと掛け持ちした状
態で、ローンチまでの短期間に仕上げる必要が
あった。一通りの機能が揃っていたのは偉大。
• 当時 React の勢いを感じていたが、実績のある
AngularJS を採用したのは適切だった。

15. 2015年 9月
無事、ローンチに間に合った
🎉 🎉 🎉

16. 2016年9月 Angular 2 がリリースされる
• AngularJS 使いやすいし、Angular 2 にもゆくゆ
く移行したいな〜
• Angular CLI 使いやすそうだな〜
• 移行したい！！！！
• とはいえ機能追加は活発

18. AngularJS と Angular を並行運用し
て段階的に移行したら良いよ

19. Follow the guide!!!

21. Follow the AngularJS Style Guide
• みんな大好き John Papa さんの Angular style
guideは開発当初から参考にしていた。
• Ruby on Rails をやっていた頃から、
レール（規約）に乗る大事さは知っていた。

22. Using a Module Loader
• ビルドスクリプトを grunt → gulp → gulp +
webpack へと段階的に移行（時間かかった）
• webpack を使うために、 bower を npm に移行
• angular-templatecache のコンパイルや ng-
config, translation file のマージ作業などは
webpack extension を書くのが億劫で gulp のま
ま。
• gulp で上記の処理をしてから webpack-dev-
server を起動する構成

23. Migrate to TypeScript & Using Component
Directives
• 2017年 7月に導入
• Webpack 導入の目的は TypeScript の導入
• AngularJS 1.5 未満のときに書いていた element
directive を TypeScript で component に順次書
き換えている（現在進行形）。
• 古いコードの追加開発が必要になったタイミン
グで工数を余分に確保して移行作業している。

24. 移行は 7割終わった
Files
AngularJS javascript
AngularJS TypeScript
Angular Typescript
• 残りは大物（大変なの）と小物（変更がない）

25. SORACOM ユーザーコンソールのコード規模
• *.js / *.ts ファイル数: 約 600
• Component / Directive の数: 約 200
• Service の数: 約 60
• 規模としては小さくないと思うけど、大きくもな
いかな・・・中くらい？どうなんだろう？？

26. ng-upgrade module を使って Angular と同居さ
せる
• 2018年5月に Angular 6.x と同居させてみた
• 同居させること自体は、サクッとできた。

27. Angularを同居させただけでなぜかテストがこけ
る
• Protractor との相性問題が発生していた
• 当時 PR を漁ったけれど、簡単に解決しそうな
見込みがない・・・
「ざんねん わたしの ぼうけんは
これで おわってしまった」

28. Q: React や Vue に移行することは考えたの？
• 正直迷った
• フロントエンドチーム（２人）で何度か議論
• 既存の資産をこの人数で
他のコンポーネントの開発をしながらコード
フリーズもせずに移行するのは正直厳しい
• Angular 自体に不便を感じているわけではない
• なんとか Angular に移行する道を探ろう

29. テストフレームワークを Cypress に置き換え
• Angular に依存しないテストフレームワークに
移行すればよいのでは・・・！？

30. Cypress に移行して得られたもの
• Electron ベースのテストスイートが便利
• テスト失敗時のスクリーンショットが自動的に
保存されるのでデバッグが便利
• E2E テストが安価に並列実行できるようになっ
て、テストの実行時間が 1/4 に。

31. テストも移行したし
いよいよ並行稼動だ！！！

32. なぜかハチャメチャに遅い

33. フォームに文字を打ち込もうとするとフリーズ
• いや、むしろページ開いているだけで（略
• 多分、Angular / AngularJS のせいじゃなく、自
分たちのコード or ライブラリの相性のせい
• 深く追いきれていないが、イベントループ周り
になにかありそうな予感
「ざんねん わたしの ぼうけんは
これで おわってしまった」

34. downgradeComponent を使ってみた
• 数日調査して、ためしに upgradeComponent を
やめて downgradeComponent にしたら解消！
• 2019年 4月 ついにハイブリッド構成に！

35. 現在の構成
• AngularJS 1.x / Angular 7.x のハイブリッド
• Typescript 3.x
• Bootstrap / Angular Material のハイブリッド
• Gulp / webpack / npm
• Cypress + AWS CodeBuild + Jenkins

36. まとめ

37. AngularJS → Angular に移行するときのおすすめ
• とにかく TypeScript 環境にする
• 開発速度／コードの質が上がった実感
• チーム全員が型付言語経験者だったのもある
• テストのカバレッジをあげる
• 単体テストでカバレッジを高めていく vs E2Eテストで
大まかにユースケースをカバー
• 段階的ではあるが、ほぼ書き直しになる
• ロジックをPlain TypeScript Class に切り出して、
Angularとの依存関係を疎にしておくと良さそう
• ng-japan に参加して情報交換する！

38. 今後の予定
• 2020 年中に Angular への完全移行が目標です！

39. 最後に宣伝させてください

40. SORACOM がお届けする
IoT 最新事例 / 技術 / ソリューション
1 Day カンファレンス
https://discovery2019.soracom.jp
7/2(火) 9:00 ～ 19:00
グランドプリンスホテル新高輪・国際館パミール
参加登録
受付中！

41. ご清聴ありがとうございました