angularjs npm tutorial

AngularJS NPM チュートリアルを完了する: 最初のアプリをゼロから構築する

この記事では、npm パッケージマネージャーを使用して最初の AngularJS アプリケーションを構築する手順を段階的に説明します。詳細な手順とサンプルコードを使用して、AngularJS の基本をマスターし、NPM を使用して依存関係を管理する方法を学びます。

このチュートリアルでは、AngularJS を使用してフル機能のシングルページアプリケーション (SPA) を構築する方法を、一級方程式レース情報アプリケーションを例に、段階的に説明します。AngularJS の核となる概念と実践を学ぶことができます。

1. AngularJS とは？

AngularJS は Google によって開発された JavaScript MVC フレームワークであり、構造化され、テストが容易で、保守しやすいフロントエンドアプリケーションを構築するための簡潔かつ強力な方法を提供します。

2. AngularJS を選択する理由

AngularJS には、最新の Web アプリケーションを構築するための理想的な選択肢となる、以下のような顕著な利点があります。

モジュール化開発: コードを再利用可能なモジュールに分割することで、保守性とテスト容易性を向上させます。
ディレクティブによる HTML の拡張: ディレクティブを使用して HTML にカスタム機能を追加し、動的なテンプレートを作成できます。
双方向データバインディング: モデルとビュー間のデータを自動的に同期するため、DOM 操作が少なくなります。
サーバー通信の簡素化: バックエンド API とのやり取りを簡素化する便利なサービスを提供します。
フロントエンドでのビジネスロジック処理: ビジネスロジックをフロントエンドに移行することで、より応答性の高いアプリケーションを構築できます。

3. プロジェクトの目標

今回のプロジェクトでは、F1 レースの最新ランキング、ドライバー情報、レース結果を表示するレース情報アプリケーションを構築します。バックエンド開発を簡素化するために、Ergast が提供する無料のレース API を使用してデータを取得します。

4. 入門チュートリアル

angular-seed プロジェクトを出発点として使用します。これは、事前に設定された AngularJS プロジェクト構造と、Karma ユニットテストフレームワークを含んでいます。

まず、angular-seed リポジトリをクローンします。

git clone https://github.com/angular/angular-seed.git <your-project-name>

次に、プロジェクトの依存関係をインストールします。

cd <your-project-name>
npm install

angular-seed プロジェクトは、Bower を使用してフロントエンドの依存関係を管理します。後の手順で、Bower を使用して angular-route モジュールをインストールします。

5. ドライバーズチャンピオンシップの構築

まず、ドライバーのランキング、名前、チーム、ポイントを表示するドライバーズチャンピオンシップページを構築します。

5.1 drivers.html ビューの作成

app/partials フォルダに drivers.html という名前のファイルを作成し、以下のコードを追加します。

<div ng-app="F1FeederApp" ng-controller="driversController">
  <table>
    <thead>
      <tr><th colspan="4">ドライバーズランキング</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}} {{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
</div>

このコードは、以下の AngularJS の概念を示しています。

ng-app ディレクティブ: AngularJS アプリケーションのルート要素をマークします。
ng-controller ディレクティブ: ビューの動作とデータを管理するコントローラーを指定します。
ng-repeat ディレクティブ: driversList 配列を反復処理し、要素ごとにテーブル行を生成します。
式 {{ ... }}: ビューにデータを表示するために使用されます。

5.2 driversController コントローラーの作成

app/js フォルダに controllers.js という名前のファイルを作成し、以下のコードを追加します。

angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope) {
  $scope.driversList = [
    // 静的データ...
  ];
});

このコントローラーは、driversList という名前の配列を定義し、それを $scope オブジェクトにアタッチします。$scope はコントローラーとビュー間のブリッジであり、ビューからコントローラーのデータや関数にアクセスできるようにします。

5.3 アプリケーションモジュールの定義

app/js/app.js ファイルで、アプリケーションモジュールを定義し、コントローラーモジュールを含めます。

