From 49b7c2c02c7c5252272115fba937da9f41f21fa7 Mon Sep 17 00:00:00 2001 From: Darkss Date: Sun, 18 Jan 2026 23:17:21 +0900 Subject: [PATCH 1/9] =?UTF-8?q?{tutorials/first-app/intro}=E3=81=AE?= =?UTF-8?q?=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tutorials/first-app/intro/README.en.md | 86 +++++++++++++++++++ .../tutorials/first-app/intro/README.md | 83 +++++++++--------- 2 files changed, 128 insertions(+), 41 deletions(-) create mode 100644 adev-ja/src/content/tutorials/first-app/intro/README.en.md diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.en.md b/adev-ja/src/content/tutorials/first-app/intro/README.en.md new file mode 100644 index 0000000000..1b6d8c9fc8 --- /dev/null +++ b/adev-ja/src/content/tutorials/first-app/intro/README.en.md @@ -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! + + + +## 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. + +Output of homes landing page + +## 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. + + + + +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. + + + +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/) + + + +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`. + + + +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/) + + + + +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). + + + + + +For more information about the topics covered in this lesson, visit: + + + + + + diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index 1b6d8c9fc8..46697c4888 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -1,86 +1,87 @@ -# 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)を用意しています！ -## 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. +注意: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります + +## 最初のAngularアプリケーションの概念プレビュー -## Conceptual preview of your first Angular app +このチュートリアルでは賃貸住宅の一覧を表示し、各物件の詳細を表示するAngularアプリケーションを作ります。 +このアプリケーションでは、多くの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. +Homesランディングページの出力 -Output of homes landing page +## ローカル開発環境 -## 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. +このチュートリアルを実施するために使用するコンピューター上で、コマンドラインツールを使って次の手順を実行してください。 - -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). + +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. 表示されたバージョンが要件を満たしているか確認してください - -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/) + +もし`node.js`をインストールしていない場合、[nodejs.orgのインストール方法](https://nodejs.org/ja/download/)を参照してください。 - -With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development. + +`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`. - -You are free to use any tool you prefer to build apps with Angular. We recommend the following: + +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/) - + -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)。 For more information about the topics covered in this lesson, visit: +このレッスンで扱う内容についてさらに知りたい場合は、以下をご覧ください。 - - - + + + From 56ee66a4236c2a64c914bd0c8ec22ce457ced06a Mon Sep 17 00:00:00 2001 From: Darkss Date: Sun, 18 Jan 2026 23:25:52 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E6=AE=8B=E3=81=A3=E3=81=A6=E3=81=84?= =?UTF-8?q?=E3=81=9F=E8=8B=B1=E6=96=87=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- adev-ja/src/content/tutorials/first-app/intro/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index 46697c4888..ea2955a38a 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -77,7 +77,6 @@ Angularでアプリをビルドする際に使用するツールはお好きな -For more information about the topics covered in this lesson, visit: このレッスンで扱う内容についてさらに知りたい場合は、以下をご覧ください。 From 7627756ff541da839351673a14e71b88abcfce9b Mon Sep 17 00:00:00 2001 From: Darkss Date: Sun, 18 Jan 2026 23:31:11 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=E4=BD=99=E5=88=86=E3=81=AA=E7=A9=BA?= =?UTF-8?q?=E7=99=BD=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- adev-ja/src/content/tutorials/first-app/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index ea2955a38a..b942c6a9c8 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -26,7 +26,7 @@ これらのレッスンはローカルにインストールされたAngularのツール、または組み込みエディタのどちらでも進めることができます。ローカルでのAngularの開発は、Windows, MacOSあるいはLinuxベースのシステムで行えます。 注意: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります - + ## 最初のAngularアプリケーションの概念プレビュー このチュートリアルでは賃貸住宅の一覧を表示し、各物件の詳細を表示するAngularアプリケーションを作ります。 From 5be5f357aa16f357edc4345e4c68dd514c7fab74 Mon Sep 17 00:00:00 2001 From: darkss-xyzzy <114789857+darkss-xyzzy@users.noreply.github.com> Date: Tue, 20 Jan 2026 20:52:24 +0900 Subject: [PATCH 4/9] Update adev-ja/src/content/tutorials/first-app/intro/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 了解です。補足->HELPFULに戻します。 Co-authored-by: Suguru Inatomi --- adev-ja/src/content/tutorials/first-app/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index b942c6a9c8..156246d5b5 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -4,7 +4,7 @@ レッスンの数、順番ともに自由に選べます。 -補足: 動画の方が良いですか？このチュートリアルには、[YouTubeのフルコース](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7)を用意しています！ +HELPFUL: 動画の方が良いですか？このチュートリアルには、[YouTubeのフルコース](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7)を用意しています！ From 0bfa59ba67b1cccd37ff1655291df52cb3e31fa1 Mon Sep 17 00:00:00 2001 From: darkss-xyzzy <114789857+darkss-xyzzy@users.noreply.github.com> Date: Tue, 20 Jan 2026 20:52:46 +0900 Subject: [PATCH 5/9] Update adev-ja/src/content/tutorials/first-app/intro/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 了解です。注意->NOTEに戻します。 Co-authored-by: Suguru Inatomi --- adev-ja/src/content/tutorials/first-app/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index 156246d5b5..0b2dc1c0a0 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -25,7 +25,7 @@ HELPFUL: 動画の方が良いですか？このチュートリアルには、[Y これらのレッスンはローカルにインストールされたAngularのツール、または組み込みエディタのどちらでも進めることができます。ローカルでのAngularの開発は、Windows, MacOSあるいはLinuxベースのシステムで行えます。 -注意: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります +NOTE: このようなアラートに注意してください、ローカルエディタで作業している場合にのみ必要となる手順が示されていることがあります ## 最初のAngularアプリケーションの概念プレビュー From 66809c0f3dae7b3e54de99622c3f69666b1e68f1 Mon Sep 17 00:00:00 2001 From: darkss-xyzzy <114789857+darkss-xyzzy@users.noreply.github.com> Date: Tue, 20 Jan 2026 20:53:02 +0900 Subject: [PATCH 6/9] Update adev-ja/src/content/tutorials/first-app/intro/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 了解です。注意->NOTEに戻します。 Co-authored-by: Suguru Inatomi --- adev-ja/src/content/tutorials/first-app/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md index 0b2dc1c0a0..5c0ffedd59 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/README.md +++ b/adev-ja/src/content/tutorials/first-app/intro/README.md @@ -36,7 +36,7 @@ NOTE: このようなアラートに注意してください、ローカルエ ## ローカル開発環境 -注意: このステップはローカル環境のみで必要です！ +NOTE: このステップはローカル環境のみで必要です！ このチュートリアルを実施するために使用するコンピューター上で、コマンドラインツールを使って次の手順を実行してください。 From 8bd0cfb52ce8ae4ee2ccdd45744de208eda06e91 Mon Sep 17 00:00:00 2001 From: Darkss Date: Sat, 31 Jan 2026 10:01:23 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=E5=92=8C=E8=A8=B3=E3=82=92=E4=BD=9C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../steps/01-hello-world/README.en.md | 122 +++++++++++++++ .../first-app/steps/01-hello-world/README.md | 147 +++++++++--------- 2 files changed, 196 insertions(+), 73 deletions(-) create mode 100644 adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md diff --git a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md new file mode 100644 index 0000000000..33cd19a7fa --- /dev/null +++ b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md @@ -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". + + + +## 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. + + + + +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. + + + +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. + + + +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. + + + +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 `` 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> diff --git a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md index 33cd19a7fa..19d085a4c9 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md @@ -1,122 +1,123 @@ # 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". +最初のレッスンは、このチュートリアル全体で完全なAngularアプリケーションを作り上げていくための出発点となります。このレッスンでは、アプリケーションを更新して有名な「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. +このレッスン後の更新済みアプリケーションが、あなたとIDEがAngularアプリケーションを作り始める準備ができていることを示します。 -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. +NOTE: 組み込みエディタで作業をする場合、[ステップ4](#hello-worldを作成する)に進んでください。 +ブラウザのプレイグラウンドで作業する時は、アプリケーションを実行するために`ng serve`を使う必要はありません。`ng generate`のような他のコマンドは右側にあるコンソールウィンドウで実行できます。 <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. +<docs-step title="デフォルトアプリケーションをダウンロードする"> +まずはコードエディタの右上のペインにある「ダウンロード」アイコンをクリックしてください。すると、このチュートリアル用のソースコードを含む`.zip`ファイルがダウンロードされます。ダウンロードしたファイルをローカルのターミナルやIDEで開き、デフォルトアプリケーションのテストに進んでください。 -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. +<docs-step title="デフォルトアプリケーションをテストする"> +このステップでは、デフォルトの開始アプリケーションをダウンロードした後に、Angularのデフォルトアプリケーションをビルドします。 +これが問題なく行えれば、チュートリアルを続けるために必要なを開発環境が整っていることを確認できます。 -In the **Terminal** pane of your IDE: +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. +1. プロジェクトディレクトリで、`first-app`ディレクトリに移動します。 +1. アプリケーションを実行するのに必要な依存関係をインストールするため、次のコマンドを実行します。 ```shell npm install ``` -1. Run this command to build and serve the default app. +1. デフォルトアプリケーションをビルドし、開発サーバーを起動するため、次のコマンドを実行します。 ```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. +1. 開発マシンのWebブラウザで、`http://localhost:4200`を開きます。 +1. ブラウザでデフォルトのWebサイトが表示できることを確認します。 +1. 次のステップに進む間も、`ng serve`は起動したままで構いません。 </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 title="プロジェクトのファイルをレビューする"> +このステップでは、Angularのデフォルトアプリケーションを構成するファイルについて述べます。 + +IDEの**エクスプローラー**ペイン: + +1. プロジェクトディレクトリで`first-app`ディレクトリに移動します。 +1. `src`ディレクトリを開いて内容を確認します。 + 1. ファイルエクスプローラーで、(`/src`)ディレクトリにあるAngularアプリケーションのファイルを確認します。 + 1. `index.html`はアプリケーションのトップレベルのHTMLテンプレートです。 + 1. `styles.css`はアプリケーションのトップレベルのスタイルシートです。 + 1. `main.ts`はアプリケーションの実行が開始されるエントリポイントです。 + 1. `favicon.ico`は一般的なWebサイトと同様のアプリケーションのアイコンです。 + 1. (`/app`)ディレクトリにあるコンポーネント関連のファイルを確認します。 + 1. `app.ts`は`app-root`コンポーネントを定義するソースファイルです。 + これはアプリケーションのトップレベルのAngularコンポーネントで、コンポーネントはAngularアプリケーションの基本的な構成要素です。 + コンポーネントの定義にはコンポーネントのコード、HTMLテンプレート、スタイルが含まれ、これらは１つのファイルにまとめることも、別ファイルに分けることもできます。 + + このアプリケーションでは、スタイルが別ファイルですが、コンポーネントのコードとHTMLテンプレートがこのファイルに含まれています。 + + 1. `app.css`はこのコンポーネントのスタイルシートです。 + 1. 新しいコンポーネントはこのディレクトリに追加されます。 + + 1. ディレクトリ(`/assets`)にはアプリケーションで使用される画像が含まれています。 + 1. Angularアプリケーションのビルドと実行に必要ですが、通常は直接操作しないファイルやディレクトリもあります。 + 1. `.angular`はAngularアプリケーションをビルドするのに必要なファイルを含みます。 + 1. `.e2e`はアプリケーションをテストするのに使用されるファイルを含みます。 + 1. `.node_modules`はアプリケーションが使用するnode.jsのパッケージを含みます。 + 1. `angular.json`はAngularアプリケーションの情報をアプリケーションのビルドツールに渡します。 + 1. `package.json`は`npm`(Node.jsのパッケージマネージャー)によって完成したアプリケーションを実行するのに使用されます。 + 1. `tsconfig.*`はTypeScriptコンパイラに対するアプリケーションの設定を記述するファイルです。 + +Angularアプリケーションプロジェクトを構成するファイルを確認したら、次のステップに進んでください。 </docs-step> -<docs-step title="Create `Hello World`"> -In this step, you update the Angular project files to change the displayed content. +<docs-step title="`Hello World`を作成する"> +このステップでは、表示内容を変更するためにAngularプロジェクトのファイルを更新します。 -In your IDE: +あなたのIDEで: -1. Open `first-app/src/index.html`. - NOTE: This step and the next are only for your local environment! +1. `first-app/src/index.html`を開いてください。 + NOTE: このステップと次のステップはローカル環境だけが対象です。 -1. In `index.html`, replace the `<title>` element with this code to update the title of the app. +1. `index.html`で、`<title>`要素を次のコードで置き換えてアプリケーションのタイトルを更新してください。 - <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/> + <docs-code header="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`. + その次に、変更した`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. +1. 次に`first-app/src/app/app.ts`を開いてください。 +1. `app.ts`の`@Component`の定義内にある、`template`の行を次のコードに置き換えてアプリケーションコンポーネントの表示テキストを変更します。 - <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]"/> + <docs-code language="angular-ts" header="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. +1. `app.ts`の`App`クラスの定義で、`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]"/> + <docs-code header="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`. + その次に、変更した`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"> +1. ステップ1での`ng serve`コマンドを停止していた場合は、IDEの**Terminal**ウィンドウで、`ng serve`を再度実行してください。 +1. ブラウザを開き、`localhost:4200`にアクセスし、アプリケーションがエラーがなくビルドされ、タイトルに**Homes**、本文に**Hello world**が表示されることを確認してください。 + <img alt="テキスト'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. +SUMMARY: このレッスンでは、Angularのデフォルトアプリケーションを更新し、**Hello world**を表示するように更新しました。 +その過程で、ローカル環境でアプリケーションをテストするためのコマンドである`ng serve`について学びました。 -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 href="/overview" title="Angularとは"/> + <docs-pill href="guide/components" title="Angularコンポーネント"/> + <docs-pill href="tools/cli" title="Angular CLIを使ったアプリケーションの作成"/> </docs-pill-row> From b6cada1e847abc2b08206e180fbea409c9a089e3 Mon Sep 17 00:00:00 2001 From: Darkss <darkss.xyzzy@gmail.com> Date: Wed, 11 Feb 2026 14:19:51 +0900 Subject: [PATCH 8/9] =?UTF-8?q?=E4=BD=99=E5=88=86=E3=81=AA=E8=A1=8C?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/tutorials/first-app/steps/01-hello-world/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md index 19d085a4c9..d7f19aa7bd 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md @@ -117,7 +117,6 @@ SUMMARY: このレッスンでは、Angularのデフォルトアプリケーシ このレッスンで扱った内容の詳細については、次のページをご覧ください: <docs-pill-row> - <docs-pill href="/overview" title="Angularとは"/> <docs-pill href="guide/components" title="Angularコンポーネント"/> <docs-pill href="tools/cli" title="Angular CLIを使ったアプリケーションの作成"/> </docs-pill-row> From fb73b143923523a4c146ecce77fdc8bea0a2f068 Mon Sep 17 00:00:00 2001 From: Darkss <darkss.xyzzy@gmail.com> Date: Sun, 8 Mar 2026 20:45:24 +0900 Subject: [PATCH 9/9] =?UTF-8?q?=E5=92=8C=E8=A8=B3=E3=82=92=E4=BD=9C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../first-app/steps/02-Home/README.en.md | 146 ++++++++++++++++++ .../first-app/steps/02-Home/README.md | 126 +++++++-------- 2 files changed, 209 insertions(+), 63 deletions(-) create mode 100644 adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md diff --git a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md new file mode 100644 index 0000000000..155e8b19c1 --- /dev/null +++ b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md @@ -0,0 +1,146 @@ +# Create Home component + +This tutorial lesson demonstrates how to create a new [component](guide/components) for your Angular app. + +<docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=OMVaw71EIa44yIOJ"/> + +## What you'll learn + +Your app has a new component: `Home`. + +## Conceptual preview of Angular components + +Angular apps are built around components, which are Angular's building blocks. +Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. +In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components. + +In Angular, components have metadata that define its properties. +When you create your `Home`, you use these properties: + +- `selector`: to describe how Angular refers to the component in templates. +- `standalone`: to describe whether the component requires a `NgModule`. +- `imports`: to describe the component's dependencies. +- `template`: to describe the component's HTML markup and layout. +- `styleUrls`: to list the URLs of the CSS files that the component uses in an array. + +<docs-pill-row> + <docs-pill href="api/core/Component" title="Learn more about Components"/> +</docs-pill-row> + +<docs-workflow> + +<docs-step title="Create the `Home`"> +In this step, you create a new component for your app. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. Run this command to create a new `Home` + + ```shell + ng generate component home + ``` + +1. Run this command to build and serve your app. + + NOTE: This step is only for your local environment! + + ```shell + ng serve + ``` + +1. Open a browser and navigate to `http://localhost:4200` to find the application. + +1. Confirm that the app builds without error. + + HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + +1. Leave `ng serve` running as you complete the next steps. + </docs-step> + +<docs-step title="Add the new component to your app's layout"> +In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout. + +In the **Edit** pane of your IDE: + +1. Open `app.ts` in the editor. +1. In `app.ts`, import `Home` by adding this line to the file level imports. + + <docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> + +1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`. + + <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> + +1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code. + + <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> + +1. Save your changes to `app.ts`. +1. If `ng serve` is running, the app should update. + If `ng serve` is not running, start it again. + _Hello world_ in your app should change to _home works!_ from the `Home`. +1. Check the running app in the browser and confirm that the app has been updated. + + <img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> + +</docs-step> + +<docs-step title="Add features to `Home`"> + +In this step you add features to `Home`. + +In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app. +In this step, you add a search filter and button that is used in a later lesson. +For now, that's all that `Home` has. +Note that, this step just adds the search elements to the layout without any functionality, yet. + +If you started from a fresh Angular project instead of downloading the starter +(ng new): add these globals to `src/styles.css` so the search button and input border are visible: + +``` +:root { + --primary-color: #605DC8; + --secondary-color: #8B89E6; + --accent-color: #e8e7fa; + --shadow-color: #E8E8E8; +} + +button.primary { + padding: 10px; + border: solid 1px var(--primary-color); + background: var(--primary-color); + color: white; + border-radius: 8px; +} +``` + +In the **Edit** pane of your IDE: + +1. In the `first-app` directory, open `home.ts` in the editor. +1. In `home.ts`, in `@Component`, update the `template` property with this code. + + <docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> + +1. Next, open `home.css` in the editor and update the content with these styles. + + NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array. + + <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> + +1. Confirm that the app builds without error. You should find the filter query box and button in your app and they should be styled. Correct any errors before you continue to the next step. + + <img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you created a new component for your app and gave it a filter edit control and button. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="cli/generate/component" title="`ng generate component`"/> + <docs-pill href="api/core/Component" title="`Component` reference"/> + <docs-pill href="guide/components" title="Angular components overview"/> +</docs-pill-row> diff --git a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md index 155e8b19c1..adfa8f5c9d 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md @@ -1,102 +1,102 @@ -# Create Home component +# homeコンポーネントを作成する -This tutorial lesson demonstrates how to create a new [component](guide/components) for your Angular app. +このチュートリアルはAngularアプリケーションの新しい[コンポーネント](guide/components)を作成する方法を紹介します。 <docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=OMVaw71EIa44yIOJ"/> -## What you'll learn +## 何を学ぶか -Your app has a new component: `Home`. +アプリケーションに新しいコンポーネント`Home`が追加されます。 -## Conceptual preview of Angular components +## Angularコンポーネントの概念的な概要 -Angular apps are built around components, which are Angular's building blocks. -Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. -In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components. +Angularアプリケーションはコンポーネントを中心に構築されており、Angularの基本的な構成要素です。 +コンポーネントはアプリケーション内の要素の機能や見た目を提供するコード、HTMLレイアウト、CSSスタイルが含まれます。 +Angularではコンポーネントの中にさらに別のコンポーネントを含めることができます。アプリケーションの機能や見た目はコンポーネン単位に分割して構成できます。 -In Angular, components have metadata that define its properties. -When you create your `Home`, you use these properties: +Angularでは、コンポーネントにはプロパティを定義するためのメタデータがあります。 +`Home`コンポーネントを作成するときには、これらのプロパティを使用します。 -- `selector`: to describe how Angular refers to the component in templates. -- `standalone`: to describe whether the component requires a `NgModule`. -- `imports`: to describe the component's dependencies. -- `template`: to describe the component's HTML markup and layout. -- `styleUrls`: to list the URLs of the CSS files that the component uses in an array. +- `selector`: テンプレートでAngularがコンポーネントを参照する方法を示します。 +- `standalone`: コンポーネントが`NgModule`を必要とするかを示します。 +- `imports`: コンポーネントの依存関係を示します。 +- `template`: コンポーネントのHTMLマークアップとレイアウトを示します。 +- `styleUrls`: コンポーネントが使用するCSSファイルのURLを配列で指定します。 <docs-pill-row> - <docs-pill href="api/core/Component" title="Learn more about Components"/> + <docs-pill href="api/core/Component" title="コンポーネントについて詳しく学ぶ"/> </docs-pill-row> <docs-workflow> <docs-step title="Create the `Home`"> -In this step, you create a new component for your app. +このステップでは、アプリケーション用の新しいコンポーネントを作成します。 -In the **Terminal** pane of your IDE: +IDEの**ターミナル**ペインで、 -1. In your project directory, navigate to the `first-app` directory. -1. Run this command to create a new `Home` +1. プロジェクトディレクトリの中の、`first-app`ディレクトリを開きます。 +1. 新しい`Home`コンポーネントを作成するために、次のコマンドを実行します。 ```shell ng generate component home ``` -1. Run this command to build and serve your app. +1. アプリケーションをビルドし、開発サーバーを起動するために、次のコマンドを実行します。 - NOTE: This step is only for your local environment! + NOTE: このステップはローカル環境でのみ実施します！ ```shell ng serve ``` -1. Open a browser and navigate to `http://localhost:4200` to find the application. +1. ブラウザを開き、`http://localhost:4200`にアクセスしてアプリケーションを確認します。 -1. Confirm that the app builds without error. +1. アプリケーションがエラーなくビルドされていることを確認します。 - HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + HELPFUL: 新しいコンポーネントを追加しましたが、まだアプリケーションのどのテンプレートにも組み込んでいませんので、前のレッスンと同様の表示になります。 -1. Leave `ng serve` running as you complete the next steps. +1. 次のステップに進む間も、`ng serve`はそのまま実行し続けておきます。 </docs-step> -<docs-step title="Add the new component to your app's layout"> -In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout. +<docs-step title="アプリケーションのレイアウトに新しいコンポーネントを追加する"> +このステップでは、新しいコンポーネント`Home`をアプリのルートコンポーネントである`App`に追加し、アプリケーションのレイアウトに表示されるようにします。 -In the **Edit** pane of your IDE: +IDEの**編集**ペインで、 -1. Open `app.ts` in the editor. -1. In `app.ts`, import `Home` by adding this line to the file level imports. +1. エディタで`app.ts`を開きます。 +1. `app.ts`でファイルレベルのインポートに、次の行を追加して`Home`をインポートします。 - <docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> + <docs-code header="src/app/app.tsでHomeをインポートする" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> -1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`. +1. `app.ts`の`@Component`内で、`imports`配列プロパティに`Home`を追加します。 - <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> + <docs-code header="src/app/app.tsで置き換える" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> -1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code. +1. `app.ts`の`@Component`内で、次のHTMLコードを含むように`template`プロパティを更新します。 - <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> + <docs-code language="angular-ts" header="src/app/app.tsで置き換える" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> -1. Save your changes to `app.ts`. -1. If `ng serve` is running, the app should update. - If `ng serve` is not running, start it again. - _Hello world_ in your app should change to _home works!_ from the `Home`. -1. Check the running app in the browser and confirm that the app has been updated. +1. 変更を`app.ts`に保存します。 +1. `ng serve`が実行中の場合、アプリケーションは自動的に更新されます。 + 実行中でない場合、再度`ng serve`を開始してください。 + `Home`コンポーネントによって、*Hello world*が*home works!*に変わるはずです。 +1. ブラウザで実行中のアプリケーションをチェックし、アプリケーションが更新されていることを確認します。 - <img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> + <img alt="テキスト'home works!'を表示するページのブラウザのフレーム" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> </docs-step> -<docs-step title="Add features to `Home`"> +<docs-step title="`Home`コンポーネントに機能を追加する"> -In this step you add features to `Home`. +このステップでは、`Home`コンポーネントに機能を追加します。 -In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app. -In this step, you add a search filter and button that is used in a later lesson. -For now, that's all that `Home` has. -Note that, this step just adds the search elements to the layout without any functionality, yet. +前のステップでは、`Home`のデフォルトのHTMLがアプリケーションで表示されるよう、`Home`をアプリケーションのテンプレートに追加しました。 +このステップでは、後のレッスンで使用する検索フィルターとボタンを追加します。 +現時点で`Home`が持つのはこれだけです。 +なお、このステップでは検索用の要素をレイアウトに追加するだけで、まだ機能はありません。 -If you started from a fresh Angular project instead of downloading the starter -(ng new): add these globals to `src/styles.css` so the search button and input border are visible: +(ng newで)スターターを使わずに、新しいAngularプロジェクトを作成した場合、 +検索ボタンと入力欄の枠線が表示されるよう`src/styles.css`に次のグローバルスタイルを追加します。 ``` :root { @@ -115,32 +115,32 @@ button.primary { } ``` -In the **Edit** pane of your IDE: +IDEの**編集**ペインで、 -1. In the `first-app` directory, open `home.ts` in the editor. -1. In `home.ts`, in `@Component`, update the `template` property with this code. +1. `first-app`ディレクトリで、`home.ts`をエディタで開きます。 +1. `home.ts`の`@Component`で、`template`プロパティを次のコードで更新します。 - <docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> + <docs-code language="angular-ts" header="src/app/home/home.tsを置き換える" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> -1. Next, open `home.css` in the editor and update the content with these styles. +1. 次に、エディタで`home.css`を開き、次のスタイルで内容を更新します。` - NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array. + NOTE: ブラウザでは、`src/app/home/home.ts`の`styles`配列にこれらのスタイルを記述可能です。 - <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> + <docs-code header="src/app/home/home.cssを置き換える" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> -1. Confirm that the app builds without error. You should find the filter query box and button in your app and they should be styled. Correct any errors before you continue to the next step. +1. アプリケーションがエラーなくビルドされていることを確認してください。フィルター用の入力ボックスとボタンが表示され、スタイルが反映されているはずです。次のステップに進む前に、エラーがあれば修正してください。 - <img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> + <img alt="homesアプリケーションのロゴ、フィルター入力欄、検索ボタンが表示されたブラウザ画面" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you created a new component for your app and gave it a filter edit control and button. +SUMMARY: このレッスンでは、アプリケーションに新しいコンポーネントを作成し、フィルター用の入力欄とボタンを追加しました。 -For more information about the topics covered in this lesson, visit: +このレッスンで扱った内容の詳細については、次のページをご覧ください: <docs-pill-row> <docs-pill href="cli/generate/component" title="`ng generate component`"/> - <docs-pill href="api/core/Component" title="`Component` reference"/> - <docs-pill href="guide/components" title="Angular components overview"/> + <docs-pill href="api/core/Component" title="`Component`リファレンス"/> + <docs-pill href="guide/components" title="Angularコンポーネントの概要"/> </docs-pill-row>