Angularの10年を振り返る:これまでの歩みとこれからの未来

MMaximilian Schwarzmüller
Computing/SoftwareAdult EducationInternet Technology

Transcript

00:00:00ちょうど10年前の今日、信じられないような話ですが、私にとって非常に
00:00:06重要な日でした。当時、Angular 2コースの最初のバージョンをリリースしたからです。
00:00:12Angular自体と同様に、このコースもこの10年間で大きく進化してきました。
00:00:17Angularの進化に合わせて、私自身も数え切れないほどアップデートを重ねてきました。
00:00:23この動画では、Angularの過去、つまりこれまでの歩みや
00:00:28現状、そしてこれからの展望、Angularにどのような未来が待っているのか、
00:00:32Angular開発者にとって、特にAIが登場した今でも学ぶ価値があるのかについてお話しします。
00:00:37では、本題に入りましょう。Angular 2が正式に発表されたのは
00:00:442014年のことで、2015年に開発が進められました。当時はかなり物議を醸しました。
00:00:53というのも、前身のAngularJS(Angular 1)とは全く別物だったからです。AngularJSは、
00:00:59当時登場した最初の主要フレームワークの一つでした。その主な目的は、
00:01:05jQueryからの脱却、言い換えれば、より高度でインタラクティブな
00:01:13Webアプリケーションを構築しやすくすることでした。Angular 1は、クライアントサイドでの
00:01:20レンダリングや制御を容易にしました。そして発表されたAngular 2は、それとは全く異なっていたのです。
00:01:252016年にAngular 2の最初の安定版がリリースされましたが、
00:01:33先ほど言った通り、私は2016年2月にベータ版向けの最初のコースを公開しました。
00:01:40ベータ版、そしてリリース候補版(RC)の段階でも、まだ多くの変更が行われており、
00:01:45当時すでに何度もコースの内容を更新していたのを覚えています。
00:01:51そうしてAngular 2が定着しました。当時のAngularのコードは、
00:01:58現在のモダンなAngularと比較するとかなり違って見えます。「NgModule」という
00:02:05モジュールの概念があり、クラスに「@NgModule」デコレータを付けて、
00:02:12使用するすべてのコンポーネントを明示的に宣言する必要がありました。
00:02:19コンポーネント自体もあり、コンストラクタベースの依存性注入が行われていました。
00:02:26DIに関しては現在のコンポーネントと似ている部分もありますし、クラスである点も同じです。
00:02:32しかし、やはり大きな違いがありました。特にNgModuleは、いつAngularを
00:02:39学び始めたか、あるいはどのような企業やバージョンで仕事をしてきたかによって、
00:02:45もはや馴染みのない概念かもしれません。
00:02:51もちろん、現在でも古いバージョンを使い続けているプロジェクトや企業は多く存在します。
00:02:55さて、2017年には「欠番」となったバージョン3がありました。当時から、
00:03:046ヶ月ごとに新しいメジャーバージョンをリリースするというスケジュールが組まれていました。
00:03:11半年ごとに壊滅的な変更が行われるように聞こえたため、不満を持つ人も多かったです。
00:03:17「Angularは常に変更ばかりしている」という不満のコメントやメッセージを、
00:03:23私のコースでもたくさん受け取った記憶があります。しかし、実際には常に変わっていたわけではありません。
00:03:27このスケジュールは、大きな新機能を導入する機会を確保するためのものでした。
00:03:33彼らは常に、非常に高い後方互換性を保ちながらアップデートを行ってきました。
00:03:402017年のバージョン3が飛ばされた理由ですが、当初、
00:03:46Angularのコアパッケージとルーターパッケージの間でバージョンの食い違いが生じていました。
00:03:51Angularは多くの異なるパッケージに分割されたフレームワークだからです。
00:03:57そこで、すべてのバージョン番号を揃えるために、バージョン3をスキップしたのです。
00:04:03次に大きな転換点となったのは、2020年の「Ivy」コンパイラの導入でしょう。
00:04:122018年頃から、Angularチームは多くの細かな改善と並行して、
00:04:19この新しいコンパイラの開発に心血を注いでいました。
00:04:25このコンパイラの狙いは、Angularの内部構造、つまりコンポーネントがどのように
00:04:31コンパイルされ、DOMを操作する命令に変換されるかを完全に書き直すことでした。
00:04:38以前のコンパイラには非効率な部分があり、バンドルサイズが不必要に大きくなる問題があったため、
00:04:44内部コンパイラを刷新するという巨大プロジェクトが敢行されたのです。
00:04:52なぜこれが重要なのでしょうか? それはこの時期が「停滞期(退屈な時期)」と呼ばれうるからです。
00:05:012017年から2020年にかけて、表向きの変化はあまりありませんでした。内部は大きく変わりましたが、
00:05:10コンポーネントの構築方法といったコアな機能セットには大きな変化がなかったのです。
00:05:16これが重要なのは、この時期にJavaScriptフレームワーク市場において、
00:05:22激しい競争が繰り広げられていたからです。
00:05:272016年にはVue.js 2が登場し、Reactエコシステムでも大きな進展がありました。
00:05:36例えば2018年にはReact Hooksが導入されました。他のJavaScriptエコシステムが
00:05:43急速に進化していく中で、Angularは停滞しているように見えたのです。
00:05:50しかし、それは必ずしも悪いことではありませんでした。多くの人々がその安定性を
00:05:57評価していました。JavaScriptの世界は何でもすぐに変わってしまうという不満が多かったからです。
00:06:03もっとも、AIによる進化でほぼ毎日状況が変わっている今日から振り返れば、
00:06:08当時の「変化が激しい」という悩みは冗談のように聞こえるかもしれませんね。
00:06:13とにかく、当時はそれが不満の種でした。これが「停滞期」です。
00:06:19その時期が終わったのが2022年頃、Angular 14で「スタンドアロン・コンポーネント」が
00:06:28開発者プレビューとして導入された時です。
00:06:33これにより、NgModuleが不要になりました。コンポーネントに「standalone: true」
00:06:42というフラグを立てるだけで、モジュールを介さずに他のコンポーネントで使えるようになったのです。
00:06:47もちろんNgModuleを使い続けることも、スタンドアロンと併用することも可能です。
00:06:55必要に応じて混ぜて使うことができます。Angularチームにとって、
00:07:00後方互換性とスムーズな移行パスを提供することは常に最優先事項でした。
00:07:05これがスタンドアロン・コンポーネントの登場です。
00:07:12続いて2023年のAngular 16では、「Signals(シグナル)」など多くの機能が追加されました。
00:07:20「ngIf」の代わりとなる「@if」のような、新しい条件付きレンダリング手法も登場しました。
00:07:26さらに、「Zoneless Angular」に向けた最初の実験も始まりました。
00:07:34Angular 2のリリース以来、「ngZone」や「zone.js」という概念が使われてきました。
00:07:40これは、クリックやHTTPリクエストなど、ウェブサイトで発生するあらゆるイベントを監視する
00:07:46ライブラリです。イベントが発生すると、DOMを更新する必要があるかを判断するために
00:07:54変更検知を実行します。このアプローチの利点は、DOMの更新が魔法のように感じられることでした。
00:08:00Reactのように「setState」を呼ぶ必要がなかったのです。しかし、欠点もありました。
00:08:05ライブラリがすべてのイベントに対してイベントリスナーを「モンキーパッチ(注入)」するため、
00:08:11オーバーヘッドが発生し、バンドルサイズも増大してしまいました。
00:08:17その結果、Reactなどの仕組みに比べて効率が悪くなってしまったのです。
00:08:22そこで「Zoneless」が大きな一歩となりましたが、これを可能にしたのがSignalsです。
00:08:28Signalsによって、どの状態が変化したかをAngularに明示的に伝える方法が確立されました。
00:08:35Angularはその状態がDOMのどこで使われているかを記憶し、
00:08:40その部分だけをピンポイントで更新できるようになったのです。この「きめ細かな反応性(fine-grained reactivity)」が
00:08:462023年にAngularに導入されました。
00:08:52これが、現在「Angularルネサンス(再興)」と呼ばれている所以です。停滞期を経て、
00:09:01またAngular 1からの移行期にあった混乱も乗り越え、Angularは再びコミュニティから
00:09:08大きな注目を集めるようになりました。フレームワークがより軽量で使いやすく進化し、
00:09:15他のモダンなフレームワークと同等の使い勝手を手に入れたからです。
00:09:23例えば、SignalsはSolidJSによって普及しましたが、主要なフレームワークで
00:09:30最初に採用したのはVueだったと思います(彼らは「ref」と呼んでいますが)。
00:09:36とにかく、それが今のAngularの進む道です。そして2026年、そしてその先に向けて、
00:09:43さらなる進化が見られるでしょう。「Signal forms」なども予定されています。
00:09:50また、AngularチームはAIへの対応も進めており、CLIに組み込まれたMCPサーバーによって、
00:09:59AIがAngularの機能を理解した上で開発を支援できる環境を整えています。
00:10:06Angularの歴史を振り返ると、一度(あるいは見方によっては何度も)自らを再定義しながらも、
00:10:13一貫して安定性と後方互換性を保ち続けてきたフレームワークだと言えます。
00:10:19Angularチームはこの点において素晴らしい仕事をしてきました。
00:10:26「重くて学習が難しい」というイメージを、よりモダンなものへと変えることに成功したのです。
00:10:33また、Angularが一貫しているのは「バッテリー同梱(Batteries-included)」の思想です。
00:10:39フォーム処理、ルーティング、HTTPリクエスト、依存性注入、状態管理など、
00:10:46必要な機能がすべて標準で組み込まれています。Reactのようにルーターや
00:10:54状態管理のためにサードパーティのライブラリを探す必要がありません。
00:10:59この点は多くの企業に高く評価されています。そのため、Angularはこの10年間、
00:11:06成長曲線を見ても着実な伸びを示してきました。
00:11:12ただ、事実としてReactの方が圧倒的に成長しています。成長曲線で比較すると、
00:11:18Reactの影に隠れてAngularの線がほとんど見えないほどです。
00:11:23特に2025年初頭からは、AIの影響でReactがさらに爆発的な伸びを見せました。
00:11:29他の動画でも言っていますが、AIの「お気に入り」は、Angularではなく
00:11:37Next.js、Tailwindを組み合わせたReactだからです。
00:11:45では、Angularはもう終わりなのか、学ぶ必要はないのか。AI時代において、
00:11:54Angularの未来はどうなるのでしょうか?
00:12:00Angularは、その圧倒的な安定性と実績のある後方互換性ゆえに、
00:12:06現在でも多くの大企業で採用されています。この「バッテリー同梱」のアプローチは
00:12:13大規模組織で特に好まれます。もちろんReactも大企業で人気ですが、
00:12:18Angularのダウンロード数は、エンタープライズ領域における実際の普及率や
00:12:27人気を必ずしも正確に反映しているわけではありません。
00:12:34私のコースを例に挙げると、受講生は85万人に達しており、
00:12:40UdemyのReactコースと比べても決して引けを取りません。
00:12:46もちろんUdemy全体ではReactコースの方が多いですが、私の経験上、
00:12:53チャートから読み取れる以上の需要を肌で感じてきました。
00:13:00特にビジネス顧客の多くが今でもAngularを熱心に学んでいます。
00:13:08したがって、モダンなWebアプリを構築する上で、Angularは依然として素晴らしい選択肢です。
00:13:15「Angularルネサンス」を経て、非常にモダンで将来性の高いものになっています。
00:13:22ただ、AIの存在は無視できません。AIはコードの書き方を根本から変えています。
00:13:29手書きのコードは減っています。私自身、Claude DevやCursorといったツールを愛用しており、
00:13:36それらに関するコースも提供しています(動画下のリンクから確認できます)。
00:13:43開発の仕方は変わっても、技術選定の重要性は変わりません。
00:13:48メンテナンスが行き届き、セキュリティ更新が提供され、
00:13:57パフォーマンスや効率を高める新機能が追加される技術を選びたいものです。
00:14:04その点において、AngularはReactと同様に、極めて優れた選択肢であり続けています。
00:14:09もちろん、VueやSvelteも素晴らしいですが、この動画はAngularについてのものですからね。
00:14:14はい、Angularは今でも素晴らしい選択です。そしてAIも、
00:14:21適切なコンテキストさえ与えれば(これはどの技術でも同じですが)、完璧なAngularコードを書けます。
00:14:27ですから、AngularはAI主導の未来に向けて、非常に良いポジションにいると考えています。
00:14:34もし「3年後には誰もコードを書かなくなるから、技術選びなんて無意味だ」と信じているなら、
00:14:40話は別かもしれません。しかし、私はそうは思いません。
00:14:45日々AIを使い倒し、生成されたコードが大半を占める開発をしていても感じるのは、
00:14:51AIを制御し、導き、技術やアーキテクチャの決断を下す役割は、かつてないほど重要になっているということです。
00:14:57そうした場面でも、Angularは依然として強力な選択肢です。以上が、Angularの短い歴史でした。
00:15:02このフレームワークは、私にとって常に特別な存在です。
00:15:08Udemyで最初にリリースした大規模コースであり、私の人生を大きく変えてくれました。
00:15:13コース制作を本業にすることを可能にし、数え切れないほどの人々のキャリアを支援できました。
00:15:19皆さんからいただいた素晴らしいフィードバックには本当に感謝しています。
00:15:25Angularはこれまでも、そしてこれからも、私にとって最高に素晴らしいフレームワークです。
00:15:30is not my belief, though. From what I see, from my day-to-day usage with AI, where I'm
00:15:35heavily using it and where most of my code is generated by AI, I can tell you controlling
00:15:41it, steering it, making choices, choosing technologies, choosing software architectures is more important
00:15:48than ever. And yeah, Angular is still a great choice there. So that was my short history
00:15:54on Angular, a framework that will always have a special place in my heart. Because as I mentioned,
00:16:00this was the first major course at least that I released on Udemy. And it has changed a lot
00:16:07for me. It allowed me to create courses for a living. It has changed the lives and careers
00:16:13of countless people. I got so many awesome messages and feedback. And therefore, yeah,
00:16:19Angular always was amazing. And it's especially amazing for me.

