kintone UI Component v1を使って動的ドロップダウンを作成しよう！

固定リンクがコピーされました

更新日：2026年02月19日

著者名：江田篤史

はじめに

固定リンクがコピーされました

kintone UI Componentは、kintoneライクなUIを簡単に作成できるライブラリでフォーム部品を自作する場合などには非常に便利です。

アンケートなどで47都道府県から自身が該当する都道府県を直接選ぶのはたいへんですよね。
今回は、選択した「地方」に合わせて、都道府県の選択肢を動的に変更するドロップダウンを作成してみました。

動作イメージ

固定リンクがコピーされました

kintone UI Componentアップデートにより、デモと動きは異なる可能性があります。

カスタマイズを適用するアプリ

固定リンクがコピーされました

フィールド名	フィールドタイプ	フィールドコード（or要素ID）	備考
地方	ドロップダウン	地方	次の項目を設定します。北海道地方東北地方関東地方中部地方近畿地方中国地方四国地方九州地方
都道府県	文字列（1行）	都道府県
-	スペース	space

カスタマイズを適用する

固定リンクがコピーされました

次のファイルをアプリに適用します。

sample.js
後述のサンプルコードです。
kuc.min.js
kintone UI componentライブラリです。

kuc.min.jsをsample.jsの上に追加してください。
kintone内部では、上から下へJSファイルが読み込まれます。
順番が逆になると、sample.jsが実行される時点で、kuc.min.jsが読み込まれていないため、エラーになります。
適用方法は次のヘルプページを参考にしてください。
JavaScriptやCSSでアプリをカスタマイズする

kuc.min.jsの入手方法は以下のとおりです。
この記事では、kintone UI Component v1.22.0を使用しています。

https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.22.0 を開きます。
「Assets」からkintone-ui-component-1.22.0.tgzをダウンロードします。
ダウンロードしたtgzファイルを解凍します。
解凍後のフォルダーpackage > umd以下のkuc.min.jsを利用します。

サンプルコード

固定リンクがコピーされました

次はサンプルプログラムになります。
sample.jsとして保存してください。

 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78


