AngularJS - ディレクティブ：入門ガイド
こんにちは、未来のAngularJS魔法使いさんたち！今日は、AngularJSディレクティブの世界に楽しい旅をすることになります。プログラミングが初めてであっても心配しないでください - 私があなたの親切なガイドとして、すべてをステップバイステップで説明します。コーヒー（またはお好みでティー）を飲みながら、一緒に潜りましょう！
ディレクティブとは？
始める前に、ディレクティブとは何かを理解しましょう。ディレクティブは、HTMLに特別な指示を与えるものと考えられます。それは、私たちのウェブページを動的なコンテンツや行動で生き生きとする魔法の呪文のようなものです。すごい吧？
では、AngularJSで最もよく使われるディレクティブのいくつかを見てみましょう。
ng-app ディレクティブ
ng-app ディレクティブは、私たちのAngularJSの家の基盤です。AngularJSに「ここから私のアプリケーションが始まります」と指示します。
例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>私のAngularJSアプリケーションへようこそ！</p>
</body>
</html>この例では、ng-appを<body>タグに追加しています。これにより、<body>の中のすべてが私たちのAngularJSアプリケーションの一部になります。
ng-init ディレクティブ
ng-init ディレクティブは、マジシャンの帽子のようなものです - HTMLの中で変数を初期化することができます。簡単なデモには非常に良いですが、実際のアプリケーションでは通常、コントローラーでデータを初期化します。
例：
<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>名前は {{ firstName + " " + lastName }}</p>
</div>ここでは、ng-initを使用してfirstNameとlastNameの値を設定しています。その後、AngularJSの式（二重のカッコ）を使用してこれらの値を表示しています。
ng-model ディレクティブ
ng-model ディレクティブは、HTMLとアプリケーションデータの間の双向道路のようです。以下のようなことができます：
- インプット、セレクト、またはテキストエリアをスコープのプロパティにバインドする
- アプリケーションデータのタイプバリデーションを提供する
- エлементにCSSクラスを設定する
- フォームバリデーションにHTML要素をバインドする
例：
<div ng-app>
<input type="text" ng-model="name">
<p>こんにちは、{{ name }}！</p>
</div>この例では、インプットボックスに何かを入力すると、それが即座にパラグラフの「こんにちは、」の後ろに表示されます。魔法のようですが、这只是 ng-modelの力です！
ng-repeat ディレクティブ
ng-repeat ディレクティブは、HTML要素のコピー機のようなものです。配列の各アイテムに対してセットのHTML要素を繰り返すことができます。リストやテーブルを動的に作成するのに非常に便利です。
例：
<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>これは果物のリストを作成します。ng-repeat ディレクティブは、配列の各果物に対して<li>要素を繰り返します。
包括的な例
では、もっと複雑な例で全部をまとめてみましょう：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>学生成績トラッカー</h2>
<table border="1">
<tr>
<th>名前</th>
<th>成績</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>新しい学生を追加</h3>
<form>
名前: <input type="text" ng-model="newName"><br>
成績: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">学生を追加</button>
</form>
</body>
</html>これを分解してみましょう：
-
ng-appを<body>タグに追加して、私たちのAngularJSアプリケーションを初期化します。 -
ng-initを使用して、初期の学生配列を作成します。 -
ng-repeatを使用して、各学生に対してテーブル行を作成します。 -
ng-modelを使用して、インプットフィールドを変数にバインドします。 -
ng-click（新しいディレクティブ！）を使用して、ボタンをクリックしたときに新しい学生を配列に追加します。
この例では、これらのディレクティブがどのように一緒に動作して、動的なインタラクティブなウェブアプリケーションを作成するかを示しています。新しい学生を追加すると、即座にテーブルに表示されます！
結論
おめでとうございます！あなたはAngularJSディレクティブの世界への最初の一歩を踏み出しました。私たちはng-app、ng-init、ng-model、そしてng-repeatの基本をカバーしました。これらはAngularJSが提供する多くのディレクティブの一部ですが、非常に良い出発点です。
プログラミングを学ぶことは新しい言語を学ぶのと同じです。時間と練習が必要ですが、すぐにAngularJSを流暢に「話す」ことができるようになるでしょう！これらのディレクティブを試してみて、さまざまな方法で組み合わせてみて、最も重要なのは、楽しむことです！
未来のAngularJSマスターさん、快くコーディングを続けてください！
Credits: Image by storyset