日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 環境設定

こんにちは、未来のウェブ開発者さんたち！AngularJSの世界に誘うこのエキサイティングな旅にお連れします。10年以上コンピュータサイエンスを教えてきた者として、開発環境を整えるのは、美食の料理をする前にキッチンを準備するようなものです。それ自体は特に魅力的な部分ではありませんが、成功するために絶対に必要です。では、腕をまくって始めましょう！

AngularJS - Environment Setup

AngularJSとは？

設定に入る前に、AngularJSとは何かを理解しましょう。家を建てているとしましょう。HTMLは基盤と壁、CSSはペンキと装飾、JavaScriptは電気とパイプワークです。AngularJSは、それら全てがスムーズに連携するようにする専門のインテリアデザイナーと建築家のチームのようなものです。

AngularJSは強力なJavaScriptフレームワークで、HTMLの機能を拡張し、動的でシンブルページのウェブアプリケーションを簡単に作成できるようにします。HTMLにスーパーパワーを与えるようなものです！

開発環境が必要な理由は？

「すぐにコーディングを始められないか？」と疑問に思うかもしれません。しかし、道具や家電のないキッチンで五皿の料理を作るのと同じです。適切な開発環境は、あなたにコードを書き、テストし、AngularJSアプリケーションを効率的に実行するための全てのツールを提供します。

AngularJS環境の設定

では、本題に入りましょう。以下の手順が必要です：

1. Node.jsのインストール

Node.jsは私たちの開発環境のエンジンです。JavaScriptランタイムで、コンピュータ上でブラウザの外でJavaScriptを実行できるようにします。

  1. 公式Node.jsウェブサイト（https://nodejs.org/）にアクセスします。
  2. 大部分のユーザーに推奨されるバージョンをダウンロードします。
  3. インストーラーを実行し、指示に従います。

Node.jsが正しくインストールされているか確認するために、コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行します：

node --version

Node.jsが正しくインストールされている場合は、バージョン番号が表示されます。

2. npm（Nodeパッケージマネージャ）のインストール

良かったニュース！npmは通常Node.jsと一緒に捆绑されています。これは、巨大な図書館のようなもので、プロジェクトで使用するための既に書かれたコードパッケージを借用（またはこの場合はダウンロード）できます。

npmがインストールされているか確認するには、以下のコマンドを実行します：

npm --version

3. AngularJSのインストール

ここで魔法が起こります。npmを使用してAngularJSをインストールします。コマンドプロンプトまたはターミナルで以下のコマンドを入力します：

npm install angular

このコマンドは、npmにAngularJSパッケージを取得してコンピュータにインストールするように指示します。

4. シンプルなAngularJSプロジェクトの設定

すべてが正しく動作しているか確認するために、基本的なプロジェクトを作成しましょう。まず、プロジェクト用の新しいフォルダを作成します。ファイルエクスプローラーまたはコマンドラインを使用してこれを行うことができます：

mkdir my-angular-project
cd my-angular-project

このフォルダ内に以下の2つのファイルを作成します：

  1. index.html
  2. app.js

以下がindex.htmlの内容です：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>私の初めてのAngularJSアプリ</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

そしてapp.jsの内容は以下の通りです：

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

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

これを分解しましょう：

  • index.htmlでは、基本的なHTML構造を作成しています。
  • ng-app="myApp"属性は、AngularJSにこの要素がアプリケーションのルート要素であることを伝えます。
  • AngularJSライブラリと私たちのapp.jsファイルを<script>タグでインクルードしています。
  • <div ng-controller="MainController">は、HTMLをapp.jsで定義したコントローラーに接続します。
  • {{ greeting }}は、コントローラーからビュー（私たちのHTML）にデータを渡すためのAngularJSの表現です。

app.jsでは：

  • AngularJSモジュールmyAppを作成します。
  • MainControllerという名前のコントローラーをモジュールに登録します。
  • コントローラー内で$scopeオブジェクトにgreetingプロパティを設定し、それをビューに渡します。

5. アプリケーションの実行

アプリケーションを実行するために、ウェブサーバーが必要です。開発目的では、live-serverパッケージを使用できます。npmでグローバルにインストールします：

npm install -g live-server

その後、プロジェクトディレクトリで以下を実行します：

live-server

これにより、ローカルウェブサーバーが起動し、デフォルトのブラウザが開き、アプリケーションが表示されます。ページに「Hello, AngularJS!」が表示されるはずです。

結論

おめでとうございます！あなたは刚刚AngularJS開発環境を設定し、初めてのAngularJSアプリケーションを作成しました。多くの手順がありましたが、慣れると簡単になります。覚えておいてください、すべての専門家もかつては初心者でした。環境を整えるのは、AngularJSのマスターになる旅の最初のステップです。

次のレッスンでは、AngularJSの概念を深く掘り下げ、より複雑なアプリケーションを構築し始めます。それまでの間、新しい設定で実験してみてください。挨拶を変更したり、HTMLに更多信息を追加してみてください。学ぶ最良の方法は実践です！

ハッピーコーディング、次回のレッスンでお会いしましょう！

メソッド 説明
angular.module() AngularJSモジュールを作成または取得します
module.controller() モジュールに新しいコントローラーを登録します
$scope アプリケーションモデルを参照するオブジェクト
ng-app AngularJSアプリケーションのルート要素を宣言するディレクティブ
ng-controller HTML要素に対するコントローラーを指定するディレクティブ
{{ }} AngularJSの表現式で、値を表示するためのシンタックス

Credits: Image by storyset

前のチュートリアル:
AngularJS - 概要
次のチュートリアル:
AngularJS - MVCアーキテクチャ