Node.js、TypeScriptを使った開発

kintone では、作成した JavaScript ファイルをアップロードすることで、独自のカスタマイズを行うことができます。

しかし、直接 JavaScript を記述する方法では、外部のライブラリを参照するのに手間がかかったり、実装可能な機能が制限されたりと、開発効率が低下することがあります。

そこで、Node.js と TypeScript を使って開発することで、npm パッケージの利用や型による補完・エラー検出ができ、開発効率が向上します。

このページでは、プロジェクトのひな形を作成するツール create-k2（k2-kintone-sdk）を使い、開発環境を構築する手順を説明します。

必要な環境

Node.js

Node.js は、ブラウザの外で JavaScript を実行できる実行環境です。TypeScript のコンパイルやバンドルなど、開発に使うツールを動かすために必要です。

Node.js のインストール方法については、公式サイトを参照してください。特にこだわりがなければ、LTS（長期サポート）版をおすすめします。

正しくインストールされている場合、以下のコマンドを実行した際にバージョンが表示されます。

node -v && npm -v

mkcert

今回紹介する方法では、JavaScript ファイルを直接アップロードするのではなく、ローカルサーバーのファイルを kintone から参照させる方法でカスタマイズを適用します。

kintone に読み込ませる JavaScript ファイルは HTTPS で配信されている必要があるため、mkcert を利用してローカルサーバー用の SSL 証明書を発行します。

Windows では Chocolatey、macOS では Homebrew を使ってインストールできます。

# Windows
choco install mkcert

# macOS
brew install mkcert

詳細なインストール方法については、各パッケージマネージャーの公式サイトを参照してください。

プロジェクトの作成

必要な環境が整ったら、プロジェクトを作成します。

npm create k2

上記コマンドを実行すると、プロジェクトの作成に必要な情報を入力するように求められます。

プロジェクト名には任意の名前、GitHub リポジトリはデフォルトのままで問題ありません。

－ □ ×

コマンド プロンプト

Microsoft Windows [Version xx.x.xxxxx.xxx]

(c) 2026 Ribbit App Development All rights reserved.

 

C:\users\user>npm create k2

√ What is your project name?: k2-app

√ GitHub repository: local-bias/k2-kintone-sdk/templates/default

プロジェクトが正常に作成された場合、以下のようなメッセージが表示されます。

－ □ ×

コマンド プロンプト

Microsoft Windows [Version xx.x.xxxxx.xxx]

(c) 2026 Ribbit App Development All rights reserved.

 

C:\users\user>npm create k2

√ What is your project name?: k2-app

√ GitHub repository: local-bias/k2-kintone-sdk/templates/default

　

🎉 Successfully created project k2-app

　

To get started:

cd k2-app

npm install

C:\users\user>

プロジェクトが作成されたら、作成したプロジェクトに移動して、依存パッケージをインストールします。

また、初期設定を行うために以下のコマンドを実行します。

cd "プロジェクト名"

npm install && npm run init

npm run init では、開発用の証明書の作成など、初期設定が行われます。

次に、作成したプロジェクトを起動して、ローカルサーバーにアクセスしてみましょう。

npm run dev

上記コマンドを実行すると、ローカルサーバーが起動します。

出力されたファイルは、コマンドラインに表示されている URL（https://localhost:ポート番号）配下で配信されます。ポート番号は環境によって異なります。

－ □ ×

コマンド プロンプト

Microsoft Windows [Version xx.x.xxxxx.xxx]

(c) 2026 Ribbit App Development All rights reserved.

 

C:\users\user>npm run dev

k2 dev

　

🍳 Start development server

　📂 Output directory: .k2\dev

　🔑 Certificate directory: .k2

　🚀 Start development server at https://localhost:55728

反映したい JavaScript ファイルの URL をコピーし、kintone のアプリ設定から、「設定タブ」 > 「JavaScript / CSS でカスタマイズ」を開きます。

「JavaScript ファイル」項目にある「URL 指定で追加」をクリックし、先ほどコピーしたリンクを貼り付けてください。

アプリ設定を更新すると、ローカルサーバー上の JavaScript ファイルが kintone に読み込まれます。

以上で、環境構築は完了です。

ファイルの変更を監視する

先ほど実行したnpm run devコマンドは、ファイルの変更を監視して自動でビルドを行う機能を持っています。

そのため、プロジェクト内のファイルを更新すると自動的に再ビルドが実行されます。kintone 側では、ページを再読み込みすると最新の内容が反映されます。

ファイルの変更を監視する機能を停止する場合は、Ctrl + Cを押してコマンドを中断してください。

本番環境用のビルド

開発時の URL は開発中の PC からしかアクセスできません。他のユーザーに使ってもらうには、本番環境用のビルドを行い、生成されたファイルを kintone にアップロードします。

以下のコマンドを実行することで、本番環境用のビルドを行うことができます。

npm run build

ビルドが完了すると、.k2/buildディレクトリにビルド後の JavaScript ファイルが出力されます。

このファイルを、アプリ設定の「JavaScript / CSS でカスタマイズ」から「ファイルを追加」でアップロードすると、本番環境に反映されます。