atama plusでプロダクトのWebエンジニアをやっている @rettar5 です。
今日はアドベントカレンダー最終日ということで、この1年で行ったatama plusでのAngularに関する取り組みをまとめながら振り返ります。
atama plusとAngular
atama plusは「教育に、人に、社会に、次の可能性を。」というミッション実現に向かって活動しているスタートアップです。
2017年の設立からAI教材「atama＋」というプロダクトを作っており、「塾のタブレットにアプリをインストールして学習をしてもらう」という体験の実現のため、Angular x Ionicという組み合わせでフロントエンドの開発をスタートしました。
フロントエンドギルド Angularパーティー
atama plusには特定技術領域や、エンジニアが関係する特定テーマについて、そのテーマに興味関心のある有志がチーム横断で集まる組織体(ギルド)があります。
フロントエンドギルドでは
- 技術の標準化
- 知識共有とスキル向上
- 最新技術の追求
- 品質の確保
- 開発プロセスの効率化
などのミッションがありますが、atama plusではAngularとReactの2つのフレームワークを採用しており、それぞれのフレームワークごとに課題が異なるため、分科会として「Angularパーティー」「Reactパーティー」に分かれています。
Angularパーティーでの取り組み
Angularパーティーでは週30分の定例会を行っており、その中で
- atama＋でのAngularの課題整理・適用
- Angularのアップデート情報のダウンロード・整理・適用
などについて議論・検討をしています。
atama＋でのAngularの課題整理・適用
分科会としてAngularパーティーが発足するときに、まず社内でどういった課題があるのかをヒアリングし以下のように整理をしました。
この中から「答えがある」ものについてはドキュメント化を行い、「追加で整理が必要」となっているものはAngularパーティのメンバーで課題の整理を行い、「その他で扱う」となったものは関連するギルド・パーティーに連携するといった形で課題の整理と解決を行っています。
※「uniform」は、atama plusのデザインシステムの名称です
Angularのアップデート情報のダウンロード・整理・適用
Angularは6ヶ月ごとにメジャーバージョンアップがあり、日々新しい仕組み・機能が追加されています。
その中から「この仕組みは積極的に活用していこう」「この仕組みは一旦様子を見ながら使っていこう」などといった判断もAngularパーティーで行っており、都度社内へのアナウンスもしています。
例えばAngular v16で追加された Required inputs については「使えるところは積極的に使ってほしい」とし、Angular v14で追加された Inject関数 については「使えそうなときは使ってほしい」といった形で、ドキュメント化・エンジニア横断の定例会で共有をしました。
Standalone Component化
またAngularパーティーでは、社内のAngularプロジェクトをStandalone Componentに変えていく活動もしています。
なぜStandalone Componentに変えるのか
Standalone ComponentはAngular v15でGAとなり、これまでのNgModuleでの集中管理から各Componentで依存を明記していく分散管理のような実装ができるようになりました。
Angularパーティーでは、
- NgModuleがなくなることによるエンジニアの学習コスト(おまじない)の削減
- ES Buildによるビルドの高速化
-
@ionic/angularはStandaloneビルドでのみES Buildをサポートしている
-
- ツリーシェイキングによるバンドルサイズの削減・高速化
- NgModuleよりも細かな単位で依存を管理できることで、漸進的なモジュール整理やアーキテクチャの改善がやりやすくなる
などの観点から、Standalone Component化を進めています。
移行の進め方
atama＋には6つのAngularプロジェクトと11種の共有Moduleがあり、合計17個のNgModuleがあります。
企業によってはそんなに多い量ではないかもしれませんが、Angularパーティーに限らず社内のギルド・パーティーは有志の集まりで、リソースを持っていません。
また、AngularからStandalone Componentに移行するためのコマンドも用意されていますが、atama＋のAngularプロジェクトではうまく移行ができず、手動で移行する必要がありました。
数人の有志だけでこれらをすべて一度にStandalone Componentに変えていくことは現実的ではないため、 @ippei を中心に17個のNgModuleの優先順位付けと、Standalone Componentへの移行を9段階に分けて整理してもらいました。
この中からAngularパーティで分担し、定例会の場で進捗管理をしながらStandalone Component化を進めています。
Standalone Componentへの移行の現在
2024年の1月から本格的にStandalone Componentへの移行を始めていますが、2024年12月時点では153工程中127工程が完了しており、全体としては80%ほどの作業が終わった状況です。
「 NgIf NgFor など新しい構文で置き換わる予定のDirectiveや、社内で作った全ての button 要素を対象とする二重クリック防止のDirectiveなど、全コンポーネントで必ずimportして欲しいものを essentialComponentImports としてまとめる」「事前に essentialComponentImports のimport漏れが気付けるようにES Lintのルールを作成する」などの効率化も行っており、対応に大きなコストがかかる箇所についてはかなり片付いてきています。
2025年にはStandalone Componentへの移行も終わり、Angularパーティーとしても次の課題整理・課題解決に向かって進めると思うので、もう一踏ん張りといったところです。
社内ハッカソン Lumberjack Dayでの取り組み
If I had six hours to chop down a tree, I’d spend the first four hours sharpening the axe.
(もし木を切り倒すのに6時間与えられたら、私は最初の4時間を斧を研ぐのに費やすだろう)
米国第16代大統領 エイブラハム・リンカーン
atama plusでは定期的にLumberjack Dayと呼んでいる社内ハッカソンが開催されています。
(ちなみにこのLumberjack Dayも、有志が集まった「ハッカソン運営ギルド」で運営されています。)
このLumberjack Dayでも、Angularについて取り組みがありました。
atama＋をZoneless化してサクサクにしてみる
Angularは詳しい仕組みがわかっていなくても、変数をtemplateにbindすることで画面に値を表示することができますが、使い方を誤ると再描画が発生し続けるなどの問題が起こることもあります。
atama plusでは「フロントエンド専任」のように役割を限定しておらず、Webエンジニアは全員フロントエンド・バックエンド兼任の組織となっています。そのため、フロントエンド・バックエンドそれぞれの実装やレビューに、それぞれのエキスパートが取り組む、とはなっていません。
歴史が積み重なってきていることもあって、普段のプロダクト開発の中でも必ずしも適切ではない実装が含まれてしまうこともあり、atama＋の画面の一部では余計な再描画が発生している箇所があったりします。
そういった背景もあり、Angular v17からGAとなった Signals と ChangeDetectionStrategy.OnPush を使いatama＋の動作をサクサクにして生徒体験をよくしよう！というチャレンジをし、
- 明らかに再描画の回数が減った
- 一部の画面でこれまで表示されていた値が表示されなくなった
ということがわかりました。
後者の「一部の画面でこれまで表示されていた値が表示されなくなった」については、これまで発生していた余計な再描画の副作用として、コアとなるServiceの一部機能が動いていたということが判明しました。
Lumberjack Dayではテーマごとに優秀賞の表彰があり、今回は他のチームに一歩及ばない結果となりましたが、今後Angularパーティーとして取り組むべき課題や進むべき方向が見え、いいチャレンジができたと思います。
Startup Angularへの参加
Angularをメインに使っているスタートアップによる、Angular開発の知見などを発信するStartup Angularというイベントがあり、2024年は2月と7月と12月に会場スポンサーとして参加をしています。
直近はatama plusの取り組みについてあまり情報発信ができていませんでしたが、Standalone Componentへの移行が終われば振り返りとして知見の共有ができればいいなと考えています。
2024年の取り組みを振り返ってみて
atama plusから見てAngularとは「ミッション実現のための手段の1つ」ではありますが、振り返ってみると幅広くいろいろな取り組みをしていたなと感じました。
特に有志で集まっているAngularパーティーのがんばりがなければ、Standalone Component移行もここまで進んでいなかったと思います。
2025年もatama plusが「教育に、人に、社会に、次の可能性を。」というミッション実現に最短で向かえるように、ユーザー体験・開発者体験をよりよくしていきたいと思います。
Discussion