LoginSignup
0
0

More than 1 year has passed since last update.

Tour of Heroes tutorial 4. サービスの追加

Posted at

Tour of Heroes tutorial 4. サービスの追加で分からないキーワードをメモする。


DI(Dependency Injection)

  • Angular2においては「Providerから提供されているインスタンスを特定の変数にinject(注入)する仕組み」のこと。
  • オブジェクトに他のサービスを取り入れる方法。

インジェクターとは

  • HeroServiceをインジェクターに登録することで、サービスが提供できる様になる。インジェクターとは、必要な場所でプロバイダーを選択して注入するためのオブジェクト。

  • (AngularJSは依存性管理のために「インジェクター(injector)」というものを持っている。
    インジェクターとは、依存性のチェックや生成を行う仕組み。)


プロバイダー
サービスを作成または提供できるもの。4.サービスの追加のtutorialの場合は、HeroServiceクラスをインスタンス化してサービスを提供する。


シングルトン
オブジェクト指向プログラミングにおけるクラスのデザインパターンの一つで、実行時のそのクラスのインスタンスが必ず一つになるように設計すること。

クラスはオブジェクトの雛形であり、何の制約もなければプログラム上で同一のクラスから複数のインスタンスを生成して、それぞれ別の(固有の内部状態を持つ)オブジェクトとして使用することができる。

シングルトンパターンで実装されたクラスは、その仕様として実行時に一つしかインスタンスを作ることができないように設計され、プログラム上では常に同一のインスタンスを参照するように強制することができる。

具体的な実装方法は言語によって異なり、複数の異なる方法で実現できる場合もある。一般的な方針としては、コンストラクタをプライベートメソッドにして外部から呼び出せないようにし、クラス変数(静的変数)として自身のインスタンスを格納する変数を定義、外部からこれを取得するパブリックメソッドを用意(getInstanceメソッド)する。


スケルトン

  • 一般的には「骨格」「概要」の意。コンピュータの文脈では、多くの場合必ず記述されるようなことを予め記述つしておくファイルを指すことが多い。
  • プログラムの骨組み、基盤部分。プログラムのソースコードの決まった定型文(テンプレート)の一種をスケルトンプログラムという。

@injectable
サービスクラスであることの条件は、@injectableデコレータで修飾されている
ことである。@injectableを付与することで、クラスをサービスとしてコンポーネントに引き渡せる様になる。

Angularで自作の「サービス」を定義するには?(@Injectableデコレーター)


モックアップ
Web制作やアプリ開発における試作品のこと。本格的な制作に入る前に、クライアント側に完成品のイメージを確認してもらうためにモックアップを用いる。特にアプリ制作では、使用感や表示スピードなどがユーザー評価に大きく左右されるので、クライアントにモックアップの確認をしてもらってから、本格的な開発を始めることが多い。

モックアップとは

スクリーンショット 2023-03-28 17.29.16.png


シングルトンサービス

  • シングルトンサービスは、そのインスタンスがアプリケーションに一つだけ存在するサービス。
     シングルトンサービスを提供する
  • @injectable()のprividedInプロパティに対してrootをセットする。
  • AppModuleか、AppModuleによってのみインポートされるモジュールにサービスを含める。

シングルトンサービス

Singletonパターン

  • 生成するインスタンスの数を1つに制限するデザインパターン。
  • 指定したクラスのインスタンスが1つしか存在しないことを保証する
  • インスタンスが1個しか存在しないことをプログラム上で表現したい

*Observable

  • Observableは、アプリケーションの中でパプリッシャーとサブスクライバー間でメッセージを渡すためのサポートを提供する。これはAngularで頻繁に使用され、イベント処理、非同期プログラミング、及び複数の値の処理のためのテクニックである。
    (パブリッシャー:メッセージを作成して送信する送信側のクライアント(プロデューサ)をパブリッシャーという。また、メッセージを受信する側のクライアント(コンシューマーをサブスクライバーという。)
    Angular⑤ – RxJSとオブザーバ

RxJS(Reactive Extensions for JavaScript)
非同期またはコールバックベースのコード(RxJS Docs)の作成を容易にするobservablesを使用したリアクティブプログラミング用にライブラリ。
リアクティブプログラミング

  • 流れてくるデータ(ストリーム)に関連性と操作を宣言的に記述する手法のこと
    • 非同期処理で流れてくるデータを扱うのに効果的
  • ストリームはObservableクラスで扱う。
    Observable
  • Observableはストリームを扱うクラス
    • マウス操作やHTTPリクエストでデータ取得するなど
  • ストリームは川の様なイメージ
    • Observableを使うことで、ユーザがデータを川に流し、流れてくるものを途中で拾って加工したり並び替えたりするという処理を行うことができる。

getHeroes(): Observable<Hero[]> {
    const heroes = of(HEROES);
    return heroes;
  }

下記の様な書き方?
observableクラスのtypeはhero型的な感じ?

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

RxJSのobservableをマスターする。Angularにおける使い方も説明。


参考文献
Angular の DI の仕組み
ディペンデンシ・インジェクション
シングルトン 【singleton】
スケルトン

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0