Key Takeaway

Angularは10年間の進化を経て、AI時代においても大企業が信頼を置くモダンで安定した「バッテリー同梱型」フレームワークとしての地位を確立しています。

Highlights

AngularJSからAngular 2への劇的な刷新と、その後の安定した進化の歴史

Ivyコンパイラ導入による内部構造の最適化と、その時期の他フレームワークとの競争

「Angularルネサンス」を象徴するスタンドアロン・コンポーネントとSignalsの導入

エンタープライズ領域における「バッテリー同梱」思想と高い後方互換性の評価

AI時代の到来におけるAngularの立ち位置と、開発者が技術選定・設計を行う重要性

Timeline

Angularの起源と初期の混乱

スピーカーは自身のAngular 2コース公開から10周年を迎え、フレームワークの劇的な進化を振り返ります。2014年に発表されたAngular 2は、jQueryからの脱却を目指したAngularJSとは全く異なる設計だったため、当時は大きな物議を醸しました。2016年の安定版リリースに至るまで、ベータ版やリリース候補版(RC)の段階で頻繁な変更が行われ、教育者としても対応に追われた記憶が語られています。このセクションでは、Angularがいかに野心的な再スタートを切ったかという背景が示されています。

NgModuleの時代とリリースサイクルの確立

初期のAngular 2を象徴する「NgModule」の概念と、現在のモダンな開発スタイルとの違いについて解説されています。当時はすべてのコンポーネントをモジュールで明示的に宣言する必要があり、依存性注入(DI)の仕組みもクラスベースで構築されていました。また、半年ごとのメジャーアップデート方針が「変更が多すぎる」というユーザーの不満を招いたものの、実際には高い後方互換性が維持されていたことが強調されています。バージョン3が欠番となりバージョン4へ飛んだ理由が、内部パッケージのバージョン整合性を取るためだったという技術的な裏話も明かされます。

