[全公開]モダンな個人開発で採用した技術・ツールの全て！

今回、個人開発（2名）でslii.xyzというサイトを作ってみました。モダン目なフロントエンド技術を採用しているので、どんな開発技術を採用しているか全部公開していきます。特にコメントの必要のない箇所はノーコメントにしてます。

（改修したいとこはたくさんあるけど、やっとひと段落したー。）

開発技術一覧

作りたいものを作っていく中で、色々と試していけたらと思っています。今回はバックエンドでSupabaseや状態管理のjotaiを試してみて、非常に扱いやすく開発体験も素晴らしいことが分かりました。

デザイン

1.figma

最初はデザインせず開発進めてたのですが、全体のまとまり感とかなくなってしまったので、最低限のUIはfigmaで作成しました。UI先に作成しておくとコーディングも捗りますね。

参考：https://figma.com

フロントエンド

1.[言語]javascript/Typescript

用途：開発/コーディング

ノーコメント。

2.[jsライブラリ]React

用途：開発

外部アプリケーションの導入の際など、Reactまわりのサンプルコードが見つかりやすかったりするので、理由がなければReactを入れています。

3.[フレームワーク]Next.js

用途：開発

フロントエンドのフレームワークはNext.jsを採用しています。ルーティングが楽なのと、ISRなどの機能が充実しているのが良いですね。もう少しシンプルなサイトであれば、Reactだけで良かった気もします。

4.TailwindCSS

用途：スタイリング

CSSはTailwindCSSを入れて記述していています。TailwindCSSは開発者が任意に作成したクラス名、スタイルに依存しない点で再利用性が高く、CSS用のファイルを置く必要もないので一度使ったらなかなか離れられません。

あらかじめ基準となるコードがあり、色指定なども適当に置いていけるのは小規模開発では地味に嬉しいですね。今回はコンポーネントライブラリは入れずスタイリングしています。部分的にピュアライブラリのコードを参考にしています。

参考：https://tailwindcss.com

5.SASS

用途：スタイリング

一部SASSファイルにパッチ用のスタイルなどを置いています。例えば、インポートした外部コンポーネントのスタイルを調整したい時に、そのコンポーネントに指定されたクラス名からSASS側でCSSを上書きしています。

特にSASSである必要はないかもです。

6.ESLint / Prettier

用途：コード整形

各種コード整形を行っています。内容は別途どこかで記事にできたらと思います。

6.jotai

用途：状態管理

ステート管理はアトミックに扱えるRecoilベースのjotaiを入れています。元はuseContextで置いてましたが、jotaiに置いていくことで再レンダリングを予防する等の効果を期待しています。フックスライクに使えて学習コストも低くReact以外のフレームワークでも機能する等、採用メリットが非常に大きい気がしています。

ローカルストレージもjotaiのフックスを用いて扱っています。useStateライクに書けてサイト全体で簡単に管理できてめっちゃ使いやすいです。

参考：https://jotai.org/

7.yarn

用途：パッケージ管理

パッケージ管理はyarnにしています。ここはそんなに拘りないですが、安定重視でnpmに戻すかpnpm使ってみようか考えています。

8.ChatGPT

用途：コード支援

複雑な条件分岐やエラー時など頭がこんがらがった時はChatGPT先輩に質問していました。SQLあたりは何も知らなくても多少書けて良いですね。結構役立っています。

開発支援用のAIもいくつか出ていて、どんどん便利になっていきそうです。

参考：https://chat.openai.com/chat

バックエンド

1.Vercel

用途：サーバー

Next.jsで開発してるので親和性の高いVercelにデプロイしています。画像処理が多かったりして無料枠の制限に引っかかったのでプロプランに課金しています。

2.Supabase

用途：認証・DB・ストレージ

バックエンドの開発に工数を割きたくなかったので、バックエンドはBaaS一択でした。Supabaseであればfirebaseのように癖がなく、簡単に認証、DB、ストレージ、エッジファンクションの機能を実装でき、無料枠でも十分な機能を試せて個人開発に非常におすすめです。

Schemaなどの便利な外部アプリがあったりPostgresで直感的にデータ管理できて良き。開発環境でも本番のDBを使ってしまってるので、テスト用のDBをどうするのが良いかは悩み中。（dockerで仮想環境作れるっぽい）

参考：https://supabase.com/

3.Airtable

用途：DB

一部のデータをAirtableに置いて扱っています。マニュアル管理が必要なデータはAirtableのようなノーコードDBに置いておくと編集が楽で便利です。複数人管理するには課金が必要なのが最大の難点。

参考：https://airtable.com/

4.Google Domains

用途：ドメイン管理
ドメインはGoogle　Domainsで取得しました。Vercelに設定する時も迷わず数十秒で完結できて楽でした。

よく使われるドメインサービスより若干コスト高ですが、使いやすくて2年目以降の価格変更を気にする必要もないので最近はGoogle Domainでドメイン取得するようにしています。

参考：https://domains.google/

開発管理

1.Github

用途：コード/開発管理

ノーコメント。

2.Discord

用途：コミュニケーション

コミュニケーションはDiscordで行っています。アプリ内で気軽にボイスチャットできるのは良いですね。

執筆時点で2名のみなので、今後参加者増えていったら嬉しいなと。

参加はこちら：https://discord.gg/CCwTrB2k6r

3.VSCode

用途：開発

ノーコメント。

[その他]採用しなかったもの

アトミックデザイン

用途：コンポーネント管理

アトミックデザインは小規模開発だとコンポーネントを切るのが面倒だったりするので、入れていません。今のところデザインシステムが明示的な場合などには便利な思想かなと思っています。

その他

思い付いたら少し書き足していきます。

まとめ

ReactとNext.jsが少しだけ学習が必要なものの、全体としては学習コストが低く、かつ開発体験も快適で良い感じだと思っています。

Supabaseは今後ビジネスサイドでのユースケースが増えそうです。サンプルレポジトリも多いので、まだ触れてない方はぜひ触ってみてください。（推し）

個人開発でないと採用しづらい技術などもあると思うので、今後色々と試していけたらと思います。AIも積極的に取り入れていきたいですね。

反省点などもたくさんあるので、後日まとめていきます。
ご質問等あればお気軽にどうぞ！