プログラミング

AngularJSの基本概念

最終更新： 22/04/2025
1分未満

AngularJSは、Googleが開発したオープンソースのフロントエンドフレームワークで、特にシングルページアプリケーション(SPA)の開発に便利です。この記事では、AngularJSの基本的な概念、構造、機能について詳しく説明します。これを理解することで、AngularJSを使用して効果的なウェブアプリケーションを開発できるようになります。

1. AngularJSの基本構造と概念

AngularJSは、主に次の3つの重要な概念から成り立っています。

関連記事

1.1 モデルとビューの分離

AngularJSは、モデル-ビュー-コントローラ(MVC)のアーキテクチャを採用しています。これにより、データ（モデル）とユーザーインターフェース（ビュー）の間に明確な分離ができます。データの状態変更に応じてビューが自動的に更新されるため、開発者は複雑なUI更新を意識せずにコーディングできます。

1.2 双方向データバインディング

AngularJSの最大の特徴の一つが双方向データバインディングです。これにより、モデルとビューが常に同期され、ユーザーの入力やデータの変更が即座にビューに反映されます。逆に、ビューでの変更も即座にモデルに反映されます。これによって、DOMの操作を手動で行う必要がなくなり、コードがシンプルで読みやすくなります。

1.3 ディレクティブ

AngularJSでは、ディレクティブを使用してHTMLを拡張し、動的な動作を実現します。ディレクティブは、HTMLタグや属性に特定の機能を追加するもので、これにより、カスタムコンポーネントや繰り返し処理が可能になります。

1.4 サービス

AngularJSでは、サービスを利用してアプリケーションのビジネスロジックを管理します。サービスは、コントローラとは独立して動作し、再利用可能なコードを提供します。例えば、HTTPリクエストを管理するサービスや、データをローカルストレージに保存するサービスなどがあります。

2. AngularJSの基本的な構造

AngularJSアプリケーションの構造は非常にシンプルで、主に次のようなファイルで構成されます。

  • HTMLファイル: アプリケーションのユーザーインターフェースを定義します。

  • JavaScriptファイル: アプリケーションのロジックや、コントローラ、サービス、ディレクティブなどを定義します。

  • CSSファイル: アプリケーションのスタイルを定義します。

基本的なAngularJSアプリケーションは次のように構成されます。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>AngularJSアプリケーションtitle>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">script>
  <style>
    body { font-family: Arial, sans-serif; }
  style>
head>
<body ng-app="myApp" ng-controller="myCtrl">

  <h1>{{ message }}h1>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.message = "こんにちは、AngularJS!";
    });
  script>

body>
html>

3. ディレクティブとバインディング

AngularJSでは、HTML要素に特別な属性（ディレクティブ）を追加することで、動的な動作を実現します。例えば、ng-modelディレクティブはフォーム要素に双方向データバインディングを提供します。次の例を見てみましょう。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ng-modelの例title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">script>
head>
<body ng-app="myApp" ng-controller="myCtrl">

  <input type="text" ng-model="name">
  <p>こんにちは、{{ name }}!p>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.name = "";
    });
  script>

body>
html>

この例では、ユーザーが入力フィールドに名前を入力すると、ng-modelによってnameモデルが更新され、その内容が即座に表示されます。

4. コントローラとスコープ

AngularJSのコントローラは、アプリケーションのロジックを管理するために使用されます。コントローラは、$scopeオブジェクトを使ってビューとデータを繋げます。$scopeはコントローラとビューの間でデータを共有する役割を果たします。

javascript
app.controller('myCtrl', function($scope) {
  $scope.message = "こんにちは、AngularJS!";
});

このコードでは、$scope.messageをビューで参照して表示しています。ビューは{{ message }}という式を使って、このデータを表示します。

5. サービスとファクトリ

AngularJSには、アプリケーションの再利用可能なロジックをまとめるためのサービスとファクトリがあります。これらは、データの取得やビジネスロジックの管理に使用されます。サービスは、シングルトンパターンでインスタンス化され、どこでもアクセスできます。

例えば、HTTPリクエストを送信するサービスは次のように作成できます。

javascript
app.factory('DataService', function($http) {
  return {
    getData: function() {
      return $http.get('https://api.example.com/data');
    }
  };
});

このサービスは、$httpサービスを使ってデータを取得し、その結果を返します。このサービスは、コントローラや他のサービスから呼び出すことができます。

6. モジュール

AngularJSのアプリケーションは、モジュールとして構成されます。モジュールは、コントローラ、サービス、ディレクティブ、フィルタなどの構成要素をまとめるための単位です。アプリケーションには必ず1つ以上のモジュールが必要です。

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

ここでは、myAppという名前のモジュールを作成し、空の配列を渡しています。この配列には、依存関係を指定することもできます。

7. まとめ

AngularJSは、シングルページアプリケーションを効率的に構築するための強力なツールです。双方向データバインディング、ディレクティブ、サービスなどの特徴を利用することで、開発者は簡潔でメンテナブルなコードを書くことができます。基本的な構造と機能を理解することで、AngularJSを効果的に活用できるようになります。

AngularJSは現在ではAngular（2.x以降）に進化していますが、その基本的な概念は今も多くの現代的なフレームワークに影響を与えています。

最終更新： 22/04/2025
1分未満
Back to top button