Underscore.js の template と each を使って JSON から select タグを生成する

公開日: : JavaScript , , ,

Underscore.js を使って、都道府県名を定義してある JSON から select タグを生成してみました。

以前から Underscore.js の存在は知っていたのですが、食わず嫌いでスルーしてました。
「もっと早く使っていれば。。。」と激しく後悔しています。

icatch-template_mini

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 メソッドを使いました。

コードを見れば何をやっているかは想像付くと思いますが、次のことをやっています。

  1. select タグを取得
  2. 都道府県 JSON のオブジェクトを1つずつ読み込み
  3. option タグのテンプレートを生成し
  4. テンプレートと「都道府県コード」と「都道府県名」をマージして option タグを生成し
  5. 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 に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-darts_1543970905_mini-thumbnail

GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

Googleアドセンス用(PC)

Comment

  1. […] Underscore.js の template と each を使って JSON から select タグを生成する Underscore.js を使って、都道府県名を定義してある JSON から select タグを生成してみました。 以前から Underscore.js の存在 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 3 = 七

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