この記事はZOZO Advent Calendar 2023 シリーズ9の1日目の記事です。
はじめに
毎日目まぐるしく新たな技術やサービスが生み出されていますが、ここ最近で気になる技術やサービスありますでしょうか？
自分は結構ありますが、実際に触ってみる・試してみるなどのアクションは起こせずにいました。
しかし先日、参加させていただいた開発合宿が個人ハッカソン形式だったため、これはいい機会だと思い気になっていた技術詰め込んでアプリを開発しました。
そこで使用した技術について軽く紹介と感想を話せればと思います！
※アプリの完成度、使用技術の理解度は低いのでその点はご了承いただければと思います🙇♂️🙇♂️
作ったアプリについて
作ったアプリは簡単に言うと、献立を考えてくれると同時に買うものリストを生成してくれるものになっています。
以下が大まかな画面のフローです
認証を通ると一番左のような画面が現れます。
"generate menu"ボタンを押すと「料理名」 「材料」 「作り方」をOpenAIが生成してくれます。
「材料」の右側に"LIST"ボタンがありそれをクリックすると別タブで買い物リストが表示されます。
TODOリスト形式になっていてクリックすると横線で消されていきます。
認証情報に紐づいてDBにLISTの状態は保存されているのでタブは消しても問題ありませんし別のデバイスで開いても大丈夫です。
以上のような非常にシンプルなアプリになっています。
(OpenAIAPIのトークンの関係で現在デプロイはしておりません🙇♂️)
ソースコードは公開してるのでよければご覧ください！
使用技術
選定方針
選定方針は大きく二つです
- 挑戦 (使ったことない・興味があった)
- 無料でも使える
しかし当てはまることの方が多かったので、候補が二つ以上出た時は雰囲気で選んでます
フロントエンド・バックエンド
RemixはReactのSSRフレームワークで、Next.js同様ファイルシステムルーティングを採用しています。
Next.jsのApp Routerと迷いましたが、Next.js自体は普段から触っている、App Routerもチュートリアルで少し触ったことがあった、機能多すぎるので別の機会にまとめて触りたいという考えから今回はRemixを採用しました。
データベース
PlanetScaleはサーバレスなMySQLプラットフォームです。
DBのブランチ機能があったり、productionにデプロイ後３０分以内であればスキーマ変更をrevertできるなど、普段のGitHubを利用したアプリケーション開発と同じような体験が得られるのが個人的にいいなと思った特徴です。
Neonも候補に上がりましたがNeonは日本リージョンがなく今後利用する可能性があるとしたらPlanetScaleかなと思ったのと個人的にMySQLの方が少し馴染みがあったのでPlanetScaleを採用しました。
ORM
PrismaはNode.jsとTypeScript向けのORMです。
データベーススキーマをコードで管理でき、データベースクエリを生成するために自動的にSQLを生成するためほとんどSQLを書く必要がなくなるのが特徴です。
実はPrismaのみ今回のスタックの中で触ったことがあり、本来はDrizzleを採用したかったのですが、時間的な都合で断念してしまいました。。。
近いうちに触ってPrismaと比較してみたいと思います！
認証
ClerkはClerk社が提供している認証サービスでGUI操作で認証機構を爆速で立ち上げることができます。
FirebaseやSupabaseの認証はすでに使ったことがあったのでAuth0かClerkが候補に上がりました。
ClerkはRemix用のクイックスタートガイドを用意してくれていたこと、認証画面のカスタマイズ性が高そうだったことが決めてで今回は採用に至りました。
しかし、無料枠だとMAUの制限が5,000人(Supabaseだと50,000人)と少なめなのでスケールを考えているならあとあと少し痛くなりそうだなと感じました。
API
言わずもがな、OpenAIが提供してくれているAPIです。
なんだかんだ触ったことがなかったので、今回これを触ることをいちばんの目的としていました。
今回は献立の生成を行ってくれています。
余談ですが、無料枠で使えると思っていたのですが以下の記事と同様のエラーが出てしまったので500円分のクレジットを購入しました
UIコンポーネント
MantineはReactのコンポーネントライブラリで、TypeScript 素のCSSをベースに作られています。
かなりの数のコンポーネントが実装されているのはもちろん、多くのカスタムフックも用意してくれています。
個人的にいちばんいいなと思ったポイントはドキュメントが超見やすくて使いやすい点です。
上記のことやカスタマイズ性の高さなどなどかなり完成度の高いコンポーネントライブラリだと思い今回の採用に至りました！
感想
今回は気になっていたけどなかなか触れずにいた技術を詰め合わせて、アプリを開発してみました！
共通して感じたのは体験の良さです。
ドキュメントが親切・丁寧でほぼほぼ詰まることなく導入・実装ができ、流行り始めてるからにはそれなりの理由があるんだなとめちゃくちゃ感じました笑
個人開発にはFirbaseなどがよく利用されているイメージですが今回のような構成も選択肢としてはありなのではないでしょうか！？！？
自分も引き続き触ってみて、良さや他技術との比較などの発信もできたらと考えております！
おわりに
内容やソースコードに間違い等ありましたらご指摘いただけますと学びになり大変幸いです。
何卒よろしくお願いいたします。
ここまで読んでいただきましてありがとうございました！