個人開発

資産管理アプリ開発記録 – 0.ことはじめ

2023.08.02

はじめに

背景

ここ最近の業務では、プログラマーとして要件や設計ありきでの実装や、ちょっとしたツール作成っていうのは言語や技術に関わらず基本的には自走できるようになってきたなと感じてきた。

ただ、断片的な知識になってしまっており近いうちに頭打ちになりそうな気もしている。

なので、今後もエンジニアとして生き残るために0からアプリを一人で作ってみることで、今までの業務では経験してこなかったシステム開発の一通りの流れであったり、トレンド技術を体験し、さらなるステップアップを狙っていきたい。

目標

今回の個人アプリ開発を通じて次のことを経験できたらと思う。

  1. システム開発（個人開発）の流れを知り、自分にあった方法を見つける
  2. トレンド技術を学ぶ
  3. フロントエンドからバックエンドまで一人で作ってみる
  4. 作ったものを1ポートフォリオにする

作るアプリ

動機

何を作ろっかなーと色々考えた結果、アプリを作って一儲けしたい（お金は欲しいけど。。。）っていうのは今回は特になかった。

代わりに初めての個人開発でモチベーションが続くかのほうが心配だったので、まず普段から定期的にやっていることで少しめんどくさいことを楽にしたいってなったときに 資産管理 に白羽の矢が立った。

現状

資産管理といっても性格的に使うごとに入力するのは絶対に続かないので、一か月に一回、1日時点での口座の残高を記録している。

それで前月との差分を見て、あまりに使いすぎているようであればクレジット明細等を確認し次月は抑えるようにしている。

元々浪費癖はあまりなく、このやり方でも貯金はそこそこできていたので今までGoogleスプレッドシートでまとめていたものを今回作るアプリに乗り換えようと思う。

開発スタンス

今回は以下のスタンスで開発を進める。 開発当初はどう進めるか迷うときがめっちゃありそうなので、迷ったら次のスタンスに立ち返り開発を進める。

個人的には今回は初めてということもあり、モチベを保つため3つ目を意識して進めていく。

  1. Googleスプレッドシートで管理できていたものから、機能的にデグレしないようにする
  2. お金は一旦かけない 利用者は私一人なので一旦ローカル環境で動けばよしとする。
  3. とりあえず動くことを第一優先にする 毎月やっていることなのではやく乗り換えれるようにしたい。 そのため、コードのリファクタ、画面の見栄え、そして機能追加は原則後回しにする。
  4. アジャイル的に柔軟に開発を進める
  5. Chat GPTをフル活用する

プランニング

開発計画

〇〇月までにここまででといった開発計画はプライベートの時間の空き具合によってとんとも言えないところではあるが、とりあえずローカルである程度動くものというところで 8末 までに開発できたらと思う。

ロードマップ

個人開発の進め方はさっぱりだったので、ここはChat GPTの力をお借りした。

手順2に技術スタックの選定とあるが事前に使ってみたい技術や構成はざっくり伝えていたのでその内容は詳細に記載されちゃっている（Vue.jsやExpressなど）。

設計とバックエンド側の経験があまりなくいきなり設計はできないと考え、フロントエンドのモック作成からの本開発の流れになる。

ロードマップ

  1. 要件定義とデザイン:
    • プロジェクトの目標と要件を明確にし、デザインやUIの構想を決定します。ユーザーストーリーやワイヤーフレームなどを使用して、アプリケーションの基本的な構造を考えます。
  2. 技術スタックの選定:
    • 使用する技術スタック（言語、フレームワーク、データベースなど）を選定します。既に学習しているHTML、CSS、JavaScript、TypeScriptを活用することになるかもしれません。
  3. フロントエンドの開発:
    • Vue.jsを使用して、フロントエンドのコンポーネントやレイアウトを作成します。デザインをもとに、ユーザーインターフェースを実装します。
  4. モックデータの使用:
    • バックエンドがまだない段階では、フロントエンドの開発においてモックデータを使用して動作確認を行うことができます。モックデータはバックエンドが提供する予定のデータを仮想的に作成するものです。
  5. バックエンドの設計:
    • フロントエンドの開発が進むにつれ、必要なデータや機能が明確になります。この時点でバックエンドの設計を行い、必要なAPIエンドポイントやデータモデルを定義します。
    • データベースの設計をおこなう
  6. バックエンドの実装:
    • Node.jsとExpressを使用して、バックエンドのAPIエンドポイントを実装します。MongoDBを使用する場合は、データベースのセットアップも行います。
  7. フロントエンドとバックエンドの連携:
    • バックエンドが完成したら、フロントエンドとバックエンドを連携させます。フロントエンドからAPIエンドポイントを呼び出し、実際のデータを取得して表示するようにします。
  8. テストとデバッグ:
    • フロントエンドとバックエンドの両方でテストを行い、バグを修正します。特に連携部分やデータの取得に問題がないか確認します。
  9. 最終調整とデプロイ:
    • アプリケーション全体を確認し、最終的な調整を行います。その後、完成したアプリケーションをデプロイして公開します。

おわりに

これにていわゆる企画？という段階が雑いけど完了かなと思うので記事はここで区切る。

コーティング楽しいーってだけで実装以外あまりやってこなかった身からするとこの程度の内容でも普段と違う頭を使い、いい経験な気がする。

次からはロードマップに沿って「１．要件定義とデザイン」「２．技術スタックの選定」あたりをやっていく。