Skip to content

README.md

Latest commit

 

History

History
86 lines (53 loc) · 4.95 KB

README.md

File metadata and controls

86 lines (53 loc) · 4.95 KB
Raw

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

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

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

HELPFUL: 動画の方が良いですか？このチュートリアルには、YouTubeのフルコースを用意しています！

開始する前に

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

あなたの経験

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

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

あなたの環境

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

NOTE: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります

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

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

Homesランディングページの出力

ローカル開発環境

NOTE: このステップはローカル環境のみで必要です！

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

Angularはactive LTSまたはmaintenance LTSバージョンのNode.jsが必要です。お使いの`Node.js`のバージョンを確認しましょう。必要なバージョンの詳細は、[package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json)のenginesプロパティを参照してください。

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

  1. 次のコマンドを実行してください: node --version
  2. 表示されたバージョンが要件を満たしているか確認してください
もし`node.js`をインストールしていない場合、[nodejs.orgのインストール方法](https://nodejs.org/ja/download/)を参照してください。 `node.js`と`npm`がインストールされているならば、Angularの開発を効果的に進めるためのツールである[Angular CLI](tools/cli)をインストールするのが次のステップです。

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

Angularでアプリをビルドする際に使用するツールはお好きなものを選んで構いません。以下をおすすめします:
  1. Visual Studio Code
  2. 任意ですが、開発体験を向上させるために[Angular Language Service]のインストールを推奨します(https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
  3. WebStorm

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

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