AngularJS - 最初のアプリケーション

ようこそ、志を抱くプログラマーさんたち！今日は、AngularJSの世界に足を踏み入れる興奮的な旅に出発します。あなたの近所の親切なコンピュータ教師として、私があなたたちの最初のAngularJSアプリケーションをガイドします。心配しないでください。これまでにコードを書いたことがないとしても、私たちは一歩一歩進んでいきます。そして、あなたがプロのように動的なウェブアプリケーションを作成する前に、気づくでしょう！

AngularJS - First Application

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

まずは基本から始めましょう。AngularJSは強力なJavaScriptフレームワークで、インタラクティブなウェブアプリケーションを構築する手助けをしてくれます。これを魔法のような工具箱のように考えてください。それが私たちのウェブページを生き生きとするのです！

私たちの最初の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="myCtrl">
<h2>Hello, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJSの初心者';
});
</script>
</body>
</html>

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

我们从一个标准的HTML结构开始。
<html>标签中的ng-app="myApp"は、AngularJSにこの要素がアプリケーションのルート要素であることを伝えます。
<head>セクションにAngularJSライブラリを含む<script>タグを追加します。
<body>にng-controller="myCtrl"を持つ<div>があります。これは、HTMLをAngularJSコントローラに接続します。
この<div>内に{{name}}があります。これはAngularJSの表現式で、nameの値を表示します。
最後に、AngularJSモジュールとコントローラを定義する<script>タグがあります。

AngularJSアプリケーションの実行

アプリケーションを作成したので、それを実行する方法を見てみましょう：

上記のコードをindex.htmlというファイルに保存します。
このファイルをウェブブラウザ（ChromeやFirefoxなど）で開きます。

それで終わりです！あなたのAngularJSアプリケーションが動作しています。思ったよりも簡単ですね？

出力

index.htmlファイルをブラウザで開くと、以下のように表示されるはずです：

Hello, AngularJSの初心者!

魔法のように思いますよね？でも、これはどのように動作するのでしょう？詳しく見ていきましょう！

AngularJSがHTMLと統合する方法

AngularJSは、私たちが「ディレクティブ」と呼ぶ特別な属性を通じてHTMLとスムーズに統合されます。これらは、AngularJSにDOM要素に対して何かを行うように指示するものです。私たちが使用した主なディレクティブを見てみましょう：

ディレクティブ	目的
ng-app	AngularJSアプリケーションのルート要素を定義します
ng-controller	HTML要素に使用するコントローラを指定します
{{ }}	表現式の値を表示します

詳しく説明します：

ng-app：このディレクティブはAngularJSアプリケーションを初期化します。AngularJSにこの部分のページを管理するように指示します。私たちの例では、<html>タグに置いて、整个ページをAngularJSアプリケーションにします。
ng-controller：このディレクティブはJavaScriptのコントローラクラスを指定します。コントローラは、関数や値を定義してアプリケーションの動作を定義する場所です。私たちの例では、myCtrlがコントローラです。
{{ }}：この二重のカッコはAngularJSの表現式です。それ internally評価された結果に置き換えます。私たちのケースでは、{{name}}は「AngularJSの初心者」に置き換えられます。

さて、私たちのJavaScriptコードを見てみましょう：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJSの初心者';
});

angular.module('myApp', [])は新しいAngularJSモジュール「myApp」を作成します。これはng-app="myApp"で使用した名前と一致しています。
app.controller('myCtrl', function($scope) { ... })は私たちのコントローラを定義します。$scopeは特別なオブジェクトで、コントローラとビュー（私たちのHTML）の間のブリッジとして機能します。
$scope.name = 'AngularJSの初心者'は$scopeにプロパティを設定します。これにより、HTML内で{{name}}を使用することができます。

そして、それが全部です！あなたは刚刚初めてのAngularJSアプリケーションを作成し、理解しました。素晴らしいですね？

覚えておいてください、コードを学ぶことは新しい言語を学ぶのと同じです。最初は混乱するかもしれませんが、練習を重ねることで自然になります。私が最初にAngularJSを教えたとき、カッコが多くて「マスタッシュ言語」と呼ぶ生徒もいました！しかし、コースの終わりには複雑なアプリケーションを作成し、最初の混乱を笑っていました。

ですから、すぐにすべてが理解できないと心配しないでください。練習を続け、コードを修正してみてください（「AngularJSの初心者」をあなたの名前に変更してみてください）。そして、最も重要なことは、楽しむことです！次のレッスンでは、さらに多くのAngularJS機能を探求し、より複雑なアプリケーションを構築します。それまでに、ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:

AngularJS - MVCアーキテクチャ

次のチュートリアル:

AngularJS - ディレクティブ