Next.js × Supabaseで書籍ストックサービスを作成するまで〜技術選定理由・学習方法まとめ〜
実務ではJava(Spring Framework)とJavaScript(jQuery)とOracle DBを使ってSPAっぽい()業務系webアプリの実装をしてるのですが、最新の技術も習得した方が良いと感じていたため勉強のために作成しました。
技術選定の理由や参考にしたサイトについてまとめておきます。
リポジトリ
READMEに作成した機能や使用技術について記載しています。
サービスのURLはこちらです。
サービス構成図
技術選定
フロントエンド・バックエンド
選定技術： TypeScript / React / Next.js
選定理由：
以前基本設計のみ参加したプロジェクトがTypeScriptとReactを採用していたがモックをコードベースで作成した経験しかなかったため、一度自分で一から作成してみたかったため。
また、最新のライブラリでありサーバーサイドレンダリングをサポートしているNext.jsを使ってみたかったため。
書籍情報取得API
選定技術：Google Books API
選定理由：
Googleが公開しているAPIで信頼できることと、簡単に使用できるため。
DB
選定技術：Supabase
選定理由：
PostgreSQLデータベースをベースにしているため、普段Oracleユーザーである自分でも使いやすいと感じたため。
インフラ
選定技術： AWS Amplify
選定理由：
Next.js 12 以降をサポートしているAmplifyを使用することで簡単にデプロイすることができるため。
また、可用性・耐久性・拡張性が高いアプリケーションを構築することが可能なため。
CI / CD
選定技術： GitHub Actions
選定理由：
GitHubで開発を行っているためGitHubが提供しているサービスを利用すれば使い勝手が良いと感じたため。
認証
選定技術： Supabase
選定理由：
OAuth 2.0を用いて簡単にログイン機能を実装したかったため。
その他
CSSフレームワーク
選定技術： Tailwind CSS
選定理由：
クラス名をつける必要がないことによりCSSの実装に割く時間が短くなるため。
アイコン
選定技術： Lucide React
選定理由：
シンプルなアイコンを使用したかったため。また、「Copy JSX」ボタンを押すことで簡単にコードを生成して使用できるため。
デザインツール
選定技術： Figma
選定理由：
一度使用したことがあり使い勝手がわかっていたことと、webで使用でき共有もしやすいため。またプラグインが充実しているため画像加工も簡単に行えるため。
参考にしたサイト / 記事
React
React特有の書き方について最低限知っておいた方が良いことがわかりやすくまとまってます。
Next.js
公式チュートリアルがわかりやすかったため、まずこちらで学習しました。
Page RouterとApp Routerでの実装方法があるのですが、あまり詳しくなかったためこちらの記事が参考になりました。私は今回App Routerを使用して作成しました。
App Routerの勉強はこちらが参考になりました。
Tailwind CSS
Next.jsにTailwindを導入したかったため公式のこちらを参考に導入しました。
Google Books API
GitHubのTopicsからリポジトリを検索していくつか参考にしました。
Supabase
データの取得方法についてはこちらの公式を参考にしました。
認証方法についてはこちらの記事がわかりやすかったです。
便利系ツール
Supabaseの型情報を自動生成
クエリの型定義を正確に行えるのでこちらを使って型情報の自動生成を行いました。
ER図生成
Supabase SchemaというサイトでSupabaseのER図を自動生成できます。
こちらの記事を参考にしました。
画像自動生成
404エラーと500エラーのページに画像を使用したかったため、せっかくなのでBingの画像生成ツールを使用してみました。
「本が積まれているペンで描いたようなイラスト」のような文言で生成された結果を見て文言を何度か修正して作成しました。
Image Creator from Microsoft Designer - Bing
画像加工
背景透過やSVG画像への変換はFigmaで行いました。
背景透過はこちらのプラグインを使用しました。
SVG変換はFigmaのエクスポートでSVGを選択してダウンロードしました。
サービス構成図の作成
アイコンが探しやすくシンプルで使いやすかったため、Miroというサービスを使用しました。
「＋」押して表示される「IconFinder」や「Google Images」からアイコン・画像を探して使用しました。
おわりに
Reactは習得までかなり苦戦しました。
ただ、少し書き慣れてくるとJavaと似たようにInterfaceが作成できたりuseStateの良さを実感でき、途中からメリットに気づくことができました。
SupabaseのようなBaaSサービスを使用することによって簡単にDB作成や認証機能を実装できて、BaaSの便利さを実感することもできました。
また、自分で一からしっかりなにか作成し終えたことがなかったため自信になりました。
仕事では触ることができそうにない興味のある技術を触ることができて楽しかったです。
Discussion