日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 概要

こんにちは、未来のウェブ開発者たち！今日は、AngularJSの世界への興味深い旅に出発します。プログラミングが初めてであっても心配しないでください。私はあなたの親切なガイドとして、ステップバイステップで進めていきます。このチュートリアルの終わりには、AngularJSとは何かについて確固たる理解を持つことでしょう。それでは、始めましょう！

AngularJS - Overview

一般的な機能

AngularJSはウェブ開発におけるスイスアーミーナイフです。強力なJavaScriptフレームワークで、動的なウェブアプリケーションを簡単に構築する手助けをしてくれます。家を建てることを考えてみてください。AngularJSは、美しく機能的な構造を創造するために必要なすべての道具と設計図を提供してくれます。

以下は、AngularJSを際立たせる一般的な機能のいくつかです：

  1. Model-View-Controller（MVC）アーキテクチャ：これは整理された道具箱のようなものです。アプリケーションのデータ（モデル）、ユーザーインターフェース（ビュー）、ビジネスロジック（コントローラー）を分ける手助けをしてくれます。

  2. 双方向データバインディング：これは魔法の鏡のようなものです。片側で変更を加えると、反対側も自動的に更新されます！

  3. 依存性インジェクション：これは、必要なものを必要なときに持ってくる個人的なアシスタントのようなものです。

  4. ディレクティブ：これはAngularJSにどう振る舞うかを指示する特別な命令です。すでに賢い犬に新しい技を教えるようなものです！

以下の簡単な例で、これらの機能が実際にどのように動作するかを見てみましょう：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>私の最初のAngularJSアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>

この例では、MVCアーキテクチャ（ng-app、ng-controller）、双方向データバインディング（ng-model）、そしてシンプルなディレクティブ（ng-controller）を使用しています。入力フィールドにタイプすると、おめでたい言葉がリアルタイムで更新されるのを見ることができます。魔法ですね？

核心機能

少しの水を溅けさせたところで、AngularJSの核心機能に深く潜りましょう：

  1. スコープ：これはアプリケーションをくっつける接着剤のようなものです。モデルデータが存在する場所です。

  2. コントローラー：これはアプリケーションの脳のようなものです。ここで振る舞いを定義します。

  3. 表現式：これはHTMLに直接埋め込むことができる小さなコードの断片です。

  4. フィルタ：これはデータをあなたの望むように書式化するデータトランスフォーマーです。

以下にこれらを実際に動かしてみます：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJSのコア機能</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello, {{name | uppercase}}!</h1>
<p>あなたの好きな果物は: {{fruit}}</p>
<button ng-click="changeFruit()">果物を変更</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
$scope.fruit = 'Apple';
$scope.changeFruit = function() {
$scope.fruit = 'Banana';
};
});
</script>
</body>
</html>

この例では、スコープ（$scope）、コントローラー（MyController）、表現式（{{name}}）、そしてフィルタ（| uppercase）を使用しています。ボタンをクリックすることで、スコープ内のデータを変更することができます。

概念

AngularJSのいくつかの鍵となる概念を見てみましょう：

  1. モジュール：これはアプリケーションの異なる部分のコンテナのようなものです。コードを整理する手助けをしてくれます。

  2. サービス：これはアプリケーション全体で共有できる再利用可能なコードの断片です。

  3. ディレクティブ：先ほども触れましたが、非常に重要です。HTMLに新しい属性や要素を拡張します。

  4. テンプレート：これは特別なAngularJSマークアップを持つHTMLファイルです。

以下にこれらの概念を実際に見てみましょう：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJSの概念</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{greeting}}</h1>
<button ng-click="sayHello()">こんにちはと言う</button>
</div>

<script>
var app = angular.module('myApp', []);

app.service('GreetingService', function() {
this.getGreeting = function() {
return "Hello, AngularJS!";
};
});

app.controller('MyController', function($scope, GreetingService) {
$scope.sayHello = function() {
$scope.greeting = GreetingService.getGreeting();
};
});
</script>
</body>
</html>

この例では、モジュール（myApp）、サービス（GreetingService）、コントローラーと依存性インジェクション、そしてAngularJSマークアップを持つテンプレートを使用しています。

AngularJSの利点

AngularJSには以下のような多くの利点があります：

  1. 学びやすい：直感的な構造により初心者にも優しいです。

  2. 再利用可能なコンポーネント：一度書いたものを何度も使えます！

  3. テストが簡単：AngularJSはテストを考慮して設計されています。

  4. コミュニティのサポート：多くの活発なコミュニティがおり、助け合いが容易です。

AngularJSの欠点

しかし、どんなツールにも課題があります：

  1. パフォーマンスの問題：複雑なアプリケーションは時々遅くなることがあります。

  2. 学習曲線：始めるのは簡単ですが、マスターするには時間がかかります。

  3. バージョン間の変更：バージョン間で大きな変更があるため、挑戦的です。

AngularJSのディレクティブ

ディレクティブはAngularJSの秘伝の味です。再利用可能なコンポーネントを作成し、HTMLの機能を拡張します。以下はいくつかの一般的なディレクティブの表です：

ディレクティブ 説明
ng-app AngularJSアプリケーションを初期化
ng-controller アプリケーションにコントローラーを指定
ng-model インプットをプロパティにバインド
ng-repeat コレクションの各要素に対して要素を繰り返し
ng-click クリック時の振る舞いを指定
ng-show 要素を表示または非表示
ng-hide 要素を非表示または表示
ng-if 要素をDOMから削除または再作成
ng-class 一つまたは複数のCSSクラスを動的にバインド
ng-style 動的なスタイルを指定

以下にいくつかのディレクティブを使用した例を見てみましょう：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJSのディレクティブ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div ng-controller="MyController">
<h1 ng-class="{red: isRed, bold: isBold}">Hello, AngularJS!</h1>
<button ng-click="toggleRed()">赤色を切り替え</button>
<button ng-click="toggleBold()">太字を切り替え</button>

<h2>私の果物たち:</h2>
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

<input type="text" ng-model="newFruit">
<button ng-click="addFruit()">果物を追加</button>

<p ng-show="fruits.length > 3">多くの果物があります！</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.isRed = false;
$scope.isBold = false;
$scope.fruits = ['Apple', 'Banana', 'Orange'];

$scope.toggleRed = function() {
$scope.isRed = !$scope.isRed;
};

$scope.toggleBold = function() {
$scope.isBold = !$scope.isBold;
};

$scope.addFruit = function() {
if($scope.newFruit) {
$scope.fruits.push($scope.newFruit);
$scope.newFruit = '';
}
};
});
</script>
</body>
</html>

この例では、ng-class、ng-click、ng-repeat、ng-model、そしてng-showディレクティブを使用して、動的でインタラクティブなウェブアプリケーションを簡単に作成しています。

そしてここまでで、AngularJSの一般機能から核心機能、そしてディレクティブまでの whirlwind tour が終わりました。学びの最良の方法は実際にやることですので、これらの例を試してみて、自分自身のものを作成してみてください。未来のAngularJSマスター、编码を楽しんでください！

Credits: Image by storyset

前のチュートリアル:
AngularJS - ホーム
次のチュートリアル:
AngularJS - 環境設定