入門

インストール

オンラインスターターを使ってAngularをすぐに始めましょう。または、ターミナルを使ってローカルでも開始できます。

オンラインで試す

プロジェクトを設定せずに、ブラウザでAngularを試したい場合は、オンラインサンドボックスを使うことができます。

Angularアプリを試す最速の方法です。設定は不要です。

Playgroundを開く

ローカルに新しいプロジェクトを設定する

新しいプロジェクトを開始する場合、Gitなどのツールを使用するために、ローカルにプロジェクトを作成するのが一般的です。

前提条件

手順

以下のガイドは、ローカルにAngularプロジェクトを設定する手順を説明します。

Angular CLIをインストールする

ターミナルを開き（Visual Studio Codeを使用している場合は、統合ターミナルを開くことができます）、次のコマンドを実行します。

npm

npm install -g @angular/cli

pnpm

pnpm install -g @angular/cli

yarn

yarn global add @angular/cli

bun

bun install -g @angular/cli

WindowsまたはUnixでこのコマンドを実行する際に問題が発生した場合は、CLIドキュメントを参照してください。

新しいプロジェクトを作成する

ターミナルで、CLIコマンドng newを実行し、目的のプロジェクト名を入力します。次の例では、my-first-angular-appというプロジェクト名を使用します。

ng new <project-name>

プロジェクトの設定に関するいくつかのオプションが表示されます。矢印キーとEnterキーを使ってナビゲートし、必要なオプションを選択します。

特に好みがなければ、Enterキーを押してデフォルトのオプションを採用し、設定を続行してください。

設定オプションを選択し、CLIがセットアップを実行すると、次のようなメッセージが表示されます。

✔ Packages installed successfully.    Successfully initialized git.

これで、ローカルにプロジェクトを実行する準備が整いました！

ローカルに新しいプロジェクトを実行する

ターミナルで、新しいAngularプロジェクトに切り替えます。

cd my-first-angular-app

この時点で、すべての依存関係がインストールされているはずです（プロジェクト内にnode_modulesフォルダが存在することを確認できます）。次のコマンドを実行してプロジェクトを開始できます。

npm start

すべてが正常に完了すると、ターミナルに次のような確認メッセージが表示されます。

Watch mode enabled. Watching for file changes...NOTE: Raw file sizes do not reflect development server per-request transformations.  ➜  Local:   http://localhost:4200/  ➜  press h + enter to show help

これで、Localのパス（例：http://localhost:4200）にアクセスしてアプリケーションを確認できます。コーディングを楽しんでください！🎉

開発でのAIの使用

AI搭載IDEでの開発を開始するには、Angularプロンプトルールとベストプラクティスをチェックしてください。

次のステップ

Angularプロジェクトを作成したので、基本概念ガイドでAngularの詳細について学ぶか、詳しいガイドからトピックを選択してください！