Ivyコンパイラの開発と「停滞期」の真実

2018年から2020年にかけて、Angularチームは内部エンジンを刷新する「Ivy」プロジェクトに注力していました。Ivyの目的はコンパイル後のコードを効率化し、バンドルサイズを削減してDOM操作を最適化することにありましたが、表向きの変化は少なかった時期です。この「停滞期」にReactがHooksを導入し、Vue 2が普及したことで、Angularは進化が止まったように見られがちでした。しかし、この時期の安定性は、JavaScriptエコシステムの激しい変化に疲弊していた開発者や企業からは高く評価されていたという側面もあります。

Angularルネサンス:スタンドアロンとSignals

2022年のAngular 14から始まった「Angularルネサンス(再興)」により、フレームワークは再び大きな注目を集めることになります。NgModuleを不要にする「スタンドアロン・コンポーネント」の導入により、開発体験はより軽量でシンプルに進化しました。さらに、2023年にはSignalsによる「きめ細かな反応性(fine-grained reactivity)」が導入され、zone.jsに頼らないZoneless Angularへの道が開かれました。これにより、Angularはモダンな他フレームワークと同等、あるいはそれ以上のパフォーマンスと使い勝手を手に入れることに成功したのです。

エンタープライズでの強みとReactとの比較

Angularの一貫した哲学である「バッテリー同梱(Batteries-included)」が、大規模開発においていかに有利であるかが語られています。ルーティング、HTTP通信、フォーム管理などが標準装備されているため、Reactのようにサードパーティ製ライブラリを選定し続ける手間がかかりません。統計上はReactの成長率が圧倒的であり、特にAIの普及以降はその傾向が強まっていますが、Angularは着実にユーザーを増やし続けています。スピーカーは、ダウンロード数などのチャートだけでは測れない、企業内での根強い需要と信頼について分析しています。

AI時代のAngularの未来と結論

最終セクションでは、AIによる自動コーディングが普及する未来において、Angularを学ぶ価値が再確認されます。AI(Claude DevやCursorなど)を活用した開発が主流になっても、技術選定やソフトウェアアーキテクチャの決定、AIを導く役割は人間にとってより重要になります。Angularの持つ圧倒的な安定性とAI対応の取り組み(MCPサーバーなど)は、長期的なプロジェクトにおいて非常に強力な武器となります。スピーカーは自身のキャリアを支えてくれたAngularへの感謝と共に、このフレームワークが今後も特別な存在であり続けると確信して締めくくります。

Community Posts

View all posts