kintone UIでテーブルを作ってみました（初心者向け）

公開日：2025.12.22

最終更新日：2025.12.22

社内でkintoneアプリを作っていると、
「表形式でデータを入力したい」
「標準テーブル以外の見た目や動きを実現したい」
と思うことがあります。

今回はその練習として、kintone UI Component を使ってテーブルを作ってみたので、
初心者の方向けに手順とサンプルコードをまとめます。

お知らせ①

🌟無料＆登録不要でプラグインのお試しが可能！🌟

kintoneユーザーの皆さん！

エムザスのkintoneプラグインはもう試しましたか？🤔
エムザスでは以下のようなプラグインを開発しています！👇

EMレポ - レコードの内容をPDF / Excelに出力できるプラグイン

EMsheet - kintoneのレコードをExcelのように表示して編集できるプラグイン

EMdocMaker - アプリの関連図や定義書を出力し、アプリの分析ができるプラグイン

EMログ - 標準の監査ログでは取得できないアプリの操作ログを取得できるプラグイン

デモ環境で、ほとんどの機能が今すぐお試しいただけます✨

＼無料 & 登録不要！／

デモ環境で今すぐプラグインを試す！

さらに、お客様のドメインで無料で3ヶ月間、すべての機能を試すこともできます！🎉

＼たった1分で申し込み完了！／

3ヶ月無料でフル機能お試しを申し込む！

それでは、本題に入ります！

この記事の対象

kintoneのJavaScriptカスタマイズを触り始めた方
kintone UI Componentをこれから使ってみたい方
社内向けの簡単なカスタマイズ例を探している方

kintone UI Componentとは？

kintone UI Componentは、kintone向けに用意されたUI部品集です。

例えば、

コンボボックス
テキスト
テーブル

などを、JavaScriptで簡単に画面に配置できます。
ゼロからHTMLやCSSを書く必要がないのが大きなメリットです。

今回やること

テーブルの列に
- UI Text（テキスト入力）
- コンボボックス（Dropdown）
行ごとに入力できるようにする

使用するUIコンポーネント

kintoneUIComponent.Table
kintoneUIComponent.Text
kintoneUIComponent.Dropdown

基本的な考え方（初心者向け）

kintone UIのテーブルでは、
セルの中身を「文字」だけでなく「UIコンポーネント」にできます。

つまり、

各行ごとに Text や Dropdown を作成
それを table の data に入れる

という形になります。

サンプルコード

① イベント設定

kintone.events.on('app.record.detail.show', function () {

kintone.events.on('app.record.detail.show', function () {

② 列定義

var columns = [
  {
    header: '商品名',
    field: 'name'
  },
  {
    header: 'カテゴリ',
    field: 'category'
  }
];

var columns = [
  {
    header: '商品名',
    field: 'name'
  },
  {
    header: 'カテゴリ',
    field: 'category'
  }
];

③ 行データにUIを入れる

// テキスト入力
var nameText1 = new kintoneUIComponent.Text({
  value: ''
});

// コンボボックス
var categoryDropdown1 = new kintoneUIComponent.Dropdown({
  items: [
    { label: '果物', value: 'fruit' },
    { label: '野菜', value: 'vegetable' },
    { label: 'その他', value: 'other' }
  ],
  value: 'fruit'
});

// 行データ
var data = [
  {
    name: nameText1,
    category: categoryDropdown1
  }
];

// テキスト入力
var nameText1 = new kintoneUIComponent.Text({
  value: ''
});

// コンボボックス
var categoryDropdown1 = new kintoneUIComponent.Dropdown({
  items: [
    { label: '果物', value: 'fruit' },
    { label: '野菜', value: 'vegetable' },
    { label: 'その他', value: 'other' }
  ],
  value: 'fruit'
});

// 行データ
var data = [
  {
    name: nameText1,
    category: categoryDropdown1
  }
];

ここがポイントです 👇
name や category に 文字列ではなくUIコンポーネントを入れている ところです。

④ テーブルを作成して表示

var table = new kintoneUIComponent.Table({
  columns: columns,
  data: data
});

kintone.app.record
  .getSpaceElement('table_space')
  .appendChild(table.render());
});

var table = new kintoneUIComponent.Table({
  columns: columns,
  data: data
});

kintone.app.record
  .getSpaceElement('table_space')
  .appendChild(table.render());
});

表示イメージ

商品名：テキスト入力欄
カテゴリ：コンボボックス（果物／野菜／その他）

という 入力できるテーブル が表示されます。

標準テーブルよりもUIがスッキリしていて、
「入力補助用の画面」として使いやすそうです。

入力値の取得方法（超基本）

var nameValue = nameText1.getValue();
var categoryValue = categoryDropdown1.getValue();

console.log(nameValue, categoryValue);

var nameValue = nameText1.getValue();
var categoryValue = categoryDropdown1.getValue();

console.log(nameValue, categoryValue);

※ 実際に保存する場合は、
app.record.edit.submit や app.record.create.submit で使います。

使ってみた感想（社内向け）

良かった点

テーブル内でもUI部品が普通に使える
入力ミスを減らせそう
標準テーブルよりカスタマイズしやすい

注意点

行数が多いとUI生成コードが増える
レコード保存処理は自前で実装が必要

まとめ

kintone UI Component を使うことで、
「テーブル × 入力UI」 を簡単に実現できました。

表形式で入力させたい
選択肢を固定したい
社内業務用の簡易入力画面を作りたい

というケースでは、かなり使えそうです。

ブログの一覧ページへ