はじめに

個人開発を行ったので、その時に背景や技術選定、開発プロセスなどをまとめてみたいと思います。実質初めて記事を書くので不自然な文章があると思いますが、温かい目で見てくれると幸いです。

webアプリのurl

githubコード(バックエンド)

githubコード(フロントエンド)

個人開発を行った背景

以前はプログラミングのアルバイトが忙しくて、全然できていなかったのですが、それが落ち着いてきて新しい技術を使って何か作りたいなと思い至りました。

開発プロセス

私の個人開発のプロセスは以下の通りです。
アイデア出し
↓
アイデアをもとに要件を洗出す
↓
figmaでのデザイン
↓
技術選定＆デプロイ先の決定
↓
フロントエンドのコンポーネント、フォルダ構成設計
↓
フロントエンドのデザイン実装
↓
データベース論理設計
↓
バックエンドのフォルダ構成設計
↓
バックエンドAPIの実装
↓
バックエンドAPIをもとにフロントエンドの機能を実装
↓
バックエンド、フロントエンドをデプロイ

アイデア出し

身近なところで何か困ったことはなかったかを考え、私の場合だとよく技術を使った勉強する機会が多く、読み切れていない書籍があるのに新しく書籍を購入して積読状態になることがあったので、その問題を解決できるようなアプリを開発しようと至りました。

要件の洗出し

figmaを用いて要件を整理しました。
メモに要件を洗出すことでどのような機能が必要になってくるかを整理することができました。

figmaでのデザインについて

どのようなアプリにするかをfigmaを用いてデザインしました。
ここでフロントエンド側で必要な要素やバックエンドの機能で何が必要なのかを整理することができました。

技術選定＆デプロイ先の決定

技術選定は以下の通りです。
バックエンド

python
fastAPI
sqlalchemy
pydantic
uvicorn

フロントエンド

typescript
react
react-router-dom
react-cookie
axios
x-charts
tailwindcss

デプロイ先

フロントエンド vercel
バックエンド render.com
データベース nhost

今回の技術選定についてバックエンドのfastAPIは処理が高速なことや型定義を含められること、また自動ドキュメント生成により、コードベースでのドキュメントを作成することができることなどのメリットがあり選定しました。
フロントエンドはreactを使ってみたかっとことやtypescriptによるより安全に開発ができることから選定しました。
デプロイ先についてはフロントエンドではvercelが無料で使えてメジャーであることバックエンドではrender.comが格安で運用できること、データベースはnhostがpostgresqlをベースとして無料で使えるため選定しました。

フロントエンドのコンポーネント、フォルダ構成設計

コンポーネント、フォルダ構成設計については下記の記事を参考にしました。
コンポーネント設計にはAtomicDesignがよく出てきますが、MoleculesとOrganismsでの境界がよくわからないという問題があるのとそこまで規模が大きくならないという理由からAtomicDesignは見送っております。

フロントエンドのデザイン実装

figmaのデザインとフロントエンドのコンポーネント、フォルダ構成設計をもとにフォルダを分けをしデザインをtailwindcssを用いて実装しました。

データベース論理設計

必要なデータを洗い出し、データベースを正規化しました。

バックエンドのフォルダ構成設計

下記の記事を参考にしました。
service + repositoryで構築し各層で責務を分離することでスムーズに開発することができました。

バックエンドAPIの実装

学習段階ではAPIのドキュメントを一通り見ていた程度だったので、基本的にはドキュメントやその他記事を参考にしながら実装していきました。
vscodeの拡張機能でpylanceでの型ヒントやpydanticによって型を意識したコーディングを行うことができました。
自動ドキュメント生成でスキーマを定義できることで実装前に入出力が何かを明確にでき、スムーズに開発することができました。

バックエンドAPIをもとにフロントエンドの機能を実装

fastAPIで生成されるドキュメントをもとにAPIの入出力を確認しながら実装を行うことができた。reactをコンポーネント別で分けていたことで一つのファイルでコードの肥大化を防ぎ責務を分離した開発を行うことができた。

バックエンド、フロントエンドをデプロイ

両サービスも簡単にデプロイすることができた。

最後に

始めてちゃんとした記事を書きましたが、アウトプットすると頭の中が整理できて良いですよ。これからも記事をアップしていきたい、、、