<p>git clone --depth 1 --branch feat/border-off <a href="https://github.com/hasii841/coding-tools.git" target="_blank" rel="noopener noreferrer">https://github.com/hasii841/coding-tools.git</a> .<br>rm -rf .git<br>git init<br>git add .<br>git commit -m "init"<br>git remote add origin <a href="https://github.com/hasii841/test2.git" target="_blank" rel="noopener noreferrer">https://github.com/hasii841/test2.git</a><br>git branch -M main<br>git push -u origin main<br>gh repo create test4 --private<br>git branch -M main<br>gh repo delete hasii841/test3 --yes</p>

<p>プロジェクトごとに複製元となるリポジトリや特定ブランチがどれだったっけ...🤔？と探すのを減らすために、Node.jsの対話型CLIライブラリ「inquirer」と、GitHub CLIを組み合わせて、スターターテンプレートのような仕組みを作ってみました。</p><p><span class="txt-small">※この記事内のテンプレートは、GitHubのTemplate Repository（テンプレートリポジトリ）を指していません。</span></p><h2 id="hf12c718893">どのような？</h2><ul><li>使いたいテンプレート（リポジトリ＆ブランチ）を選択したり対話形式で設定する</li><li>ローカルの任意パスにクローン＆履歴リセット</li><li>新しいGitHubリポジトリを作成＆初回コミット・プッシュ</li></ul><h2 id="h41670a6c17">使い方イメージ</h2><ol><li>候補は <code>templates.json</code> で管理</li><li><code>node index.js</code>で実行</li><li>スクリプト実行でテンプレート一覧が表示されるので選択</li><li>クローン先のローカルパスを指定</li><li>GitHubリポジトリ名を指定して新規作成</li><li>任意で説明とウェブサイトURLの登録</li><li>自動でローカル初期化・GitHubへプッシュ完了</li></ol>

<h2 id="h814f3b2d44">事前に準備しておくもの</h2><p>GitHub CLIをインストールしてGitHubへログイン・認証しておくとスムーズです。</p><blockquote><p>GitHub CLI は、すべての作業を 1 か所で行うことができるように、pull request、issues、GitHub Actions などの GitHub 機能をターミナルに集めたコマンドライン ツールです。</p><p><a href="https://docs.github.com/ja/github-cli/github-cli/about-github-cli" target="_blank" rel="noopener noreferrer nofollow">GitHub CLI について - GitHub Docs</a></p></blockquote><p><a href="https://cli.github.com/" target="_blank" rel="noopener noreferrer nofollow">https://cli.github.com/</a></p><h2 id="h17e1f46878">使用するパッケージ</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>パッケージ名</p></th><th colspan="1" rowspan="1"><p>用途</p></th></tr><tr><td colspan="1" rowspan="1"><p>inquirer</p></td><td colspan="1" rowspan="1"><p>対話的なCLIプロンプト作成</p></td></tr><tr><td colspan="1" rowspan="1"><p>simple-git</p></td><td colspan="1" rowspan="1"><p>Node.jsからGit操作を行う</p></td></tr><tr><td colspan="1" rowspan="1"><p>chalk</p></td><td colspan="1" rowspan="1"><p>ターミナルの色付き文字表示</p></td></tr></tbody></table>

#!/usr/bin/env node
import inquirer from "inquirer";
import { simpleGit } from "simple-git";
import { execSync } from "child_process";
import fs from "fs";
import path from "path";
import chalk from "chalk";

// theme.jsonのパス（スクリプトと同じ場所）
const themesPath = path.resolve(process.cwd(), "templates.json");

// テンプレート読み込み
let templates;
try {
  const data = fs.readFileSync(themesPath, "utf-8");
  templates = JSON.parse(data);
} catch (e) {
  console.error(chalk.red("❌ theme.json の読み込みに失敗しました"), e.message);
  process.exit(1);
}

const run = async () => {
  const {
    selectedTemplate,
    targetPath,
    githubRepoName,
    description,
    homepage,
  } = await inquirer.prompt([
    {
      type: "list",
      name: "selectedTemplate",
      message: "テンプレートを選択してください:",
      choices: templates.map((t, i) => ({
        name: `${t.name} (${t.branch})`,
        value: i,
      })),
    },
    {
      type: "input",
      name: "targetPath",
      message: "クローン先のパスを入力してください（例：./project-a）:",
      validate: (input) => (input ? true : "パスは必須です"),
    },
    {
      type: "input",
      name: "githubRepoName",
      message: "新しく作成するGitHubリポジトリ名を入力してください:",
      validate: (input) => (input ? true : "リポジトリ名は必須です"),
    },
    {
      type: "input",
      name: "description",
      message: "リポジトリの説明（任意）:",
    },
    {
      type: "input",
      name: "homepage",
      message: "ウェブサイトURL（任意）:",
    },
  ]);

  const { repo, branch } = templates[selectedTemplate];
  const fullPath = path.resolve(process.cwd(), targetPath);

  // クローン
  fs.mkdirSync(fullPath, { recursive: true });
  process.chdir(fullPath);
  console.log(
    chalk.green(`✅ ${repo} の ${branch} を ${targetPath} にクローン中...`)
  );
  execSync(`git clone --depth 1 --branch ${branch} ${repo} .`, {
    stdio: "inherit",
  });

  // .git 削除
  fs.rmSync(path.join(fullPath, ".git"), { recursive: true, force: true });
  console.log(chalk.yellow("🧹 .git フォルダを削除しました（履歴リセット）"));

  // 新たに git init
  const git = simpleGit();
  await git.init(["--initial-branch=main"]);
  await git.add(".");
  await git.commit("initial commit");
  console.log(chalk.green("✅ ローカルリポジトリを初期化しました"));

  // GitHubに新規リポジトリ作成（GitHub CLI使用）
  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const pushWithRetry = async (retries = 3, delay = 5000, simulate = false) => {
    for (let i = 0; i < retries; i++) {
      try {
        if (simulate) {
          console.log(chalk.cyan(`🔁 (テスト) push 実行 ${i + 1}回目`));
          if (i < retries - 1) throw new Error("Simulated push failure");
        } else {
          execSync(`git push -u origin main`, { stdio: "inherit" });
        }
        console.log(chalk.green("✅ 初回プッシュが完了しました"));
        return;
      } catch (err) {
        console.warn(chalk.yellow(`⚠ push に失敗しました（${i + 1}回目）`));
        if (i < retries - 1) {
          console.log(
            chalk.gray(`⏳ ${delay / 1000}秒待ってリトライします...`)
          );
          await sleep(delay);
        } else {
          throw new Error("❌ push に3回連続で失敗しました");
        }
      }
    }
  };

  try {
    execSync(
      `gh repo create ${githubRepoName} --private --source=. --remote=origin` +
        (description ? ` --description "${description}"` : "") +
        (homepage ? ` --homepage "${homepage}"` : ""),
      { stdio: "inherit" }
    );

    console.log(
      chalk.green(`🚀 GitHubに ${githubRepoName} を作成しました。プッシュ中...`)
    );

    await sleep(2000); // 最初の待ち時間（反映待機）

    await pushWithRetry(); // リトライ
  } catch (e) {
    console.error(
      chalk.red("❌ GitHubリポジトリの作成またはプッシュに失敗しました")
    );
  }
};

