<commit_before># 基本的なAngularアプリケーションをはじめる

Angularへようこそ！

このチュートリアルでは、カタログ、ショッピングカート、チェックアウトフォームを備えたシンプルなeコマースサイトを順を追って説明し、Angularの要点を紹介します。

すぐに始められるように、このガイドでは[StackBlitz](https://stackblitz.com/)上で（[ローカル環境のセットアップ](guide/setup-local "Setup guide")の必要なく）インタラクティブに調べて変更できる既製のシンプルなアプリケーションを使用します。
StackBlitzは、さまざまな技術を使ってプロジェクトを作成・保存・共有できるブラウザベースの開発環境です。

## 前提条件

このチュートリアルを最大限に活用するには、次の基本的な知識が必要です。

* [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials")
* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript")
* [TypeScript](https://www.typescriptlang.org/ "TypeScript documentation")

<a id="components"></a>

## サンプルアプリケーションの見学

Angularアプリケーションはコンポーネントを使って構築します。
コンポーネントはUIの中で責任のある領域を定義し、UIの機能を再利用できるようにします。

コンポーネントは3つの要素で構成されています。

|                           | Details |
|:---                       |:---     |
| **コンポーネントクラス** | データと機能を扱う|
| **HTML テンプレート** | UI を決定する |
| **コンポーネント固有のスタイル** | ルックアンドフィールを定義する|

このガイドでは、コンポーネントを使用してアプリケーションを構築する方法を説明します。

| Components             | Details |
|:---                    |:---     |
| `<app-root>` | 最初にロードするコンポーネントで、他のコンポーネントのためのコンテナ |
| `<app-top-bar>` | ストア名とチェックアウトボタン |
| `<app-product-list>` | 商品リスト |
| `<app-product-alerts>` | アプリケーションのアラートを含むコンポーネント |

<div class="lightbox">

<img alt="Online store with three components" src="generated/images/guide/start/app-components.png">

</div>

コンポーネントについては、[コンポーネント入門](guide/architecture-components "Introduction to Components and Templates")を参照してください。

<a id="new-project"></a>

## Create the sample project

サンプルプロジェクトを作成するには、<live-example name="getting-started-v0" noDownload>既製のサンプルプロジェクトをStackBlitz</live-example>で生成します。
作業を保存するには

1. StackBlitzにログインします。
1. 生成したプロジェクトをフォークします。
1. 定期的に保存します。

<div class="lightbox">

<img alt="Fork the project" src="generated/images/guide/start/fork-the-project.png">

</div>

StackBlitzでは、右側のプレビューペインにサンプルアプリケーションの起動状態が表示されます。
プレビューには2つの領域があります。

* トップバーにはストア名が表示され、*My Store*とチェックアウトボタンがあります。
* 製品リストのヘッダ、*Products*。

<div class="lightbox">

<img alt="Starter online store application" src="generated/images/guide/start/new-app-all.gif">

</div>

左側のプロジェクトセクションには、インフラストラクチャファイルや設定ファイルなど、アプリケーションを構成するソースファイルが表示されています。

チュートリアルに含まれる StackBlitz のサンプルアプリケーションを作成すると、StackBlitz がスターターファイルとモックデータを作成してくれます。
チュートリアルで使用するファイルは `src` フォルダにあります。

StackBlitzの使い方については、[StackBlitz documentation](https://developer.stackblitz.com/docs/platform/)を参照してください。

<a id="product-list"></a>

## 商品リストを作成する

このセクションでは、アプリケーションを更新して製品の一覧を表示するようにします。
`product.ts`のファイルの定義済みの商品データと `product-list.component.ts` ファイルのメソッドを使用します。
この節では、テンプレートとも呼ばれるHTMLの編集方法を説明します。

1.  `product-list`フォルダ内のテンプレートファイル `product-list.component.html` を開く。

1.  次のように `<div>` に `*ngFor` 構造ディレクティブを追加する。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html" region="ngfor"></code-example>

    `ngFor` を使うと、`<div>` はリスト内の各商品に対して繰り返し実行されます。

    構造ディレクティブは、要素の追加、削除、操作によって DOM の構造を形成したり、再構築したりします。
    構造ディレクティブについての詳細は [構造ディレクティブ](guide/structural-directives)を参照してください。

1.  `<div>` の中に `<h3>` と `{{ product.name }}` を追加する。
    この `{{ product.name }}` 文は Angular の補間構文の例です。
    補間 `{{{ }}` は、プロパティの値をテキストとしてレンダリングします。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html" region="interpolation"></code-example>

    プレビューペインが更新され、リスト内の各商品名が表示されます。

    <div class="lightbox">

    <img alt="Product names added to list" src="generated/images/guide/start/template-syntax-product-names.png">

    </div>

1.  各商品名を商品詳細へのリンクにするには、`{{ product.name }}` の周りに `<a>` 要素を追加します。

1.  次のように、プロパティバインディング `[ ]` 構文を用いて、タイトルを商品名に設定します。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html"></code-example>

    プレビューペインで商品名にカーソルを合わせると、商品名に "details "という単語を加えた名前のプロパティ値が表示されます。
    プロパティバインディング `[ ]` を使用すると、テンプレート式の中でプロパティ値を使用することができます。

    <div class="lightbox">

    <img alt="Product name anchor text is product name property" src="generated/images/guide/start/template-syntax-product-anchor.png">

    </div>

1.  製品の説明を追加します。
    `<p>` 要素では、`*ngIf` ディレクティブを使用して、現在の商品に説明がある場合にのみ `<p>` 要素を作成するようにします。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.3.html"></code-example>

    アプリケーションは、リスト内の各製品の名前と説明を表示するようになりました。
    最終的な製品には説明の段落がないことに注意してください。
    商品の説明プロパティが空なので、Angularは `<p>` 要素を作成しません。

    <div class="lightbox">

    <img alt="Product descriptions added to list" src="generated/images/guide/start/template-syntax-product-description.png">

    </div>

1.  ユーザーが商品を共有できるようにボタンを追加する。
    ボタンの `click` イベントを `product-list.component.ts` の `share()` メソッドにバインドします。
    イベントバインディングでは、`<button>` 要素の `(click)` イベントのように、イベントの周りに括弧 `( )` を使用します。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.4.html"></code-example>

    各商品に**Share**ボタンが追加されました。<commit_msg>fix: 軽微な修正: start/index (#718)<commit_after># 基本的なAngularアプリケーションをはじめる

Angularへようこそ！

このチュートリアルでは、カタログ、ショッピングカート、チェックアウトフォームを備えたシンプルなeコマースサイトを順を追って説明し、Angularの要点を紹介します。

すぐに始められるように、このガイドでは[StackBlitz](https://stackblitz.com/)上で（[ローカル環境のセットアップ](guide/setup-local "Setup guide")の必要なく）インタラクティブに調べて変更できる既製のシンプルなアプリケーションを使用します。
StackBlitzは、さまざまな技術を使ってプロジェクトを作成・保存・共有できるブラウザベースの開発環境です。

## 前提条件

このチュートリアルを最大限に活用するには、次の基本的な知識が必要です。

* [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials")
* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript")
* [TypeScript](https://www.typescriptlang.org/ "TypeScript documentation")

<a id="components"></a>

## サンプルアプリケーションの見学

Angularアプリケーションはコンポーネントを使って構築します。
コンポーネントはUIの中で責任のある領域を定義し、UIの機能を再利用できるようにします。

コンポーネントは3つの要素で構成されています。

|                           | Details |
|:---                       |:---     |
| **コンポーネントクラス** | データと機能を扱う|
| **HTML テンプレート** | UI を決定する |
| **コンポーネント固有のスタイル** | ルックアンドフィールを定義する|

このガイドでは、コンポーネントを使用してアプリケーションを構築する方法を説明します。

| Components             | Details |
|:---                    |:---     |
| `<app-root>` | 最初にロードするコンポーネントで、他のコンポーネントのためのコンテナ |
| `<app-top-bar>` | ストア名とチェックアウトボタン |
| `<app-product-list>` | 商品リスト |
| `<app-product-alerts>` | アプリケーションのアラートを含むコンポーネント |

<div class="lightbox">

<img alt="Online store with three components" src="generated/images/guide/start/app-components.png">

</div>

コンポーネントについては、[コンポーネント入門](guide/architecture-components "Introduction to Components and Templates")を参照してください。

<a id="new-project"></a>

## Create the sample project

サンプルプロジェクトを作成するには、<live-example name="getting-started-v0" noDownload>既製のサンプルプロジェクトをStackBlitz</live-example>で生成します。
作業を保存するには

1. StackBlitzにログインします。
1. 生成したプロジェクトをフォークします。
1. 定期的に保存します。

<div class="lightbox">

<img alt="Fork the project" src="generated/images/guide/start/fork-the-project.png">

</div>

StackBlitzでは、右側のプレビューペインにサンプルアプリケーションの起動状態が表示されます。
プレビューには2つの領域があります。

* トップバーにはストア名が表示され、*My Store*とチェックアウトボタンがあります。
* 製品リストのヘッダ、*Products*。

<div class="lightbox">

<img alt="Starter online store application" src="generated/images/guide/start/new-app-all.gif">

</div>

左側のプロジェクトセクションには、インフラストラクチャファイルや設定ファイルなど、アプリケーションを構成するソースファイルが表示されています。

チュートリアルに含まれる StackBlitz のサンプルアプリケーションを作成すると、StackBlitz がスターターファイルとモックデータを作成してくれます。
チュートリアルで使用するファイルは `src` フォルダにあります。

StackBlitzの使い方については、[StackBlitz documentation](https://developer.stackblitz.com/docs/platform/)を参照してください。

<a id="product-list"></a>

## 商品リストを作成する

このセクションでは、アプリケーションを更新して製品の一覧を表示するようにします。
`product.ts`のファイルの定義済みの商品データと `product-list.component.ts` ファイルのメソッドを使用します。
この節では、テンプレートとも呼ばれるHTMLの編集方法を説明します。

1.  `product-list`フォルダ内のテンプレートファイル `product-list.component.html` を開く。

1.  次のように `<div>` に `*ngFor` 構造ディレクティブを追加する。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html" region="ngfor"></code-example>

    `ngFor` を使うと、`<div>` はリスト内の各商品に対して繰り返し実行されます。

    構造ディレクティブは、要素の追加、削除、操作によって DOM の構造を形成したり、再構築したりします。
    構造ディレクティブについての詳細は [構造ディレクティブ](guide/structural-directives)を参照してください。

1.  `<div>` の中に `<h3>` と `{{ product.name }}` を追加する。
    この `{{ product.name }}` 文は Angular の補間構文の例です。
    補間 `{{{ }}` は、プロパティの値をテキストとしてレンダリングします。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html" region="interpolation"></code-example>

    プレビューペインが更新され、リスト内の各商品名が表示されます。

    <div class="lightbox">

    <img alt="Product names added to list" src="generated/images/guide/start/template-syntax-product-names.png">

    </div>

1.  各商品名を商品詳細へのリンクにするには、`{{ product.name }}` の周りに `<a>` 要素を追加します。

1.  次のように、プロパティバインディング `[ ]` 構文を用いて、タイトルを商品名に設定します。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html"></code-example>

    プレビューペインで商品名にカーソルを合わせると、商品名に "details "という単語を加えた名前のプロパティ値が表示されます。
    プロパティバインディング `[ ]` を使用すると、テンプレート式の中でプロパティ値を使用することができます。

    <div class="lightbox">

    <img alt="Product name anchor text is product name property" src="generated/images/guide/start/template-syntax-product-anchor.png">

    </div>

1.  製品の説明を追加します。
    `<p>` 要素では、`*ngIf` ディレクティブを使用して、現在の商品に説明がある場合にのみ `<p>` 要素を作成するようにします。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.3.html"></code-example>

    アプリケーションは、リスト内の各製品の名前と説明を表示するようになりました。
    最後の製品には説明の段落がないことに注意してください。
    商品の説明プロパティが空なので、Angularは `<p>` 要素を作成しません。

    <div class="lightbox">

    <img alt="Product descriptions added to list" src="generated/images/guide/start/template-syntax-product-description.png">

    </div>

1.  ユーザーが商品を共有できるようにボタンを追加する。
    ボタンの `click` イベントを `product-list.component.ts` の `share()` メソッドにバインドします。
    イベントバインディングでは、`<button>` 要素の `(click)` イベントのように、イベントの周りに括弧 `( )` を使用します。

    <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.4.html"></code-example>

    各商品に**Share**ボタンが追加されました。
{'fraction_non_alphanumeric': 0.14439117929050815, 'fraction_numerical': 0.0039309683604985615, 'mean_word_length': 5.419076923076923, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 10, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3490213', 'n_tokens_mistral': 6201, 'n_tokens_neox': 5792, 'n_words': 488}