はじめに

この記事は 茨大 Advent Calendar 2021 17日目の記事で。

こんにちは、@kijikunnnです。
この記事は16日目の記事「小一時間でクソアプリを作ってみた ~ 技術紹介編 ~」の続きとなっています。
まだ読んでいない方、Blitz.jsってなんだろう？という方はBlitz.jsをまだまだ勉強中の身で拙い文章ですがぜひ読んでみてください。
また、地味にQiitaは初投稿だったのでこちらの記事を参考に書かせていただきました。

▼フリート芸術を後世に残すべくWebアプリを作った【Fleets Forever!!】

フリート愛に溢れたおもしろい記事だったので、こちらもぜひ読んでみてください。
それでは、よろしくお願いします。

作ったもの

今回、私が勉強中ながらも推しているBlitz.jsで作ったクソアプリがこちらです。

▼「10秒スタジアム」

今回はBlitz.jsを布教するために何か簡単なアプリを作ろうと思いました。しかし、チュートリアルを載せただけでは面白みもないので、私が小学生の頃に流行った5秒ピッタリで止めるあのオモチャ「5秒スタジアム」の時間を倍の10秒にしたものを作成しました。
ランキング機能もあるので、ぜひ1位を目指してみてください。

使った技術

それでは、ここからは技術的なことを書いていこうと思います。

ライブラリ

• Blitz.js - 今回の目玉であるReactのフルスタックフレームワーク。Railsにインスパイアされたこともあり、Railsを使った経験のある方はもしかしたら、「これRailsでもやったことある！」と感じると思います。早くv1リリースしてほしい。
• Tailwind CSS - 先日v3がリリースされたutility-first CSS フレームワーク。v3がリリースされましたが、ぎりぎりリリース前に作ってしまったのでv2で書きました。時間がある時にv3に修正します。
• passport-google-oauth20 - OAuth2.0APIを使用してGoogle認証をするためのライブラリ。Blitz.jsの公式ドキュメントではTwitter認証が使われていましたが、Googleの方が一般的だろうと思い採用。今回のクソアプリを作る過程で最も時間がかかった。

ホスティング

• Heroku - 言わずと知れたSalesforce社製のDaaS。本当はVercelにデプロイを考えていましたが、別にDBを用意したり、そのDBのホスティングが必要？だったり面倒そうなので、全てが詰まった簡単にデプロイできるHerokuを採用。

▼リポジトリはこちら

Blitz.js

今年、v1が出る予定でしたが結局出ず終いで地味にショックでしたが、裏を返せば洗練して良いものを作っているということなので、来年こそはv1が出ることを期待しています✨
Blitz.jsは最初からユーザーモデルに加えて、ユーザーがログインしているかのセッション管理のモデルも最初から備わっており、本クソアプリでも存分に使わせていただきました。
また、モデルの作成・更新、クエリやミューテーション用のファイル作成等もCLIで簡単にできるので、こちらも存分に使わさせていただきました。

おわりに

今年は初めてアドベントカレンダーを書かせていただきました。来年からはエンジニアとして社会に出るのでアドベントカレンダーに限らず情報を発信していけたらなと思います。それでは、皆さん良いお年を。