🐥

【Next.js・FastAPI】【技術選定編】カンタン曲探しサービスを作ってみた

2023/09/18に公開

前記事の続きです。
技術選定は内容が長くなりそうだったので記事を分けました。

使用技術

使用技術（一部）
前記事の内容を再掲。

選定基準は以下の通りです。

1. 今回のサービスの要件にマッチしていること
説明省略。

2. 古くないが、新しすぎない技術であること
一般的には「新しい技術」は過去の問題を改善したものと考えられます。
しかし、新しすぎると信頼性やノウハウの普及がまだ十分ではないため、その点も問題とされます。

3. シェア率が高いこと
その技術が安定しているかどうか、また技術ナレッジが広く普及しているかが関連しています。
この点は、GitHubのスター数などを参考にしています。

4. 破壊的な変更が行われていないこと
長期的な運用を考慮する上で必須項目です。

5. 実務やチーム開発を想定し、それに適した技術を選ぶこと
説明省略。

6. （主にフロントエンド）学習目的も兼ねているが、あくまで限られた時間内で開発を完了すること
※一ヶ月で完了予定のため、学習コストにも上限を設けています。

以上が選定基準となります。

先程の選定基準に当てはめて判断した内容を一部ピックアップします。

今回のサービスの要件にマッチしていること
- 大きな負荷にはならないが、以下2点。
  - 画像（ジャケ写）を多く扱う
  - 今後の機能として動画配信も考えている
AngularはCSRなので、初動に時間を要する可能性有。
破壊的変更が行われていないこと
- Vue(Nuxt.js)は2系→3系で破壊的変更があったため除外。比較するとNext.jsは控えめな印象。

上記を基準にReact.js、Next.js、Vue.js、Nuxt.js、Angular辺りで比較し、Next.jsを選びました。

TypeScriptとの親和性の高さ
Reactとの互換性の高さ（≒自身の学習コストを抑えられる）
SSRの利用によるパフォーマンス向上が見込める（今回は画像の表示が多いので活用出来る）
- 現在はデフォルトでSSRが適用されるので記述も少し楽になったと感じています。

なお、今回はテストに充てる時間が限られていたため、静的型付け言語を選び早期にバグを処理しようと考えTypeScriptを選びました。
VSCodeとも相性が良いですし、組み込み開発上がりの自分には適した言語だと思っています。

CSSフレームワーク：ChakraUI
アニメーション：Framer-Motion
必ずコレ！といった理由は無いのですが、”導入が容易でカスタマイズもある程度可能”なライブラリを探していたためChakra UIを選択しました。 Material UIなどは楽ですがカスタマイズ性が劣るため除外。
また、アニメーションのためにFramer-Motionを導入しました。記述量が少なく直感的に書ける上、Next.js（React）やChakra UIとも非常に親和性が高いため気に入っています。

DB：MySQL
個人開発なので規模は小さく抑えられる予定ですが、技術選定基準「5. 実務やチーム開発を想定し、それに適した技術を選ぶこと」に従って選びました。
ただし、個人開発においてDBはコストのかかる大部分を占めております。ですので、将来的には別のDBを使用する可能性が高いです。

ORM：SQLAlchemy
マイグレーションツール：Alembic
DBとほぼ同じ基準で選びました。
ただし、Alembicはバージョン更新や削除に関する操作が使いづらく感じました。私にはあまり合わなかったように思います。
一方、PrismaはGUIを使ってDBテーブルを編集することができたりと、多機能かつ使いやすかった記憶があります。次回はPrismaを検討してみようかなと思っています。Pythonで使えるとは知りませんでした...

全体的通して選んだ技術には満足しておりますが、反省点を挙げるとするなら小規模なサービスですのでMySQLである必要は無かったと感じています。
また、個人開発に関わらずコストを抑えるという観点だと

等も考えられます。
今後はこの辺りも意識して開発計画を立てていく予定です。