はじめに
最近、個人開発していたアプリケーションを会社内でリリースしました。
社内向けのアプリですが、完全にプライベートで開発したので自分の興味ベースで技術選定を行い、いろいろな知見がありましたのでこの記事で共有しようと思います。
個人開発では、自分の興味や好みに基づいて使いたい技術を自由に導入できることが大きな醍醐味だと思っています。
例えば、新しいフレームワークやライブラリ、デザインツールなどを試してみることで、自身の技術的なスキルや知識を拡大することができます。
目次
技術選定
掲示板風のサービスを開発を行うにあたり、フロントエンドとデザインをメインに考えて技術選定を行いました。
また、ポイントとして無料で運用できることと自分の興味を優先しています。
フレームワーク/言語
-
Next.js(v13.7)
- TypeScript
-
CSSフレームワーク
- Tailwind CSS
ライブラリ
- Prisma ... ORM
- EsLint ... 静的検証
- prettier ... コードフォーマッター
- swr ... データフェッチ
- react-hook-form ... フォーム
- Clerk ... 認証
- jest ... テスト
- testing-library ... テスト
データベース
- PlanetScale ... MySQL
デザイン
- Figma
ホスティング
- Vercel
その他
- GitHub ... リポジトリ管理
- Github Actions ... コード成型や↓のDependabotによるPR作成を自動化
- Dependabot ... 脆弱性の検知やライブラリのアップデート検知
- GA4 ... アクセス解析
Next.jsが使用したかったので、そのエコシステムを活用した構成になっています。
ホスティングまで無料でできる構成にしているので無料で公開・運用ができます。（制限はある）
ライブラリに頼りきった部分が多いので依存関係やメンテナンスが困難な可能性がありますが、機能の開発自体は短時間で済ませることができます。
課題と難しかったこと
大きく２点あります。
１つ目：PlanetScaleとPrismaの採用によるデメリット
Prismaに統合されているマイグレーションツールのPrisma MigrateとPlanetScaleの相性が悪いと感じています。Prisma MigrateはPrismaのスキーマに変更を加え、それをデータベースに反映させる際に、通常はshadow databaseを使用して更新を行いますが、PlanetScaleではこの方法が非推奨となっています。
代わりに、prisma db pushを使用することが推奨されています。しかし、prisma db pushを利用すると既存のデータが失われてしまうため、手間がかかると感じています。
自分の知識が浅く、まだ勉強不足の状態であるため、公式ドキュメント以外に触れられている情報や参考になる記事が少なく、理解に苦労しています。
リリースに向けて機能を追加することに注力していたため、この課題は放置されていましたが、今後は優先的に解決する必要があると感じています。
２つ目：ライブラリが多く、キャッチアップが困難
今回の開発ではNext.jsのエコシステムを最大限に活用することを目指し、多くのライブラリを導入しました。
これによりキャッチアップが困難となりました。
公式ドキュメントが主に英語で提供されており、有名なライブラリのドキュメントを理解するだけでも多くの時間を要しました。
また、元々バックエンドの知識が主体であり、新しい概念について理解するのにも時間がかかりました。
得られた知見とよかったこと
開発を通じて得られた知見や良かった点は以下の通りです。
-
Next.jsのApp Routerの活用:
Next.jsのApp Routerをキャッチアップしました。ここは最近の変更でChatGPTが対応しにくいところなので時間をかけて自力で丁寧にドキュメントを読みました。 -
Next.jsのエコシステム（ライブラリ）の利用方法と実装:
Next.jsの豊富なエコシステム（ライブラリ）を積極的に活用しました。これにより、開発効率を向上させるための機能やツールを導入することができました。 -
Next.jsのAPIを利用したバックエンド開発の方法:
Next.jsのAPI機能を使用して、独自のバックエンドAPIを実装しました。これにより、フロントエンドとバックエンドの連携をスムーズに行うことができました。 -
Figmaの使い方:
デザインツールとしてFigmaを活用しました。Figmaを使用することで、ユーザーインターフェースの設計やプロトタイプの作成を効率的に行うことができました。 -
Webデザインの入門レベルの基礎知識:
デザインに関する基礎知識を学びました。これにより、デザインの要素や原則に基づいたデザインを実現することができました。 -
JWTなどのログイン認証周りの知識:
ログイン認証に関する知識を習得しました。JWTを使用して認証を実装する方法について学びました。 -
公式ドキュメントを読みに行く癖がついた:
技術選定や問題解決の際に、公式ドキュメントを積極的に参照するようになりました。Qiitaとかを真っ先に読みに行く癖が抜けてきてよかったと思います。結局ドキュメントを読んだほうが早いはずです。 -
Github Actionsを利用した自動化:
Github Actionsを活用して、コード成型や自動テストなどのタスクを自動化しました。これにより、開発プロセスの効率化と品質の向上を実現しました。 -
Dependabotの存在を知れた:
Dependabotを導入することで、依存関係やセキュリティの脆弱性に関する情報を自動的に取得することができました。これにより、アップデートや修正が必要なライブラリを素早く特定し、安全性の向上を図ることができました。
これらの知見や経験を通じて、バックエンドからフロントエンドまで幅広いスキルを身につけることができ、自信を持ってサービスを1から開発することができました。
また、上記で学んだことについてLTに登壇する機会もいただき、開発以外のアウトプットについてもいい影響がありました。
登壇した際のスライドはこちらになります。
ChatGPT等を利用した開発の効率化について
開発の過程で、ChatGPTやGithub Copilotといったツールを最大限活用し、技術のキャッチアップや選定、コーディングなどの場面で効率化を図りました。
ライブラリの数が多く、全てを詳細に学ぶのは時間がかかるため、とても便利であると感じました。
ChatGPTは、開発の途中で知識の補完や説明を求める際に活用しました。例えば、特定のライブラリの使用方法や実装上の問題についてChatGPTに質問することで、より具体的な知識を得ることができました。ChatGPTとの対話を通じて、実際に実装を行いながら知識が身に付くため、開発の助けになりました。
最後に
この個人開発プロジェクトを通じて、未経験の言語やフレームワークを使用してサービスをリリースするという経験を得ることができ、自身の技術的な成長を実感しています。
仕事とは異なる自由な環境で、自分自身の興味や好みに基づいた技術やツールを採用できたことは、新たな知識を習得するきっかけとなりました。
個人的にぜひこのような個人開発の経験を積んでみることをおすすめします。
新しい技術やフレームワークを試すことで、自身のスキルを向上させることができますし、自由な環境でアイデアを形にする喜びも味わえるでしょう。
もし記事に追加してほしい内容やご意見がありましたら、ぜひコメントをいただけると嬉しいです。
読んでいただいた方のモチベーションに少しでもいい影響を与えれたらいいと思っています。
最後までお読みいただき、ありがとうございました。