結婚式場の住所録入力formがめんどくさかった件

目次

結婚式が提供している出席者の住所録入力formがめんどくさくてchromeのスクリプトを作ったので誰かの役に立って欲しい。

1時間ぐらいかかってしまって、「これ手作業の方が早かったんちゃう?」と少し後悔してる。まぁブログのネタになるならええかという感じで今に至る

  1. スプレッドシートにデータ全部入力する
  2. vscodeでjsの二重配列表記に変換する
  3. chromeのdevtoolで実行

という手順。

// 2で変換したもの
const a = [
    ["1","父","o","家族","山田","太郎","ヤマダ","タロウ","京都府xxxx市yyyy町1-2"],
    ["2","母","o","家族","山田","花子","ヤマダ","ハナコ","京都府xxxx市yyyy町1-2"],
    // ...
];


// かたかな1
document.querySelectorAll(".katakana").forEach((k, i)=>{
if (i<=1 || i%2 !== 0) return;

const realIndex = (i-i%2)/2 - 1
if (realIndex>=25) return
k.value = a[realIndex][6]
})

// かたかな1
document.querySelectorAll(".katakana").forEach((k, i)=>{
if (i<=1 || i%2 !== 1) return;

const realIndex = (i-i%2)/2 - 1
if (realIndex>=25) return
k.value = a[realIndex][7]
})

// ひらがな1
document.querySelectorAll(".hiragana").forEach((k, i)=>{
if (i<=7 || i%8 !== 0) return;

const realIndex = (i-i%8)/8 - 1
k.value = a[realIndex][4]
})

// ひらがな2
document.querySelectorAll(".hiragana").forEach((k, i)=>{
if (i<=7 || i%8 !== 1) return;

const realIndex = (i-i%8)/8 - 1
k.value = a[realIndex][5]
})

感想

  • 絶対スプシで入力する方が便利で楽。フィルタ・ソートも簡単なので良い。
  • valueに直詰めなので、onblurなどのイベン発火に依存する入力formを使うと壊れる可能性があ理想
  • DOMの構造があまりシステムリーダブルではなかった。
    • 姓と名のinputがclass/idを使っても一意に定まってなくて、姓か名か順番で識別するしかなく汚いコードになった感じがする
  • CSVインポートほしい・・・
tech  js 

See also