javascript

2025年新入社員ブログ高田04 [郵便番号から住所自動入力機能]

こんにちは、2024年4月に入社した高田です。
社内研修の一環として、Laravelを使って会員登録フォームを作成しました。その中で、住所登録時に郵便番号から住所を自動入力する機能を実装することになり、対応方法をいくつか調べてみました。
調査の結果、いくつかの実装方法があることがわかりました。今回はその中から以下の2つの方法を選び、それぞれを実際に実装してみたので紹介したいと思います。

1. YubinBango.jsを使用する方法
2. Zipcloud APIを使用する方法

まず、実装の下準備として、郵便番号、市区町村、その他を入力するテキストボックス、および47都道府県を選択するプルダウンメニューを作成しました。以下にそのコードを記載します。

<form action="" method="post">
    <!-- 郵便番号 -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県 -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 住所1 -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- 住所2 -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

<br>

<br>

</select>

<br>

<br>

</form>

ブラウザで表示すると以下のようなフォームが表示されます。

方法1：YubinBango.js

YubinBango.jsは、郵便番号から住所を表示する機能を簡単に実装できるJavaScriptのライブラリです。使用方法は非常にシンプルで、指定されたclass属性をHTML要素に追加するだけで機能します。
実際に実装したコードは以下の通りです。

<!-- ライブラリを埋め込む -->
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

<!-- フォームに class="h-adr" をセット -->
<form action="" method="post" class="h-adr">
    <!-- 国名のspanタグに class="p-country-name" をセット -->
    <span class="p-country-name" style="display:none;">Japan</span>

    <!-- 郵便番号のinputタグに class="p-postal-code" をセット -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" class="p-postal-code" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県のselectタグに class="p-region-id" をセット -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id" class="p-region-id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 市区町村のinputタグに class="p-locality" をセット -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" class="p-locality" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- その他の住所のinputタグに class="p-street-address" をセット -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" class="p-street-address" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

<span class="p-country-name" style="display:none;">Japan</span>

<br>

<br>

</select>

<br>

<br>

</form>

ライブラリを埋め込み、class属性を指定する事で実装することができました。
実際にブラウザで確認すると以下のように、郵便番号（例：1080073）を入力した段階で郵便番号以降の項目（都道府県、市区町村、その他）が自動入力されます。

方法2：Zipcloud API

Zipcloudは、日本郵便が提供する郵便番号検索APIです。入力された郵便番号に基づいて対応する住所情報（都道府県、市区町村、町域など）を取得するためのサービスです。無料で利用可能で、JSONP形式で住所データを取得できます。

以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search

ブラウザにはこのように表示されます。

続いて以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060

先ほどの画面とは異なり、ブラウザには住所が表示されています。

「https://zipcloud.ibsnet.co.jp/api/search」は、APIにリクエストを送信するための特定のURLであり、エンドポイントと呼びます。クライアントは、エンドポイントに対してリクエストを送信します。リクエストはインターネットを通じて送られ、APIサーバーに届きます。リクエストを受け取ったAPIサーバーは、内容を解析し、必要なデータをデータベースから取得します。
APIサーバーは、取得したデータを整理し、JSON形式などでレスポンスを作成します。作成したレスポンスはクライアントに送られます。
クライアントは受け取ったデータを解析し、画面に表示します。

今回のように、エンドポイントに「?zipcode=7830060」というクエリパラメータ（リクエストに含まれる追加情報）を付け加えてリクエストを送信すると、郵便番号「7830060」に対応する住所データを取得できます。

Zipcloud APIを使用して、郵便番号から住所自動入力機能を作成すると以下のようなコードになります。

<!-- jQueryライブラリを読み込み -->
<script src="{{ asset('assets/js/jQuery/jquery-3.7.1.min.js') }}"></script>

<script>
    $(function () {
        $('#postcode').on('input', function () {
            const zip = $(this).val().trim();
            // 郵便番号が7桁のときにのみ実行
            if (zip.length === 7) {
                // Zipcloud API取得
                $.getJSON('https://zipcloud.ibsnet.co.jp/api/search?callback=?', { zipcode: zip })
                    .done(function (data) {
                        // 中身が空でなければその値を住所欄に反映
                        if (data.results) {
                            const result = data.results[0];
                            const prefecture = result.address1; // 都道府県
                            const city = result.address2; // 市区町村
                            const area = result.address3; // その他

                            $('#prefecture_id option').each(function () {
                                if ($(this).text().trim() === prefecture.trim()) {
                                    $(this).prop('selected', true);
                                    return false; // ループ終了
                                }
                            });

                            $('#address1').val(city); // 市区町村
                            $('#address2').val(area); // その他
                        } else {
                            // 該当する住所がない場合、入力フィールドをクリア
                            $('#prefecture_id').val('');
                            $('#address1').val('');
                            $('#address2').val('');
                        }
                    })
            }
        });
    });
