<p><span class="txt-small">この記事の一部はChatGPTで文章校正をしています。</span></p><p>スプレッドシートでデータを整理する際、見やすさを向上させるためには、罫線や背景色の設定が欠かせません。</p><p>全体に罫線を引くのは簡単ですが、項目ごとに罫線で囲むことや、後から行が増えたり移動したりする場合の管理は面倒です。そこで、自動で罫線を引くGoogle Apps Script（GAS）を作成しました。</p><p>※特定のデータ入力形式を想定したGASになります。<br>※デプロイ手順は省きます。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9ca710eb801849ca9d5113539d985542/image.png" alt="" width="1298" height="270"><figcaption>左）罫線未設定　右）GASの自動罫線を適応した状態</figcaption></figure>

<h2 id="h8ef3fd67b8">出来上がりのイメージ</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/705ca8afb3364b299974ce1aadef5d75/borders.gif" alt="" width="1005" height="620"></figure><ul><li>大・中分類はグループとして複数のセルをまとめて罫線で囲む</li><li>指定列以降は全てのセルに罫線を引くように設定</li><li>入力画面から指定列を設定できるようにする</li></ul>

<h2 id="h1d69706914">完成したコード</h2>

//01. カスタムメニューの作成とダイアログの実行
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Menu')
    .addItem('自動で罫線を引く', 'showDialog')
    .addToUi();
}

//02. ダイアログ画面Page.htmlを表示させる
function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('Page')
    .setWidth(400)
    .setHeight(180);
  SpreadsheetApp.getUi()
    .showModalDialog(html, '自動で罫線を引く');
}

//04. アルファベットを数字に変換して返す
function letterToColumn(letter) {
  let column = 0;
  const length = letter.length;
  for (var i = 0; i < length; i++) {
    column += (letter.toUpperCase().charCodeAt(i) - 64) * Math.pow(26, length - i - 1);
  }
  return column;
}

//03. 罫線を自動で引く
function optimizeBorders(specifiedColumn) { 
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const lastRow = sheet.getLastRow();
  const lastColumn = sheet.getLastColumn();
  const specifiedColumnNumber = letterToColumn(specifiedColumn);  //指定列のアルファベットを数字に変換

  //データのある範囲の上下左右に罫線＋内側の垂直に罫線
  sheet.getRange(1, 1, lastRow, lastColumn).setBorder(true, true, true, true, true, false);

  //指定した列以降のすべてのセルに罫線を引く
  sheet.getRange(1, specifiedColumnNumber, lastRow, lastColumn - specifiedColumnNumber + 1).setBorder(null, null, null, null, null, true);

  const data = sheet.getDataRange().getValues();

  for (var row = 1; row < lastRow; row++) {
    // 各行をチェックして罫線を引く
    for (var column = 1; column <= specifiedColumnNumber; column++) {
      // セルが空白でない場合に自身の下に罫線を引く
      if (
        (data[row][column - 1] !== '') ||
        (column !== 1 && data[row][column - 1] === '' && data[row][column - 2] !== '') ||
        (column !== 1 && data[row - 1][column - 1] === '' && data[row - 1][column - 2] !== '')
      ) {
        sheet.getRange(row, column, 1, 1).setBorder(null, null, true, null, null, null);
      }
    }
  }
}

<p>自動でグループ判定し罫線を引くスクリプトです。<br>
すべての列のセルに罫線を引く場合は、列のアルファベットを指定してください。<br>
  <em>例）AA</em>　指定列以降の上下左右に罫線が適用されます。
</p>
<div class="box">
  <table>
    <tr>
      <td>
        列名<span class="small">（アルファベット）</span>
      </td>
      <td>
        <input type="text" max="4" name="specifiedColumn" id="specifiedColumn" />
      </td>
      <td>
        <input type="button" value="実行する" onclick="executeBorderFunction(this)" />
      </td>
    </tr>
  </table>
</div>
<script>
//05. 関数の実行と処理結果のダイアログ表示
  function executeBorderFunction(button) {
    const specifiedColumn = document.getElementById("specifiedColumn").value;
    button.value = "実行中...";

    google.script.run.withSuccessHandler(function(){
      button.value = "完了";
      google.script.host.close();
    }).optimizeBorders(specifiedColumn);
  }
</script>
<style>
  p {
    font-size: 80%;
  }

  .box {
    margin-top: 10px;
    padding: 15px;
    background: #f9fbfd;
    border-radius: 5px;
  }

  .small {
    font-size: 70%;
  }

  table td {
    padding: 0 5px;
  }

  input[type="text"] {
    padding: 0 10px;
    width: 80px;
    height: 35px;
    box-sizing: border-box;
  }

  input[type="button"] {
    height: 35px;
    border: 0;
    padding: 0 10px;
    background: #c2e7ff;
    border-radius: 5px;
    box-sizing: border-box;
  }
</style>

<h3 id="hba51ec0282">01. カスタムメニューの作成とダイアログの実行</h3><p>onOpen() 関数では、Google Sheetsのスプレッドシートを開いた際に自動的に実行されるイベントを定義しています。</p><p>この関数は、スプレッドシートのユーザーインターフェースにカスタムメニューを作成し、「自動で罫線を引く」という項目を追加しています。ユーザーはこの項目を選択することで、showDialog()が実行されます。</p><h3 id="h00adcd9568">02. ダイアログ画面Page.htmlを表示させる</h3><p>showDialog() 関数を定義し、モーダルダイアログを表示します。</p><p>HtmlService.createHtmlOutputFromFile() で 'Page' ファイルからHTMLを取得し、setWidth(400)とsetHeight(180)でダイアログのサイズを設定します。</p><p>SpreadsheetApp.getUi().showModalDialog(html, '自動で罫線を引く') でダイアログを表示します。</p><h3 id="h5d946290aa">03. 罫線を自動で引く</h3><h4 id="hde29f3733c">03-01. データがある範囲を取得</h4>

