PR

Angular：ローカル環境構築手順４ステップ

TypeScript

このページでは、Angularをローカル環境で構築するための基本的な手順について解説いたします。

参考　Angularとは？

ローカル環境の構築はAngularを開発する際に必要となる最初の１歩で、Webアプリケーションの構築に必要なフレームワークと各種ツールのセットアップを含んでいます。このページで解説する構築手順は、最も一般的なAngular CLI（Command Line Interface）を使用したAngularアプリケーションのセットアップ方法に焦点を当てています。

このページで説明する手順は、WindowsおよびMacOSの両方で共通的に利用することができます。

Node.js、Yarn、Angular CLIはクロスプラットフォーム対応しており、Windows、MacOS、さらにLinuxでも同様のコマンドを使用してインストールと設定を行うことができます。

ただし、インストール方法に微妙に違いがあります。

例えば、Node.jsのインストーラーはOS（オペレーティングシステム）によって異なります。また、コマンドラインインターフェース（ターミナルやコマンドプロンプト）の見た目や一部のコマンド（ファイルパスの指定方法など）も異なります。が、npm, yarn, ng といったコマンド自体の使用方法には変わりありません。

スポンサーリンク

ステップ1: Node.js と Yarn のインストール

  1. Node.jsの公式サイトからNode.jsをインストール。
  2. Node.jsをインストールするとnpmもインストールされるので、次にYarnをインストールします。コマンドプロンプトまたはターミナルで以下のコマンドを実行してください。
npm install -g yarn

参考　Node.jsとは？

  1. インストール後、以下のコマンドでそれぞれのバージョンを確認します。
# node -v
v18.19.1

# yarn -v
1.22.21
Q
yarnとは？
A

Yarnは、JavaScriptのためのパッケージマネージャー。Facebook、Google、Exponent、Tildeによって共同で開発され、npmの代替として設計されています。依存関係の管理をより高速、安全、信頼性の高い方法で行うことができます。

パッケージマネージャとは、ソフトウェアのインストール、アップデート、設定、削除などを簡単にするためのツールのことで。Google Play Store と同じような立ち位置のもので、アプリの管理を手助けしてくれるツールのこと。Yarnをインストールしておくことで、必要となるパッケージ（＝プログラムの部品）を簡単にインストールしたり削除したりすることができるようになります。

ステップ2: Angular CLI のインストール

まずは、Yarnを使ってAngular CLIをインストールします。Angular CLIの役割はこの章の最後で詳しく説明しますが、Angular専用のコマンドラインツールのようなものです。

Angular CLIをインストールするために、以下のコマンドを実行してください。

yarn global add @angular/cli

上記のコマンドを実行することでAngular CLIがグローバルにインストールされます。Angular CLIが正常にインストールされたことを確認するため、以下のコマンドをコマンドラインまたはターミナルで実行します。

ng version

以下のような表示がされればインストール成功です。

Angular CLI
Angular CLI

Angular CLI（Command Line Interface）は、Angularアプリケーションの開発を助けるためのコマンドラインツール。Angular CLIは、新しいプロジェクトの生成、アプリケーションの開発サーバーの起動、コードのテスト、アプリケーションのビルドやデプロイなど、開発プロセスの多くの側面を自動化し、簡単に行えるように設計されています。

ポイント　Angular CLIを使用するメリット

  1. 高速な開発スタート
    • プロジェクトのセットアップと構成に要する時間を削減し、すぐに開発を始めることができます。
  2. 一貫性のあるコードベース
    • CLIによって生成されるファイル構造やコーディングスタンダードが統一されるため、チーム内でのコードの読みやすさとメンテナンスが向上します。
  3. 自動化されたタスク
    • テストの実行、ビルドの最適化、アプリケーションのデプロイなど、繰り返し行う作業を自動化し、効率的な開発フローを実現します。
グローバルのAngular CLIとプロジェクト固有のAngular CLI

プロジェクト内のAngular CLIとグローバルのAngular CLIの違いを簡単に説明すると、「どこにインストールされているか」と「どのプロジェクトで使用できるか」によって区別されます。

ポイント　グローバルのAngular CLI

  • どこに？ グローバルにインストールされたAngular CLIは、コンピュータのシステム全体でアクセスできるようになります。つまり、どのディレクトリからでもコマンドラインにngコマンドを入力することで、Angular CLIの機能を使用できます。
  • どのプロジェクトで？ グローバルにインストールされているため、新しいAngularプロジェクトを作成したり、既存のプロジェクトに対して操作を行ったりする際に便利です。しかし、異なるプロジェクトが異なるバージョンのAngular CLIを要求する場合、バージョンの衝突が生じる可能性があります。

ポイント　プロジェクト内のAngular CLI

  • どこに？ プロジェクト内にインストールされたAngular CLIは、その特定のプロジェクトのnode_modulesディレクトリ内にのみ存在します。これにより、そのプロジェクトは独自のAngular CLIバージョンを持つことができます。
  • どのプロジェクトで？ この設定では、Angular CLIはそのプロジェクト内でのみ使用可能です。つまり、そのプロジェクトに適した特定のバージョンのAngular CLIを持つことができ、他のプロジェクトやグローバルにインストールされたAngular CLIとのバージョン衝突を避けることができます。

ステップ3: 新しいAngularアプリケーションの作成

Angular CLIを使って新しいAngularアプリケーションを作成します。まずは、開発用のディレクトリに移動します。 例えば、Documents の中に Projects ディレクトリがある場合、以下のように移動します（Windowsの場合はパスが異なる場合があります）。

cd ~/Documents/Projects

開発用のディレクトリはどこでもOK。自分のPC上で動作させるためのディレクトリなので任意の場所で構いません。ただし、プロジェクト全体で基本となるルールがある場合はそちらに従いましょう。

開発用のディレクトリに移動したら以下のコマンドを実行します。Yarnを使用する場合でも、Angular CLIのコマンドは変わりません。

ng new my-angular-app --package-manager=yarn

--package-manager=yarn オプションを指定すると、Angular CLIはnpmの代わりにYarnを使用してパッケージを管理します。my-angular-app はプロジェクト名で任意で変更可能。例えば、todo-app という名前のプロジェクトを作りたければ以下のようなコマンドを実行すればOKです。

ng new todo-app --package-manager=yarn

ステップ4: アプリケーションの実行

プロジェクトディレクトリに移動し、アプリケーションを起動します。

cd my-angular-app
ng serve --open

ng serveコマンドは開発サーバーを起動し、--openオプションはブラウザでアプリケーションを自動的に開きます。（多少時間がかかる場合があります）

これで、Yarnを利用してローカル環境でAngularアプリケーションを実行することができます。

成功すると、以下のような画面が開きます。

Angular ローカル環境構築
タイトルとURLをコピーしました