angular.module('F1FeederApp', [
  'F1FeederApp.controllers'
]);

6. サーバーからデータを読み込む

$http サービスを使用して、Ergast API からドライバーデータを取得します。

6.1 ergastAPIservice サービスの作成

app/js フォルダに services.js という名前のファイルを作成し、以下のコードを追加します。

angular.module('F1FeederApp.services', []).
  factory('ergastAPIservice', function($http) {
    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP',
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    };

    return ergastAPI;
  });

ergastAPIservice サービスは、getDrivers 関数を提供します。この関数は、$http サービスを使用して Ergast API に JSONP リクエストを送信し、promise オブジェクトを返します。

6.2 コントローラーでサービスを使用する

ergastAPIservice を driversController に注入し、コントローラー内で getDrivers 関数を呼び出してデータを取得します。

angular.module('F1FeederApp.controllers', ['F1FeederApp.services']).
  controller('driversController', function($scope, ergastAPIservice) {
    ergastAPIservice.getDrivers().success(function(response) {
      $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  });

これで、driversController は Ergast API から取得した動的データを使用してビューをレンダリングします。

7. 検索フィルターの追加

特定のドライバーを簡単に見つけられるように、検索フィルターを追加します。

7.1 ビューに検索ボックスを追加する

drivers.html ファイルのテーブルの上に、以下のコードを追加します。

<input type="text" ng-model="nameFilter" placeholder="ドライバーを検索...">

7.2 filter フィルターを使用する

ユーザー入力に基づいてドライバーリストをフィルタリングするために、filter フィルターを使用して ng-repeat ディレクティブを変更します。

<tr ng-repeat="driver in driversList | filter:nameFilter">

これで、ユーザー入力は自動的に nameFilter モデルに反映され、filter フィルターは nameFilter の値に基づいて driversList 配列を動的にフィルタリングします。

8. ルーティングと部分ビューの追加

より複雑なアプリケーションナビゲーションを実現するために、AngularJS のルーティング機能を使用して複数のビューを作成し、部分ビューを使用してテンプレートコードを整理します。

8.1 angular-route モジュールのインストール

Bower を使用して angular-route モジュールをインストールします。

bower install angular-route --save

8.2 ルーティング規則の定義

app.js ファイルで、ngRoute モジュールを含め、ルーティング規則を定義します。

angular.module('F1FeederApp', [
  'F1FeederApp.controllers',
  'F1FeederApp.services',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/drivers', {
      templateUrl: 'partials/drivers.html',
      controller: 'driversController'
    }).
    otherwise({
      redirectTo: '/drivers'
    });
}]);

このコードは、/drivers パスを driversController コントローラーと partials/drivers.html テンプレートにマッピングするルーティング規則を定義しています。

8.3 ng-view ディレクティブの使用

index.html ファイルで、ng-view ディレクティブを使用して、部分ビューをレンダリングする場所を指定します。

<!DOCTYPE html>
<html>
<head>
  <title>F1 情報フィード</title>
</head>
<body ng-app="F1FeederApp">
  <div ng-view></div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
</body>
</html>

これで、ユーザーが /drivers パスにアクセスすると、drivers.html の内容が ng-view ディレクティブがある場所にレンダリングされます。

9. ドライバー詳細ページの作成

特定のドライバーの詳細情報を表示するために、ドライバー詳細ページを作成します。

9.1 API 関数の追加

ergastAPIservice サービスに、ドライバーの詳細とレース結果を取得するための 2 つの関数を追加します。

ergastAPI.getDriverDetails = function(id) {
  return $http({
    method: 'JSONP',
    url: 'http://ergast.com/api/f1/2013/drivers/' + id + '/driverStandings.json?callback=JSON_CALLBACK'
  });
};

ergastAPI.getDriverRaces = function(id) {
  return $http({
    method: 'JSONP',
    url: 'http://ergast.com/api/f1/2013/drivers/' + id + '/results.json?callback=JSON_CALLBACK'
  });
};

