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

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

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

スプレッドシートにデータ全部入力する
vscodeでjsの二重配列表記に変換する
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