駆け出しエンジニアが初めて自身のアイデアで個人開発をしてみた感想【React / TypeScript】
いわゆる「駆け出しエンジニア」のmiu-Yです。
初めて1からアイデアや環境、開発の手順を出して個人開発をして上手く行ったことや失敗したことを書いていきたいと思います。
作成したもの：GitHubコミットで育つ育成ゲーム風Webサイト
た〇ごっちのように、Githubのコミットを繰り返してマスコットキャラの体力を増やすゲーム風WEBサイトです。
Geminiでセリフを生成しており、たくさんコミットするとキャラが褒めてくれるようになります。
技術スタック
- React
- Node.js
- Supabase
- Github Action
アプリ仕様
最初にGitHubIDを入力し、登録済みかどうかを判定して繊維します。
未登録の場合
登録済みの場合
体力の仕様
バッチ処理でコミット履歴を取得し、体力の増減を行います。
専用のプロンプトで褒めてくれる仕組みになっています。
上手くいったと思う開発の進め方
このセクションで伝えたいこと
- 使えそうなnpmパッケージを探してみること
- 新しい技術や機能を導入する際のリスクを減らすアプローチについて
- 環境構築の手順や設計思想を残す
個人的に「これは効果的だった！」と感じ、今後も続けたい開発の進め方を紹介します。
1. npmパッケージ選定：npm Trendsでトレンドを掴み、Chart.jsを採用
「HPバーを描画したい」と思いましたが、自分で実装すると手間が異様にかかりそう…
「管理画面とかで棒グラフを描画するパッケージがあるんじゃないか？」とひらめいたので、npmパッケージを探してみることに。
パッケージ候補に関しては、Google検索と、平行してChatGPTやGeminiなどに「横軸の棒グラフが実現できそうなパッケージはある？複数提示して」と聞き検索しました。
パッケージがどれくらいポピュラーなのか、きちんとメンテされているのか…といったところはパッケージを利用する上でかなり気になるところだと思います。
そのあたりを色々調べた結果、下記のようなサイトを発見しました。
npm trendsというサイトで、これはダウンロード数やGithubのスターの数、最終更新日などをパッケージごとに比較できるサイトです。
試しにReactとVue.jsを比較してみると、下記画像のような感じで比較できます。
今のフロントエンド技術のトレンドは1位がReact、2位がVue.jsらしいのですが、その間にどれくらいの差があるかが一目瞭然となります。
似たようなnpmパッケージの選定で迷うことはこれから多々あると思います。そういった場合の選定や技術トレンドを追うのに便利なサイトとなってます。
今回は複数候補を上記のサイトで調べ、結果的に利用法がシンプルかつダウンロード数の多かった「chart.js」を採用することにしました。
2. 小さい所から実現出来るか試してみること
今回作成したWEBアプリの機能を、小さい機能ごとに洗い出して実現できるか試しました。
- データベースにGitHubユーザーIDとキャラクター情報を登録・管理できるか
- 生成AI（Gemini API）を呼び出し、期待する形式で生成文を得られるか
- GitHubの草のスクレイピングをして、コントリビューションを取得できるか
- Githubによるバッチ処理で、任意のTSファイルを実行できるか
今回特に詰まったのは3の草のスクレイピングで、SVGで描画されているGithubのコントリビューション情報をパースし、昨日分を取得するのに苦労しました。
早い段階で技術的なボトルネックを発見し、大きな手戻りを防ぐことができました。
次回から改善していきたいこと
個人開発だからこそ、様々な「新しい技術」を積極的に取り入れるべきと痛感しました。
1. 生成AIを活用しよう
再度着手する際、新たにCursorの有料プランに加入しました。
正直今となっては今更といった感じはありますが、今までClaudeやGeminiにコピーして貼り付け…としていた作業をエディタ内で完結出来るのは本当にストレスフリーです。
ここ数年は毎年AI元年と言われていますが、「最先端の物を最小限でも触ること」の大切さを痛感しました。
それと同時に、特にAIでコード生成する場合はテストで生成したコードの質を担保しなければならないと感じました。
今後キャリアを積んでいくのであれば、改めてテストについての勉強をしないと……と思っております。
2. 開発環境を固定化しよう
このプロジェクトは10月頃に開始しましたが、本業の多忙により数ヶ月間中断せざるを得ませんでした。
久しぶりに開発を再開しようとした矢先、使用していたPCが故障しました。
以前はローカルPCに直接Node.jsをインストールしていましたが、新しいPCへの環境移行やバージョン整合性の確認に手間取りました。
そこで、リファクタリングする際にDockerを利用する方式に変更しました。
今まではDockerを始めるのは敷居が高い…と思っていましたが、案外簡単にプロジェクトに導入することが出来て驚いています。
↓参考にした記事
https://qiita.com/Sicut_study/items/a4ba0592142b76223aa0
Dockerを導入してから、外出先などで別PCで開発する際も楽に環境を合わせることが出来ました。
生成AIの項でも触れましたが、新しい技術に少しでも触らないと、時代に置いて行かれますね……
個人的感想
今回の開発経験で、「パッケージを活用した開発経験」「新しい技術を恐れずに触れる」ことを学べました。
パッケージ活用は、本業でもノウハウを活用する機会がありました。この経験でエンジニアとして成長できたと思います。
新しい技術については、今回作成したような「小さい規模の物を作って試す」という姿勢が大事だと実感しました。
これからも、個人開発に取り組んでいきたいと思います。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