グロースエクスパートナーズ Advent Calendar 2025

新卒チャレンジ～Angularアップデート編～

Last updated at 2025-12-23Posted at 2025-12-23

はじめに

初めまして。こんにちは。GxPのkOkRです。
この記事は、グロースエクスパートナーズ Advent Calendar 2025 の24日目の記事です。

皆さんが所属しているチームでは、どのような業務を担当していますか？
新規開発？引継開発？保守・運用？
業務の形はさまざまですが、どのチームでもシステムのアップデート（バージョンアップ）を迎えるタイミングは必ずあると思います。

私が所属しているチームは、Angular を利用した引継開発チームです。
新卒2年目の私にとって、これまで大規模なバージョンアップを経験したことはなかったですので、今回の初対応にて、困った点や工夫した点が多くあったため、この記事で私の初経験を共有しようと思っています。

詳細

上述にも触れましたが、私のチームは引継ぎ開発を担当しているため、利用している Angular も古いバージョンになっています。その結果、今回のアップデートは７つメジャーバージョン跨ぐ、かなり大きなアップデートです。（Angular 12.2.16 → 20.2.1）
今回特に苦戦した点は、次の 3 つです。

画面崩れ
制御フローの変化
テスト実施

画面崩れ

本来、共通ライブラリとして利用している CSS ライブラリ（例えば、幅調整や文字サイズなど）が効かなくなり、
ダイアログだけでなく、他の画面もぐちゃぐちゃな状態になってしまいました。
その中でも、特にダイアログ周りの影響が最も大きかったと感じています。
なぜなら、ダイアログはアプリ内で利用頻度が最も高いコンポーネントの一つだからです。

ここで少し例を挙げます。

アップデート前	アップデート後

コンポーネントごとに調整すること自体は、それほど難しくありません。
ただし、苦戦したポイントは、ライブラリ側の CSS と自前で定義している CSS の構造関係を理解する必要があったことです。
単純に自前の CSS に !important を付けるだけでは、根本的な解決にはなりませんでした。
（正直に言うと、難しいと感じつつも、少し面白さも感じていました）

解決策としては、問題の根本原因を特定したうえで、必要な修正をグローバル CSS（styles.css）に実装することでした。これは Angular に限らず、他のライブラリでも共通する特性だと思います。
その「自動的に属性が付与される仕組み」が今回の問題の原因でした。

ネット上では ::ng-deep を推奨している記事をよく見かけますが、個人的には使用しない方がよいと感じています。 ::ng-deep はすべてのコンポーネントに影響を与えてしまうため、意図していない画面にも影響が出てしまいます。

そのため、今回は .myclass:has(XXX) のように、自分で把握でき、かつ影響範囲を明確に指定できる方法で対応しました。

制御フローの変化

Angular の制御フローといえば、ngIf または ngFor を思い浮かべる方が多いのではないでしょうか。私も最初はその認識でした。

Angular 12 では、ngIf は ng-template を使って表示の分岐を行います。

<p *ngIf="user; else login">
  Hello {{ user.name }}
</p>

<ng-template #login>
  <p>Please login</p>
</ng-template>

しかし、Angular 20 では、この書き方はすでに使われておらず、よりIf文に近い書き方へ進化しています。

@if (user) {
  <p>Hello {{ user.name }}</p>
} @else {
  <p>Please login</p>
}

一方、ngFor にも同様の変更がありました。

<!-- Angular 12 -->
<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

<!-- Angular 20 -->
@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

他にも ngSwitch → @switch などの変更があるようですが、使用頻度が低かったため、正直あまり印象に残っていませんでした。
効率重視の方であれば「その程度の変換なら AI に任せればすぐ直せる」と考えるかもしれません。
しかし、今回の引継開発案件では Copilot を利用できなかったため

これは新しい制御フローブロックなのか？
どこまで置き換える必要があるのか？

といった点を、すべて自ら確認・判断する必要があり、ここが一番苦戦したポイントでした。

テスト実施

最後の苦戦ポイントは、テスト実施でした。

このプロジェクトを引き継いでから、さまざまな追加開発を行ってきました。
開発のたびに、テストケースの設計や実施も当然行っていました。
それでも、なぜ今回のアップデートで苦戦したのかというと、デグレ確認用のテストケースが誰にも更新されていなかったからです。

非常に古いデグレ用テストケースを使って最新版のアプリをテストすると、途中の挙動がテスト想定とずれていたり、すでに廃止された機能を前提としたテストが含まれていたりしました。
その結果、初期の資料を探したり、古くから関わっているメンバーに問い合わせたりと、内容確認にかなりの時間がかかりました。

精神的にもなかなか厳しく、まさに耐久戦といった感じの苦戦ポイントでした。

さいごに

今回のアップデートを通して、想像していた以上に多くのことを経験できました。

コンポーネント CSS とグローバル CSS の関係性を深く理解できたこと
制御フローの変更により、プロジェクト全体に目を通す必要があり、理解の解像度がかなり上がったこと
デグレ用テストケースは、3か月程度の間隔でもよいので、常に更新しておくべきだと痛感したこと

また、このプロジェクトでは原則として Copilot を利用できないため、情報漏えいに注意しながら AI にヒントを求める方法についても、個人的には少しレベルアップできたと感じています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

新卒チャレンジ ～Angularアップデート編～