Skip to content

{tutorials/first-app/intro}の翻訳 #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
darkss-xyzzy wants to merge 3 commits into
base: main
Choose a base branch
from
+127 −41
Open

{tutorials/first-app/intro}の翻訳 #1140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
49b7c2c
{tutorials/first-app/intro}の翻訳
darkss-xyzzy Jan 18, 2026
56ee66a
残っていた英文を削除
darkss-xyzzy Jan 18, 2026
7627756
余分な空白を削除
darkss-xyzzy Jan 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions adev-ja/src/content/tutorials/first-app/intro/README.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Build your first Angular app

This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.

You can do as many or as few as you would like and you can do them in any order.

HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!

<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>

## Before you start

For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.

### Your experience

The lessons in this tutorial assume that you have experience with the following:

1. Created an HTML web page by editing the HTML directly.
1. Programmed web site content in JavaScript.
1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
1. Used command-line instructions to perform tasks on your computer.

### Your equipment

These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems.

NOTE: Look for alerts like this one, which call out steps that may only be for your local editor.

## Conceptual preview of your first Angular app

The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
This app uses features that are common to many Angular apps.

<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">

## Local development environment

NOTE: This step is only for your local environment!

Perform these steps in a command-line tool on the computer you want to use for this tutorial.

<docs-workflow>

<docs-step title="Identify the version of `node.js` that Angular requires">
Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).

From a **Terminal** window:

1. Run the following command: `node --version`
1. Confirm that the version number displayed meets the requirements.
</docs-step>

<docs-step title="Install the correct version of `node.js` for Angular">
If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
</docs-step>

<docs-step title="Install the latest version of Angular">
With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.

From a **Terminal** window run the following command: `npm install -g @angular/cli`.
</docs-step>

<docs-step title="Install integrated development environment (IDE)">
You are free to use any tool you prefer to build apps with Angular. We recommend the following:

1. [Visual Studio Code](https://code.visualstudio.com/)
2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
3. [WebStorm](https://www.jetbrains.com/webstorm/)
</docs-step>

<docs-step title="Optional: set-up your AI powered IDE">

In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).

</docs-step>

</docs-workflow>

For more information about the topics covered in this lesson, visit:

<docs-pill-row>
<docs-pill href="/overview" title="What is Angular"/>
<docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
<docs-pill href="/cli" title="Angular CLI Reference"/>
</docs-pill-row>
82 changes: 41 additions & 41 deletions adev-ja/src/content/tutorials/first-app/intro/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,86 @@
# Build your first Angular app
# 最初のAngularアプリケーションをビルドしよう

This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
このチュートリアルはAngularでコーディングを始めるために必要な概念を紹介するレッスンで構成されています。

You can do as many or as few as you would like and you can do them in any order.
レッスンの数、順番ともに自由に選べます。

HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!
補足: 動画の方が良いですか？このチュートリアルには、[YouTubeのフルコース](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7)を用意しています！

<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>

## Before you start
## 開始する前に

For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.
このチュートリアルを最大限に活用するために、必要な要件を満たしているか確認してください。

### Your experience
### あなたの経験

The lessons in this tutorial assume that you have experience with the following:
このチュートリアルのレッスンは次の経験を想定しています:

1. Created an HTML web page by editing the HTML directly.
1. Programmed web site content in JavaScript.
1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
1. Used command-line instructions to perform tasks on your computer.
1. HTMLを直接編集してwebページを作成したことがある。
1. JavaScriptを使ってwebサイトのコンテンツをプログラミングしたことがある。
1. カスケーディングスタイルシート(CSS)を読み、セレクターの使い方を理解している。
1. コマンドラインを使ってコンピューター上のタスクを実行したことがある。

### Your equipment
### あなたの環境

These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems.
これらのレッスンはローカルにインストールされたAngularのツール、または組み込みエディタのどちらでも進めることができます。ローカルでのAngularの開発は、Windows, MacOSあるいはLinuxベースのシステムで行えます。

NOTE: Look for alerts like this one, which call out steps that may only be for your local editor.
注意: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります

## Conceptual preview of your first Angular app
## 最初のAngularアプリケーションの概念プレビュー

The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
This app uses features that are common to many Angular apps.
このチュートリアルでは賃貸住宅の一覧を表示し、各物件の詳細を表示するAngularアプリケーションを作ります。
このアプリケーションでは、多くのAngularアプリケーションと共通する機能を使用します。

<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
<img alt="Homesランディングページの出力" src="assets/images/tutorials/first-app/homes-app-landing-page.png">

## Local development environment
## ローカル開発環境

NOTE: This step is only for your local environment!
注意: このステップはローカル環境のみで必要です！

Perform these steps in a command-line tool on the computer you want to use for this tutorial.
このチュートリアルを実施するために使用するコンピューター上で、コマンドラインツールを使って次の手順を実行してください。

<docs-workflow>

<docs-step title="Identify the version of `node.js` that Angular requires">
Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
<docs-step title="Angularに必要な`node.js`のバージョンを確認する">
Angularはactive LTSまたはmaintenance LTSバージョンのNode.jsが必要です。お使いの`Node.js`のバージョンを確認しましょう。必要なバージョンの詳細は、[package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json)のenginesプロパティを参照してください。

From a **Terminal** window:
**ターミナル**のウィンドウで:

1. Run the following command: `node --version`
1. Confirm that the version number displayed meets the requirements.
1. 次のコマンドを実行してください: `node --version`
1. 表示されたバージョンが要件を満たしているか確認してください
</docs-step>

<docs-step title="Install the correct version of `node.js` for Angular">
If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
<docs-step title="Angularに必要とする`node.js`の適切なバージョンをインストールする">
もし`node.js`をインストールしていない場合、[nodejs.orgのインストール方法](https://nodejs.org/ja/download/)を参照してください。
</docs-step>

<docs-step title="Install the latest version of Angular">
With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
<docs-step title="Angularの最新バージョンをインストールする">
`node.js`と`npm`がインストールされているならば、Angularの開発を効果的に進めるためのツールである[Angular CLI](tools/cli)をインストールするのが次のステップです。

From a **Terminal** window run the following command: `npm install -g @angular/cli`.
**ターミナル**ウィンドウで次のコマンドを実行してください: `npm install -g @angular/cli`.
</docs-step>

<docs-step title="Install integrated development environment (IDE)">
You are free to use any tool you prefer to build apps with Angular. We recommend the following:
<docs-step title="統合開発環境をインストールする(IDE)">
Angularでアプリをビルドする際に使用するツールはお好きなものを選んで構いません。以下をおすすめします:

1. [Visual Studio Code](https://code.visualstudio.com/)
2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
2. 任意ですが、開発体験を向上させるために[Angular Language Service]のインストールを推奨します(https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
3. [WebStorm](https://www.jetbrains.com/webstorm/)
</docs-step>

<docs-step title="Optional: set-up your AI powered IDE">
<docs-step title="任意: AI対応IDEのセットアップ">

In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
お好みのAI対応IDEでこのチュートリアルを進める場合、[Angularのプロンプトルールおよびベストプラクティスをご確認ください](/ai/develop-with-ai)。

</docs-step>

</docs-workflow>

For more information about the topics covered in this lesson, visit:
このレッスンで扱う内容についてさらに知りたい場合は、以下をご覧ください。

<docs-pill-row>
<docs-pill href="/overview" title="What is Angular"/>
<docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
<docs-pill href="/cli" title="Angular CLI Reference"/>
<docs-pill href="/overview" title="Angularとは"/>
<docs-pill href="/tools/cli/setup-local" title="ローカル環境とワークスペースのセットアップ"/>
<docs-pill href="/cli" title="Angular CLIリファレンス"/>
</docs-pill-row>