前書き
はじめまして、初投稿になります。
自分は常日頃から世の中へアウトプットする機会をうかがっていました。
しかしエンジニアとしての技術力もそこまで自信ないし、
読書習慣がないから文章もお粗末なので、腰を重くしていました。
そんな中、結婚式・30代を迎えせっかくの機会と思い書き始めました。
1.なぜ作ったのか
・節約のため
・自己学習のため
昨年の12月から結婚式の準備が始まり、11月に式を挙げました。
見積もりの段階で、予算内に収めるべくあらゆるものを削いできました。
その中で招待状は、友人には電子の招待状で
親戚には紙の招待状で送るということになりました。
早速電子の招待状について調べてみると今では無料で作れるサービスが多くあり、
簡単に作ることができると判明しました。
しかし、無料版だと人数や機能に制限があり、
結局活用するには課金する必要がありました。
そんな中、人生二度目の転職をしました。新しい現場ではNext.jsを扱っており、
今までフロントはJqueryやVue.jsしか触っていなかったので手探りの状態でした。
参考書やUdemyを参考にしながらある程度の基礎知識を身に着けることはできたものの、
実務レベルの技術力をあげるのにそこそこ苦戦していました。
そこで、じゃあNext.jsで招待状作っちゃえばいいじゃないとなりました。
2.どう作ったのか
・Next.js v15
・shadcn-ui v0.8.0
・GAS(Google App Script)
・Vercel
フロントは、Next.jsと決まりましたが他は全く決めずに実装を始めました。
画面数も表示したい項目もそこまで多くなかったので、
1ヶ月かからない位で大枠は完成していました。
UIに関しては、そこまで凝ったものを想定していなかったのと
導入が容易だったshadcn-uiを選びました。
使いたいコンポーネントを持ってくるだけで簡単に作れたので、
選んでよかったと思っています。
次にバックエンド側をどうしようか考えたときに、
直近で使った経験のあったFirebaseを考えていたのですが、
結局集めた情報をスプレッドシートにまとめて当日の名簿等に活用したかったため、
GASを選びました。
導入も初めてでしたが、調べながらやっても数時間で実装することができました。
回答結果を送信するだけに絞ったのも実装時間の短縮につながったと思います。
最後にデプロイですが、Next.jsを使っていたので当然のようにVercelを使って行いました。
連携もすごく簡単で、こちらもすぐにうまくいきました。
3.良かった点
・回答内容を自分が管理したいように管理できた
・大きな不具合がなかった
何より良かったのが、手軽に回答結果を管理できたことです。
無料で作れるサービスを活用したことがないので、比較できないところではありますが、
個人的に欲しい情報・要らない情報を自分で絞って実装しているので、
ストレスなく管理できました。
次いで、初めて自分一人で作ったサービス？を利用してもらったので、
どんな感じになるのか不安な部分はありましたが、
無事に皆さんから回答をもらうことができ良い成功体験でした。
（後々聞いた話で、一言コメントで改行をすると送信になってしまったというケースがちらほらあったので、完璧ではありませんでした。）
4.苦労した点・後悔した点
・モチベーションの維持
・作業時間の確保
・UIのこだわり
実装を進める中で、「やっぱ無料ので作ればよくね？」っていうのがずっと頭にありました。
他にも結婚式の準備等忙しい中で、作業時間の確保が取れず
大したスケジュール管理もしていなかったので、
本当に終わるのかという疑問と闘いながらやっていました。
完成させることが絶対条件であったため、元々デザインセンスもないので、
UIについてはあきらめていました。
今思うとせっかく自分で作っているのだから、もっとオリジナリティを
出せたのではないかとちょっと後悔しています。
唯一こだわったのは、間柄を選択してもらって「友人」だったら
二次会の案内を表示するようにしたところです。
（二次会情報をスクショさせているのはイケてないですが。。。）
・間柄選択前
・間柄選択後
5.最後に
大した内容ではありませんが、ここまで読んでいただきありがとうございます。
アウトプットするにあたって、色々思い返すことがあり勉強になりました。
最終的には結婚式も成功し、全体通して良い経験となりました。
エンジニアの方で、これから結婚式を考えている方はぜひ招待状作ってみてください！