この記事は、jig.jp Engineers' Blog Advent Calendar 2025 12月2日の記事です。
こんにちは。jig.jp でフロントエンド開発を担当しています すずとも です。
みなさん、Angular という Web フレームワークをご存知でしょうか 👀
名前は聞いたことあるけど使ったことないという方も多いと思います。
私は入社2年目ですが、入社前は Angular のことはなにも知らず、業務で初めて Angular を触りました。（入社前は個人で React を使っておりました）
Angular を約1年半使って良いフレームワークだと感じたので、その感想をお伝えできればなと思います！
Angular とは
Angular は、React、Vue に続く3大 Web フレームワークです。
自分は アンギュラー と呼んでいます。
開発元は Google で、執筆時点での最新バージョンは v21（2025/11/19 リリース）です。
公式サイト[1]：https://angular.dev/
日本語翻訳サイトもあります：https://angular.jp/
Angular のいいところ
いろんな機能が標準搭載 or 公式提供
TypeScript
Angular は標準で TypeScript に対応しています。
追加で TypeScript のセットアップをしなくても使えますし、ドキュメントやブログ記事なども自然と TypeScript で記述されているので、変に気を使わなくてもいいです。
※ 新規プロジェクトを作成するための ng new コマンドでは逆に JavaScript を選ぶことはできません。
Dependency Injection（DI）
フロントエンドを主に触っている方には DI はあまりなじみがないかもしれません。
DI とは依存性注入と呼ばれ、サービスやほかのコンポーネントを外部から提供できる仕組みのことです。
この仕組みがあることで、テストのモックなどを簡単に行うことができます。
Sass（SCSS, Indented）
Sass（SCSS, Indented）も特にセットアップすることなく、拡張子を .scss .sass とするだけで使用できます。
特に SCSS は書き方がほぼ CSS なので学習負荷も少なく、Sass の便利な機能も使えるのでオススメです。
SPA などでページ遷移を行うためのルーティングライブラリも公式から提供されています。（React でいう React Router 的なもの）
Angular 本体と密に連携されており、単なるルーティングだけでなく、View Transition（などのページ遷移アニメーション）も簡単に実装できます。
マテリアルデザインを採用した UI ライブラリも公式から提供されています。（React でいう MUI 的なもの）
UI コンポーネントだけでなく、ロジック部分だけを抽出したものも CDK として提供されているため、独自コンポーネントであっても操作性やアクセシビリティを向上させることが可能です。
ロジックと UI で関心の分離ができている
基本的に Angular のコンポーネントは HTML、CSS、TS の3ファイルで構成されます。
そのため、自然と ロジック（TS）と UI（HTML、CSS） が分離された状態になります。
React などでは 1ファイルにすべて書く形が多く、行数が多くなってしまうとコード全体の見通しも悪くなりがちです。
Presentational Component というデザインパターンもありますが、UI 用に新しくコンポーネントを作る必要があったり、そのコンポーネント名の命名に困ったりと色々と（個人的に）面倒なので初めから関心の分離ができているのは Angular の利点だと感じています。
状態管理が楽
React の状態管理には useState などのフックを使いますが、
オブジェクトや配列の更新時に描画が更新されないなどの罠は有名所かなと思います。
Angular の場合は、状態管理を基本的に自動でしてくれるので、以下のように雑に書いても動きます。[2][3]
@Component({
selector: 'app-root',
template: `
<button (click)="addItem()">Add</button>
@for (item of list; track item) {
<div>{{item}}</div>
}
`,
})
export class App {
list: string[] = [];
addItem() {
this.list.push('アイテム' + this.list.length);
}
}
Angular はいいぞ
ここまで、Angular のいいところを書いてみました。
Angular はよく「大規模アプリケーション向け」と言われることがあります。
大規模ってどこからやねん、といつも思うのですが、個人的には 「業務向け」 と解釈するのがいいかなと思っています。
業務で JavaScript を扱うのであれば TypeScript であるのが望ましいですし、
テストも書くと思うので、その時には DI が便利です。
ロジックは変更しないけど UI だけ変えるよーという時には、HTML・CSS の変更だけでOKです。
レビュー時も差分がそれらのファイルにしかないので、安心してレビュー・リリースできます。
弊社では、内部のプロダクト向けにフロント担当以外の人が Angular プロジェクトを触ることがあります。
React などで使われる JSX や CSS in JS の書き方などはなじみのない方でも
HTML、CSS、JS をプログラミングの基礎として少し知っている人はいると思います。
Angular であれば、ほぼ HTML、CSS、JS（TSだけど）なので、部分的な変更であれば、結構読みやすいコードかなと思います。
まとめ
入社してから約1年半、Angular を使ってきましたが、特にストレスなく開発が出来ていると感じています。
これらの理由として、今回挙げたような事例があると思います。
長くなってしまうので割愛しましたが、他にも、コンポーネント・サービス・ディレクティブ・パイプという機能があったり、WebComponent として書き出せたりなどまだまだ便利な機能があります！
「好きな Web フレームワークは何？」と聞かれたら「Angular！」と即答するぐらいには好きなフレームワークになりました笑
もちろん、プロジェクトの特性によっては React や Vue の方がよい場面もあるかもしれませんが、
もし Angular を選択肢から外しているのであれば、一度使ってみていただきたい、そんなフレームワークです！
Angular はいいぞ
Discussion
React使っててもhooksの概念は未だに混乱するので、Angularちょっと興味湧きました。