const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const lastRow = sheet.getLastRow();
const lastColumn = sheet.getLastColumn();

<p>アクティブなスプレッドシートを取得し、シート内で最後にデータが入力されている行と列の番号を取得します。</p><h4 id="h432008ac85">03-02. 一番外側を罫線で囲み垂直線を引く</h4><p><code>sheet.getRange(1, 1, lastRow, lastColumn)</code>でデータのある範囲を指定しています。</p><p><code>setBorder(true, true, true, true, true, false);</code></p><p><code>setBorder(上, 左, 下, 右, 垂直, 水平);</code></p><p>データの状態に関係なく、全てのセルに左右の罫線を引くために、各セルに個別に罫線を設定せず、まとめて指定した範囲内の垂直線を一括で設定しています。</p><h4 id="hbc9fabc27f">03-03. 指定した列以降のすべてのセルに罫線を引く</h4><p>ダイアログで入力したアルファベット（列）を数字に変換し、その列以降のセルに罫線を引く範囲を指定しています。</p><pre><code>sheet.getRange(1, specifiedColumnNumber, lastRow, lastColumn - specifiedColumnNumber + 1)</code></pre><p>getRange(開始行, 開始列=ダイアログで入力した列, 最終行=取得した最終行, 最終列=取得した最終列-ダイアログで入力した列+1)</p><p><code>setBorder(null, null, null, null, null, true)</code></p><p>[03-02]で設定した罫線が消えないように、上下左右・垂直には<code>null</code>を指定し、水平方向には<code>true</code>を指定して、罫線を設定します。</p><h4 id="hfaec924370">03-04. 残りの行・列をループチェックして罫線を引く</h4><ul><li>セルが空白でない場合</li><li>セルが1列目でない場合で、その左隣のセルが空白で、その左隣のセルの上下にデータがある場合</li><li>セルが1行目でない場合で、その上のセルが空白で、その上のセルの左隣にデータがある場合</li></ul><p>この条件の場合にセルの下に罫線を引きます。</p><h3 id="h0e8d5ac8e7">04. アルファベットを数字に変換して返す</h3><pre><code>const specifiedColumnNumber = letterToColumn(specifiedColumn);</code></pre><p>スプレッドシートの列はアルファベット表記のため、列番号を数える手間を省くため、数字ではなく列のアルファベットを与えて、アルファベットの列名を数字に変換するようにしました。</p><p>アルファベットの各文字を数値に変換し、26進数の基数で桁ごとに計算して、最終的な列番号を求めます。</p>

<h3 id="h145fdb3ec8">05. 関数の実行と処理結果のダイアログ表示</h3><p>ボタンがクリックされたときに実行されます。まず、指定された列のアルファベット表記を取得し、その値は specifiedColumn 変数に格納されます。次に、ボタンの値を「実行中...」に変更し、スクリプトが処理中であることをユーザーに通知します。</p><p>その後、google.script.run.withSuccessHandler() メソッドを使用して、optimizeBorders() 関数を実行します。この関数は、指定された列のアルファベット表記を引数として受け取ります。処理が完了した後、ボタンの値は「完了」に変更され、その後 google.script.host.close() を呼び出して、ダイアログを閉じます。</p><blockquote><p>ダイアログは、HTML サービス インターフェースのクライアント側で google.script.host.close() を呼び出すことで閉じることができます。このダイアログは、他のインターフェースでは閉じることができません。閉じる操作は、ユーザー自身または自身で行う必要があります。</p><p><a href="https://developers.google.com/apps-script/guides/dialogs?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google for Developers</a></p></blockquote>

<h2 id="h959a42ac9c">実行時間</h2><p>実行範囲が広いと完了するまでに時間を要します。</p><ul><li>5列10行の範囲で3～5列目を全罫線設定した場合・・・2.141秒</li><li>5列10行の範囲で5列目を全罫線設定した場合・・・3.706秒</li><li>4列2300行の範囲で3～4列目を全罫線設定した場合・・・8.689秒</li><li>4列2300行の範囲で4列目を全罫線設定した場合・・・20.032秒</li></ul><p></p>

<h2 id="ha214098e44">まとめ</h2><p>基本的には、大分類や中分類などのグループ化する項目はデータ開始行と揃えることで、今回のGASでの自動罫線が有効に利用できます。</p><p>意図していない箇所に空白セルが混ざると、罫線の位置がずれることがありますが、データの追加や変更後に毎回罫線を修正する手間を省くために、ある程度のルールを設けて入力することで、罫線の引き直しをする手間を省くことができるようになりました。</p><h4 id="h9a3f3348bf">📝参考</h4><ul><li><a href="https://zenn.dev/matsumaru/articles/840f6aaa905f39" target="_blank" rel="noopener noreferrer nofollow">【GAS】スプレッドシートへの勤務表自動入力システムを作ってみた</a></li><li><a href="https://developers.google.com/apps-script/guides/dialogs?hl=ja#page.html_1" target="_blank" rel="noopener noreferrer nofollow">Google Workspace ドキュメントのダイアログとサイドバー</a></li></ul>

GASを使用してスプレッドシートデータを自動的にグループごとに罫線で囲むスクリプト作成

<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>