SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

AngularJSではじめるJavaScriptフレームワーク開発スタイル

ビジネスロジック記述の必須知識、AngularJSの「サービス機能」を理解しよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第4回


  • X ポスト
  • このエントリーをはてなブックマークに追加

HTML上のフォームの扱い

 実際にデータを登録できるサービスの実装が終了したので、入力フォームを完成させます。

 データを入力する場合にはHTMLのFORMを使いますが、AngularJSではFORMに特別な属性などをつけなくともデフォルトでngFormディレクティブが機能します。そのためデフォルトのFORMの動作と異なり、最初は多少戸惑うかもしれませんが、これはシングルページアプリケーションを作成する際には通常よりも便利に機能します。

 シングルページアプリケーションでは、GETやPOSTなどでのリクエストURLでのページの遷移をしてしまっては、内部で管理しているデータが消えてしまいますので都合が悪いです。このために、フォームでのリクエスト処理がデフォルトで無効になっています。また、HTML5にあるデフォルトのフォームの入力要素での入力チェックに対しても、より強化された機能を提供しています。

HTMLフォームの作成

 リスト4は、サンプルアプリケーションでのタスクの追加するためのHTMLの抜粋です。

リスト4:index.htmlの抜粋(タスク追加)
<!--(1)name属性でフォームを識別する -->
<form role="form" name="addItemForm" ng-controller="addController">
    <!--(2)フォームの$valid変数でフォーム全体のチェックが可能 -->
    <div ng-show="!addItemForm.$valid">
        <div class="alert alert-warning" role="alert">必須項目を入力してください</div>
    </div>
    <div class="form-group">
        <label>件名(*)</label>
        <!--(3)requiredなどの属性でinputでの入力をチェックできる。また、ng-modelでデータバインディングする -->
        <input type="text" class="form-control" placeholder="タスク名を入力" required="" ng-model="item.title">
    </div>
    <div class="form-group">
        <label>メモ(*)</label>
        <textarea class="form-control" placeholder="タスク名を入力" ng-model="item.memo"></textarea>
    </div>
    <button type="button" class="btn btn-primary btn-block" ng-click="addItem()">追加</button>
</form>

 フォームはname属性を指定します(1)。

 また(2)のように先ほど指定したname属性での値のオブジェクトが作成され、$validプロパティが存在しますのでフォーム全体の有効性をチェックができます。また、各inputやselect要素にも同様に$validプロパティが存在し、個別の要素毎にも確認ができます。そのチェックは、required属性などを使って入力必須制約をつける事ができます(3)。

 入力制約には他にも文字数があり、要素ごとに指定可能な制約についてはAPIドキュメントで確認ができます。また、各要素のデータをコントローラとのデータバインディングするためには、ng-model属性を使います。

コントローラ側でのフォームへのアクセス

 コントローラ側でフォームにアクセスする際には、変数をあらかじめ用意することなく、form要素のname属性名を利用してアクセスが可能です。リスト5はデータの追加を行うコントローラ側のサンプルコードの抜粋です。

リスト5:controllers.jsの抜粋(addControllerでのフォームデータへのアクセス)
module.controller('addController',function($scope,Items){
    //(1)初期データ(すべて空データとする)
    $scope.item = {};
    $scope.addItem = function(){
        if(!$scope.addItemForm.$valid) { //(2)フォームの$valid変数の利用
            alert('入力エラーです');
            return;
        }
        Items.add($scope.item,function(data){  //(3)$scope.itemにはtitleとmemoプロパティが設定されている
            // : 省略
            $scope.item = {};  //(4)登録後に再度、データをクリア
        });
    }
});

 (1)では、テンプレート側とng-model属性にてバインディングされた要素の値をすべてクリアします。(2)のようにHTMLフォームで利用した$valid変数もそのまま利用ができます。また、入力済みの場合には(3)のように自動的にng-modelで指定した変数に値が設定されています。したがって、そのデータをそのまま使って実際に先ほど作成したItemsサービスのaddメソッドを使ってデータを登録することができます。また、成功した後には、再度、(4)のようにデータをクリアします。

最後に

 AngularJSはHTMLのテンプレート機能やデータバインディングの便利さが目立ってしまいますが、DI機能も非常に便利な機能です。

 今回紹介したサービス機能は、DI機能を使って疎結合に保ったままアプリケーションを作ることができます。次回は、この疎結合の特性を使ってデータをサーバで管理するサービスに変更します。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8377 2015/01/23 19:06

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング