たった2日で PageSpeed Insights 100点の仕事紹介サイトを作成した(ジョークサイト)
2日間でJoke Jobというサイトを作成して公開したのでそのお話をいたします。
作ったもの
Joke JobというWebサイトです。
いわゆるジョークサイトで、架空のお仕事を紹介することが趣旨です。
ファーストリリースの段階で複数の仕事があるので、一部を紹介すると「軍手を道路に設置する仕事」や「あらびきコショウを元の丸い状態になるよう組み立てる仕事」などがあります。
道路に軍手が落ちてるのは彼らの仕事だったのですね。
まさに世界は誰かの仕事でできてる。
ぜひアクセスしてみてください✨
PageSpeed Insights で100点を目指した
正直、開発を始めた段階では目指してませんでした。
Astrojsを使ったので早くなるだろうとは思ってましたが。
開発終盤でPageSpeed Insightsのレポートを見ながら改善していたら100点になりました。
SSGなのでFCP早いですね。
Astrojsは極力フロントエンドにJSを送らないようにビルドしてくれるので、高速なサイトを作りやすかったです。
Nohでは苦戦しているTBTもこんなに短くなっています。
とはいえ、各仕事を紹介するページはファーストビューに画像があるので、さすがに少し遅くなります。
これでも画像はサイズをリサイズさせた上にWebPにしてかなり小さくしているのですが、Googleさんはまだご不満みたいです。
8kibかあ...
これから開発を続けるとメインの画像がファーストビューに入らなくなる予定なので、loading="lazy"をつけてもう少し早くできると思ってます。
モチベーション
おもしろいものが作りたかった。そして作るなら手早く。
「ゴマ塩をゴマと塩に分ける仕事」にツボった
YouTubeでShort動画に時間を溶かしていると、ある流れてきた動画内の「ゴマ塩をゴマと塩に分ける仕事」というワードにツボりました。
こういうくだらない感じのボケがホント好きです。
そういうくだらない内容を集めたWebサイトを作りたいと、一緒に遊んでた友達に話したらいいじゃんといわれたのですぐ開発に着手しました。家に帰った3日後の夜に（すぐやれ）。
高速にリリースが重要な理由
個人でいくつかプロダクトを作っているのですが、大きなプロダクトが多くそれぞれ非常に時間がかかってしまってます。
例えば、Nohという技術ブログ投稿サイトを開発しています。Nohは2023/04に開発を始めたのですが、業務終了後にコツコツ開発を進めて2023/11に最初の機能となるQ&A機能をリリースしました。この時点で半年以上かかっています。
その後、Noh開発に集中することで、2024/02にブログ機能、2024/06にミニブログ機能、2024/07に記事翻訳機能のBeta版を立て続けにリリースしています。
しかし、それだけの時間と工数をかけた結果として今のところ良い結果は出ていません（ホントに悲しい。もちろんこれから伸ばすように頑張ります）。
FirebaseやCloudRunなどを活用することで工数を減らす工夫をしていましたが、認証周りやマークダウンエディタとリアルタイムプレビューなどの開発はどうしても時間がかかりました。
元からわかっていましたが、工数をかけても使ってもらえるわけではないことを再度認識する結果になりました。
そこで次に作るアプリはスモールスタート、小さい規模で素早くスタートさせることに重きを置こうと考えました。
あくまで1人で開発を進める個人開発では、小さく始めて成功しそうと判断したタイミングで工数のかかる機能を追加した方が良いという意見です。
技術選定
- Webフレームワーク: Astro
- CSSフレームワーク: tailwindcss + daisyUI
- ホスティング: Cloudflare Pages
- ドメイン: Cloudflare Registrar
今回作成するのは静的なサイトなのでNextJSは使わず、Astroを使う方針としました。
Astroは近年話題になってるフレームワークで非常に開発体験が良かったです。
CSSフレームワークはtailwindcssを使うことにしました。
普段はMUIを使っているのですが、MUI(Emotion)はCSS in JSなのでビルド時にJSを排除するAstroと相性が悪く使えません。MUI v6でZero runtime CSS in JSに対応するので、v6のBeta版で検証してみましたが残念ながら動きませんでした。
その点、tailwindcssはJSに依存していないので、Astroと非常に相性が良かったです。
tailwindcssはHTMLタグにClass名を付与することでデザインを変更できます。その結果、Class名が非常に長くなってしまうことが開発中デメリットに感じました。大量のClass名を付与する関係上、再利用性も悪く、独自のコンポーネントをたくさん作るのも嫌でした。
そこでdaisyUIを使うことに決めました。
tailwindcssを使いやすくラップしたPackageはいくつかありますが、daisyUIを選んだ理由はReactなどに依存してない純粋なtailwindcssラッパーであること、無料かつ開発が盛んでGithubのStar数が多いこと、デザインがかわいらしかったことです。
daisyUIを使うことで非常に簡潔なコードになりました。
ホスティングはエンジニアの味方Cloudflareのサービスを使いました。
相変わらずCloudflareのサービスは無料枠の範囲がぶっ壊れてる。
Cloudflareだけは大事にしろって天国のじいちゃんも言ってました。Cloudflareを裏切れるのは要扇くらいです。
他の選択肢としてはFirebase Hosting, Netlify, Render.comなどあります。ぶっちゃけ静的サイトならどれも体験良いです。
Cloudflare Pagesは1つのプロジェクトでステージング環境も管理できるのが非常に良いですね。あと通信に金がかからないのもホントにうれしい。
Cloudflare Registrarで取得しているドメインのサブドメインをJoke Jobに割り当てたんですが、設定してから10秒くらいでアクセスできるようになりました。どうなってるんですか。早すぎて困惑しました。
アイコン
これも自分で作ってます。
5分くらいでノートにビビットきた原型ができたので、Figmaで清書しました。シンプルなデザインにしたのであっという間に完成しました。
サービス名と右下に書いたにっこり顔が可愛いです。顔はハートっぽくも見えます。
今まで作ってきたアイコンの中で一番気に入っています。
余談ですが、このアイコンを書かなかったらサービス名はJoky Byte（ジョーキーバイト）になる予定でした。アイコン的にJから始まる単語を並べたかったので途中で変えました。
まとめ
今回は高速にリリースできるアプリの開発に挑戦し、実際に2日でリリースを行った個人開発の紹介でした。
実際には最後の5時間くらいはPageSpeed Insightsの改善や細かい調整を行っていました。他にも開発中の休憩としてゲームしていたり、肉寿司を食べたくなって自宅で握りずしを作ったりしていたので、実際の開発時間はもっと短かったです。
Astroは静的サイトを簡単に作成できるだけでなくSSRなどにも対応した非常に高機能なフレームワークなので、もしこのアプリが大成功しても問題ないのがうれしいですね。
MUIなどの慣れたCSSフレームワークが使えないのは最初こそデメリットに感じましたが、daisyUIが便利だったのですぐ忘れました。
みなさんも高速なアプリ開発試してみてください！失敗前提というわけではないですが、数日でプロダクトを作れるのであればたくさん挑戦できます。
そして、今後も（嘘の）お仕事や案件をどんどん追加していくのでぜひJoke Jobをよろしくお願いします！！！
Discussion