日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - Todo アプリケーション

こんにちは、将来のプログラマーたち！今日は、AngularJSの世界に興味深い旅に出発します。シンプルでありながら強力なTodoアプリケーションを構築することになります。あなたの近所の親切なコンピュータサイエンスの先生として、私がこのプロセスをガイドします。コードを書いたことがない人でも大丈夫です。お気に入りの飲み物を手に取り、リラックスして、一緒に飛び込んでみましょう！

AngularJS - ToDo Application

AngularJSとは？

コードを書く前に、AngularJSとは何かを理解するために少し時間を取ります。家を建てることを考えてみてください。HTMLは基盤と壁、CSSはペンキと装飾、JavaScriptは電気と給水管です。AngularJSは、これらすべての要素を智能的に、組織的にまとめる超効率的な建設チームのようなものです。

AngularJSは、アプリケーションのためにHTMLの語彙を拡張する強力なJavaScriptフレームワークです。特に、ダイナミックなシングルページアプリケーションを構築するのに適しています。

プロジェクトのセットアップ

まず第一に、プロジェクトをセットアップしましょう。以下の3つのファイルが必要です：

  1. index.html（メインのHTMLファイル）
  2. app.js（AngularJSアプリケーション）
  3. style.css（スタイルシート）

まずHTMLファイルから始めます：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>私のTodo App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>私のTodoリスト</h1>
<!-- 後でここにさらに追加します -->
</body>
</html>

これを分解すると：

  • ng-app="todoApp": これはAngularJSに、これはアプリケーションのルート要素であることを伝えます。
  • ng-controller="TodoController": これはこのアプリの部分で使用するコントローラーを指定します。
  • AngularJSをCDNからインクルードし、app.jsとstyle.cssファイルをリンクしています。

AngularJSアプリケーションの作成

次に、app.jsでAngularJSアプリケーションを作成します：

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

app.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 = '';
};
});

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

  • AngularJSモジュール名'todoApp'を作成します。
  • 'TodoController'というコントローラーを定義します。
  • コントローラー内でtodoアイテムの配列を作成し、新しいtodosを追加する関数を定義します。
  • $scopeはHTMLとJavaScriptの橋渡し的角色で、HTML内で変数や関数にアクセスできるようにします。

Todosの表示

HTMLを更新してtodosを表示します：

<body ng-controller="TodoController">
<h1>私のTodoリスト</h1>
<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="新しいtodoを追加">
<input type="submit" value="追加">
</form>
</body>

これを分解すると：

  • ng-repeat="todo in todos": これはtodos配列の各アイテムに対して新しい<li>を生成します。
  • ng-model="todo.done": これはチェックボックスをtodo.doneプロパティにバインドします。
  • ng-class="{'done': todo.done}": これはtodo.doneがtrueのときに'done'クラスを適用します。
  • {{todo.text}}: これはtodoのテキストを表示します。
  • ng-submit="addTodo()": これはフォームが提交されたときにaddTodo関数を呼び出します。
  • ng-model="newTodo": これはインプットをnewTodo変数にバインドします。

アプリのスタイル

最後に、style.cssに基本的なスタイルを追加します：

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

このCSSでアプリがきれいに整います。

結論

おめでとうございます！あなたは初めてのAngularJSアプリケーションを作成しました。以下の表は、私たちが使用した主要なAngularJSコンセプトをまとめます：

コンセプト 説明
ng-app AngularJSアプリケーションのルート要素を定義します
ng-controller HTML要素に使用するコントローラーを指定します
ng-repeat 配列の各アイテムに対してHTML要素を繰り返します
ng-model インプット、セレクト、またはテキストエリアをスコープのプロパティにバインドします
ng-submit フォームが提交されたときに実行する関数を指定します
ng-class 动的にCSSクラスを適用します

覚えるコードは新しい言語を学ぶのと同じです。時間と練習はかかりますが、粘り強く続ければ、すぐに複雑なアプリケーションを構築できるようになります。コードを続け、学び続け、そして何より楽しみましょう！

Credits: Image by storyset

前のチュートリアル:
AngularJS - 国際化
次のチュートリアル:
AngularJS - メモアプリケーション