From 90ab83214dfce78e78619a6ada4802bfbc418457 Mon Sep 17 00:00:00 2001 From: Amon Keishima Date: Sat, 18 Nov 2017 19:35:49 +0900 Subject: [PATCH 1/2] Translate guide/quickstart.md to Japanese --- aio-ja/content/guide/quickstart.md | 292 ++++++++++++----------------- 1 file changed, 125 insertions(+), 167 deletions(-) diff --git a/aio-ja/content/guide/quickstart.md b/aio-ja/content/guide/quickstart.md index 37472218b6..b018ba453d 100644 --- a/aio-ja/content/guide/quickstart.md +++ b/aio-ja/content/guide/quickstart.md @@ -1,47 +1,38 @@ -# QuickStart +# クイックスタート -Good tools make application development quicker and easier to maintain than -if you did everything by hand. +良いツールは、あなたが手作業で全てをやるよりも +アプリケーションの開発を素早く、そして保守を簡単にします。 -The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool -that can create a project, add files, and perform a variety of ongoing development tasks such -as testing, bundling, and deployment. +[**Angular CLI**](https://cli.angular.io/) はプロジェクトの作成、ファイルの追加に加え、開発で行うテスト、ビルド、デプロイのタスクを行うための **_コマンドライン・インターフェース・ツール_** です。 -The goal in this guide is to build and run a simple Angular -application in TypeScript, using the Angular CLI -while adhering to the [Style Guide](guide/styleguide) recommendations that -benefit _every_ Angular project. +このガイドの最終目標は、TypeScriptを用いた簡単なAngularアプリケーションの構築です。 +Angular CLIを使うことで、[スタイルガイド](guide/styleguide) に準拠したAngularプロジェクトを生成できます。 -By the end of the chapter, you'll have a basic understanding of development with the CLI -and a foundation for both these documentation samples and for real world applications. +この章を読み終える頃には、CLIを使った開発について、そしてドキュメントのサンプルや実際のアプリケーションに対する基礎知識を身につけられるでしょう。 + +このドキュメントで使うサンプルはこちらからダウンロードできます。 -And you can also download the example.

- Step 1. Set up the Development Environment + Step 1. 開発環境の構築

