Angularは、堅牢な機能と使いやすさを特徴とするフレームワーク。ウェブアプリケーション開発において非常に人気の高い選択肢です。
今回は、Angularの概要や強み、そして主要オペレーティングシステムへのインストール方法をご紹介します。
Angularとは
Angularは、2010年にGoogleが開発したオープンソースのウェブアプリケーションフレームワークです。静的型付け可能なJavaScriptのスーパーセット「TypeScript」がベースで、堅牢で保守性の高いコードを書くための型や機能が多数組み込まれています。
コンポーネントベースのアーキテクチャを採用しており、再利用可能なコンポーネントを使ってアプリケーションを構築することができます。このアプローチにより、プロジェクトの構成、保守性、拡張性が高まります。
要約すると、Angularの特徴は以下のとおりです。
- コンポーネントベース
- スケーラビリティとメンテナンス性に優れる
- 双方向データバインディングと依存性注入の完全サポート
- 包括的な組み込みのディレクティブとサービス
代表的なAngularユーザー
Angularは、主に次のようなタイプの開発者に使用されています。
またその性能と柔軟性から、多くの大手企業も使用しています。
- Google：（当然ながら）Angularの生みの親であるGoogleは、Google 広告、Google Cloud Platform、Google アナリティクスなどの製品でAngularを使用しています。
- Microsoft：Angularと他のウェブ技術で構築された人気コードエディターVisual Studio Code含め、いくつかの製品にAngularを採用しています。さらに、クラウドアプリケーションの構築とデプロイ用にAzureプラットフォームにも統合しています。
- IBM：カスタマーサポートプラットフォームにAngularを採用しています。
- PayPal：ウェブ開発プロジェクトにAngularを採用しており、PayPal Checkout（オンラインで安全に支払いを受け取れる企業向けツール）はAngularで構築されており、セキュアで大規模なアプリケーションも扱えることを裏付けています。
- Upwork：人気アウトソーシングプラットフォームのUpworkもウェブ開発にAngularを活用しています。Upwork Talent PlatformはAngularで構築されており、プロジェクト管理や雇用のためのレスポンシブで使いやすいインターフェースを作成する能力もあることがわかります。
- Lyft：米国のライドシェアサービスであるLyftは、ウェブアプリケーション開発にAngularを使用しています。企業向けのLyft BusinessプラットフォームはAngularで構築されており、業界を問わずスケーラブルで堅牢なアプリケーションを作成することも可能です。
このように様々な企業がAngularを採用しており、規模や複雑さを問わず、あらゆるウェブ開発プロジェクトで使用可能です。
Angularの強み
本題であるインストール方法をご紹介する前に、ウェブ開発プロジェクトにAngularを使用する利点を見ておきましょう。
コンポーネントベースのアーキテクチャによる高い再利用性
コンポーネントベースのアーキテクチャは、モジュール化された再利用可能なコンポーネントを作成し、大規模なアプリケーションに統合するのに役立ちます。コードが整理しやすくなるだけでなく、再利用性を促進し、長期的には時間と手間を削減することができます。
TypeScript
JavaScriptの静的型付けスーパーセットであるTypeScriptは、Angularの中核。TypeScriptの様々な方が機能により、堅牢で保守性の高いコードを簡単に書くことができます。
モジュール性の重視
モジュール性に重点が置かれているため、アプリケーションがより小さく管理しやすくします。また、プロジェクトの拡張や、長期的なメンテナンスや更新も容易に。
リアクティブプログラミングの組み込みサポート
Angularには、RxJSライブラリを通じて、リアクティブプログラミングをデフォルトでサポートしています。リアクティブプログラミングとは、非同期データストリームを扱うことができる強力なパラダイムで、アプリの複雑なデータフローやユーザーインタラクションを簡単に扱うことができます。
堅牢なエコシステムとツール
フレームワークを最大限に活用するためのツール、ライブラリ、リソースの豊富なエコシステムもまた、Angularの強みです。コマンドラインインターフェース（CLI）からサードパーティライブラリの豊富なコレクションまで、アプリケーションを簡単にビルド、テスト、デプロイするために必要なものがすべて揃っています。
Angularを使用する前提条件
Angularをインストールする前に、必要になる基礎知識とツールを確認しておきましょう。
- JavaScriptの基礎知識：AngularはJavaScriptで作られているため、JavaScriptの基礎知識が求められます。これまでに扱ったことがない場合は、まずはJavaScriptを習得しましょう。
- コマンドラインとターミナルの使用経験：インストールする段階から、コマンドライン（Windows）またはターミナル（macOSとLinux）で作業することになるため、基本的なコマンドとナビゲーションに慣れていることが条件となります。
- TypeScriptの基礎知識（できれば）：必須ではありませんが、AngularフレームワークはTypeScriptで構築されていることから、TypeScriptの基礎知識を持っていると有益です。公式ドキュメントで詳しく学ぶことができます。
- Node.jsとnpm：Node.jsとnpm（Node Package Manager）の両方をインストールしてください。Node.jsのインストール方法はこちらをご覧ください。
システム要件
また、お使いのシステムが以下の要件を満たしていることを確認してください。
- 対応OS：Windows 10、macOS 10.10（Yosemite）以降、最近のLinuxディストリビューション（Ubuntu 18.04以降など）
- メモリ：4GB以上のRAM
- ストレージ容量：10GB以上のディスク空き容量
上記要件を満たすことで、Angularがシステム上で動作し、スムーズにアプリケーションの開発・テストを行うことができます。
Angularのインストール方法
Angularをインストールする手順は、Windows、macOS、Linux、いずれのオペレーティングシステムでもほぼ同じですが、エラーなどが発生することのないよう、OS別にご紹介していきます。
WindowsにAngularをインストールする
まずは、Windowsでのインストール方法から。
1. Node.jsとnpmをインストールする（まだの場合）
Angularをインストールする前に、Node.jsとnpmをマシンにインストールします。まだの場合は、Node.jsのインストール方法をご覧ください。
2. Angular CLIをグローバルインストールする
次に、Angular CLIツールをインストールします。コマンドプロンプトを開いて、以下のコマンドを実行してください。
npm install -g @angular/cliこれでAngular CLIツールの最新の安定版がインストールされ、システム全体で使用可能になります。
3. インストールしたAngular CLIを確認する
Angular CLIをインストールしたら、コマンドを使ってAngularプロジェクトを管理します。以下のコマンドで、インストールに成功していることを確認しましょう。
ng --versionインストールされたAngular CLIのバージョンと、環境に関するその他の関連情報が表示されます。
4. Angularアプリケーションを作成する
Angularアプリケーションを作成するには、ワークスペースを作成する必要があります。ワークスペースとは、Angularプロジェクトの設定ファイルとソースコードを格納するディレクトリです。コマンドプロンプトで次のコマンドを実行します。
ng new my-appこれで指定した名前で新規ディレクトリが作成され、必要な設定ファイルのセットアップ、初期化されたAngularアプリケーションの生成が行われます。
5. Angularアプリケーションをテストする
Angularアプリケーションをテストするには、cdコマンドを使って作成されたディレクトリに移動します。
cd my-app次のコマンドで開発サーバーを起動してください。
ng serveこれでAngularアプリケーションがコンパイルされ、開発サーバーが起動します。サーバーはポート4200（デフォルト）で実行されます。
お好きなブラウザから「http://localhost:4200/」にアクセスすると、Angularアプリケーションが動作しているのを確認できるはずです。
以上で完了です。
macOSにAngularをインストールする
続いては、macOSマシンにAngularをインストールする手順を見ていきます。
1. Node.jsとnpmをインストールする（まだの場合）
前述の通り、Angularをインストールする前にNode.jsとnpmをコンピュータにインストールしてください。すでにインストールがお済みの場合は、次のステップに進んでください。Node.jsのインストール方法はこちらをご覧ください。
2. Angular CLIをグローバルインストールする
Windowsでのインストール同様、Angularアプリケーションを作成（および管理）するために必要なAngular CLIをインストールします。ターミナルを開いて、以下のコマンドを実行します。
npm install -g @angular/cliこれでAngular CLIツールの最新の安定版がインストールされ、システム全体で使用できるようになります。
3. インストールしたAngularを確認する
Angular CLIをインストールしたら、Angularプロジェクトを管理するため、ターミナルで次のコマンドを実行してインストールの完了を確認します。
ng --version実行すると、Angular CLIのバージョンが表示されます。
4. Angularアプリケーションを作成する
Angularアプリケーションを作成するには、Angularプロジェクトの設定ファイルとソースコードを格納するワークスペース（ディレクトリ）が必要です。ターミナルを開いて、以下のコードを実行してください。「my-app」は任意のアプリケーション名に置き換えます。
ng new my-appこれで指定した名前で新規ディレクトリが作成され、必要な設定ファイルのセットアップ、初期化されたAngularアプリケーションの生成が行われます。
5. Angularアプリケーションをテストする
Angularアプリケーションを確認するには、cdコマンドを使用して作成したディレクトリに移動します。
cd my-app次に以下のコマンドを実行して開発サーバーを起動しましょう。
ng serveこれで、Angularアプリケーションがコンパイルされ、開発サーバーが起動します。サーバーはポート4200（デフォルト）で実行されます。
お好きなブラウザを開いて、「http://localhost:4200/」にアクセスすると、Angularアプリケーションを確認できるはずです。
これで完了です。
LinuxにAngularをインストールする
最後に、Linuxを実行するコンピュータにAngularをインストールする手順を見ていきます。
1. Node.jsとnpmをインストールする（まだの場合）
WindowsやMacの手順と同様、まずはNode.jsとnpmをインストールする必要があります。すでにインストールがお済みの場合は、次のステップに進んでください。Node.jsのインストール方法はこちらをご覧ください。
2. npmパッケージマネージャーでAngular CLIをインストールする
続いて、システムにAngular CLIをインストールします。ターミナルウィンドウを開いて、以下のコマンドを実行してください。
npm install -g @angular/cliあるいは、以下のコマンドでもOKです。
$ sudo npm install -g @angular/cliこれでAngular CLIツールの最新の安定版がインストールされ、システム全体で使えるようになります。
3. Angularアプリケーションを作成する
Angularアプリケーションを作成するには、Angularプロジェクトの設定ファイルとソースコードを格納するワークスペース（ディレクトリ）が必要です。ターミナルを開いて、以下のコードを実行してください。「my-app」は任意のアプリケーション名に置き換えます。
ng new my-appこれで指定した名前で新規ディレクトリが作成され、必要な設定ファイルのセットアップ、初期化されたAngularアプリケーションの生成が行われます。
4. Angularアプリケーションをテストする
Angularアプリケーションをテストするには、cdコマンドを使って作成したディレクトリに移動します。
cd my-app続いて、以下を実行してください。
ng serveサーバーはポート4200（デフォルト）で動作します。任意のブラウザを開いて、「http://localhost:4200/」にアクセスしましょう。
Angularアプリケーションが表示されれば成功です。
まとめ
AngularをWindows、macOS、Linuxにインストールする手順をご紹介しました。この記事を参考に、Angularの開発環境を整えてみてください。
Angularを使用するにあたって、より深い理解や学習も必要になっていくもの。Angularには、公式ドキュメントやコミュニティによるAngular Universityなど、習得に役立つリソースが多数あるため安心です。
また、r/Angular subredditのようなAngularに特化したコミュニティに参加するのも有益です。
Angularアプリケーションの開発を終えたら、Kinstaのアプリケーションホスティングでデプロイしませんか？Kinstaは、Angulaで構築されたアプリケーションを考慮して設計された高性能なホスティングソリューション、高速で安全かつ信頼性の高い体験を提供しています。
Angularをインストールし、リソースを活用してスキルを磨き、一流のAngular開発者を目指しましょう。
