定数定義

kintone でカスタマイズを幅広く行っていくにつれて、同じ値を複数の場所で使用することが増えてきます。 そのような場合、定数定義を行い、複数箇所から参照することでコードの保守性を高めることができる。というのは一般的かと思いますが、みなさんは定数定義、どのように実装されていますか？

僕も長らく kintone カスタマイズを行ってきましたが、定数定義は本当に様々な方法で実装可能なため、どのように実装するのがベストなのか、今でもよく悩むところです。

このサイトでも、kintone における定数定義については何度か紹介してきましたが、あくまで基礎的な部分を紹介しているため、実際のプロジェクトで使用するには少し物足りないかもしれません。

複数 js ファイルで共通の変数・定数を使う方法【kintone】

ですので今回は、僕が実際に採用してうまくいった方法を紹介したいと思います。

一番シンプルな方法

まずは、一番シンプルな方法を紹介します。

単純で分かりやすいですし、総合的に見てベストな方法かもしれません。

export const API_SAMPLE_URL = 'https://api.example.com';
export const API_SAMPLE_TEST = 'https://sample.example.com';
export const COMMON_VALUE = 'commonValue';

VSCode などのエディタを使用していれば、APIと入力した時点でこのファイルを参照してくれるでしょうし、定数名を間違えることもなくなります。

また、ビルドを行った時に無駄なデータが付いてこないのもメリットです。

もちろん、1 つのObjectに全ての定数をまとめる方法もあります。

export const CONSTS = {
  API_SAMPLE_URL: 'https://api.example.com',
  API_SAMPLE_TEST 'https://sample.example.com',
  COMMON_VALUE: 'commonValue',
} as const;

サーバー側で書いているなら環境変数

サーバーサイドでプログラムを記述し、ビルドしたものを kintone へ反映するような運用をしている場合、環境変数を使うのが一般的です。

具体的には、dotenvを使って.envファイルに定数を定義し、process.envで参照する方法です。

本番環境と開発環境で異なる値を使いたい場合には、それぞれの.envファイルを用意し、process.env.NODE_ENVで判定することができます。

API_SAMPLE_URL=https://api.example.com
API_SAMPLE_TEST=https://sample.example.com
COMMON_VALUE=commonValue

import dotenv from 'dotenv';
dotenv.config();

process.env.API_SAMPLE_URL; // https://api.example.com
process.env.API_SAMPLE_TEST; // https://sample.example.com
process.env.COMMON_VALUE;  // commonValue

開発環境が固定されており、必ずprocess変数を参照できるのであれば、この方法が一番シンプルでしょう。

環境変数アプリというアプローチ

定数定義についてウェブサイトで検索した際、定数定義を解決する面白いアプローチがありました。

環境変数をアプリとして定義し、利用する際に参照するという方法です。

kintone で JavaScript 内定数的な値をアプリに自由に定義したい

確かにこの方法であれば、JavaScript ファイルをスリムに保つことができますし、環境ごとの変更にも対応可能です。

また、アプリから定数を変更できるため、非エンジニアの方でも簡単に定数を変更できるでしょう。さらに、定数を書き換える度にビルドしなおす必要もありません。

問題があるとすれば、実行速度に影響を与える可能性があることでしょうか。キャッシュをうまく使えば解決できますが、少し上級者向けの方法かもしれません。

定期的な定数の書き換えだけ発生するようなカスタマイズであれば、この方法が一番適しているかもしれません。

環境ごとに自動的に定数を切り替えたい場合

最後に、僕が一番愛用している方法を紹介します。

const prod = {
  'api.sample.url': 'https://api.example.com',
  'api.sample.test': 'https://sample.example.com',
  'common.value.prod': 'onlyProd',
} as const satisfies Record<string, string>;

const dev: Partial<Record<keyof typeof prod, string>> = {
  'api.sample.url': 'http://localhost:3000',
  'api.sample.test': 'http://localhost:3000',
};

const c = { prod, dev };

export const useConsts = (env: keyof typeof c) => {
  return (key: keyof typeof prod): string => {
    return c[env][key] ?? c.prod[key];
  };
};

export const consts = useConsts(process.env.NODE_ENV === 'production' ? 'prod' : 'dev');

わざわざカリー化しているのは、環境の判定を切り出し、最後の 1 行を変更するだけで環境ごとの定数を切り替えられるようにするためです。

サンプルコードは Node.js を想定しているため、process.env.NODE_ENV === 'production' ? 'prod' : 'dev'の部分で判定した上で、consts という関数を返しています。

processが使えない環境でも、前述した判定処理だけ書き換えれば使えるため、バックエンドでもフロントエンドでも使える汎用的なコードになっています。

課題があるとすれば、ビルド後のコードに本番環境と開発環境の全定数が含まれてしまうことでしょうか。

実際に使う際は以下のように使います。

import { consts } from './consts';

console.log(consts('api.sample.url')); // https://api.example.com

型推論が効くため、定数のキーを間違えることがなくなります。また、定数を変更した場合は型エラーが発生するため、安全性も高いです。