+まずは開発環境を構築するところからはじめましょう。 -You need to set up your development environment before you can do anything. - -Install **[Node.js® and npm](https://nodejs.org/en/download/)** -if they are not already on your machine. +**[Node.js® と npm](https://nodejs.org/en/download/)** がインストールされていなければ、インストールしてください。
- -**Verify that you are running at least node `6.9.x` and npm `3.x.x`** -by running `node -v` and `npm -v` in a terminal/console window. -Older versions produce errors, but newer versions are fine. +**node `6.9.X` 以上とnpm `3.x.x` 以上がインストールされていることを確認してください。** +ターミナルまたはコンソールで `node -v` と `npm -v` コマンドを使うことで確認できます。 +古いバージョンをお使いの場合はエラーの原因となりますが、新しいぶんには問題ありません。
- -Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. - +グローバル環境に **[Angular CLI](https://github.com/angular/angular-cli) をインストール**してください。 npm install -g @angular/cli @@ -50,18 +41,14 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa -

- Step 2. Create a new project + Step 2. 新規プロジェクトを作成する

+ターミナルを開いてください。 -Open a terminal window. - - -Generate a new project and skeleton application by running the following commands: - +以下のコマンドを実行して、新規プロジェクトと空のアプリケーションを生成してください。 ng new my-app @@ -73,24 +60,19 @@ Generate a new project and skeleton application by running the following command
- -Patience please. -It takes time to set up a new project, most of it spent installing npm packages. +しばらく待ちましょう。 +新規プロジェクト生成には時間がかかります（待ち時間の大半はnpmでパッケージをインストールする時間です）。
- -

- Step 3: Serve the application + Step 3: アプリケーションをサーブする

- -Go to the project directory and launch the server. - +プロジェクトのディレクトリに移動して、サーバーを起動してください。 cd my-app @@ -98,15 +80,12 @@ Go to the project directory and launch the server. +`ng serve` コマンドはサーバーを起動します。 +プロジェクトのファイル変更を監視して、変更があれば再度ビルドを行います。 -The `ng serve` command launches the server, watches your files, -and rebuilds the app as you make changes to those files. - -Using the `--open` (or just `-o`) option will automatically open your browser -on `http://localhost:4200/`. - -Your app greets you with a message: +`--open` （または `-o` ）コマンドを使うことで、ブラウザで`http://localhost:4200/` を自動的に開くようにすることもできます。 +アプリケーションで以下のような挨拶文が表示されればOKです。
The app works! @@ -114,73 +93,63 @@ Your app greets you with a message: -

- Step 4: Edit your first Angular component + Step 4: Angularコンポーネントを編集してみる

+CLIがあなたのために一つ目のコンポーネントを作成してくれました。 +これは _ルートコンポーネント_ で、 `app-root` と名付けられています。 +このファイルは `./src/app/app.component.ts` にあります。 -The CLI created the first Angular component for you. -This is the _root component_ and it is named `app-root`. -You can find it in `./src/app/app.component.ts`. - - -Open the component file and change the `title` property from _Welcome to app!!_ to _Welcome to My First Angular App!!_: - +コンポーネントのファイルを開いて、 `title` プロパティを _Welcome to app!!_ から _Welcome to My First Angular App!!_ に変更してみてください。 +ブラウザが自動的に更新されて、変更したタイトルになっていますね。 +これでも素敵ですが、もっと見た目を良くしましょう。 -The browser reloads automatically with the revised title. That's nice, but it could look better. - -Open `src/app/app.component.css` and give the component some style. - +`src/app/app.component.css` を開いてコンポーネントにスタイルをつけていきましょう。
- Output of QuickStart app + クイックスタートアプリの表示結果
+見た目がよくなりましたね！ -Looking good! - - +## 次に… +"Hello, World"アプリを使った説明は以上です。 -## What's next? -That's about all you'd expect to do in a "Hello, World" app. +Angularでできるすばらしいことを体験できる +デモアプリケーションを、 [Tour of Heroesのチュートリアル](tutorial) を通して作成する準備ができました。 -You're ready to take the [Tour of Heroes Tutorial](tutorial) and build -a small application that demonstrates the great things you can build with Angular. +それとも、もう少しだけ今作ったプロジェクトについて掘り下げて学ぶこともできます。 -Or you can stick around a bit longer to learn about the files in your brand new project. +## プロジェクトファイルについて +Angular CLIプロジェクトは、迅速な実験とエンタープライズソリューションの両方の基礎です。 -## Project file review +最初に見るべきファイルは `README.md` です。 +このファイルにはCLIコマンドについての基本的な情報が載っています。 +ここに書いてあること以外に、もっとAngularCLIについて知りたくなったら +[Angular CLIのリポジトリ](https://github.com/angular/angular-cli) や [Wiki](https://github.com/angular/angular-cli/wiki) を参照してください。 -An Angular CLI project is the foundation for both quick experiments and enterprise solutions. +いくつかの生成されたファイルは初めて見るものもあるかもしれませんね。 -The first file you should check out is `README.md`. -It has some basic information on how to use CLI commands. -Whenever you want to know more about how Angular CLI works make sure to visit -[the Angular CLI repository](https://github.com/angular/angular-cli) and -[Wiki](https://github.com/angular/angular-cli/wiki). +### `src` フォルダ -Some of the generated files might be unfamiliar to you. - - - -### The `src` folder -Your app lives in the `src` folder. -All Angular components, templates, styles, images, and anything else your app needs go here. -Any files outside of this folder are meant to support building your app. +あなたのアプリケーションは `src` フォルダの中にあります。 +Angularコンポーネント、テンプレート、スタイル、画像などのアプリに必要なものは全てこのフォルダの中に +入っている必要があります。 +このフォルダの外にあるファイルは、アプリをビルドするためのものとして捉えてください。
src
@@ -242,9 +211,8 @@ Any files outside of this folder are meant to support building your app. - Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test. - It is the **root** component of what will become a tree of nested components - as the application evolves. + HTMLテンプレート、CSSスタイルシート、ユニットテストからなる `AppComponent` を構成します。 + これは成長していく、ネストされたコンポーネントからなるアプリケーションツリーの **根** となるコンポーネントです。 @@ -256,10 +224,9 @@ Any files outside of this folder are meant to support building your app. - Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application. - Right now it declares only the `AppComponent`. - Soon there will be more components to declare. - + Angularにどのようにアプリを組み立てるかを伝えるための [root モジュール](guide/bootstrapping "AppModule: the root module") である `AppModule` を定義します。 + 現時点では `AppComponent` のみ宣言していますが、進めていくうちに他のコンポーネントを宣言するようになります。 + @@ -269,9 +236,7 @@ Any files outside of this folder are meant to support building your app. - - A folder where you can put images and anything else to be copied wholesale - when you build your application. + 画像など、アプリケーションをビルドするときにまるごとコピーするようなものを入れてください。 @@ -282,15 +247,12 @@ Any files outside of this folder are meant to support building your app. - - This folder contains one file for each of your destination environments, - each exporting simple configuration variables to use in your application. - The files are replaced on-the-fly when you build your app. - You might use a different API endpoint for development than you do for production - or maybe different analytics tokens. - You might even use some mock services. - Either way, the CLI has you covered. - + このフォルダには、環境毎にひとつのファイルを用意してください。 + ビルドをする際に、環境に合ったファイルに動的に置き換えられます。 + 例えば、APIのエンドポイントやアナリティクスのトークンなどを開発と本番で分けるような目的に使ってください。 + モックサービスを使うこともあるかもしれません。 + その場合でも、CLIがあなたをサポートします。 + @@ -300,9 +262,8 @@ Any files outside of this folder are meant to support building your app. - - Every site wants to look good on the bookmark bar. - Get started with your very own Angular icon. + どのサイトもブックマークバーではよく見せたいものです。 + あなただけのアイコンを使ってみましょう。 @@ -314,10 +275,10 @@ Any files outside of this folder are meant to support building your app. - The main HTML page that is served when someone visits your site. - Most of the time you'll never need to edit it. - The CLI automatically adds all `js` and `css` files when building your app so you - never need to add any `