</script>

<form action="" method="post">
    <!-- 郵便番号 -->
    <label for="postcode">郵便番号（必須）</label>
    <br>
    <input type="text" id="postcode" name="postcode" placeholder="ハイフンなし" value="">
    <br><br>

    <!-- 都道府県 -->
    <label for="prefecture_id">都道府県（必須）</label>
    <br>
    <select id="prefecture_id" name="prefecture_id">
        <option value="">-</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <br><br>

    <!-- 住所1 -->
    <label for="address1">住所1（必須）</label>
    <br>
    <input type="text" id="address1" name="address1" placeholder="市区町村" value="">
    <br><br>

    <!-- 住所2 -->
    <label for="address2">住所2（必須）</label>
    <br>
    <input type="text" id="address2" name="address2" placeholder="その他" value="">
    <br><br>
</form>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

$(function () {

$('#postcode').on('input', function () {

const zip = $(this).val().trim();

// 郵便番号が7桁のときにのみ実行

if (zip.length === 7) {

// Zipcloud API取得

$.getJSON('https://zipcloud.ibsnet.co.jp/api/search?callback=?', { zipcode: zip })

.done(function (data) {

// 中身が空でなければその値を住所欄に反映

if (data.results) {

const result = data.results[0];

const prefecture = result.address1; // 都道府県

const city = result.address2; // 市区町村

const area = result.address3; // その他

$('#prefecture_id option').each(function () {

if ($(this).text().trim() === prefecture.trim()) {

$(this).prop('selected', true);

return false; // ループ終了

}

});

$('#address1').val(city); // 市区町村

$('#address2').val(area); // その他

} else {

// 該当する住所がない場合、入力フィールドをクリア

$('#prefecture_id').val('');

$('#address1').val('');

$('#address2').val('');

}

})

}

});

</script>

<br>

<br>

</select>

<br>

<br>

</form>

実装の流れは以下の4ステップで行われています。

1. 郵便番号の取得
ユーザーが郵便番号を入力すると、その値をjQueryで取得します。取得した郵便番号が7桁の時に次の処理が実行されます。

2. APIへのリクエスト
入力された郵便番号を基に、Zipcloud APIへリクエストを送信します。APIは指定した郵便番号に対応する住所データを返します。

3. レスポンスデータの解析
APIから返ってきたJSON形式のデータを解析し、都道府県、市区町村、その他の情報を取得します。

4. フォームへの値の反映
取得した住所データを、都道府県のプルダウンメニューや市区町村・その他の入力フィールドに設定します。

ZipCloud APIによる住所自動入力機能は、jQueryの基本的な構文の知識があれば実装可能です。

参考
郵便番号検索API – zipcloud
新卒エンジニアがWebAPIを超わかりやすく解説します #初心者 – Qiita
郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法 | 大阪のシステム開発なら株式会社ウィズテクノロジー
 【jQuery】郵便番号検索APIを使って住所を自動取得する（zipcloud） | eguweb(エグウェブ)
【Javascript】郵便番号から住所を自動入力する方法 #JavaScript – Qiita
【初心者向け】郵便番号で住所検索をする外部APIを叩く #JavaScript – Qiita
実践jQuery講座 Ajaxの実装方法 | Inoma Create

まとめ

2つの方法を実装しましたが、YubinBango.jsはとても実装が簡単でプログラミング初心者におすすめできます。Zipcloud APIはjQueryの知識が必須のため、jQueryの基本的な構造や書き方に慣れてから使う方がよいかもしれません。今後もAPIやライブラリをうまく使えるようにjQueryやAPIの仕組みなどしっかりと学んでいきたいと思います。

VeeValidateでデフォルト値検査を外す話

福岡開発センターの野田です。
年度末ということで忙しい日々を過ごしています。

弊社では、Vuejs/Nuxtjsを使った開発を行っています。フロントでの値検査を行う場面も増えてきたと思います。ある案件でフロントでの値検査にVeeValidateを利用していたのですが、カスタマイズした検査が有効にならず何でだろうと調べてみました。有効にならなかったのは、Inferred Rules というものが有効になっていてためであることが分かりました。

Inferred Rules

https://vee-validate.logaretm.com/v2/guide/inferred-rules.html#example

この Inferred Rules ですが、例えば type=”email” に対して VeeValidate をかけると何もしなくても email のバリデーションルールが適用されるというものになります。

対象となるinput属性と値は以下になります（上記サイトより抜粋）。

Attribute

value

Rule

type

“email”

email

type

“number”

decimal

decimal

type

“date”

date_format:YYYY-MM-DD

1	date_format:YYYY-MM-DD

type

“datetime-local”

date_format: YYYY-MM-DDThh:mm

1	date_format: YYYY-MM-DDThh:mm

type

“time”

date_format:hh:mm

1	date_format:hh:mm

date_format:hh:mm:ss

1	date_format:hh:mm:ss

depending on the step value

type

“week”

date_format:YYYY-Www

1	date_format:YYYY-Www

type

“month

date_format:YYYY-MM

1	date_format:YYYY-MM

min

val

min_value:val

1	min_value:val

max

val

max_value:val

1	max_value:val

pattern

rgx

regex: rgx

1	regex: rgx

required

none

required

required

maxlength

“val”

max: val

max: val

minlength

“val”

min: val

min: val

これを無効化する方法は以下のコードとなります。useConstraintAttrs: false のオプションを指定することでInferred Rulesの設定を無効化することができます。Inferred Rulesはカスタムルールより優先度が高いため、結構扱いが難しいな、と感じています。どこでも使われるようなもののためそういう実装になっているのでしょうけど、メッセージをカスタマイズしたいときは足かせになりました。

[crayon-67b7813132a83612260371  ]import { configure, ValidationObserver, ValidationProvider } from 'vee-validate'
// type=emailなど推定バリデータが使われるものを無効化。
configure({ useConstraintAttrs: false })

[crayon-67b7813132a83612260371 ]import { configure, ValidationObserver, ValidationProvider } from 'vee-validate'

// type=emailなど推定バリデータが使われるものを無効化。

configure({ useConstraintAttrs: false })

[/crayon]

こういう設定調整ができるのは、しっかりポイントが抑えられていて人気のライブラリであることを感じます。また何かTipsが出てきたときは紹介したいと思います。

nuxt.js環境を構築する

福岡拠点の野田です。

サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。

最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。

LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615

client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。

[crayon-67b7813132d01442476308  ]install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

[crayon-67b7813132d01442476308 ]install -d client/pages/.gitkeep

install -d client/assets/.gitkeep

install -d client/components/.gitkeep

install -d client/layouts/.gitkeep

install -d client/middleware/.gitkeep

install -d client/plugins/.gitkeep

install -d client/static/.gitkeep

install -d client/store/.gitkeep

[/crayon]

nuxtは起動フォルダ配下に.nuxtという一時ファイルを作成します。このため設定ファイルをclient以下に配置して、このフォルダを起動フォルダとします。

設定ファイル (nuxt.config.js)

[crayon-67b7813132d04352590007  ]module.exports = {
    srcDir: '../client/',

    server: {
        port: 5000, // デフォルト: 3000
        host: 'localhost', // デフォルト: localhost,
        timing: false
    },
    css: [
        'bootstrap/dist/css/bootstrap.css',
        'bootstrap-vue/dist/bootstrap-vue.css',
    ],
    plugins: [
        '@/plugins/bootstrap',
    ]
}

[crayon-67b7813132d04352590007 ]module.exports = {

srcDir: '../client/',

server: {

port: 5000, // デフォルト: 3000

host: 'localhost', // デフォルト: localhost,

timing: false

css: [

'bootstrap/dist/css/bootstrap.css',

'bootstrap-vue/dist/bootstrap-vue.css',

plugins: [

'@/plugins/bootstrap',

]

}

[/crayon]

起動シェル(再起動シェル)は以下のような感じで作ります。

[crayon-67b7813132d08919665832  ]#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
while [ $nuxt_count -gt 0 ]
do
    ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9
    sleep 1
    export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

[crayon-67b7813132d08919665832 ]#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`

while [ $nuxt_count -gt 0 ]

ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9

sleep 1

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`

done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

[/crayon]

ちなみにecho “” | はjenkinsから呼び出したとき、標準入力を要求されたので、それ対策で入れています。

このシェルを実行することでnuxt.jsサーバーが起動します。

nuxtは素のvueでやるよりも以下の点で優れていると思います。

自動でルーティングしてくれる。
レイアウト機構を持っている。
API連携の仕組みも実装しやすい形で持っている。

VueやReactやAngularは、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。

[JavaScript]D3.jsでグラフを書こう！

福岡拠点の野田です。今日は、データ解析に欠かせない可視化を支援するツールとして、D3.jsの使い方を紹介します。

可視化をするとき、棒グラフだったり、線グラフを出力することが多いと思います。Python、Rなどを使った画像出力ももちろん簡単に実現できるのですが、凝った複雑なグラフを出そうとするとき、D3.jsで描くSVGの柔軟性には目を見張るところがあります。SVGは、Scalable Vector Graphicsの略でベクター情報のイメージデータになります。そのため、拡大しても非常に高精細に表示することができます。また、CSSやJavasciptでイベント制御も可能なため、凝った動きのあるグラフを実現できます。

D3.jsの最新版は、ver5.1.0(2018/05/02時点)になります。ver3.xからver4.xにアップデートした際に大きく変更があったため、今回は個人的にもなじみのあるver3.xでの使い方を紹介します。

使うためには、HTMLヘッダーに以下を組み込むだけ。とても簡単です。

ver3.x

<script src="https://d3js.org/d3.v3.min.js"></script>

1	<script src="https://d3js.org/d3.v3.min.js"></script>

ちなみにver5.xでは以下のような感じです。

<script src="https://d3js.org/d3.v5.min.js"></script>

1	<script src="https://d3js.org/d3.v5.min.js"></script>

ここからは、ver3.xでの記述例になります。
以下のような流れでグラフを表示します。

1) 領域確保

グラフを表示する領域を確保します。軸に値を表示するため、マージンを確保します。

    var margin = {top: 30, right: 100, bottom: 40, left: 50};
    // 領域確保
    var svg = d3.select("body").append("svg")
        .attr("width", (width + margin.left + margin.right))
        .attr("height", (height + margin.top + margin.bottom))
        .append("g")
        .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

var margin = {top: 30, right: 100, bottom: 40, left: 50};

// 領域確保

var svg = d3.select("body").append("svg")

.attr("width", (width + margin.left + margin.right))

.attr("height", (height + margin.top + margin.bottom))

.append("g")

.attr("transform",

"translate(" + margin.left + "," + margin.top + ")");

2) スケール設定

値の描画変換を行うスケール(基準となる物差し)を指定します。のちにデータ描画でも使います。

    // スケール設定
    var xScale = d3.time.scale() //時系列の場合、d3.time.scale()を使用
        .domain([new Date(minX), new Date(maxX)])
        .range([0, width]);

    var yScale = d3.scale.linear()
        .domain([minY, maxY])
        .range([height, 0]);

// スケール設定

var xScale = d3.time.scale() //時系列の場合、d3.time.scale()を使用

.domain([new Date(minX), new Date(maxX)])

.range([0, width]);

var yScale = d3.scale.linear()

.domain([minY, maxY])

.range([height, 0]);

3) 軸の描画

スケールをもとに軸を描画します。

    // X軸設定
    var xAxis = d3.svg.axis()
        .ticks(24) // 区切りの数
        .scale(xScale) // X-スケール
        .orient("bottom") // 軸の表示位置
        .tickSize(6, -height) // 区切り線のサイズ
        .tickFormat(function(d,i){ // 区切りの値
             // １年以内の場合
             // var fmtFunc = d3.time.format("%Y/%m");
             // １か月以内の場合
             var fmtFunc = d3.time.format("%m/%d");
             // １日以内の場合
             // var fmtFunc = d3.time.format("%H:%M");
             return fmtFunc(d);
        });

    // X軸を描画。
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("y", 30)
        .attr("x", width + 10);

    // Y軸設定
    var yAxis = d3.svg.axis()
        .ticks(16) // 区切りの数
        .scale(yScale) // Y-スケール
        .orient("left") // 表示位置
        .tickSize(6, -width); // 区切り線のサイズ

    // y軸を描画。
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("y", -10)
        .attr("x", -10)
        .style("text-anchor", "end")
//        .text("Y軸タイトル")
        ;

// X軸設定

var xAxis = d3.svg.axis()

.ticks(24) // 区切りの数

.scale(xScale) // X-スケール

.orient("bottom") // 軸の表示位置

.tickSize(6, -height) // 区切り線のサイズ

.tickFormat(function(d,i){ // 区切りの値

// １年以内の場合

// var fmtFunc = d3.time.format("%Y/%m");

// １か月以内の場合

var fmtFunc = d3.time.format("%m/%d");

// １日以内の場合

// var fmtFunc = d3.time.format("%H:%M");

return fmtFunc(d);

});

// X軸を描画。

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis)

.append("text")

.attr("y", 30)

.attr("x", width + 10);

// Y軸設定

var yAxis = d3.svg.axis()

.ticks(16) // 区切りの数

.scale(yScale) // Y-スケール

.orient("left") // 表示位置

.tickSize(6, -width); // 区切り線のサイズ

// y軸を描画。

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("y", -10)

.attr("x", -10)

.style("text-anchor", "end")

// .text("Y軸タイトル")

;

4) 補助線の描画

必須ではないですが、指定することでぐっとクオリティがアップします。

    // ライン関数を定義
    var line = d3.svg.line()
        .x(function(d) {return xScale(new Date(d["x"]));})
        .y(function(d) {return yScale(d["y"]);});

    // X軸の基準線を作成
    var baseLine = [
        [{x: minX, y:0},{x: maxX, y:0}],
    ];

    for (xi = 0; xi < baseLine.length; xi++) {
        var baseRecord = baseLine[xi];
        svg.append('path')
            .attr({
                'd': line(baseRecord),
                'stroke': '#999',
                'stroke-width': 1,
            });
    }

    // Y軸のtickからX軸に平行な区切り線を描画
    var diff = (maxY - minY) / (svg.selectAll("g.y g.tick")[0].length - 1);
    for (yi = minY + diff; yi < maxY; yi = yi + diff) {
        var guideRecord = [
            {x: minX, y: yi},
            {x: maxX, y: yi}
        ];
        svg.append('path')
            .attr({
                'd': line(guideRecord),
                'stroke': '#aaa',
                'stroke-width': 0.2,
            });
     }

// ライン関数を定義

var line = d3.svg.line()

.x(function(d) {return xScale(new Date(d["x"]));})

.y(function(d) {return yScale(d["y"]);});

// X軸の基準線を作成

var baseLine = [

[{x: minX, y:0},{x: maxX, y:0}],

];

for (xi = 0; xi < baseLine.length; xi++) {

var baseRecord = baseLine[xi];

svg.append('path')

.attr({

'd': line(baseRecord),

'stroke': '#999',

'stroke-width': 1,

});

}

// Y軸のtickからX軸に平行な区切り線を描画

var diff = (maxY - minY) / (svg.selectAll("g.y g.tick")[0].length - 1);

for (yi = minY + diff; yi < maxY; yi = yi + diff) {

var guideRecord = [

{x: minX, y: yi},

{x: maxX, y: yi}

];

svg.append('path')

.attr({

'd': line(guideRecord),

'stroke': '#aaa',

'stroke-width': 0.2,

});

}

5) データ値の描画
線グラフだったり、点グラフだったり、棒グラフなどデータを描画します。今回は、線グラフを扱います。

    d3.csv(csvUrl, function(data){
		// 線を描画
        var trackWidth = 0.5;
        var strokeColor = 'none';
        var strokeWidth = 1;
        var color = '#666';

        var line = d3.svg.line()
            .x(function(d) { return xScale(new Date(d[targetDate])); })
            .y(function(d) { return yScale(d[target]); })
            .defined(function(d) { return d[target]!=null; })
            .interpolate("linear"); // 線の形

        svg.append("path")
            .attr("d",line(data))
            .attr("fill", strokeColor)
            .attr("stroke", color)
            .attr("stroke-width", strokeWidth);
	});

d3.csv(csvUrl, function(data){

// 線を描画

var trackWidth = 0.5;

var strokeColor = 'none';

var strokeWidth = 1;

var color = '#666';

var line = d3.svg.line()

.x(function(d) { return xScale(new Date(d[targetDate])); })

.y(function(d) { return yScale(d[target]); })

.defined(function(d) { return d[target]!=null; })

.interpolate("linear"); // 線の形

svg.append("path")

.attr("d",line(data))

.attr("fill", strokeColor)

.attr("stroke", color)

.attr("stroke-width", strokeWidth);

});

これでCSVを読み込むと以下のようなグラフを表示することができるようになります。

SVGは、HTMLと同じくXMLで記述されるDOM(文書オブジェクトモデル)の1種です。イベント処理も差し込むことができるため、HTMLと同様な感覚で動的処理を扱えるのは強みと思います。D3.js自体、jQueryなどと同様、DOM操作するための言語とも言えます。慣れが若干必要ですが、凝ったグラフの描けるは大きな魅力です。

これを機会にぜひ触れてみてください。

2025年2月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28