Translate toh_pt0.md to Japanese

Author: Allajah

aio-ja/content/tutorial/toh-pt0.md

@@ -1,26 +1,26 @@
-# The Application Shell
+# アプリケーションシェル
 
-## Install the Angular CLI
+## Angular CLI をインストール
 
- Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
+まだ[Angular CLI](https://github.com/angular/angular-cli)をインストールしていない場合は、インストールしてください。
 
 <code-example language="sh" class="code-shell">
   npm install -g @angular/cli
 </code-example>  
 
-## Create a new application
+## 新しいアプリケーションを作成
 
-Create a new project named `angular-tour-of-heroes` with this CLI command.
+次のCLIコマンドで`angular-tour-of-heroes`という名前の新しいプロジェクトを作成します。
 
 <code-example language="sh" class="code-shell">
   ng new angular-tour-of-heroes
 </code-example> 
 
-The Angular CLI generated a new project with a default application and supporting files. 
+Angular CLIが、デフォルトのアプリケーションとサポートファイルを持つ新しいプロジェクトを作成しました。
 
-## Serve the application
+## アプリケーションをサーブする
 
-Go to the project directory and launch the application.
+プロジェクトディレクトリに移動し、アプリケーションを起動します。
 
 <code-example language="sh" class="code-shell">
   cd angular-tour-of-heroes
@@ -29,72 +29,71 @@ Go to the project directory and launch the application.
 
 <div class="l-sub-section">
 
-The `ng serve` command builds the app, starts the development server,
-watches the source files, and rebuilds the app as you make changes to those files.
+`ng serve`コマンドはアプリケーションをビルド、開発用サーバーを起動し、ソースファイルを監視します。
+あなたが監視されているファイルに変更を行ったときには、変更があったファイルに対し再ビルドを行います。
 
-The `--open` flag  opens a browser to `http://localhost:4200/`.
+`--open`フラグを指定すると、`http://localhost:4200`がブラウザで開かれます。
 
 </div>
 
-You should see the app running in your browser.
+ブラウザ上でアプリケーションが動いていることを確認してください。
 
-## Angular components
+## Angularのコンポーネント
 
-The page you see is the _application shell_.
-The shell is controlled by an Angular **component** named `AppComponent`.
+表示されているページは _アプリケーションシェル_ です。
+このシェルは`AppComponent`という名前のAngular**コンポーネント**から操作されます。
 
-_Components_ are the fundamental building blocks of Angular applications.
-They display data on the screen, listen for user input, and take action based on that input.
+_コンポーネント_ はAngularアプリケーションの基礎的な構成要素です。
+コンポーネントはスクリーン上にデータを表示し、ユーザーの入力を待ち受け、その入力に対しアクションを取ります。
 
-## Change the application title
+## アプリケーションのタイトルを変更する
 
-Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
+好きなテキストエディタまたはIDEでプロジェクトを開き、`src/app`に移動してください。
 
-You'll find the implementation of the shell `AppComponent` distributed over three files:
+以下の3つのファイルに分割された、`AppComponent`シェルの実装が見つかります。
 
-1. `app.component.ts`&mdash; the component class code, written in TypeScript. 
-1. `app.component.html`&mdash; the component template, written in HTML.
-1. `app.component.css`&mdash; the component's private CSS styles.
+1. `app.component.ts`&mdash; TypeScriptで書かれたコンポーネントクラスのコードです。
+1. `app.component.html`&mdash; HTMLで書かれたコンポーネントのテンプレートです。
+1. `app.component.css`&mdash; このコンポーネント専用のCSSです。
 
 
-Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
+コンポーネントクラスファイル(`app.component.ts`)を開き、`title`プロパティの値を`Tour of Heroes`に変更してください。
 
 <code-example path="toh-pt0/src/app/app.component.ts" region="set-title" title="app.component.ts (class title property)" linenums="false">
 </code-example>
 
-Open the component template file (`app.component.ts`) and
-delete the default template generated by the Angular CLI.
-Replace it with the following line of HTML.
+コンポーネントのテンプレートファイル(`app.component.html`)を開き、
+Angular CLIにより生成されたデフォルトのテンプレートを削除してください。
+代わりに以下のHTMLを配置してください。
 
 <code-example path="toh-pt0/src/app/app.component.html" 
   title="app.component.html (template)" linenums="false">
 </code-example>
 
-The double curly braces are Angular's *interpolation binding* syntax. 
-This interpolation binding presents the component's `title` property value 
-inside the HTML header tag.
+二重の波括弧はAngularの*内挿バインディング*の構文です。
+この内挿バインディングはコンポーネントの`title`プロパティの値を、HTMLのheaderタグの中に渡します。
 
-The browser refreshes and displays the new application title.
+ブラウザがページを更新し、新しいアプリケーションのタイトルが表示されます。
 
 {@a app-wide-styles}
 
-## Add application styles
+## アプリケーションのスタイルを追加する
 
-Most apps strive for a consistent look across the application.
-The CLI generated an empty `styles.css` for this purpose.
-Put your application-wide styles there.
+ほとんどのアプリケーションは、アプリケーション全体で一貫した見た目を目指しています。
+CLIはこの目的のために、空の`styles.css`を生成しました。
+アプリケーション全体に適応するスタイルをそこに記述してください。
 
-Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
+以下は、_Tour of Heroes_ サンプルアプリケーションの`style.css`の抜粋です。
 
 <code-example path="toh-pt0/src/styles.1.css" title="src/styles.css (excerpt)">
 </code-example>
 
-## Final code review
+## 最終的なコードのおさらい
 
-The source code for this tutorial and the complete _Tour of Heroes_ global styles 
-are available in the <live-example></live-example>. 
+このチュートリアルのソースコードと _Tour Of Heroes_ のグローバルスタイルシートの完成版は
+<live-example></live-example>で利用可能です。
 
-Here are the code files discussed on this page. 
+以下がこのページで述べられたコードのファイルです。
 
 <code-tabs>
 
@@ -110,8 +109,9 @@ Here are the code files discussed on this page.
   </code-pane>
 </code-tabs>
 
-## Summary
+## まとめ
+
+* Angular CLIを用いて初期アプリケーションの骨組みを作成しました。
+* Angularのコンポーネントがデータを表示することを学びました。
+* アプリケーションのタイトルを表示するために二重波カッコによる内挿を使いました。
 
-* You created the initial application structure using the Angular CLI.
-* You learned that Angular components display data.
-* You used the double curly braces of interpolation to display the app title.