/*
 * create dropdown using kintone UI Component
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(() => {
  'use strict';

  const prefectures = {
    北海道地方: ['北海道'],
    東北地方: ['青森', '岩手', '宮城', '秋田', '山形', '福島'],
    関東地方: ['東京', '茨城', '栃木', '群馬', '埼玉', '千葉', '神奈川'],
    中部地方: ['新潟', '富山', '石川', '福井', '山梨', '長野', '岐阜', '静岡', '愛知'],
    近畿地方: ['京都', '大阪', '三重', '滋賀', '兵庫', '奈良', '和歌山'],
    中国地方: ['鳥取', '島根', '岡山', '広島', '山口'],
    四国地方: ['徳島', '香川', '愛媛', '高知'],
    九州地方: ['福岡', '佐賀', '長崎', '大分', '熊本', '宮崎', '鹿児島', '沖縄']
  };

  const setDropdownItems = (event, dropdown) => {
    const regionValue = event.record.地方.value;
    if (!regionValue) return;
    const items = [{label: '-----', value: ''}];
    prefectures[regionValue].forEach((prefecture) => {
      items.push(
        {
          label: prefecture,
          value: prefecture
        }
      );
    });

    dropdown.items = items;
  };

  let dropdown;

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const prefectureValue = event.record.都道府県.value;
    // kuc.min.js を複数バージョン同時に適用している場合、使用するバージョンを指定してください。
    // 1つのバージョンのみ使用している場合、または最後に読み込まれるバージョンで問題ない場合は、次の行を削除してください。
    const Kuc = Kucs['1.22.0'];

    dropdown = new Kuc.Dropdown({
      label: '都道府県',
      items: []
    });

    kintone.app.record.setFieldShown('都道府県', false);
    setDropdownItems(event, dropdown);
    dropdown.value = prefectureValue || '';
    kintone.app.record.getSpaceElement('space').appendChild(dropdown);

    dropdown.addEventListener('change', (e) => {
      const record = kintone.app.record.get();
      record.record.都道府県.value = e.detail.value;
      kintone.app.record.set(record);
    });
  });

  kintone.events.on(['app.record.create.change.地方', 'app.record.edit.change.地方'], (event) => {
    setDropdownItems(event, dropdown);
    dropdown.value = '';
    event.record.都道府県.value = '';
    return event;
  });

  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
    const prefectureValue = event.record.都道府県.value;
    if (!prefectureValue) {
      event.error = '都道府県を選択してください';
    }
    return event;
  });
})();

サンプルコードの解説

固定リンクがコピーされました

kintone UI Component を用いた、動的ドロップダウン作成の流れを解説します。

ドロップダウンを作成
ドロップダウンの値をレコードとして保存
選択肢を可変にする

ドロップダウンのプロパティに関する解説は kintone UI Componentドキュメントを参考してください。
ここでは「都道府県」の選択肢を関東地方の都県に絞って解説していきます。

固定リンクがコピーされました

用意したスペースフィールド内に、ドロップダウンを作成します。

41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
  const prefectureValue = event.record.都道府県.value;
  // kuc.min.js を複数バージョン同時に適用している場合、使用するバージョンを指定してください。
  // 1つのバージョンのみ使用している場合、または最後に読み込まれるバージョンで問題ない場合は、次の行を削除してください。
  const Kuc = Kucs['1.22.0'];

  dropdown = new Kuc.Dropdown({
    label: '都道府県',
    items: []
  });

  kintone.app.record.setFieldShown('都道府県', false);
  setDropdownItems(event, dropdown);
  dropdown.value = prefectureValue || '';
  kintone.app.record.getSpaceElement('space').appendChild(dropdown);
});

new Kucs['1.22.0']: バージョンを指定して、kintone UI Componentのインスタンスを作成します。
Dropdown(): ドロップダウンを作成します。

固定リンクがコピーされました

先ほど作成したドロップダウンの値を「文字列（1行）」フィールドにコピーすることでレコードとして保存します。

コード

57
58
59
60
61


dropdown.addEventListener('change', (e) => {
  const record = kintone.app.record.get();
  record.record.都道府県.value = e.detail.value;
  kintone.app.record.set(record);
});

addEventListener(): ドロップダウンのイベントリスナの追加

固定リンクがコピーされました

選択した「地方」に合わせて、「都道府県」の選択肢を動的に変更します。

コード

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


const setDropdownItems = (event, dropdown) => {
  const regionValue = event.record.地方.value;
  if (!regionValue) return;
  const items = [{label: '-----', value: ''}];
  prefectures[regionValue].forEach((prefecture) => {
    items.push(
      {
        label: prefecture,
        value: prefecture
      }
    );
  });

  dropdown.items = items;
};

64
65
66
67
68
69


kintone.events.on(['app.record.create.change.地方', 'app.record.edit.change.地方'], (event) => {
  setDropdownItems(event, dropdown);
  dropdown.value = '';
  event.record.都道府県.value = '';
  return event;
});

dropdown.items: ドロップダウンの選択肢を設定する。
dropdown.value: ドロップダウンの値を設定する。

おわりに

固定リンクがコピーされました

kintone UI Componentを使用すると、DOM等の知識がなくても容易にkintoneライクなフォーム部品を作成できます。
いろいろとカスタマイズの幅が大幅に広がりますので、ぜひ活用してみてください。

変更履歴

固定リンクがコピーされました

2019年11月25日
kintone UI Component v0.4.3に合わせてサンプルコードおよびデモのスクショを修正しました。
- 「都道府県」の値が選択済みのときの場合でも、「地方」を変更するときに「都道府県」の値を初期化する。
- 「都道府県」が選択されていない状態で保存した場合、エラーを表示する。
2014年2月22日
kintone UI Componentをv0からv1に変更しました。
2025年8月22日
kintone UI Componentのバージョンを1.16.0から1.22.0に変更しました。
2026年2月19日
サンプルコードの解説をサンプルコードの内容に合わせて修正しました。

このTipsは、2026年2月版kintoneで動作を確認しています。

kintone API

入力制御／補助