最初のAngularアプリケーションをビルドしよう

このチュートリアルはAngularでコーディングを始めるために必要な概念を紹介するレッスンで構成されています。

レッスンの数、順番ともに自由に選べます。

開始する前に

このチュートリアルを最大限に活用するために、必要な要件を満たしているか確認してください。

あなたの経験

このチュートリアルのレッスンは次の経験を想定しています:

1. HTMLを直接編集してwebページを作成したことがある。
2. JavaScriptを使ってwebサイトのコンテンツをプログラミングしたことがある。
3. カスケーディングスタイルシート(CSS)を読み、セレクターの使い方を理解している。
4. コマンドラインを使ってコンピューター上のタスクを実行したことがある。

あなたの環境

これらのレッスンはローカルにインストールされたAngularのツール、または組み込みエディタのどちらでも進めることができます。ローカルでのAngularの開発は、Windows, MacOSあるいはLinuxベースのシステムで行えます。

最初のAngularアプリケーションの概念プレビュー

このチュートリアルでは賃貸住宅の一覧を表示し、各物件の詳細を表示するAngularアプリケーションを作ります。 このアプリケーションでは、多くのAngularアプリケーションと共通する機能を使用します。

ローカル開発環境

このチュートリアルを実施するために使用するコンピューター上で、コマンドラインツールを使って次の手順を実行してください。

1. Angularに必要なnode.jsのバージョンを確認する

   Angularはactive LTSまたはmaintenance LTSバージョンのNode.jsが必要です。お使いのNode.jsのバージョンを確認しましょう。必要なバージョンの詳細は、package.json fileのenginesプロパティを参照してください。

   ターミナルのウィンドウで:

   1. 次のコマンドを実行してください: node --version
   2. 表示されたバージョンが要件を満たしているか確認してください

2. Angularに必要とするnode.jsの適切なバージョンをインストールする

   もしnode.jsをインストールしていない場合、nodejs.orgのインストール方法を参照してください。

3. Angularの最新バージョンをインストールする

   node.jsとnpmがインストールされているならば、Angularの開発を効果的に進めるためのツールであるAngular CLIをインストールするのが次のステップです。

   ターミナルウィンドウで次のコマンドを実行してください: npm install -g @angular/cli.

4. 統合開発環境をインストールする(IDE)

   Angularでアプリをビルドする際に使用するツールはお好きなものを選んで構いません。以下をおすすめします:

   1. Visual Studio Code
   2. 任意ですが、開発体験を向上させるために[Angular Language Service]のインストールを推奨します(https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
   3. WebStorm

5. 任意: AI対応IDEのセットアップ

   お好みのAI対応IDEでこのチュートリアルを進める場合、Angularのプロンプトルールおよびベストプラクティスをご確認ください。

このレッスンで扱う内容についてさらに知りたい場合は、以下をご覧ください。