【あんぎゅらー】

Angular とは?

最終更新:
💡 画面とアプリの機能を組み立てる、GoogleのWebフレームワーク

Googleのチームが保守するWebアプリケーションのフレームワーク。TypeScriptとHTMLテンプレートでコンポーネントを作り、ルーティング、フォーム、HTTP通信などの公式機能を組み合わせてアプリを構築する。

📌 このページのポイント
AngularでWebアプリを組み立てる コンポーネント 画面を組み立てる サービス 依存性注入 HTTP 通信 フォーム ルーティング Angular Webアプリ TypeScript 線は機能の関係を示す
コンポーネントを中心に公式の機能群を組み合わせる。関係を示す線は処理順ではなく、アプリに必要な設定や実装は別途行う。
ひよこ ひよこ
Angularって何を作る道具?
ペンギン先生 ペンギン先生
Webアプリケーションを作るフレームワークだよ。Googleのチームが保守していて、画面をコンポーネントに分けて組み立てるんだ。
ひよこ ひよこ
TypeScriptで書くの?
ペンギン先生 ペンギン先生
公式の基本形ではTypeScriptのクラスに動作を書き、HTMLテンプレートに表示を書くよ。コンポーネントには画面で使うためのセレクターも指定するんだ。
ひよこ ひよこ
画面以外の機能もある?
ペンギン先生 ペンギン先生
ルーティングやフォーム、依存性注入、HTTPクライアントなどを公式に提供しているよ。ただしアプリの機能が何でも完成済みという意味ではなく、必要なものを設定して使うんだ。
ひよこ ひよこ
NgModuleを必ず書くの?
ペンギン先生 ペンギン先生
新しいコードにはstandaloneコンポーネントを使うことが推奨されているよ。既存のNgModuleを使うコードもあるので、プロジェクトのバージョンや構成を確認しよう。
ひよこ ひよこ
Zone.jsやAngularJSの記事も参考になる?
ペンギン先生 ペンギン先生
現行AngularとAngularJSは区別しよう。変更検知もバージョンや設定次第で、Angular 21以降はzonelessが既定だよ。古い記事の前提をそのまま当てはめないことが大切だね。
もっと詳しく知りたい人へ

CLIではどんな作業ができる?

Angular CLIはプロジェクトのひな形作成、開発、テスト、デプロイ、保守を支援する。npmの@angular/cliに含まれるngコマンドを使う。実際のコマンドや利用条件は、プロジェクトのAngularバージョンに合う公式ガイドで確認しよう。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Angular」って出てきたら「公式の機能群でWebアプリを組み立てるフレームワーク」と思えばだいたいOK!
📖 おまけ:英語の意味
「Angular」 = Webアプリケーションのフレームワーク名
💬 現行のAngularと、以前のAngularJSは区別しよう。AngularJSの公式サポートは2022年1月に終了しているよ

参考資料

← 用語集にもどる