⚠ This page is served via a proxy. Original site: https://github.com
This service does not collect credentials or authentication data.
Skip to content

{tutorials/first-app/steps/01-hello-world/}の翻訳 #1142

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 7 commits into
base: main
Choose a base branch
from
Open

{tutorials/first-app/steps/01-hello-world/}の翻訳 #1142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 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
5be5f35
Update adev-ja/src/content/tutorials/first-app/intro/README.md
darkss-xyzzy Jan 20, 2026
0bfa59b
Update adev-ja/src/content/tutorials/first-app/intro/README.md
darkss-xyzzy Jan 20, 2026
66809c0
Update adev-ja/src/content/tutorials/first-app/intro/README.md
darkss-xyzzy Jan 20, 2026
8bd0cfb
和訳を作成
darkss-xyzzy Jan 31, 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!
HELPFUL: 動画の方が良いですか？このチュートリアルには、[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.
NOTE: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります

## 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!
NOTE: このステップはローカル環境のみで必要です！

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>
122 changes: 122 additions & 0 deletions adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
# Hello world

This first lesson serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app. In this lesson, we'll update the application to display the famous text, "Hello World".

<docs-video src="https://www.youtube.com/embed/UnOwDuliqZA?si=uML-cDRbrxmYdD_9"/>

## What you'll learn

The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app.

NOTE: If you are working with the embedded editor, skip to [step four](#create-hello-world).
When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right.

<docs-workflow>

<docs-step title="Download the default app">
Start by clicking the "Download" icon in the top right pan of the code editor. This will download a `.zip` file containing the source code for this tutorial. Open this in your local Terminal and IDE then move on to testing the default app.

At any step in the tutorial, you can click this icon to download the step's source code and start from there.
</docs-step>

<docs-step title="Test the default app">
In this step, after you download the default starting app, you build the default Angular app.
This confirms that your development environment has what you need to continue the tutorial.

In the **Terminal** pane of your IDE:

1. In your project directory, navigate to the `first-app` directory.
1. Run this command to install the dependencies needed to run the app.

```shell
npm install
```

1. Run this command to build and serve the default app.

```shell
ng serve
```

The app should build without errors.

1. In a web browser on your development computer, open `http://localhost:4200`.
1. Confirm that the default web site appears in the browser.
1. You can leave `ng serve` running as you complete the next steps.
</docs-step>

<docs-step title="Review the files in the project">
In this step, you get to know the files that make up a default Angular app.

In the **Explorer** pane of your IDE:

1. In your project directory, navigate to the `first-app` directory.
1. Open the `src` directory to see these files.
1. In the file explorer, find the Angular app files (`/src`).
1. `index.html` is the app's top level HTML template.
1. `styles.css` is the app's top level style sheet.
1. `main.ts` is where the app starts running.
1. `favicon.ico` is the app's icon, just as you would find in any web site.
1. In the file explorer, find the Angular app's component files (`/app`).
1. `app.ts` is the source file that describes the `app-root` component.
This is the top-level Angular component in the app. A component is the basic building block of an Angular application.
The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.

In this app, the styles are in a separate file while the component's code and HTML template are in this file.

1. `app.css` is the style sheet for this component.
1. New components are added to this directory.

1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
1. `.angular` has files required to build the Angular app.
1. `.e2e` has files used to test the app.
1. `.node_modules` has the node.js packages that the app uses.
1. `angular.json` describes the Angular app to the app building tools.
1. `package.json` is used by `npm` (the node package manager) to run the finished app.
1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.

After you have reviewed the files that make up an Angular app project, continue to the next step.
</docs-step>

<docs-step title="Create `Hello World`">
In this step, you update the Angular project files to change the displayed content.

In your IDE:

1. Open `first-app/src/index.html`.
NOTE: This step and the next are only for your local environment!

1. In `index.html`, replace the `<title>` element with this code to update the title of the app.

<docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/>

Then, save the changes you just made to `index.html`.

1. Next, open `first-app/src/app/app.ts`.
1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.

<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>

1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.

<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/>

Then, save the changes you made to `app.ts`.

1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again.
1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays _Homes_ in the title and _Hello world_ in the body of your app:
<img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
</docs-step>

</docs-workflow>

SUMMARY: In this lesson, you updated a default Angular app to display _Hello world_.
In the process, you learned about the `ng serve` command to serve your app locally for testing.

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

<docs-pill-row>
<docs-pill href="guide/components" title="Angular Components"/>
<docs-pill href="tools/cli" title="Creating applications with the Angular CLI"/>
</docs-pill-row>
Loading