web1weekで「打線組んだｗｗメーカー」をつくりました！

打線組んだｗｗメーカー を作りました！

投稿にあたり他の方と完全にネタ被りをしてしまったのですが、使っている技術周りは違ったので臆せず投稿しようと思います。笑

(OGPも含めきれいに実装されていた方の打線メーカーはこちら)
https://crieit.net/boards/web1week-202009/1dd1b99ee139f324c20408ce24eecec0

作った経緯

今回のテーマが「2」ということで、現代野球は2番打者に強打者を置くか、いぶし銀な打者を置くか、采配が分かれることに注目し、なんJでおなじみの「打線組んだｗｗ」を簡単に作れるWebアプリを作りました。

使った技術

• Next.js
• TypeScript
• Vercel
• Cloud Functions
• Cloud SQL (MySQL)

今回はNext.js v9.5で正式に導入されたStatic Generation(段階的な静的再生成)が使いたく、試してみました！
ビルドされたページは静的ページとして配信されるのですが、投稿されると新しい静的ページを実行時に登録することができます。

また、今回はFire StoreのようなNoSQLではなくRDBSが使いたかったので、Cloud　SQLとCloud Functionsを繋げてサーバレスバックエンドの構築を目指しました。

学び

• Static Generation
  Next.jsのStatic GenerationはgetStaticPathsとgetStaticPropsを対象のページに記述すると、静的ページとしてビルドされるだけでなく、getStaticPathsのfallbackパラメータをtrueにするだけで実現できました！
  参考) https://qiita.com/thesugar/items/73a169c4d23e4bd91554#安定版としての段階的な静的再生成

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await axios.get('<APIのURL>')
  const data = await response.data
  const paths = data.map((data) => `/post/${data.postId}`)
  return { paths, fallback: true }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params.id
  const response = await axios.get('<API の URL>', {
    params: { postId: id },
  })
  const data = await response.data
  return {
    props: {
      data,
    },
    revalidate: 1,
  }
}

• Cloud SQLのマシンスペック
  特にマシンスペックを指定せずMySQLを立てていたのですが、立てて2日間で400円以上かかっていることが判明し、一番低いスペックまで落としました。
  Cloud SQLはインスタンスが立ち上がっている間従量課金になるので、初期段階で自分の開発規模に見合うスペックに設定することが大事ですね。
  　クラウド破産にならなくてよかったw(もう1年分の無料期間は過ぎていたので...)

やりたかったけどできなかったこと

• OGP画像の生成
  Vercel Functionsを使えば実現できるらしいのですが、画像のデザインや実装が時間切れで間に合わず...
• コメント機能
  投稿された打順について「これは首位打者狙える」「上位打線屈強なのにこの下位打線は草」「これは万年Bクラス采配ですわ」なんて書き込めるようにしたかったのですが時間切れ
• 打順の背景色
  パワプロ準拠で投手：ピンク、捕手：水色、内野手：黄色、外野手：緑にCSSの振り分けをしたかったのですがこれも時間切れ
• 画像出力とテキスト出力
  テキスト出力できればそのままなんJに貼れて良いかもなーと思った次第でしたがこれも(以下略)
• 入力フォームの順序入れ替え
  1番打者に入力したけど6番くらいの方があうなーとなったときに、入力値入れ替えができたら良いかなと思ったものの実装する時間が(以下略)

まとめ

まさかの同イベントで同じネタの方がいらっしゃるとはwなアプリになってしまいました笑

もっと足したい機能があるので、今回のイベントではプロトタイピングと位置付けて、サービスの拡大ができたら面白いかなーと思います。

打線組んだｗｗメーカー はこちら