日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - サービス：強力なウェブアプリケーションの扉

こんにちは、未来のウェブ開発スーパースターたち！AngularJSサービスの世界へのエキサイティングな旅にあなたのガイドとして誇りに思っています。コンピュータサイエンスを教えてきた年数はそれほど多くありません（フロッピーディスクが実際にフロッピーだった時代を覚えていますが）、サービスを理解することはお気に入りのビデオゲームの秘密レベルを解锁するようなものです。新しい世界の可能性が広がります！

AngularJS - Services

AngularJSサービスとは？

本題に入る前に、基本から始めましょう。あなたが大きな城（ウェブアプリケーション）を建てているとします。AngularJSのサービスは、城をスムーズに運営するために特定のタスクを行う信頼できる使用人のようなものです。データを取得し、計算を行い、アプリケーション全体の状態を維持します。そして、最高なのは、一度サービスを作成すると、アプリのどこででも使用できることです！

それでは、この便利な使用人を作成する主な2つの方法、ファクトリメソッドとサービスメソッドを探ってみましょう。

ファクトリメソッドの使用

ファクトリメソッドは、魔法の工房のようにオブジェクトを作成し返すものです。柔軟で、オブジェクトを返す前にロジックを追加することができます。

以下に簡単な例を示します：

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

app.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b;
};

return factory;
});

app.controller('MyController', function($scope, MathService) {
$scope.result = MathService.multiply(5, 3);
});

これを分解すると：

  1. 'myApp'というモジュールを作成します。
  2. app.factory()を使用して'MathService'というサービスを作成します。
  3. ファクトリ内でオブジェクト（factory）を作成し、multiply関数を追加します。
  4. factoryオブジェクトを返します。
  5. コントローラ内で'MathService'をインジェクトし、そのmultiply関数を使用します。

これを実行すると、$scope.resultは15になります。魔法ですね？

サービスメソッドの使用

サービスメソッドは、オブジェクトを作成するための青写真のようなものです。裏では'new'キーワードを使用しており、'this'を使用してプロパティやメソッドを追加できます。

それでは、サービスメソッドを使用して'MathService'を書き直してみましょう：

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

app.service('MathService', function() {
this.multiply = function(a, b) {
return a * b;
};
});

app.controller('MyController', function($scope, MathService) {
$scope.result = MathService.multiply(5, 3);
});

ここでの主な違いは、thisに直接multiply関数をアタッチしていることです。

ファクトリとサービス：決闘

今、あなたはきっと「どちらを使用すればいいのか？」と疑問に思っているでしょう。これは、スイスアーミーナイフと特殊工具の選択のようなものです。以下に便利な比較を示します：

特性 ファクトリ サービス
返却値 任意のオブジェクトまたは値 関数のインスタンス
'this'の使用 通常は使用しない プロパティやメソッドをアタッチするために使用
柔軟性 より柔軟で、オブジェクト作成前のロジックを含むことができる シンプルで、ストレートなオブジェクト作成
使用ケース オブジェクトを返す前に設定が必要な場合 シンプルなオブジェクトインスタンスが必要な場合

実世界の例

それでは、より実践的な例を作成してみましょう。私たちは天気アプリを作成しているとします。天気データを取得するサービスを作成します（タイムアウト関数を使用してシミュレートします）。

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

app.factory('WeatherService', function($q, $timeout) {
var service = {};

service.getWeather = function(city) {
var deferred = $q.defer();

$timeout(function() {
var temperature = Math.floor(Math.random() * 30) + 1;  // 1から30のランダムな温度
deferred.resolve({city: city, temperature: temperature});
}, 1000);

return deferred.promise;
};

return service;
});

app.controller('WeatherController', function($scope, WeatherService) {
$scope.getWeatherReport = function() {
WeatherService.getWeather($scope.city).then(function(data) {
$scope.weather = data;
});
};
});

この例では：

  1. 'WeatherService'をファクトリメソッドを使用して作成します。
  2. サービスにはgetWeather関数があり、タイムアウト関数を使用してAPIコールをシミュレートします。
  3. $qを使用して非同期操作を処理し、プロミスを返します。
  4. コントローラ内で'WeatherService'をインジェクトし、そのgetWeather関数を使用します。

出力

これを実行するために、HTMLファイルが必要です。以下に簡単なものを示します：

<!DOCTYPE html>
<html ng-app="WeatherApp">
<head>
<title>Weather App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="WeatherController">
<h1>Weather Report</h1>
<input type="text" ng-model="city" placeholder="Enter city name">
<button ng-click="getWeatherReport()">Get Weather</button>
<p ng-if="weather">The temperature in {{weather.city}} is {{weather.temperature}}°C</p>
</body>
</html>

これを実行すると、都市名を入力し、ボタンをクリックすることで（シミュレートされた）天気報告が表示されます！

締め括り

そして、ここまでがAngularJSサービスの世界への初めてのステップです！新しいスキルを学ぶことは最初は少し圧倒されるかもしれませんが、信じてください、練習を重ねることですぐにプロのようにサービスを作成し使用できるようになります。

サービスをあなたのウェブアプリケーションの大砲として考えましょう。彼らはいつもそこにいて、データを取得したり、計算を行ったり、あなたが割り当てるどんなタスクでも行います。そして、一度作成すると、アプリのどこででも使用できます！

それでは、実験を続け、間違えを恐れずに。それが私たち全員が学ぶ方法です。そして、いつかあなたが次世代の開発者に新しいフレームワークについて教える日が来るかもしれません。その日まで、ハッピーコーディングを！

Credits: Image by storyset

前のチュートリアル:
AngularJS - スコープ
次のチュートリアル:
AngularJS - 依存性インジェクション