かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript 文章を縦書きにしたくなる時あるよね

王 白 但 帰 君 問 下
維 雲 去 臥 言 君 馬
  無 莫 南 不 何 飲
送 尽 復 山 得 所 君
別 時 問 陲 意 之 酒

突然漢詩Twitter に投稿したくなったときに縦書きを自分で作るの大変だから変換できると漢詩投稿しやすいね。
と思って ChatGPT に聞きながら縦書きに変換するコード作ってみた

サンプル

See the Pen 縦書き変換 by KIKIKI (@kikiki_kiki) on CodePen.

縦書きに変換

[1][2][3],
[4][5][6],
[7][8][9],

↓ 

[7][4][1],
[8][5][2],
[9][6][3],

文章を多重配列のマトリクスと考えて、それを回転させれば良い

縦書きに変換するスクリプト

const convertTategaki = (str: string): string => {
  // 与えられたテキストを行ごとに分解
  const data = str.split('\n').map((line) => line.split(''));
  // 行ごとに文字数が異なる可能性があるので最も文字数のある行の長さを取得
  const maxLength = Math.max(...data.map((arr) => arr.length));
  // 配列の中から i 番目だけを集めた配列を作る。文字がない場合は全角スペースを入れる
  // 左書きなので各配列を reverse しておく
  const res = Array.from(Array(maxLength), (_, i) =>
    data.map((row) => row[i] ?? ` `).reverse(),
  );
  // 行ごとに結合して返す
  return res.map((line) => line.join('')).join('\n');
};

行の長さが異なる場合、短い文字数の行では row[i]undefined になる箇所が出てくる
縦書きにしたいケースは基本的に日本語か漢字だろうという前提で、行の長さが異なる場合は全角スペース (` `) を入れるようにした

多重になった配列をループで回しているのでもう少し効率の良い方法もありそうな気もするが、 ChatGPT で要件の指示を出して書いてもらったものを少し修正するだけで十分動くコードができた

おわり

  別 桃 笑 問
李 有 花 而 余
白 天 流 不 何
  地 水 答 意
山 非 窅 心 棲
中 人 然 自 碧
問 間 去 閑 山


[参考]