AngularJS スコープ継承解説

AngularJSにおけるスコープのプロトタイプ継承のニュアンスについて

AngularJSでは、スコープはプロトタイプ継承を使用して階層的に関連付けられています。これは、JavaScriptのオブジェクト指向プログラミングにおける継承の概念と似ていますが、いくつか異なるニュアンスがあります。

スコープの階層構造

• 子スコープ
  子スコープは、親スコープからプロトタイプチェーンを通じてプロパティとメソッドを継承します。
• 親スコープ
  AngularJSのスコープは、階層構造を形成します。親スコープは、子スコープに対してプロトタイプチェーンの祖先となります。

プロトタイプチェーンのトラバーサル

• プロトタイプチェーンの検索
  JavaScriptの通常のプロトタイプチェーン検索と同じように、スコープのプロパティがアクセスされると、そのスコープ自身、親スコープ、さらにその親スコープと順に検索されます。
• $parentプロパティ
  AngularJSのスコープには、$parentプロパティがあり、親スコープへの参照を提供します。これにより、プロトタイプチェーンを辿って親スコープのプロパティにアクセスすることができます。

スコープのライフサイクル

• スコープの破棄
  スコープが破棄されると、そのプロトタイプチェーンから切断されます。
• スコープの生成
  新しいスコープが作成されると、その親スコープのプロトタイプチェーンに接続されます。

スコープ継承の特殊性

• $watchCollection
  スコープの配列またはオブジェクトが変更されたときに、$watchCollectionを使用してコールバック関数を呼び出すことができます。これにより、親スコープからのデータの変化を監視し、子スコープの更新をトリガーすることができます。
• $isolateScope
  AngularJSでは、$isolateScopeを使用して、スコープを親スコープから完全に分離することができます。これにより、親スコープからのプロパティ継承を制限し、コンポーネントの独立性を確保することができます。

スコープ継承のベストプラクティス

• $isolateScopeの使用
  コンポーネントの独立性を確保するために必要な場合は、$isolateScopeを使用してください。
• 適切なスコープの選択
  コンポーネントのロジックとデータの関連性を考慮して、適切なスコープを選択してください。
• スコープの汚染を防ぐ
  スコープを汚染しないように、過度に多くのプロパティをスコープに直接追加しないように注意してください。

AngularJSにおけるスコープ継承の例

基本的なスコープ継承

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.parentProperty = 'Parent value';

    $scope.childScope = {};
    $scope.childScope.childProperty = 'Child value';
  });

• プロパティ継承
  子スコープは親スコープからparentPropertyを継承します。
• 子スコープ
  $scope.childScopeは子スコープです。
• 親スコープ
  $scopeは親スコープです。

$parentプロパティの使用

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.parentProperty = 'Parent value';

    $scope.childScope = {};
    $scope.childScope.childProperty = 'Child value';
    $scope.childScope.accessParentProperty = function() {
      return $scope.$parent.parentProperty;
    };
  });

• 親スコープへのアクセス
  子スコープから$parentプロパティを使用して親スコープのプロパティにアクセスします。

$isolateScopeの使用

angular.module('myApp', [])
  .directive('myDirective', function() {
    return {
      restrict: 'E',
      template: '<div>{{isolatedProperty}}</div>',
      scope: {
        isolatedProperty: '='
      }
    };
  });

• プロパティバインディング
  isolatedPropertyは、ディレクティブのスコープと親スコープの間で双方向にバインドされます。
• $isolateScope
  ディレクティブは$isolateScopeを使用して、親スコープから分離されたスコープを作成します。

$watchCollectionの使用

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.parentArray = ['item1', 'item2'];

    $scope.childScope = {};
    $scope.childScope.watchArray = function() {
      $scope.$watchCollection('parentArray', function(newArray) {
        console.log('Parent array changed:', newArray);
      });
    };
  });

• 配列の監視
  子スコープから$watchCollectionを使用して親スコープの配列を監視し、変更時にコールバック関数を呼び出します。

サービスの使用

• スコープの汚染防止
  サービスを使用することで、スコープに直接プロパティを追加する必要がなくなり、スコープの汚染を防ぐことができます。
• データの共有
  サービスを使用して、複数のコンポーネント間でデータを共有することができます。

angular.module('myApp', [])
  .service('MyService', function() {
    this.sharedData = 'Shared value';
  })
  .controller('MyController', function($scope, MyService) {
    $scope.data = MyService.sharedData;
  });

イベントの発行と購読

• スコープの依存性削減
  イベントの発行と購読を使用することで、コンポーネント間の直接的なスコープ依存性を減らすことができます。
• 非同期通信
  イベントの発行と購読を使用して、コンポーネント間で非同期に通信することができます。

angular.module('myApp', [])
  .controller('ParentController', function($scope, $rootScope) {
    $scope.emitEvent = function() {
      $rootScope.$emit('myEvent', 'Event data');
    };
  })
  .controller('ChildController', function($scope, $rootScope) {
    $scope.$on('myEvent', function(event, data) {
      console.log('Event received:', data);
    });
  });

コンポーネントのネスト

• スコープの分離
  ネストされたコンポーネントは、それぞれ独立したスコープを持つため、スコープの汚染を防ぐことができます。
• スコープの階層化
  コンポーネントをネストすることで、スコープの階層構造を構築することができます。

<div ng-controller="ParentController">
  <div ng-controller="ChildController">
    </div>
</div>

カスタムディレクティブのスコープ

• スコープの分離
  isolateScopeプロパティを使用して、ディレクティブのスコープを親スコープから分離することができます。
• スコープのカスタマイズ
  カスタムディレクティブのスコープをカスタマイズすることで、スコープの継承を制御することができます。

angular.module('myApp', [])
  .directive('myDirective', function() {
    return {
      restrict: 'E',
      template: '<div>{{isolatedProperty}}</div>',
      scope: {
        isolatedProperty: '='
      }
    };
  });