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..b942c6a9c8 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,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)を用意しています！ -## 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アプリケーションと共通する機能を使用します。 -Output of homes landing page +Homesランディングページの出力 -## 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: +このレッスンで扱う内容についてさらに知りたい場合は、以下をご覧ください。 - - - + + +