↑で開発ドキュメントを管理するサイトを作成したが、その際に編集履歴の画面が欲しいと思ったので、zxを使用して実装してみた。

PR

github.com

実装

開発ドキュメントを管理するサイトとして以下を実装した。

wheatandcat.github.io

ドキュメントを管理するうえで編集履歴が見れるほうが、直近の修正を確認したいときに便利だろうと考え実装を検討した。

最初は以下の既存のCHANGE_LOG.mdの生成ツールを使用を検討したが、もっと簡素な作りにしたかったので不採用にした。

作成したい内容はgit logの情報を元に日付ごとにログ情報をまとめて表示したいだけだったので、zxを使用して自作で実装することにした。

github.com

zxはGoogleが開発しているJavaScriptが書けるシェルツール。
以下の感じでコマンドの実行が可能である。

■ smaple.mjs

#!/usr/bin/env zx
let count = parseInt(await $`ls -1 | wc -l`)
console.log(`Files count: ${count}`);

上記のコードを実行するとFiles count xx とファイルを数を出力できる。

今回はgit logのコマンドを実行し、その情報をフォーマットしてCHANGE_LOG.mdのファイルを出力したいだけなので、実装は以下のようになった。

■ changeLog.mjs

#!/usr/bin/env zx
let log = String(
  await $`git log HEAD --pretty=format:"%H | %cd | %s" --no-merges`
);
let logValue = log.split("\n");
const value = logValue.map((v) => {
  const data = v.split(" | ");
  const date = new Date(data[1]);

  return {
    commit: data[0],
    date: `${date.getFullYear()}-${("00" + (date.getMonth() + 1)).slice(-2)}-${(
      "00" + date.getDate()
    ).slice(-2)}`,
    title: data[2],
  };
});
const items = [];
for (var i = 0; i < value.length; i++) {
  const item = value[i];
  const isSameDate = items.find((v) => v.date === item.date);
  if (isSameDate) {
    isSameDate.items.push(item);
  } else {
    items.push({
      date: item.date,
      items: [item],
    });
  }
}
let text = "# 編集履歴 \n";
for (var i = 0; i < items.length; i++) {
  const item = items[i];
  text += `\n## ${item.date} \n`;
  for (var l = 0; l < item.items.length; l++) {
    const data = item.items[l];
    text += ` - [${data.title}](https://github.com/wheatandcat/memoir-handbook/commit/${data.commit}) \n`;
  }
}

fs.writeFileSync("./docs/CHANGE_LOG.md", text);