社内イベントのLP作るにあたって技術選定をした振り返り

はじめに

弊社では有志による業務時間外の社内勉強会などが行われることがあるのですが、非エンジニアも巻き込んだ少し規模の大きい社内イベントが9月の頭にありました。
特に誰かから作って欲しいと頼まれたわけではなく、エンジニア、デザイナーとして何かイベントを盛り上げる様なものがあると良いなと考え、@naomunaomu と一緒に特設LPを作って公開しました。

私は技術選定、主に表示するデータの加工、サイト公開にあたっての設定などを行ってました。

残念ながらサイトをお見せすることは出来ないのですが、使用した技術とその振り返りを出来ればと思います。

使用した技術

技術を考えるにあたっては以下のことをぼんやりと考えてました。

• いかに工数をかけないか
  使われるのが1週間ほどのお祭りサイトなので、RDBだったり、サーバーを立てることも削減できないかなと考えてました。
• いかに費用をかけないか
  同上
• いかに業務内で使っていないスキルを使うか
  こういった業務とは関係のないものだからこそ、技術的な挑戦ができるので、普段触ったことのないものを少し使いたいなというモチベーションはありました。

今回はざっくりと以下のものを使用しました。

• ホスティング
  • Vercel
• バックエンド
  • SpreadSheet
• フロント
  • Gridsome(Vue.js 2.x)

各分野に関して、もう少し詳しく

ホスティング

ホスティングサービスのVercelを採用しました。

• 速さと見た目のシンプルさ
• Git Integration
• Deploy Hooks(API叩いたらbuildしてデプロイしてくれる)
• 無料プランでbasic認証を組み込むことができる。
• 私自身使ったことがなかったので、使用感を知りたかった。

バックエンド

Google Spread Sheetにデータを記入して、build時にJSON形式吐き出すようにしました。
今回DBなどを用意するのは少し大変だなと思ったのと、イベント参加者の情報などを既にシートで記入、管理をしていたので、整形をして渡してあげれば良いのでは？という結論に至りました。

フロントエンド

**Gridsome**というVue2.x系のフレームワークを使用しました。
いわゆるReactにおけるGatsbyのVue版というイメージです、静的サイトの作成に優れていて、プラグインがそこそこ豊富です
今回サイト作成に関わる二人ともVueの利用経験があったため、Vueの採用は即決でした。

おいおいじゃあなんでVue3.xじゃないんだよとか思うかもしれません。
実際最初はVue3.x + viteで爆速開発環境作ってウキウキしたかったのですが、今回は見送りました。
理由としては2点

• Vuetifyなど、一部使いたいプラグインツールが3系に対応しておらず、導入が少し手間に感じた。
• Gridsomeのプラグインの中でいくつか需要のあるものがあり、そちらを優先した。

シートをデータソースとして扱うにあたって、良さげなプラグインがあったのでこれ楽じゃねと思っていました。

振り返り

よかった点

• Vercel良かった
  • 勝手にdeployしてくれるので、お互いの開発が止まらない。
  • ブランチ切って検証環境立ててくれるので、確認も楽。
  • 完全無料で運用ができた。
  • SpreadSheetの更新に対して、GASでAPI叩いてdeployができるので、常に最新の情報の載ったLPができた。
• Gridsomeはまあまあ良かった
  • 公式のドキュメントが充実しているので、お互い必要なツールの導入はスムーズだった

うまくいかなかった点

• GridsomeのPluginを過信していた。
  • 使おうと思っていたプラグインが機能不足だったり。
    • 前述の良さげなプラグイン、GCPのサービスアカウントによるシートとの連携ができず、今回用件を満たさないことに後から気づいて大後悔時代。

まとめ

• 技術選定の軸を定めておくと、割と決めやすい。
  • 工数なのか、綺麗さなのか、挑戦なのかとか
• きちんとプラグインのリポジトリなどもみた上でしっかり検討しよう

小規模かつ、自分たちでワイワイ作るものだったので、特に後悔はないです。むしろ個人的にも色んなプラグインを知ったり使ったりする良い機会だったなと考えてます。
また別な機会に今回の経験とかが活かせると良いなと思います。