AngularJS - モジュール

こんにちは、未来のプログラマーたち！今日は、AngularJSのモジュールの世界に飛び込みます。プログラミングが初めてであれば心配しないでください。私はこれまでに多くの学生を指導してきましたように、ステップバイステップでガイドします。一緒にこのエキサイティングな旅に出発しましょう！

AngularJS - Modules

AngularJSのモジュールとは？

巨大なレゴの構造物を建てていると想像してみてください。すべてを一度に作ろうとするのではなく、小さくて管理しやすいパーツを作り、後でそれらを組み合わせるでしょう。AngularJSのモジュールもまさに同じことをしています！

AngularJSのモジュールは、アプリケーションの異なる部分を格納するコンテナです。これによりコードを整理し、メンテナンスや理解を容易にします。アプリの異なる機能を収納するきれいにラベリングされた箱として考えайтеください。

アプリケーションモジュール

アプリケーションモジュールは、すべての他の箱を保持する主要な箱です。AngularJSアプリケーションが始まる場所です。まず最初にアプリケーションモジュールを作成してみましょう：

var myApp = angular.module('myApp', []);

この行で何が起きているか見てみましょう：

angular.module()は新しいモジュールを作成する関数です。
'myApp'は私たちがモジュールに与える名前です。
空の配列[]は、モジュールが持つ依存関係をリストアップする場所です（後で詳しく説明します）。

コントローラーモジュール

メインの箱（アプリケーションモジュール）ができたら、中に小さな箱を追加してみましょう。まずはコントローラーモジュールを追加します。コントローラーはAngularJSでアプリケーションのデータを管理します。コントローラーを作成する方法は以下の通りです：

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

これを分解してみましょう：

myApp.controller()はmyAppモジュールに新しいコントローラーを追加します。
'MyController'はこのコントローラーに与える名前です。
関数はこのコントローラーが何をするかを定義します。
$scopeはコントローラーがビュー（HTML）と通信するための特別なオブジェクトです。

モジュールの使用

モジュールを作成したので、実際にどう使うのでしょうか？思っているより簡単です！HTMLで参照するだけです。以下に方法を示します：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

ここで注意すべき几点があります：

ng-app="myApp"はAngularJSにこの場所がアプリケーションの場であることを伝えます。
ng-controller="MyController"はボディにコントローラーを適用します。
{{message}}はコントローラーで定義したメッセージを表示します。

例

少し複雑な例ですべてをまとめてみましょう。シンプルなタスクリストアプリケーションを作成します：

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'AngularJSを学ぶ', done: false},
{text: 'アプリを作る', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

そして、対応するHTMLは以下の通りです：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>タスクリスト</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="新しいタスクを追加">
<input type="submit" value="追加">
</form>
<script src="app.js"></script>
</body>
</html>

出力

このコードを実行すると、シンプルなタスクリストアプリケーションが表示されます。新しいタスクを追加し、完了にチェックを入れることができます。魔法は、私たちのモジュール（app.jsに定義された）とHTMLの間のインタラクションによって起こります。

結論

そして、ここまでAngularJSのモジュールの世界、基本的な概念から動作するタスクリストアプリケーションまでを旅しました。モジュールはレゴのブロックのように、複雑な構造を一枚一枚組み立てる手助けをしてくれます。AngularJSの冒険を続ける中で、モジュールを使って強力で効率的なウェブアプリケーションを作成する方法をさらに多く見つけるでしょう。

続けて練習し、好奇心を持ち、そして最も重要なのは、コードを楽しむことです！誰 knows? 次の革新的なアプリがあなたの手元で生まれるかもしれません！

メソッド	説明
angular.module()	新しいモジュールを作成します
module.controller()	モジュールに新しいコントローラーを追加します
ng-app	AngularJSアプリケーションを自動ブートストラップするディレクティブ
ng-controller	コントローラーを指定するディレクティブ
ng-repeat	HTML要素を繰り返すディレクティブ
ng-model	インプットを変数にバインドするディレクティブ
ng-submit	フォームの送信動作を指定するディレクティブ
ng-class	动的にCSSクラスを設定するディレクティブ

Credits: Image by storyset