run();

//記載のrepoは例で実在しません
[
  {
    "name": "Sample React Template",
    "repo": "https://github.com/sample-org/sample-react-template.git",
    "branch": "main"
  },
  {
    "name": "Sample Vue Template (dev branch)",
    "repo": "https://github.com/sample-org/sample-vue-template.git",
    "branch": "develop"
  },
  {
    "name": "Sample Next.js Template",
    "repo": "https://github.com/sample-org/sample-next-template.git",
    "branch": "main"
  },
  {
    "name": "Sample Node API Template",
    "repo": "https://github.com/sample-org/sample-node-api.git",
    "branch": "master"
  },
  {
    "name": "Sample Static Site Template",
    "repo": "https://github.com/sample-org/sample-static-site.git",
    "branch": "main"
  }
]


<h2 id="h7de647adc6">Push失敗時の自動リトライ処理</h2><p>GitHub CLIで新しいリポジトリを作成した直後、GitHub側のリポジトリ作成が完了する前に push が走ってしまうためまれに git push が失敗することがあります。</p>

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const pushWithRetry = async (retries = 3, delay = 5000) => {
//処理
}

<ul><li><code>sleep()</code> 関数でリトライ間隔を制御</li><li>最大 <code>3回</code> までリトライ<br>失敗が続いた場合はエラーをスロー</li><li><code>chalk</code> を使ってメッセージを視覚的にわかりやすく表示</li></ul>

<h2 id="hc8d85d9b1f">Organization にリポジトリを作成する場合</h2><p>GitHub CLI (gh) を使ってリポジトリを作成する場合、通常は「自分のアカウントの所有リポジトリ」として作成されます。しかし、会社やチームなどの Organization に作成したい 場合は、オプションで <code>--org</code> を指定する必要があります。</p>

const org = "my-company-org"; // 自分のOrganization名を指定
execSync(
  `gh repo create ${githubRepoName} --private --source=. --remote=origin --org ${org}`,
  { stdio: "inherit" }
);

<ul><li><code>your-org-name</code> には、<strong>自分が権限を持っているOrganization名</strong> を指定します。</li><li><strong>オーナー権限</strong>や、<strong>リポジトリ作成権限</strong>を持っていないとエラーになります。</li><li>Organization に所属していても、デフォルトでは <code>gh repo create</code> は個人アカウント側に作られるため、<code>--org</code> を付けないと意図しない場所に作成されてしまうことがあります。</li></ul>

<h2 id="h41d0b5359c">GitHub APIを使った試み😞</h2><p>最初はGitHub APIでテンプレートリポジトリを有効にしJSONを取得し、質問形式で選択肢を作ろうとしました。</p><p>デフォルトブランチに設定されている場合は取得できたのですが、それ以外のブランチから実行することができず断念しました。（他に方法があるかもしれません...）</p><p>リリースからタグを指定して取得も試みましたがうまくいきませんでした。</p><h3 id="hae532126fc">最終的にGitHub CLIを使う判断に</h3><p>GitHub CLI を使うことで、対話的かつローカルで完結した操作が可能になり、リポジトリの作成から初回プッシュまでをスムーズに自動化できました。</p><p>特に今回のように「テンプレートからプロジェクトを素早く立ち上げたい」ケースでは、<code>gh repo create</code> などのコマンドで 手元の作業と GitHub の操作できる点がスムーズだと感じました。</p>

Node.js×GitHub CLIでGitHubリポジトリとローカル環境を一括セットアップ

<p>rss-parser　エラーでNG</p><pre><code>02:15:00 [ERROR] [vite] x Build failed in 1.76s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "http" imported from "node_modules\rss-parser\lib\parser.js". Consider disabling ssr.noExternal or remove the built-in dependency.</code></pre><p>xml2js エラーでNG</p><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "events" imported from "node_modules\xml2js\lib\parser.js". Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><p>fast-xml-parser　で何とかできた。<br><a href="https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/" target="_blank" rel="noopener noreferrer">https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/</a><br>inferSize<br>画像　をassets使う<br>アメブロはない。<br>はてぶは&lt;enclosure url=""&gt;<br>オプションをつけておかないとurlの部分が削除されて取得できなかった</p><pre><code>    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない
    });

</code></pre><p>qiitaはAtom形式でアイキャッチ画像がない<br>zenはrssでアイキャッチある&lt;enclosure url=""&gt;<br>note.comはrssで&lt;media:thumbnail&gt;</p>

<p>自身のnoteに書いた記事をRSSフィードを利用してAstroに一覧表示するための手順をまとめた記事です。</p><p><span class="txt-small">※RSSを配信しているサービスの利用規約やルールをご確認ください。</span></p><h2 id="ha6370ccfe0">設定と完成したコード</h2><h3 id="h6ae33e7349">設定</h3><ul><li>Astro 4.7.1</li><li>Astroの出力モード<code>hybrid</code></li><li>Cloudflare Pagesの互換性フラグに<code>nodejs_compat</code>を設定</li><li>XMLデータをJSON形式に変換するパッケージ<code>npm i fast-xml-parser -D</code></li></ul><h3 id="h9a8d5667c1">このコードでできること</h3><ul><li>複数のRSSフィードから記事を取得して日付が新しい順に並び替えて10件表示</li><li>RSS 2.0、Atom形式</li><li>日付をYYYY.MM.DD形式</li></ul>

import { XMLParser } from "fast-xml-parser";

// 記事のインターフェースを定義
interface Article {
  title: string;
  link: string;
  thumb: string | null;
  description: string;
  pubDate: string;
}

// RSSフィードを取得してJSONデータに変換する関数
export async function fetchRSS(url: string): Promise<any> {
  try {
    const response = await fetch(url); // URLからRSSフィードをフェッチ
    const xmlData = await response.text(); // フェッチしたデータをテキストとして取得
    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない設定
    });
    const jsonData = parser.parse(xmlData); // XMLデータをJSONに変換
    return jsonData;
  } catch (error) {
    console.error("Error fetching or parsing RSS feed:", error); // エラーが発生した場合にコンソールに表示
    throw error; // エラーをスロー
  }
}