9.2 driverController コントローラーの作成

controllers.js ファイルに、ドライバー詳細ページを管理する driverController という名前のコントローラーを作成します。

angular.module('F1FeederApp.controllers', ['F1FeederApp.services']).
  // ...driversController...
  .controller('driverController', function($scope, $routeParams, ergastAPIservice) {
    $scope.id = $routeParams.id;
    $scope.driver = null;
    $scope.races = [];

    ergastAPIservice.getDriverDetails($scope.id).success(function(response) {
      $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
    });

    ergastAPIservice.getDriverRaces($scope.id).success(function(response) {
      $scope.races = response.MRData.RaceTable.Races;
    });
  });

driverController コントローラーは、$routeParams サービスを使用して URL から渡されたドライバー ID を取得し、ergastAPIservice の関数を呼び出してデータを取得します。

9.3 driver.html 部分ビューの作成

app/partials フォルダに driver.html という名前のファイルを作成し、以下のコードを追加します。

<div ng-show="driver">
  <h2>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</h2>
  <p>国籍: {{driver.Driver.nationality}}</p>
  <p>チーム: {{driver.Constructors[0].name}}</p>
  
  <h3>レース結果</h3>
  <table>
    <thead>
      <tr>
        <th>ラウンド</th>
        <th>グランプリ</th>
        <th>チーム</th>
        <th>予選</th>
        <th>決勝</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="race in races">
        <td>{{race.round}}</td>
        <td>{{race.raceName}}</td>
        <td>{{race.Results[0].Constructor.name}}</td>
        <td>{{race.Results[0].grid}}</td>
        <td>{{race.Results[0].position}}</td>
      </tr>
    </tbody>
  </table>
</div>

9.4 ルーティング規則の追加

app.js ファイルに、/drivers/:id パスを driverController コントローラーと partials/driver.html テンプレートにマッピングするルーティング規則を追加します。

// ...その他のルーティング規則...
.when('/drivers/:id', {
  templateUrl: 'partials/driver.html',
  controller: 'driverController'
})
// ...その他のルーティング規則...

これで、ユーザーがドライバーの名前をクリックすると、アプリケーションはドライバー詳細ページに移動し、そのドライバーの詳細とレース結果が表示されるようになります。

10. 仕上げ

ユーザーエクスペリエンスを向上させるために、CSS スタイルを追加してページの見た目を良くすることができます。

11. 結論

このチュートリアルでは、AngularJS を使用してシンプルなレース情報アプリケーションを構築する方法を学びました。モジュール、コントローラー、テンプレート、ディレクティブ、サービス、フィルター、ルーティングなど、AngularJS の核となる概念について説明しました。これはほんの始まりに過ぎず、AngularJS には、より複雑で堅牢な Web アプリケーションを構築するのに役立つ、他にも多くの強力な機能があります。

参考資料

AngularJS 公式サイト: AngularJS の公式ドキュメントやチュートリアルを提供しています。
AngularJS チートシート: AngularJS の構文やよく使う機能をまとめたチートシートです。

よくある質問

Q1: AngularJS はまだ使われていますか？

A1: AngularJS (Angular 1.x) は、2016 年にリリースされた Angular (Angular 2 以降) によって大部分が置き換えられました。しかし、既存の AngularJS アプリケーションは多数あり、AngularJS の知識は依然として役立ちます。

Q2: AngularJS と Angular の違いは何ですか？

A2: Angular は、AngularJS の完全な書き直しであり、TypeScript をベースにしています。コンポーネントベースのアーキテクチャ、モバイルファースト、パフォーマンスの向上など、多くの点で AngularJS とは異なります。

Q3: AngularJS を学ぶべきですか、それとも Angular を学ぶべきですか？

A3: 新しいプロジェクトを開始する場合は、Angular を学ぶことをお勧めします。AngularJS は、既存の AngularJS アプリケーションを保守する場合にのみ必要になります。