Skip to content

Commit 6e87f26

Browse files
darkss-xyzzylacolaco
darkss-xyzzy
and
lacolaco
authored
tutorials/first-app/intro の翻訳 (#1140)
* {tutorials/first-app/intro}の翻訳 * 残っていた英文を削除 * 余分な空白を削除 * Update adev-ja/src/content/tutorials/first-app/intro/README.md 了解です。補足->HELPFULに戻します。 Co-authored-by: Suguru Inatomi <suguru.inatomi@gmail.com> * Update adev-ja/src/content/tutorials/first-app/intro/README.md 了解です。注意->NOTEに戻します。 Co-authored-by: Suguru Inatomi <suguru.inatomi@gmail.com> * Update adev-ja/src/content/tutorials/first-app/intro/README.md 了解です。注意->NOTEに戻します。 Co-authored-by: Suguru Inatomi <suguru.inatomi@gmail.com> --------- Co-authored-by: Suguru Inatomi <suguru.inatomi@gmail.com>
1 parent 57931ae commit 6e87f26

File tree

2 files changed

+127
-41
lines changed

2 files changed

+127
-41
lines changed

‎adev-ja/src/content/tutorials/first-app/intro/README.en.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Build your first Angular app
2+
3+
This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
4+
5+
You can do as many or as few as you would like and you can do them in any order.
6+
7+
HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!
8+
9+
<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>
10+
11+
## Before you start
12+
13+
For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.
14+
15+
### Your experience
16+
17+
The lessons in this tutorial assume that you have experience with the following:
18+
19+
1. Created an HTML web page by editing the HTML directly.
20+
1. Programmed web site content in JavaScript.
21+
1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
22+
1. Used command-line instructions to perform tasks on your computer.
23+
24+
### Your equipment
25+
26+
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.
27+
28+
NOTE: Look for alerts like this one, which call out steps that may only be for your local editor.
29+
30+
## Conceptual preview of your first Angular app
31+
32+
The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
33+
This app uses features that are common to many Angular apps.
34+
35+
<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
36+
37+
## Local development environment
38+
39+
NOTE: This step is only for your local environment!
40+
41+
Perform these steps in a command-line tool on the computer you want to use for this tutorial.
42+
43+
<docs-workflow>
44+
45+
<docs-step title="Identify the version of `node.js` that Angular requires">
46+
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).
47+
48+
From a **Terminal** window:
49+
50+
1. Run the following command: `node --version`
51+
1. Confirm that the version number displayed meets the requirements.
52+
</docs-step>
53+
54+
<docs-step title="Install the correct version of `node.js` for Angular">
55+
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/)
56+
</docs-step>
57+
58+
<docs-step title="Install the latest version of Angular">
59+
With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
60+
61+
From a **Terminal** window run the following command: `npm install -g @angular/cli`.
62+
</docs-step>
63+
64+
<docs-step title="Install integrated development environment (IDE)">
65+
You are free to use any tool you prefer to build apps with Angular. We recommend the following:
66+
67+
1. [Visual Studio Code](https://code.visualstudio.com/)
68+
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)
69+
3. [WebStorm](https://www.jetbrains.com/webstorm/)
70+
</docs-step>
71+
72+
<docs-step title="Optional: set-up your AI powered IDE">
73+
74+
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).
75+
76+
</docs-step>
77+
78+
</docs-workflow>
79+
80+
For more information about the topics covered in this lesson, visit:
81+
82+
<docs-pill-row>
83+
<docs-pill href="/overview" title="What is Angular"/>
84+
<docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
85+
<docs-pill href="/cli" title="Angular CLI Reference"/>
86+
</docs-pill-row>

‎adev-ja/src/content/tutorials/first-app/intro/README.md‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,86 @@
1-
# Build your first Angular app
1+
# 最初のAngularアプリケーションをビルドしよう
22

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

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

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

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

11-
## Before you start
11+
## 開始する前に
1212

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

15-
### Your experience
15+
### あなたの経験
1616

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

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

24-
### Your equipment
24+
### あなたの環境
2525

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

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

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

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

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

37-
## Local development environment
37+
## ローカル開発環境
3838

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

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

4343
<docs-workflow>
4444

45-
<docs-step title="Identify the version of `node.js` that Angular requires">
46-
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).
45+
<docs-step title="Angularに必要な`node.js`のバージョンを確認する">
46+
Angularはactive LTSまたはmaintenance LTSバージョンのNode.jsが必要です。お使いの`Node.js`のバージョンを確認しましょう。必要なバージョンの詳細は、[package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json)のenginesプロパティを参照してください。
4747

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

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

54-
<docs-step title="Install the correct version of `node.js` for Angular">
55-
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/)
54+
<docs-step title="Angularに必要とする`node.js`の適切なバージョンをインストールする">
55+
もし`node.js`をインストールしていない場合、[nodejs.orgのインストール方法](https://nodejs.org/ja/download/)を参照してください。
5656
</docs-step>
5757

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

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

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

6767
1. [Visual Studio Code](https://code.visualstudio.com/)
68-
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)
68+
2. 任意ですが、開発体験を向上させるために[Angular Language Service]のインストールを推奨します(https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
6969
3. [WebStorm](https://www.jetbrains.com/webstorm/)
7070
</docs-step>
7171

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

74-
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).
74+
お好みのAI対応IDEでこのチュートリアルを進める場合、[Angularのプロンプトルールおよびベストプラクティスをご確認ください](/ai/develop-with-ai)。
7575

7676
</docs-step>
7777

7878
</docs-workflow>
7979

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

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

0 commit comments

Comments
 (0)