// 日付をYYYY.MM.DD形式にフォーマットする関数
function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}.${month}.${day}`;
}

// アイテムからサムネイルURLを抽出する関数
function extractThumb(item: any): string | null {
  if (item.enclosure && item.enclosure.url) {
    return item.enclosure.url;
  } else if (item["media:thumbnail"]) {
    return item["media:thumbnail"];
  } else if (Array.isArray(item.link)) {
    const link = item.link.find(
      (l: any) => l.rel === "enclosure" || l.type?.startsWith("image")
    );
    return link ? link.href : null;
  }
  return null;
}

// RSSアイテムをArticleインターフェースにパースする関数
function parseRSSItem(item: any, isAtom: boolean = false): Article {
  return {
    title: item.title,
    link: isAtom ? item.link?.href || item.link : item.link,
    thumb: extractThumb(item),
    description: item.description || item.summary || item.content,
    pubDate: formatDate(
      new Date(item.pubDate || item.updated || item.published)
    ),
  };
}

// RSS 2.0形式のJSONデータをArticle配列にパースする関数
function parseRSS2(jsonData: any): Article[] {
  const items = Array.isArray(jsonData.rss.channel.item)
    ? jsonData.rss.channel.item
    : [jsonData.rss.channel.item];
  return items.map((item: any) => parseRSSItem(item));
}

// Atom形式のJSONデータをArticle配列にパースする関数
function parseAtom(jsonData: any): Article[] {
  const entries = Array.isArray(jsonData.feed.entry)
    ? jsonData.feed.entry
    : [jsonData.feed.entry];
  return entries.map((entry: any) => parseRSSItem(entry, true));
}

// 複数のRSSフィードURLを処理し、最新の10記事を返す関数
export async function fetchAndProcessRSS(
  rssURLs: string[]
): Promise<Article[]> {
  let articles: Article[] = [];

  await Promise.all(
    rssURLs.map(async (rssURL) => {
      try {
        const rssData = await fetchRSS(rssURL); // 各RSSフィードをフェッチ
        let fetchedArticles: Article[] = [];

        if (rssData.rss) {
          fetchedArticles = parseRSS2(rssData); // RSS 2.0形式を解析
        } else if (rssData.feed) {
          fetchedArticles = parseAtom(rssData); // Atom形式を解析
        } else {
          console.error(`Unknown feed format for ${rssURL}`, rssData); // 不明なフォーマットのフィード
        }

        articles.push(...fetchedArticles); // 取得した記事を追加
      } catch (error) {
        console.error(`Error processing RSS feed ${rssURL}:`, error); // エラー処理
      }
    })
  );

  // 記事を日付でソートし、最新の10記事を取得
  articles.sort(
    (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
  );
  articles = articles.slice(0, 10);

  return articles; // 最終的な記事リストを返す
}

---
import Layout from "@/layouts/Layout.astro";
import { fetchAndProcessRSS } from "@/libs/fetchAndProcessRSS";
import { Image } from "astro:assets";
import noimage from "@/images/noimage.png";

// RSSフィードのURL 配列で複数RSSフィードURLの指定が可能
const rssURLs = [
  "https://note.com/xxx/rss"
];

// RSSフィードから記事を取得して統合
const articles = await fetchAndProcessRSS(rssURLs);
---
<Layout>
  <h1>Latest Articles</h1>
  <ul>
    {
      articles.map((article) => (
        <li>
          <a href={article.link}>
            {article.thumb ? (
              <img src={article.thumb} alt="" />
            ) : (
              <Image src={noimage.src} width={400} height={300} alt="" />
            )}
            <div class="info">
              <p class="date">{article.pubDate}</p>
              <p class="title">{article.title}</p>
            </div>
          </a>
        </li>
      ))
    }
  </ul>
</Layout>

<h3 id="h3e3954103e">😢つまづき⓵XMLデータをJSON形式に変換するパッケージでデプロイ失敗</h3><p>はじめはxml2jsで試して作成していましたが、いざデプロイしようとしたらエラーでデプロイできませんでした。</p><h4 id="h5210acff2f">エラー内容</h4><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in &quot;events&quot; imported from &quot;node_modules\xml2js\lib\parser.js&quot;. Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><h4 id="heaa723eefe">ChatGPTに聞いてみた</h4><blockquote><p>このエラーは、Viteビルド中に発生したものです。エラーメッセージによると、<code>node_modules\xml2js\lib\parser.js</code>からNode.jsの組み込みモジュールである &quot;events&quot; をインポートしようとしているが、それがバンドルされていないため、エラーが発生しています。エラーの提案として、<code>ssr.noExternal</code>を無効にするか、組み込みの依存関係を削除することが挙げられています。</p><p>このエラーの理由として、ViteがデフォルトでNode.jsの組み込みモジュールをバンドルしないためです。これは、Viteがブラウザ向けのフロントエンドアプリケーションを効率的にビルドするための設計上の決定です。しかし、<code>xml2js</code>ライブラリがNode.jsの組み込みモジュールである &quot;events&quot; を使用しているため、このエラーが発生しています。</p></blockquote><p>astro.config.mjsのviteに設定を追加したり試したのですが、うまくいきません・・</p><p>rss-parserも試してみたのですが、<code>Cannot bundle Node.js built-in &quot;http&quot; imported from &quot;node_modules\rss-parser\lib\parser.js&quot;</code>と同様のエラーが出たため断念しました。</p><p>最終的にはデプロイできたfast-xml-parserで落ち着きました。</p>

<h3 id="h0701d7302b">😢つまづき②画像を取得するときにundefinedになる</h3><p>はじめはnoteのRSSフィードの形式をもとに作っていたのですが、複数のRSSフィードからデータを取得するときに画像が取得できないケースに遭遇しました。</p><pre><code>&lt;enclosure url=&quot;https://xxx.xyz/xxxx.jpg&quot; type=&quot;image/jpeg&quot; length=&quot;0&quot; /&gt;</code></pre><p>取得しようと設定してもundefinedになります・・</p><p>parserするときに属性が削除されてしまいurlがなくなっていました。そこでXMLParserのignoreAttributesとattributeNamePrefixオプションの設定を追加したら取得できるようになりました🎉</p>

const parser = new XMLParser({
  ignoreAttributes: false, // 属性を無視しない
  attributeNamePrefix: "", // 属性名のプレフィックスを削除
});

<h2 id="h9a28d23373">いろんなサービスのRSSフィードを見てみよう👀</h2><p><span class="txt-small">※2024/6/11時点</span></p><h3 id="ha62a81d053">note</h3><p><a href="https://www.help-note.com/hc/ja/articles/4402395202841-iframe-RSS%E3%81%A7-%E8%87%AA%E5%88%86%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%ABnote%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer nofollow">iframe、RSSで、自分のサイトにnoteを表示する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;media:thumbnail&gt;画像URL&lt;/media:thumbnail&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;note:creatorImage&gt;クリエイター画像&lt;/note:creatorImage&gt;
  &lt;note:creatorName&gt;クリエイター名&lt;/note:creatorName&gt;
  &lt;pubDate&gt;Thu, 08 Sep 2022 01:47:28 +0900&lt;/pubDate&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid&gt;記事URL&lt;/guid&gt;
&lt;/item&gt;</code></pre><h3 id="h36df264104">Qiita</h3><p><a href="https://help.qiita.com/ja/articles/qiita-feed" target="_blank" rel="noopener noreferrer nofollow">フィード機能（ホーム・タイムライン・トレンド）</a></p><pre><code>&lt;entry&gt;
  &lt;id&gt;tag:qiita.com,2005:PublicArticle/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T15:46:46+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T15:46:49+09:00&lt;/updated&gt;
  &lt;link rel=&quot;alternate&quot; type=&quot;text/html&quot; href=&quot;記事URL＋パラメータ&quot;/&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre><h3 id="hbfca088075">Zenn</h3><p><a href="https://zenn.dev/zenn/articles/zenn-feed-rss" target="_blank" rel="noopener noreferrer nofollow">ZennをRSSフィードで購読する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;&lt;![CDATA[ 記事タイトル ]]&gt;&lt;/title&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid isPermaLink=&quot;true&quot;&gt;記事URL&lt;/guid&gt;
  &lt;pubDate&gt;Wed, 12 Jun 2024 00:00:00 GMT&lt;/pubDate&gt;
  &lt;enclosure url=&quot;OGP画像URL&quot; length=&quot;0&quot; type=&quot;image/png&quot;/&gt;
  &lt;dc:creator&gt;ユーザ名&lt;/dc:creator&gt;
&lt;/item&gt;</code></pre><h3 id="h926adb4daf">はてなブックマーク</h3><p><a href="https://developer.hatena.ne.jp/ja/documents/bookmark/misc/feed/" target="_blank" rel="noopener noreferrer nofollow">はてなブックマークフィード仕様</a></p><p>RSS 2.0、Atom形式の両方あります。</p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;description&gt;本文&lt;/description&gt;
  &lt;pubDate&gt;Thu, 23 May 2024 11:57:41 +0900&lt;/pubDate&gt;
  &lt;guid isPermaLink=&quot;false&quot;&gt;hatenablog://entry/ID?&lt;/guid&gt;
  &lt;enclosure url=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
&lt;/item&gt;</code></pre><pre><code>&lt;entry&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link href=&quot;記事URL&quot; /&gt;
  &lt;id&gt;hatenablog://entry/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T17:45:54+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T17:45:54+09:00&lt;/updated&gt;
  &lt;summary type=&quot;html&quot;&gt;要約&lt;/summary&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;link rel=&quot;enclosure&quot; href=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre>

<p>📝参考サイト</p><ul><li><a href="https://zenn.dev/kazuki_tam/articles/f7d3c0f1074969" target="_blank" rel="noopener noreferrer nofollow">Astro環境でnote記事一覧を事前ビルドして表示する方法</a></li><li><a href="https://zenn.dev/catnose99/articles/cb72a73368a547756862" target="_blank" rel="noopener noreferrer nofollow">チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）</a></li></ul>

AstroでRSSフィードから記事一覧を取得してCloudflare Pagesで表示してみる

<pre><code>npm i&nbsp;svgo</code></pre><p><br>fsのエラー<br>この参考サイトを参照：https://gotohayato.com/content/553/<br><br>cssはhttps://flowbite.com/を使う<br><br>MUIにした<br>公式：https://mui.com/material-ui/getting-started/installation/<br>npm install @mui/material @mui/styled-engine-sc styled-components<br><br>https://mui.com/material-ui/experimental-api/css-theme-variables/migration/<br><br>app routerではemotionがいるみたい<br><span style="color:#242424">npm install @mui/material @emotion/react @emotion/styled @emotion/cache</span><br><br><span style="color:#242424">app routerでの実装例があった！</span><br>https://medium.com/frontendweb/how-to-install-material-ui-in-the-next-js-with-the-app-router-10d2a60e41f2<br>https://github.com/mui/material-ui/issues/37935<br><br>カラーパレット<br>https://zenoo.github.io/mui-theme-creator/<br><br>GTMの設定は以下を参考<br>https://haramizu.com/blog/2023/09/01/nextjs-app-router-gtm<br>https://qiita.com/ruiiixiii/items/2f3e3497d13ec804eb40<br><br>// export const runtime = "edge";<br>があるとnpm run buildでビルドしたときにindex.htmlができない・・なんで<br><br>マテリアルデザイン3.0<br>https://m3.material.io/<br><br>デプロイできない→みてもわからんかった・・<br>https://github.com/natemoo-re/astro-icon/issues/35<br><br>Vercelにアップした<br>https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs<br><br><br>どっちもデプロイはできた</p>

<p>SVGアイコンをCSSのbackgroundやmaskで使用するときに、パスを最適化したり不要な要素を削除したり・・何かと手間がかかるのでSVGパスを最適化した状態でCSSプロパティとして出力するツールを作りました。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/46a9b1b689c846f8822380bd73f3fbe1/motion.gif" alt="" width="1509" height="694"></figure><p><strong>SVG ICON Convert to CSS</strong><br><a href="https://svg-icon-convert-to-css.pages.dev/" target="_blank" rel="noopener noreferrer nofollow">https://svg-icon-convert-to-css.pages.dev/</a></p><h2 id="h68f4ddbb30">ツールでできること</h2><ul><li>SVGの複数&lt;path&gt;を結合するかしないか</li><li>パスやアンカーポイントの位置の小数点の桁数変更</li><li>CSSプロパティ設定<ul><li>background か mask</li><li>cover, contain, カスタム設定</li></ul></li><li>SVGパスをクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>Base64に変換したSVGパスをCSSプロパティにセットしクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>最適化前と最適化後のSVGプレビュー</li><li>ダークモード</li></ul>

<h2 id="h32098baedb">使用したライブラリ・フレームワーク</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>SVG最適化</p></th><td colspan="1" rowspan="1"><p><a href="https://github.com/svg/svgo" target="_blank" rel="noopener noreferrer nofollow">SVGO</a></p></td></tr><tr><th colspan="1" rowspan="1"><p>クリップボードコピー</p></th><td colspan="1" rowspan="1"><p><a href="https://github.com/nkbt/react-copy-to-clipboard" target="_blank" rel="noopener noreferrer nofollow">react-copy-to-clipboard</a></p></td></tr><tr><th colspan="1" rowspan="1"><p>CSSフレームワーク</p></th><td colspan="1" rowspan="1"><p><a href="https://mui.com/" target="_blank" rel="noopener noreferrer nofollow">MUI</a></p></td></tr></tbody></table>

<h2 id="h33bc396ad1">SVGパスの貼り付けとプレビュー表示</h2><p>textareaは&lt;TextField&gt;コンポーネントを使用しています。</p>

<p>貼り付けたSVGパスを正規表現でパターンチェックをしています。</p><p>コンテンツ内には&lt;Snackbar&gt;&lt;Alert&gt;でエラー表示用の要素を配置していて、SVGパスでないとき&lt;Snackbar&gt;のプロパティ<code>open</code>に<code>true</code>を渡してエラーを表示させます。</p><p>SVGパスのパターンに一致した場合は、originalSvgPathのstateを更新しています。</p>

const [originalSvgPath, setOriginalSvgPath] = useState(defaultPath);

const pattern = /^<svg[\s\S]*?<\/svg>\s*$/;  //SVGパスの正規表現

const svgPasteChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (!event.target) return;
  const newValue = event.target.value;
  if (!pattern.test(newValue)) {  //SVGのパスかパターンチェック
    setStateError({
      open: true,
      vertical: "bottom",
      horizontal: "center",
    });
    return;
  }
  setOriginalSvgPath({
    value: newValue,
    copied: true,
  });
};

<p>最適化されたSVGを表示するだけでもいいのですが、貼り付けたSVGと最適化されたSVGに違いがあるか視覚的に比較したかったのでプレビュー表示のエリアを作りました。</p><p>貼り付けたSVGは、そのままSVGパスを<code>dangerouslySetInnerHTML</code>で表示させています。</p>

<Box sx={previewStyles}>
{originalSvgPath.value && (
  <div
    dangerouslySetInnerHTML={{
      __html: originalSvgPath.value,
    }}
  ></div>
)}
</Box>

<h2 id="h45c359757c">SVGパスの最適化</h2><p>SVGOを使ってパスの最適化を行いますが、SVGOにはプロパティがたくさんあります。自分の好みの設定ができますが、SVGアイコンの最適化には多機能すぎる気がしたので最低限の設定をユーザーに委ねる設計にしました。</p><h4 id="h93140c217a">1. mergePaths</h4><p>複数のパスを1つにマージするか</p>

//貼り付けたSVG
<svg width="278" height="192" viewBox="0 0 278 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="133" height="133" fill="#D9D9D9"/>
<rect x="145" y="59" width="133" height="133" fill="#D9D9D9"/>
</svg>

//パスをマージしない場合
<svg xmlns="http://www.w3.org/2000/svg" width="278" height="192" fill="none" viewBox="0 0 278 192">
<path fill="#D9D9D9" d="M0 0h133v133H0z"/>
<path fill="#D9D9D9" d="M145 59h133v133H145z"/>
</svg>

//パスをマージした場合
<svg xmlns="http://www.w3.org/2000/svg" width="278" height="192" fill="none" viewBox="0 0 278 192">
<path fill="#D9D9D9" d="M0 0h133v133H0zm145 59h133v133H145z"/>
</svg>

<p><code>mergePaths</code>を有効にすると&lt;path&gt;が１つになっていることが分かります。<br>パス自体を合体させるオプションではないため、&lt;path&gt;と&lt;path&gt;が重なっている場合、パスはマージされません。パスが重なっていない場合に有効です。</p><h4 id="h4e9867d800">2. convertPathDataのfloatPrecision</h4><p>SVGパスの不要な区切り文字や小数点以下の丸め処理をして軽量化をはかる</p>

//貼り付けたSVG
<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 0L20.2045 11.4012H32.1924L22.494 18.4476L26.1985 29.8488L16.5 22.8024L6.80154 29.8488L10.506 18.4476L0.807568 11.4012H12.7955L16.5 0Z" fill="#D9D9D9"/>
</svg>

//丸め処理：デフォルト（小数第三位）
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="30" fill="none" viewBox="0 0 33 30">
<path fill="#D9D9D9" d="m16.5 0 3.704 11.401h11.988l-9.698 7.047 3.704 11.4-9.698-7.046-9.698 7.047 3.704-11.401L.808 11.4h11.988L16.5 0Z"/>
</svg>

//丸め処理：小数第一位
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="30" fill="none" viewBox="0 0 33 30">
<path fill="#D9D9D9" d="m16.5 0 3.7 11.4h12l-9.7 7 3.7 11.4-9.7-7-9.7 7 3.7-11.4-9.7-7h12L16.5 0Z"/>
</svg>

<p>小数第三位では<code>3.704</code>だった値が、小数第一位にすると<code>3.7</code>になっていることが分かります。値が小さくなるほどパスは軽量化されますが、微妙にパスの位置が変わるため見た目に影響が出ます。</p><p>軽量化できてもアイコンがいびつな形になっては意味がありません。プレビュー機能を付けた理由は、この小数点の丸め処理によって変化したSVGを確認するためです。</p><h4 id="h9d02a408fa">ユーザー操作なしの設定</h4><p>removeRasterImagesを有効にして、あとはSVGOのデフォルト設定を利用しました。<br><a href="https://www.npmjs.com/package/svgo#built-in-plugins" target="_blank" rel="noopener noreferrer nofollow">https://www.npmjs.com/package/svgo#built-in-plugins</a></p>

<h2 id="h2a83499af6">クリップボードへのコピー</h2><p>冒頭でも書いたように４種類のSVGパスをコピーできるツールです。</p><ul><li>SVGパスをクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>Base64に変換したSVGパスをCSSプロパティにセットしクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li></ul><p>SVGパスは最適化前・後の値を使用し、CSS用のSVGは最適化前・後のSVGパスをSVGOの<code>datauri: enc</code>でエンコードしています。</p><p>Base64にエンコードした値は、CSSにそのまま貼り付けられるようツール上でプロパティの組み合わせを選択しセットした状態でクリップボードにコピーできるようにしました。</p><ul><li>background または mask</li><li>url(Base64エンコードのパス)</li><li>no-repeat</li><li>left top / cover 、left top contain、カスタマイズ</li></ul><p>あとは<code>&lt;Button&gt;</code>コンポーネントをコピーしたい値をセットした<code>&lt;CopyToClipboard&gt;</code>でラップするだけで、ボタンをクリックするとクリップボードに値がコピーされます。</p>

<h2 id="hefb8021c79">おまけ：ダークモードの切り替え</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f47f27589964367b49e64466e7794c4/darkmode.gif" alt="" width="1501" height="692"></figure><p>せっかくなのでMUIのドキュメントにダークモードのサンプルがあったので組み込みました。</p><p>モード切替後、リロードしても状態を保持するようにしましたが、はじめは一瞬ライトモードが表示されるちらつきに悩まされましたが、MUIの公式で「CSS theme variables」による解決策が掲載されていました。</p><p><a href="https://mui.com/material-ui/guides/next-js-app-router/" target="_blank" rel="noopener noreferrer nofollow">https://mui.com/material-ui/guides/next-js-app-router/</a><br><a href="https://mui.com/material-ui/experimental-api/css-theme-variables/migration/">https://mui.com/material-ui/experimental-api/css-theme-variables/migration/</a></p><p>📝参考<br>・<a href="https://medium.com/frontendweb/how-to-install-material-ui-in-the-next-js-with-the-app-router-10d2a60e41f2" target="_blank" rel="noopener noreferrer nofollow">How to install material UI in the Next.js with the app router?</a><br>・<a href="https://github.com/mui/material-ui/issues/37935" target="_blank" rel="noopener noreferrer nofollow">[Theme Mode] CssBaseline not working with Next.js App Router (with ThemeRegistry)</a></p><p>ちらつきが無くなりました😊</p>

Node.jsのSVGOを使ってSVGの最適化とBase64変換したCSSプロパティをコピーするツールを作ってみた

<h2 id="h9f510f3156">やりたいこと</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/d81519bca58a49c1bae7e46f29a4f52a/Group%20100.png" alt="" width="879" height="247"></p><p><br></p><h2 id="h58a6675258">パッケージのインストール</h2><pre><code>npm i sharp path fs</code></pre><p><br></p>

├ 📁 images
│　└ 📁 convert
│　└ 📁 dir1
│　└ 📁 dir2
├ convertImages.mjs
├ package.json


import fs from "fs/promises";
import path from "path";
import sharp from "sharp";

const __dirname = path.resolve();

const inputDir1Path = path.join(__dirname, 'images', 'dir1');
const inputDir2Path = path.join(__dirname, 'images', 'dir2');
const outputConvertPath = path.join(__dirname, 'images', 'convert');

const dir1Images = [];
const dir2Images = [];

async function readDir1Files() {
  try {
    const dir1Files = await fs.readdir(inputDir1Path);
    dir1Images.push(...dir1Files.map(file => path.join(inputDir1Path, file)));
  } catch (err) {
    console.error('Error reading Dir1 folder:', err);
  }
}

async function readDir2Files() {
  try {
    const dir2Files = await fs.readdir(inputDir2Path);
    dir2Images.push(...dir2Files.map(file => path.join(inputDir2Path, file)));
  } catch (err) {
    console.error('Error reading Dir2 folder:', err);
  }
}

async function convertImgs(dir1Images, dir2Images) {
  for (let index = 0; index < dir1Images.length; index++) {
    const dir1ImagePath = dir1Images[index];
    const dir2ImagePath = dir2Images[index];

    //Dir1->image info
    const dir1ImageInfo = await sharp(dir1ImagePath).metadata();
    const dir1ImgWidth = dir1ImageInfo.width;
    const dir1ImgHeight = dir1ImageInfo.height;

    //Dir2->image info
    const dir2ImageInfo = await sharp(dir2ImagePath).metadata();
    const dir2ImgWidth = dir2ImageInfo.width;
    const dir2ImgHeight = dir2ImageInfo.height;

    const convertWidth = dir1ImgWidth + dir2ImgWidth + 100; //100は、画像と画像の間分
    const convertHeight = Math.max(dir1ImgHeight, dir2ImgHeight);  //画像の高さを比較し高いサイズを採用->生成する画像の高さになる

    const convertFilePath = dir1ImagePath.replace(/.(jpeg|png)/g, '.jpg'); //強制的に拡張子をjpgに置き換え

    await sharp({ create: { width: convertWidth, height: convertHeight, channels: 4, background: { r: 255, g: 255, b: 255, alpha: 1 } } }) //背景を黒にする場合は、alpha: 0
      .jpeg({
        quality: 50, //圧縮 品質を50に設定
        progressive: true
      })
      .composite([
        {
          input: dir1ImagePath,
          left: 0,
          top: 0,
          gravity: 'northwest'
        },
        {
          input: dir2ImagePath,
          left: dir1ImgWidth + 100, // 1枚目との間を100px空ける
          top: 0,
          gravity: 'northeast'
        }
      ])
      .toFile(path.join(outputConvertPath, path.basename(convertFilePath))); //合成したファイル名
  }
}

async function main() {
  await readDir1Files();
  await readDir2Files();
  await convertImgs(dir1Images, dir2Images);
  console.log('Images conversion complete.');
}

main().catch(error => {
  console.error('Error:', error);
});

<pre><code>node convertImages.mjs</code></pre><p><br></p><p>実行すると画像が生成されました！</p>

Node.jsライブラリsharpを使って2枚を1枚の画像に合成・圧縮する自動化mjsを作る

<p>参考：https://zenn.dev/rik9228/articles/256d26cbfcaf1e<br>https://qiita.com/super-mana-chan/items/47c71d63c0de21818318<br><br>並列処理させる；<br>https://zenn.dev/luma/articles/9d2272cd98fcc7<br><br><br></p><h3 id="h6b1fd73780">実行したらパソコンがフリーズ・・！！</h3><p>メモリが96%まで・・<br>停止してvscode閉じたら40%くらいまでになった。もうこれのせいやん・・<br><br>npm-script-allでまとめて実行させる<br>https://qiita.com/sugurutakahashi12345/items/2a17a3cdfbc4a7e5e4eb<br>まさかの並列実行と直列実行でpackage.jsonの書き方が違った・・・そうなの？？！<br></p><h3 id="h36f90f799c">webpが安定して生成されないから、sharpに変更してみよう</h3><p>ライセンス<br>Apache ライセンス 2.0<br><br>https://blog.kozakana.net/2019/04/sharp-output-format/<br><br>階層を深くすると管理者の実行権限～がでるからvscodeから削除すると削除できる<br><br>ファイル削除しようとすると↓がでる<br>node.js javascript runtimeによって開かれているため、操作を完了できません。<br><br>削除したら連動させたけど、安定しない。<br>・削除すると権限周りでひっかかるしちゃんと削除出来てるか不安になる<br>・実行したり切ったりを繰り返すのは面倒</p>

<p>画像の圧縮とWebP画像の生成を自動化させるモジュールjsを作成しました。</p><p>当初はimageminを使用していましたが、クオリティの設定や元ファイルの状態によっては圧縮されないファイルがあり<sup>（※）</sup>、sharpを使用することにしました。</p><p>※これ以上圧縮できない場合に生成されない（・？）</p><p><br></p><p>オリジナル画像があるフォルダ（src\/imagesとする）と圧縮した画像・WebP生成した画像を入れるフォルダ（\/public\/imagesとする）を用意する。</p><h3 id="hf471dec208">タスク</h3><ul><li>📁\src\imagesのjpg/pngを📁\public\imagesへ圧縮して格納する</li><li>📁public/imagesに圧縮されたjpg/pngが格納されたらWebP画像を生成する</li><li>gif/svgは変換せず📁public/imagesへ複製</li><li>📁src/images内のフォルダ・画像を削除したら📁public/images内も削除する</li><li>フォルダを監視して実行する</li></ul><h3 id="hdebde90f2c">使用したライブラリ</h3><pre><code>npm i fs fs-extra path sharp chokidar</code></pre>

import fs from 'fs';
import fsExtra from "fs-extra"; //ファイルがあっても削除できる
import path from 'path';
import sharp from 'sharp';
import chokidar from 'chokidar';

const srcDir = './src/images/';
const publicDir = './public/images/';
const allowedExtensions = ['.jpg', '.png'];  //対象拡張子

//画像変換処理の設定
const sharpOptions = {
  'jpg' : [
    'jpg',
    {
      quality: 90,
      progressive: true
    }
  ],
  'png' : [
    'png',
    {
      quality: 80,
    }
  ]
}

//ディレイクトリ置換
const replaceFilePath = (beforeDir, afterDir, filePath) => path.join(afterDir, path.relative(beforeDir, filePath));

//webpへの拡張子置換
const replaceWebpFilePath = filePath => filePath.replace(/\.(jpg|png)$/i, '.webp');

//jpg,pngは圧縮処理、それ以外の拡張子はコピー
function optimizeImage(srcPath, destPath) {
  const extname = path.extname(srcPath).toLowerCase();

  if (allowedExtensions.includes(extname)) {
    const convertFormat = /\.png$/i.test(srcPath) ? sharpOptions.png : sharpOptions.jpg;
    sharp(srcPath)
      .toFormat(convertFormat[0])
      .toFile(destPath, (err) => {
        if (err) {
          console.error('Error processing image:', err);
        } else {
          console.log('convert iamge:', srcPath);
        }
      });
  } else {
    fs.copyFile(srcPath, destPath, (err) => {
      if (err) {
        console.error('Error copying image:', err);
      } else {
        console.log('Copied image:', srcPath);
      }
    });
  }
}

//jpg,pngをwebp変換
function convertWebp(destPath){
  const replaceExtension = replaceWebpFilePath(destPath);
  const webpFilePath = path.join(publicDir, path.relative(publicDir, replaceExtension))
  sharp(destPath)
    .webp({ quality: 85 })
    .toFile(webpFilePath)
}

//ディレクトリの監視と画像圧縮・変換の実行
const convertImages = async () => {
  // src/imagesディレクトリの監視を開始
  const srcWatcher = chokidar.watch(srcDir, {
    ignored: /(^|[\/\\])\../, // 隠しファイルを無視
    persistent: true
  });

  srcWatcher
    .on('all', (event, filePath) => {
      const targetFilePath = replaceFilePath(srcDir, publicDir, filePath);
      if( event === 'add' || event === 'change' ){
        optimizeImage(filePath, targetFilePath);
      } else if( event === 'addDir' ){
        fsExtra.ensureDirSync(targetFilePath);
      } else if( event === 'unlinkDir' ){  //フォルダ名を変更・削除したとき
        fsExtra.removeSync(targetFilePath);
      } else if( event === 'unlink' ){  //ファイルを削除したとき
        fsExtra.removeSync(targetFilePath);
      }
    })

  // public/imagesディレクトリの監視を開始
  const publicWatcher = chokidar.watch(publicDir, {
    ignored: /(^|[\/\\])\../, // 隠しファイルを無視
    persistent: true
  });

  publicWatcher
  .on('all', (event, filePath) => {
    const extension = path.extname(filePath).toLowerCase();
    if (allowedExtensions.includes(extension)) {
      if( event === 'add' || event === 'change' ){
        convertWebp(filePath);
      } else if( event === 'unlink' ){
        const removeFilePath = replaceWebpFilePath(filePath);
        if( !fs.existsSync(removeFilePath) ) return;
        fs.unlink(removeFilePath, (err) => {
          if (err) throw err;
          console.log('remove:', removeFilePath);
        })
      }
    }
  })
}

convertImages();

<p>📝参考：</p><p><a href="https://sharp.pixelplumbing.com/" target="_blank" rel="noopener noreferrer">sharp公式ドキュメント</a></p><h3 id="heae24d5f27">フォルダの監視にchokidarを使う</h3><pre><code>npm i chokidar</code></pre><p>監視フォルダを指定すると指定フォルダ内でフォルダ・ファイルの生成や削除などを感知してくれ、イベント名とファイルパスが取得できます。</p><p>今回使用したイベントは以下の通り。</p><ul><li>add / change　追加・変更</li><li>unlink　削除</li><li>addDir　フォルダの追加</li><li>unlinkDir　フォルダの削除</li></ul><p><br></p><p>だいたい使用するファイル名に変更した状態でフォルダに入れることが多いのですがフォルダは都度、監視フォルダ内で生成する予定です。</p><p>フォルダを作成するとaddDirイベントがはしり、publicにフォルダを作成する仕様にしています。</p><p>フォルダを生成した瞬間フォルダ名を確定させていなくても「新しいフォルダー」が生成されてしまう・・🤔？</p><p><br></p><p>問題ありませんでした。</p><p>フォルダの削除でunlinkDirがはしり、publicフォルダも連動させています。</p><p>フォルダ名を確定させていない状態で「新しいフォルダー」が生成され、フォルダ名を変更し確定すると、unlinkDir→addDirのイベントが発生したので「新しいフォルダー」が削除され、確定したフォルダ名のフォルダが生成されました！</p><p><br></p><p>GitHub：<a href="https://github.com/paulmillr/chokidar" target="_blank" rel="noopener noreferrer">chokidar</a></p>

<h2 id="h6478de15d3">Next.jsの実行時に画像の圧縮・生成も実行させる</h2><p>複数のnpm-scriptを実行させるために<code>npm-run-all</code>をインストール</p><pre><code>npm i npm-run-all</code></pre><h3 id="hc04b17e0a2">package.jsonのscriptを変更</h3><p>変更前</p><pre><code>"scripts": {
  "dev": "next dev",
～
}</code></pre><p>変更後</p><pre><code>"scripts": {
&nbsp;&nbsp;"dev": "npm-run-all -p dev:*",
&nbsp;&nbsp;"dev:next": "next dev",
&nbsp;&nbsp;"dev:optimize-images": "node convertImages.mjs",
～
}</code></pre><p>npm run devを実行すると両方まとめて実行してくれます。</p><p><br></p><p>📝参考：</p><p><a href="https://qiita.com/sugurutakahashi12345/items/2a17a3cdfbc4a7e5e4eb" target="_blank" rel="noopener noreferrer">npm-scripts の 順次・並列実行（npm-run-all）</a></p>

<h2 id="ha330d1bff0">無駄な処理が多かった失敗版</h2>

import fs from "fs";
import fsExtra from "fs-extra"; //ファイルがあっても削除できる
import sharp from "sharp";
import path from "path";
import chokidar from "chokidar";

//元画像と変換後画像のディレクトリ
const inputDir = "./src/images";
const outputDir = "./public/images";

//ディレクトリ・ファイル名の置換
const replaceSrcToPublic = path => path.replace(/src/g, "public");
const replacePublicToSrc = path => path.replace(/public/g, "src");
const fileRenameWebp = fileName => fileName.replace(/\.(jpg|jpeg|png)$/i, '.webp');

//画像変換処理の設定
const sharpOptions = {
  'jpg' : [
    'jpg',
    {
      quality: 75,
      progressive: true
    }
  ],
  'png' : [
    'png',
    {
      quality: 70,
    }
  ]
}

//ファイルパスをWindowsからLinux/macOSの形式に変換する関数
const convertFilePathsToUnixStyle = paths => {
  return paths.map((filePath) => {
    const extname = path.extname(filePath).toLowerCase();
    if( ['.jpg', '.jpeg', '.png', '.gif', '.svg'].includes(extname) ){
      return filePath.replace(/\\/g, "/");
    }
  });
}

const optimizeImages = async(filePaths) => {
  try {
    const inputFiles = convertFilePathsToUnixStyle(filePaths);
    for (const file of inputFiles) {
      const outputPath = replaceSrcToPublic(file);
      const convertFormat = /\.png$/i.test(file) ? sharpOptions.png : sharpOptions.jpg;
      //TODO: svgとgifはただファイルコピーしたいだけ

      await sharp(file)
        .toFormat(convertFormat[0])
        .toFile(outputPath)
        .catch(error => {
          console.error(`Error processing ${file}:`, error);
        });
      // sharpモジュールを終了してリソースを開放
      // sharp.cache(false); // キャッシュを無効化
      // sharp.simd(false); // SIMDを無効化
      // sharp.concurrency(0); // 並行処理を無効化
    }
    console.log('img conversion completed!');
  } catch (error) {
    console.error('Error converting to 圧縮:', error);
    throw error;
  }
}

const createWebpImages = async(filePaths) => {
  try {
    const beforeImageFiles = convertFilePathsToUnixStyle(filePaths);
    for (const beforeFile of beforeImageFiles) {
      const fileNameWebp = fileRenameWebp(beforeFile)
      await sharp(beforeFile)
      .webp({
        quality: 60,
        lossless: true,
      })
      .toFile(fileNameWebp)
      .catch(error => {
        console.error(`Error processing ${beforeFile}:`, error);
      });
      console.log(`create Webp -> ${fileNameWebp}`);
    }
    console.log('create WebP completed!');
  } catch (error) {
    console.error('Error creating to WebP:', error);
    throw error;
  }
}

//inputDir内の画像を圧縮する
const createOptimizeImages = (filePath) => {
  let batchFileList = [];
  let batchTimeout = null;
  const createImgPath = replaceSrcToPublic(filePath);
  const imgSrcMs = fs.statSync(filePath).birthtimeMs;
  const imgPublicMs = fs.existsSync(createImgPath) && fs.statSync(createImgPath).birthtimeMs;
  if( imgSrcMs < imgPublicMs ) return

  batchFileList.push(filePath);
  if (!batchTimeout) {
    batchTimeout = setTimeout(async () => {
      try {
        await optimizeImages(batchFileList);
      } catch (error) {
        console.error('Error optimizing images:', error);
      }
      batchFileList = [];
      batchTimeout = null;
    }, 2000);
  }
}

//inputDirのフォルダ・ファイルを削除したらoutputDirのファイルを自動で削除する
const removeFile = (filePath) => {
  const relativePath = path.relative(inputDir, filePath);
  const destFilePath = path.join(outputDir, relativePath);
  if ( fs.existsSync(destFilePath) ) {
    const stats = fs.statSync(destFilePath);
    if (stats.isDirectory()) {  //フォルダか判定
      fsExtra.removeSync(destFilePath, (err) => {
        if (err) throw err;
        console.log(`${destFilePath}を削除しました`);
      });
    } else {
      const destWebpFilePath = fileRenameWebp(destFilePath);
      fs.unlink(destFilePath, (err) => {
        if (err) throw err;
        console.log(`${destFilePath}を削除しました`);
      });
      if ( destFilePath === destWebpFilePath || !fs.existsSync(destWebpFilePath) ) return;
      fs.unlink(destWebpFilePath, (err) => {
        if (err) throw err;
        console.log(`${destWebpFilePath}を削除しました`);
      });
    }
  }
}

//inputDirにフォルダがある場合outputDirにフォルダ作成
const createAddDir = (filePath) => {
  if( fs.statSync(filePath).isFile() ) return;
  return fsExtra.ensureDirSync(replaceSrcToPublic(filePath))
}

// optimizeImgs関数を呼び出すことでファイルの監視と処理を行う関数
const watchOptimizeImgs = async () => {
  console.log('Start watching images...');

  // let batchTimeout = null;
  // let batchFileList = [];
  let batchTimeout2 = null;
  let batchFileList2 = [];

  // inputDirを監視
  chokidar.watch(inputDir).on('all', (event, filePath) => {
    switch (event) {
      case "add":
        createOptimizeImages(filePath);
        break;
      case "addDir":
        createAddDir(filePath);
        break;
      // case "unlink":
      // case "unlinkDir":
      //   removeFile(filePath);
      //   break;
      default:
        break;
    }
  });
  chokidar.watch(outputDir).on('add', (event, filePath) => {
    createWebpImages(filePath);
  })
  chokidar.watch(outputDir).on('all', (event, filePath) => {
    const createImgPath = replacePublicToSrc(filePath);
    if( event === 'add' && /\.(jpg|jpeg|png)$/i.test(createImgPath) ){
      console.log(createImgPath);
      //ファイルがあって日付が新しい場合だけwebp生成する
      if( fs.existsSync(createImgPath) && fs.statSync(filePath).birthtimeMs > fs.statSync(createImgPath).birthtimeMs ){
        batchFileList2.push(filePath);
        // 一定時間経過後にバッチ処理を実行
        if (!batchTimeout2) {
          batchTimeout2 = setTimeout(async () => {
            try {
              await createWebpImages(batchFileList2);
            } catch (error) {
              console.error('Error optimizing images:', error);
            }
            // バッチ処理用のリストをクリア
            batchFileList2 = [];
            batchTimeout2 = null;
          }, 5000); // 5秒間のディレイを設定
        }
      }
    }
    //publicにだけあるファイルはpublicから削除する
    if( event === 'add' && /\.(jpg|jpeg|png|svg|gif)$/i.test(filePath) ){
      if (!fs.existsSync(createImgPath)) {
        fs.unlink(filePath, (err) => {
          if (err) throw err;
          console.log(`${filePath}を削除しました`);
        });
        //webpも消すように処理する
      }
    }
  });
}

watchOptimizeImgs();