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.