Underscore.js の template と each を使って JSON から select タグを生成する
公開日：
:
JavaScript Github, JavaScript, jQuery, Underscore.js
Underscore.js を使って、都道府県名を定義してある JSON から select タグを生成してみました。
以前から Underscore.js の存在は知っていたのですが、食わず嫌いでスルーしてました。
「もっと早く使っていれば。。。」と激しく後悔しています。
photo credit: hello nekko via photopin cc
目次
1. 使用したライブラリ
使用したライブラリと、そのバージョンは次の通りです。
1-1. jQuery
今回のサンプルに jQuery は必須ではないのですが、この書き方で慣れてしまっているので使いました。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
1-2. Underscore.js
Underscore.js 、かなりいいです。
今やってるプロジェクトでは、JSON を読み込んでタグを生成するって処理が満載なので、そこら辺の処理はすべて Underscore.js を使ってやるつもりです。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
2. ソースコード
以下は、作成したソースコードについてになります。
2-1. ファイル構成
作成したファイルは次の3本です。
- index.html
- js/master_pref.js
- js/script.js
$ ls -R .: index.html js ./js: master_pref.js script.js
2-2. index.html
まずは index.html です。
ここには参照する JavaScript の参照定義と、option タグが設定されていない空の select タグだけが定義されています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf8>
<title></title>
</head>
<body>
都道府県：<select class="prefecture"></select>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script type="text/javascript" src="./js/master_pref.js" charset="utf8"></script>
<script type="text/javascript" src="./js/script.js" charset="utf8"></script>
</body>
</html>
この select タグに都道府県名を設定された option タグを追加します。
2-3. js/master_pref.js
このファイルは都道府県が定義された JSON です。
var pref = [
{"pref_code": 1, "name": "北海道"},
{"pref_code": 2, "name": "青森県"},
{"pref_code": 3, "name": "岩手県"},
{"pref_code": 4, "name": "宮城県"},
{"pref_code": 5, "name": "秋田県"},
{"pref_code": 6, "name": "山形県"},
{"pref_code": 7, "name": "福島県"},
{"pref_code": 8, "name": "茨城県"},
{"pref_code": 9, "name": "栃木県"},
{"pref_code": 10, "name": "群馬県"},
{"pref_code": 11, "name": "埼玉県"},
{"pref_code": 12, "name": "千葉県"},
{"pref_code": 13, "name": "東京都"},
{"pref_code": 14, "name": "神奈川県"},
{"pref_code": 15, "name": "新潟県"},
{"pref_code": 16, "name": "富山県"},
{"pref_code": 17, "name": "石川県"},
{"pref_code": 18, "name": "福井県"},
{"pref_code": 19, "name": "山梨県"},
{"pref_code": 20, "name": "長野県"},
{"pref_code": 21, "name": "岐阜県"},
{"pref_code": 22, "name": "静岡県"},
{"pref_code": 23, "name": "愛知県"},
{"pref_code": 24, "name": "三重県"},
{"pref_code": 25, "name": "滋賀県"},
{"pref_code": 26, "name": "京都府"},
{"pref_code": 27, "name": "大阪府"},
{"pref_code": 28, "name": "兵庫県"},
{"pref_code": 29, "name": "奈良県"},
{"pref_code": 30, "name": "和歌山県"},
{"pref_code": 31, "name": "鳥取県"},
{"pref_code": 32, "name": "島根県"},
{"pref_code": 33, "name": "岡山県"},
{"pref_code": 34, "name": "広島県"},
{"pref_code": 35, "name": "山口県"},
{"pref_code": 36, "name": "徳島県"},
{"pref_code": 37, "name": "香川県"},
{"pref_code": 38, "name": "愛媛県"},
{"pref_code": 39, "name": "高知県"},
{"pref_code": 40, "name": "福岡県"},
{"pref_code": 41, "name": "佐賀県"},
{"pref_code": 42, "name": "長崎県"},
{"pref_code": 43, "name": "熊本県"},
{"pref_code": 44, "name": "大分県"},
{"pref_code": 45, "name": "宮崎県"},
{"pref_code": 46, "name": "鹿児島県"},
{"pref_code": 47, "name": "沖縄県"}
]
“pref_code” が都道府県コード、”name” が都道府県名を表しています。
2-4. js/script.js
このファイルで option タグの生成をしています。
タグの生成には Underscore.js の template メソッドを使いました。
コードを見れば何をやっているかは想像付くと思いますが、次のことをやっています。
- select タグを取得
- 都道府県 JSON のオブジェクトを1つずつ読み込み
- option タグのテンプレートを生成し
- テンプレートと「都道府県コード」と「都道府県名」をマージして option タグを生成し
- select タグに option タグを追加
$(function() {
var pulldown = $('.prefecture');
_.each(pref, function(element) {
var template = _.template('<option value="<%= code %>"><%= name %></option>');
var tag = template({name: element.name, code: element.pref_code});
pulldown.append(tag);
});
});
3. サンプル
このサンプルプログラムは、次の場所に公開してあります。
4. まとめ
食わず嫌いを後悔してます。
同じようなことを jQuery で実装する方法を知っていたので、忙しさを理由にスルーしていたのですが、断然 Underscore.js を使ったほうがすっきり書けていい感じです。
5. プログラムを Github に登録しました
今回の記事で使用したサンプルプログラムを Github に登録しました。
よかったら参考にしてみてください。
6. その他の JavaScript に関する記事
その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください！
- Error オブジェクトの種類と独自例外オブジェクトの作成方法
- JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる
- GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法
- GoogleMapsAPIを使ってMarkerを削除する方法
- GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法
- Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果
- BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました
- TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた
- JavaScript のクラス定義
- Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する
- GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する
- GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました
- GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル
- TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む
- GoogleMap の Marker に InfoWindow を設定するサンプル
- GoogleMap を使って住所から緯度・経度を計算する
- 住所から GoogleMap を表示するサンプル
- Underscore.js の template を使うときは HTML にテンプレートを書こう
- JSON をオブジェクトに変換するときに注意したいこと
- Underscore.js の template を使ってドリルダウンを実装するスニペット
- jQuery を使って表示する画像を setInterval を使って切り替える
- jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる
- jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する
- jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法
- jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット
Googleアドセンス用（PC）
関連記事
-
-
JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる
Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip
-
-
GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル
これまで GoogleMaps API を使って Marker やら InfoWindow を表示す
-
-
TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた
BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の
-
-
jQuery を使って表示する画像を setInterval を使って切り替える
画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと
-
-
Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果
grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし
-
-
GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法
GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方
-
-
jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット
jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー
-
-
住所から GoogleMap を表示するサンプル
ここ直近の2プロジェクトで緯度・経度（もしくは住所）から GoogleMap を表示する要件がありま
-
-
Underscore.js の template を使うときは HTML にテンプレートを書こう
Underscore.js の template メソッドを使った select タグ生成についての
-
-
GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました
ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