日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 表現式：初級者のための包括ガイド

こんにちは、将来のプログラミングスーパースターたち！今日は、AngularJSの表現式の世界に楽しく飛び込んでみましょう。プログラミングが初めての方也不用担心——あなたのフレンドリーなガイドとして、私はここにいますので、ステップバイステップでこのトピックを探求しましょう。このチュートリアルの終わりには、AngularJSでプロのように表現できるようになるでしょう！

AngularJS - Expressions

AngularJS 表現式とは？

本題に入る前に、AngularJSの表現式とは何かを理解しましょう。AngularJSが評価し、表示する小さなコードの塊と考えてください。これは、あなたのプログラミング料理のスパイスのようなものです——あなたのウェブページに味と機能を加えます！

AngularJSの表現式は、二重のカッコ内に書かれます：{{ expression }}。また、ディレクティブ（後で学びます）でng-bind="expression"を使っても利用できます。

さあ、さまざまな種類の表現式を探ってみましょう！

数値の使用

まずは簡単なものから——数値です。AngularJSの表現式は、計算機のように算術演算を行うことができます。いくつかの例を見てみましょう：

<div ng-app="">
<p>5 + 5 = {{ 5 + 5 }}</p>
<p>10 - 3 = {{ 10 - 3 }}</p>
<p>4 * 4 = {{ 4 * 4 }}</p>
<p>20 / 5 = {{ 20 / 5 }}</p>
</div>

このコードを実行すると、AngularJSはこれらの表現式を評価し、以下のように表示します：

5 + 5 = 10
10 - 3 = 7
4 * 4 = 16
20 / 5 = 4

すごくないですか？HTML内にミニ計算機があるようなものです！

文字列の使用

次に、文字列について話しましょう。プログラミングでは、文字列は単なる「テキスト」という意味です。AngularJSも文字列を扱うことができます。見てみましょう：

<div ng-app="" ng-init="firstName='John'; lastName='Doe'">
<p>First Name: {{ firstName }}</p>
<p>Last Name: {{ lastName }}</p>
<p>Full Name: {{ firstName + " " + lastName }}</p>
</div>

ここで起こっていることは以下の通りです：

  1. ng-initを使ってfirstNameとlastNameの初期値を設定します。
  2. それらの値を表現式を使って表示します。
  3. 最後の行では、名前と苗字をスペースで結合します。

出力は以下のようになります：

First Name: John
Last Name: Doe
Full Name: John Doe

文字列を操作できるのがわかりますね？まるで言葉のパペッティアのように！

オブジェクトの使用

次に、レベルアップしてオブジェクトについて話しましょう。プログラミングでは、オブジェクトはさまざまなデータを保持できるコンテナのようなものです。以下に、AngularJSの表現式でオブジェクトを使う方法を示します：

<div ng-app="" ng-init="person={firstName:'John', lastName:'Doe', age:30}">
<p>First Name: {{ person.firstName }}</p>
<p>Last Name: {{ person.lastName }}</p>
<p>Age: {{ person.age }}</p>
</div>

この例では：

  1. personというオブジェクトを作成し、firstName、lastName、ageというプロパティを設定します。
  2. プロパティにアクセスするにはドット記法（person.propertyName）を使います。

出力は以下のようになります：

First Name: John
Last Name: Doe
Age: 30

オブジェクトは、関連するデータをグループ化したいときに非常に便利です。デジタルの書類 cabinetsのように考えてください！

配列の使用

配列はプログラミングにおけるリストのようなものです。複数のアイテムを保存したいときに非常に便利です。配列を使う方法を見てみましょう：

<div ng-app="" ng-init="fruits=['Apple', 'Banana', 'Orange', 'Mango']">
<p>First fruit: {{ fruits[0] }}</p>
<p>Second fruit: {{ fruits[1] }}</p>
<p>List length: {{ fruits.length }}</p>
</div>

ここで起こっていることは以下の通りです：

  1. fruitsという配列を作成し、4つのアイテムを設定します。
  2. 配列の要素にアクセスするにはインデックス（プログラミングでは0から始めます）を使います。
  3. 配列の情報を得るために、ビルトインプロパティ（length）を使うこともできます。

出力は以下のようになります：

First fruit: Apple
Second fruit: Banana
List length: 4

配列は、デジタルのショッピングリストのように——簡単に作成し、管理できます！

出力

さまざまな種類の表現式をカバーしたので、出力について話しましょう。AngularJSの表現式は通常、HTMLにデータを表示するために使われます。以下に、すべてをまとめた包括的な例を示します：

<div ng-app="" ng-init="user={name:'John Doe', age:30}; colors=['Red', 'Green', 'Blue']">
<h2>User Information</h2>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<p>Is Adult: {{ user.age >= 18 }}</p>

<h2>Colors</h2>
<p>First Color: {{ colors[0] }}</p>
<p>Number of Colors: {{ colors.length }}</p>

<h2>Calculations</h2>
<p>5 * 10 = {{ 5 * 10 }}</p>
<p>User's age in 5 years: {{ user.age + 5 }}</p>
</div>

この例では以下のことが示されています：

  1. オブジェクトの使用（userオブジェクト）
  2. 配列の使用（colors配列）
  3. 真偽表現式（user.age >= 18）
  4. 算術演算
  5. 異なる種類の表現式の組み合わせ

AngularJSの表現式の素晴らしいところは、HTMLにスムーズに統合され、ページを動的でインタラクティブにできることです！

メソッドとプロパティの表

ここに、私たちが使用したいくつかの一般的なメソッドとプロパティの表を示します：

メソッド/プロパティ 説明 例
+ 加算演算子 {{ 5 + 5 }}
- 減算演算子 {{ 10 - 3 }}
* 掛け算演算子 {{ 4 * 4 }}
/ 割算演算子 {{ 20 / 5 }}
+ (文字列用) 文字列結合 {{ "Hello" + " " + "World" }}
. (ドット記法) オブジェクトプロパティのアクセス {{ person.name }}
[] (ブラケット記法) 配列要素のアクセス {{ fruits[0] }}
length 配列の長さを取得するプロパティ {{ fruits.length }}
>= 以上演算子 {{ age >= 18 }}

そして、ここまでがAngularJSの表現式の旅です。簡単な数値から複雑なオブジェクトや配列まで、さまざまな概念を探求しました。実践で完璧にするために、これらの概念を試してみてください。ハッピーコーディング、そしてあなたの表現式が常に素晴らしい結果を返すことを願っています！

Credits: Image by storyset

前のチュートリアル:
AngularJS - ディレクティブ
次のチュートリアル:
AngularJS - コントローラー