Allied ArchitectsAllied ArchitectsEngineer Blog

AngularJSでサンプルアプリを作ってみた

2013/12/4 AngularJS

こんにちは。

膝が痛み出し、冬の足音が聞こえてきました。
正月は実家である北海道に帰省する予定ですが、
あの寒さにやられてしまうのではないかと内心穏やかではありません。

どうも、高橋です。

さて今回はAngularJSを使ってサンプルアプリを作ってみたので
それを記事にしたいと思います。

AngularJSとは

AngularJSとはGoogleが主体となって開発されているJavaScriptフレームワークです。
Knockout.jsとかBackbone.jsとかと比較されるやつです。
Knockout.jsについては当ブログでもいくつか触れている記事がありますので参考にしてください。

今回作るサンプルアプリの要件

  • メモを追加/編集/削除できる
  • メモには「内容」、「作成日付」を持つ
  • メモを一覧表示できる
  • メモを内容で検索できる
  • メモを作成日付の昇順、降順でソートできる

※今回はサーバサイドで保存はしません

画面はこんな感じです。

追加フォームは普段は隠れていて、追加ボタンを押されたときや編集ボタンを押されたときに表示される想定です。

素のHTMLはこちら

STEP1 ng-repeatで一覧表示

まずはメモの一覧がHTMLベタ打ちのところをng-repeatというものを使って配列をデータソースとして書き換えてみます。

ng-repeatはこんな感じでつかいます。


さらにng-bindでタグのテキストコンテンツを置換することができます。
ng-bindは{{式}}でも書き換えることができます

サンプルソースは以下のようになります。

①AngularJSを使うルートのタグに設置します。
②http://angularjs.org/ からAngularJSをダウンロードして<script>タグで読み込みます。
③④MVCのCに当たるng-controllerディレクティブを指定します。今回はあまり深く考えず”
$scope.memoListを定義しておくとng-controller配下では[memoList]でアクセスできる”程度に抑えてもらえれば大丈夫です。
⑤ng-repeatディレクティブで③でセットした配列を繰り返し処理します。

動作するサンプルはこちら

STEP2 ng-showでフォームの表示/非表示を切り替え

次にng-showを使って要素の表示/非表示の切り替えを実装してみます。
ng-showはng-show=”式”の式がtrueならば表示、falseならば非表示というように動作します。
このような感じで使えます。

ソースは以下のようになります。

①④ 今回はshowFormという変数を用意しその値によってフォームが表示・非表示されるようにしました。
②③ 追加ボタンをクリックされたときの挙動を定義しています。追加ボタンを押されたらshowFormをtrueにセットするようにしています。
⑤ キャンセルボタンはng-clickの中に直接showFormをfalseにする処理を記述しています。

動作するサンプルはこちら
「追加」ボタンをクリックするとフォームが表示され、「キャンセル」をクリックするとフォームが閉じるようになっています。

STEP3 ng-modelでフォームの内容を取得し、追加機能を実装

次にフォームからデータソースである配列に追加する動きを実装してみます。
ng-modelは<input>や<textarea>などの入力系のタグにセットするとその入力値をJavaScriptで扱えるようになります。
簡単に言うとng-bindの逆というイメージです。

のように記述するとテキストボックスに入力した値がリアルタイムに<span>に出力されます。

実装はこんな感じです。

①③ ng-modelでinputtingMemo.contentを指定します。$scope.inputtingMemo = nullの宣言はなくても動きますが、あった方がプログラムの見通しがよくなると思います。
② フォームで入力した値をデータソースに追加しています。ディープコピーの関数angular.copy()が用意されているのでこちらを使うと便利です。

動作するサンプルはこちら
「追加」ボタンで表示されたフォームからメモが追加可能になっています。

STEP4 フォームのバリデート

簡易的にバリデーションを実装してみます。
<input>などにng-maxlength=”n”と設定すると
フォーム名.インプット名.$error.maxlength
にバリデートされた結果が得られます。

ng-showと組み合わせるとこのように簡易的にバリデーションが実装できます。

実装したソースはこちら

① テキストエリアにrequiredとng-maxlengthを指定します。
②③ ng-showを使ってrequiredとmaxlengthがそれぞれエラーが存在するときにエラーメッセージを表示するようにしています。
④ ng-disabledを使ってフォーム全体がエラーがある場合はボタンをdisabledにしています。

動作するサンプルはこちら
入力フォームに必須チェック、文字長(200文字以内)チェックを入れてエラーがある場合は
エラーメッセージを表示して作成ボタンが押せないようにしています。

STEP5 検索とソート

AngularJSにはフィルターという便利な機能があります。
パイプ繋ぎで絞り込みをかけたり、データを加工したりが簡単にできるようになっています。

以下の例ではテキストボックスに入力された文字をuppercaseフィルターで大文字にして出力しています。

ソースは以下になります。

①④ テキストボックスで入力された文字で絞り込まれるようにfilterフィルターを使ってます。
②③④ ソートを掛けるためさらにパイプでつなぎ<button>をクリックされたときにソートキー、昇降を指定しています。

動作するサンプルはこちら
検索とソートができるようになっています。(ソートはメモを追加しないと動作がわからないと思いますが)

最後に

残りの要件である編集と削除を実装はこちらにサンプルを置いておきます。

今回使った機能はまだまだAngularJSの一部に過ぎません。
URLマッピングやもっとちゃんとしたMVCなどは当然、ユニットテストのためのライブラリも備えています。
英語ではありますがリファレンスがしっかりしているので、情報不足で困ることはなさそうです。

いかがでしたでしょうか?
jQueryを使って書いたりするより、かなりシンプルに書けてJavaScriptもHTMLも可読性・保守性が向上すると感じました。
機会があれば弊社のサービスでも使ってみたいと思います。

今回は以上になりますが、アライドアーキテクツではエンジニアを随時募集しております。
興味があればぜひこちらの採用サイトまで。

tiger
  • tiger
  • Webエンジニア
  • 最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。 このブログを口実に無理矢理新しい技術に触れていきたいと思っています。

RELATION ENTRY

シェルスクリプトだけでMySQLのクエリ結果をメールで通知する

シェルスクリプトだけでMySQLのクエリ...

2014/10/9 Shell

こんにちは。tigerです。 8月のことになりますが僕がPM的な立ち位置で関わっているGreenSnapという新サービスをリリースいたしました。 今回はそのときに作成したシェルスクリプトを晒しちゃいたいと思います。 はじめに WebサービスにつきものなのがKPIですよね。 KPIは...

続きを読む

Facebook発の新言語HackをHeroku上で動かす

Facebook発の新言語HackをHe...

2014/06/17 PHP

こんにちは。tigerです。 最近ではブログのネタが思いつかず、このブログを引退しようかと本気で考えています。 今回は奇跡的に思いついた「Hack × Heroku」をお送りしたいと思います。 Hackとは http://hacklang.org/ 2014年3月に発表されたFac...

続きを読む

tigerの記事一覧へ

ページTOPへ