📝

Next.jsの多言語対応をYAMLで書く(VSCode)

2023/03/25に公開

Next.js

そんなライブラリがあるのか！と思ってしまうようなタイトルですが、
普通にYAMLをJSONに変換する処理をYAMLファイルの保存時に実行するだけです。
期待外れだったらごめんなさい。

YAMLをJSONに変換する

public/locales/en/common.ymlをJSONに変換してpublic/locales/en/common.jsonに変換出力します。jaも同様
YAML->JSONの変換にはyamlを使用します。

scripts/yaml-to-json.js

const { resolve } = require('path');
const { readFileSync, writeFileSync } = require('fs');
const YAML = require('yaml');

const locales = ['en', 'ja'];
const paths = locales.map((locale) => resolve(__dirname, `../public/locales/${locale}/common.yml`));

for (const path of paths) {
  const file = readFileSync(path, 'utf8');
  const obj = YAML.parse(file);
  const json = JSON.stringify(obj);
  const toPath = path.replace(/\.yml$/, '.json');
  writeFileSync(toPath, json);
}

保存時に実行

VSCodeの拡張機能 Run on Save を使用して、保存時にこれを実行します。
同時にPrettierも実行してフォーマットしちゃいましょう。

.vscode/settings.json

{
  "emeraldwalk.runonsave": {
    "commands": [{ "cmd": "node scripts/yaml-to-json.js && yarn prettier --write public/locales", "match": ".*\\.yml" }]
  }
}

YAMLをJSONに変換する

保存時に実行

Discussion