Angularについて基礎知識を学ぶ
Angularという言葉を最近耳にすることが多くあります。
私自身これまでAngularの開発に携わったことがないため、この記事作成を通してAngularとはどういったものなのか、基礎知識を学んでいきたいと考えてます。
1. Angularとは
Google社が開発したTypeScriptをベースとしたフレームワークで「アンギュラー」と読みます。
歴史としては2012年6月に「AngularJS」という名称でバージョン1.0がリリースされました。
2024年4月8日現在のバージョンは、17.3.3になっています。
Angularはオープンソースのフレームワークとして公開されており、JavaScriptのライブラリであるReactやVue.jsと同様に人気が高いです。
また、AngularはSPA（シングルページアプリケーション：一つのページでコンテンツの切り替えを行うWeb アプリケーションの構造）の開発に最適なフレームワークとなっており、多くのWebアプリケーション開発の現場でフロントエンド部分の開発に採用されています。
AngularはReactと並び、最も使われているJavaScriptフレームワークの一つです。
2. Angularのメリット
1.単体でのアプリ開発に適している
フレームワークは、必要最小限の機能を提供するマイクロフレームワークと、Web開発に必要な全ての機能を提供するフルスタックフレームワークに分けられます。Angularはフルスタックフレームワークであるため、Angular単体でもWebアプリケーションを開発することが可能です。
AngularだけでWebのフロントエンド開発に必要とされる全ての機能が揃っている点は、Web開発における大きなメリットだと言えます。
2.双方向データバインディングでソースコードの記述量削減
双方向データバインディングとは、アプリケーションの画面上の表示内容と内部のデータをスムーズに反映させられる仕組みになります。一般的にWebアプリケーションを開発する場合、画面操作の内容をデータに反映させるための処理を記述する必要があります。
しかし、Angularの場合は双方向データバインディングによって自動的に画面操作の内容がデータに反映され、変更後の内容が画面上にも反映されるというメリットがあります。
このように自動的に同期や更新を実行してくれるため、エンジニア自身で記述しなければいけないコード量を削減することが可能です。
3.MVCでアプリケーションの設計がスムーズ
MVCはプログラムの処理を「Model」、「View」、「Controller」という3つの役割に分けてコーディングするという開発方法です。MVCモデルではコードが役割ごとに明確にわかれているため、わかりやすくコードの管理ができ、エンジニアごとの役割分担もしやすく、修正や変更もしやすいといったメリットがあります。
AngularではMVCモデルを採用しているため、アプリケーション開発をスムーズに行えます。
3. Angularのデメリット
1.TypeScriptの学習が必須
Angularのロジックの記述はTypeScriptを使用しているため、開発にあたってはTypeScriptの知識が必須になります。
TypeScriptを学習したことのない人がAngular開発をすることになれば難易度は高くなります。
2.習得には学習が必要
Angularはフルスタックフレームワークであるため、AngularだけでWebアプリケーションのフロントエンド開発に必要な機能が揃っています。
しかし豊富な機能が用意されているがゆえに、初心者が使いこなすには学習コストも高くなります。
また、Angularには他のフレームワークと違った独自設計などもあるため、習得するには多くの学習時間が必要になります。
3.オーバースペックになるおそれ
Angularはフロントエンド開発に必要な様々な機能が搭載されています。
それゆえ、開発規模によっては必要のない機能も存在することになります。
4.更新頻度が非常に高い
Angularは現在でも開発が続けられているため、アップデートによって品質を向上し続けています。
そのため、他のフレームワークと比較しても更新頻度が高くあります。
頻繁に更新されている点はメリットにもなりますが、逆に言えばアップデートによって機能変更が行われる頻度も高いということになります。
たとえば、バージョンアップすることでこれまで使用していた機能の一部が失われる可能性や、バージョンアップに伴い既存のアプリケーションに修正が発生するリスクがあるかもしれないです。
4. Angularのインストール手順(Windows版)
実際にAngularをインストールしてみました。手順を残しておきます。
1.nvmをインストール
・https://github.com/coreybutler/nvm-windows/releases にnvm-setup.zipがあるのでクリックしてダウンロードする
・zipフォルダを展開し、exeを実行する(すべてデフォルトで進める)
2.nodistをインストール
・https://github.com/nodists/nodist/releasesにインストーラをダウンロードする
・最新バージョンのNodistSetup-vX.X.X.exe をクリックしてインストーラをダウンロードする(すべてデフォルトで進める)
3.インストール後、確認
・コマンドプロンプトを管理者として実行する
・node -vを実行する(バージョンが表示されたらOK)
・nvm -vを実行する(バージョンが表示されたらOK)
4.Angular CLIをインストール
・npm install -g @angular/cliを実行する
※「Angular CLI」とは、Angularのインストールや使い始めるのに必要な環境構築を手軽に実行してくれる公式ツール
5.Angular アプリケーションの作成
ng new sample_projectを実行する( sample_projectの箇所はアプリケーション名)
6.cd sample_projectを実行する
7.npm startを実行する
8.http://localhost:4200/に接続する
・接続されたら成功
4-1. 手順5の出力内容
C:\WINDOWS\system32>ng new sample_project
? Which stylesheet format would you like to use? CSS [ https://developer.mozilla.org/docs/Web/CSS
]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes
CREATE sample_project/angular.json (2878 bytes)
CREATE sample_project/package.json (1287 bytes)
CREATE sample_project/README.md (1094 bytes)
CREATE sample_project/tsconfig.json (889 bytes)
CREATE sample_project/.editorconfig (290 bytes)
CREATE sample_project/.gitignore (590 bytes)
CREATE sample_project/tsconfig.app.json (342 bytes)
CREATE sample_project/tsconfig.spec.json (287 bytes)
CREATE sample_project/server.ts (1759 bytes)
CREATE sample_project/.vscode/extensions.json (134 bytes)
CREATE sample_project/.vscode/launch.json (490 bytes)
CREATE sample_project/.vscode/tasks.json (980 bytes)
CREATE sample_project/src/main.ts (256 bytes)
CREATE sample_project/src/favicon.ico (15086 bytes)
CREATE sample_project/src/index.html (312 bytes)
CREATE sample_project/src/styles.css (81 bytes)
CREATE sample_project/src/main.server.ts (271 bytes)
CREATE sample_project/src/app/app.component.html (20239 bytes)
CREATE sample_project/src/app/app.component.spec.ts (969 bytes)
CREATE sample_project/src/app/app.component.ts (323 bytes)
CREATE sample_project/src/app/app.component.css (0 bytes)
CREATE sample_project/src/app/app.config.ts (330 bytes)
CREATE sample_project/src/app/app.routes.ts (80 bytes)
CREATE sample_project/src/app/app.config.server.ts (361 bytes)
CREATE sample_project/src/assets/.gitkeep (0 bytes)
√ Packages installed successfully.
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRL4-2. 手順7の出力内容
C:\Windows\System32\sample_project>npm start
> sample-project@0.0.0 start
> ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable
Global setting: enabled
Local setting: enabled
Effective status: enabled
Browser bundles
Initial chunk files | Names | Raw size
polyfills.js | polyfills | 83.60 kB |
main.js | main | 22.07 kB |
styles.css | styles | 95 bytes |
| Initial total | 105.76 kB
Server bundles
Initial chunk files | Names | Raw size
chunk-3C2X6H33.mjs | - | 1.70 MB |4-3. ヘルプ
①手順4を実施後に「’git’は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示された。
解決策：gitをhttps://gitforwindows.org/からダウンロード(すべてデフォルトで進める)
5. まとめ
Angularとしての基礎的な知識を理解することができたと考えます。
学習コストが少し高く感じましたが、Angularにはメリットが多く存在しています。
この記事を読んだ方が少しでもAngularの知識を理解していただけたら幸いです。