はじめに
こんにちは。
ここまでのReact学習の一環として初めて個人開発にチャレンジしました。どんなアプリを作るかの構想から実装までを一貫して行い、その過程で数多くの学びを得ることができました。
この記事では作成したアプリの紹介と開発中に得た学び・気づきを書いていきたいと思います。
どんなアプリを作ったのか
特定の分野で抱えている課題点(今回は野球がテーマです)を細分化して分析し、分析結果をもとに自動で解決策とサンプル動画を表示するアプリを作成しました。
また、登録した過去の課題を一覧で見ることもできます。
なぜ作ったのか
作成に至った経緯
今回のようなアプリを作ろうと思い立ったきっかけは、行動の結果(例：試合)生まれた改善点をすぐに行動に移したいという思いからでした。
今まで様々な分野でスキルを伸ばそうと奮闘した経験がありますが、成長の上で一番大事なことは行動からの気づき・失敗から得るフィードバックの早期改善でした。
メモ帳やToDoアプリ・紙のノート等を使って改善案を考えたりやることをまとめようと試みたこともありました。しかし後述の理由で長続きしなかったこともあり、
抱えている問題の分析と解決策の提示をこれ一本でできるアプリがほしいと感じるようになったのがきっかけです。
既存ツールでの限界、今回のアプリで目指したもの
今までPDCAのPlanとCheckのために使っていた媒体はいずれも痒いところに手の届かない部分がありました。
- メモ帳アプリ：気づきを残すのには向く一方、改善策は別途言語化が必要。読み直す機会を設けにくい
- ToDoアプリ：発生した課題からすぐにToDoを想起するのが難しい。やることが沢山あると優先順位づけが大変になる
- 紙媒体：紙とペンがないと記録を残せない+思考できない
「自分の課題を明確に」「やることを具体的かつ一本化」
そういったアプリを目指して今回の開発をスタートしました。
技術スタック
| カテゴリ | 使用ツール |
|---|---|
| フロントエンド | React、TypeScript、Tailwind CSS |
| データベース | Supabase |
| AIツール | Google Gemini |
| テスト | Jest, React Testing Library |
| デプロイ | Firebase |
| 動画検索 | YouTube Data API |
| UI制作 | Figma |
機能概要
課題登録画面
4ステップのフローで段階的に課題点を深掘りできるような設計にしました。
ステップごとに細分化された内容のボタンが表示されます。
道中はボタン1プッシュで進めるようにすることで考える負担を軽減させるようにしました。
画面上部にチェックリストを設置しステップに応じて色が変わるUIを採用しました。
ユーザーに対して今何をしているのかをわかりやすくするためです。
解決策提示画面
前の画面で登録した課題の事項をもとにAI分析を行い、解決策となる練習法・その練習法に関連した動画を提示します。
テキストと動画の双方で練習法を提示されるため、イメージを即座に掴んで実行に繋げやすくなります。
なるべく文章を読むコストを減らすため、見出しは短文かつ色を変えることで一瞬で見てわかるようなUI設計にしました。
履歴画面
すばやく過去の履歴を参照できるようにカード形式+モーダルで履歴を見れるようにしました。
工夫した点
①課題分析にロジックツリーの要素を採用した
抽象的に感じている課題点を具体的な問題点に落とし込むのはなかなか難しいもの。
当アプリでは思考のフレームワークとしてロジックツリーの考え方を使い、問題点を徐々に小さい単位に細分化することで効果的な解決策を導けるようなフローとしました。
ロジックツリーとは1つの物事に含まれる要素を階層式に細分化するフレームワークで、さまざまな課題の全体像を把握して解決策や意思決定を促す論理的思考法です。特定の事象やモノを構成している要素を、枝分かれ式に分解した図式に洗い出すことから、ロジックツリーと呼ばれています。
②AIのプロンプトを工夫し、見出しのフレーズを抽出できるような設計にした
解決策提示画面では練習法に当たるテキストをワンフレーズで表示させています。
そうすることで読むコストの低減を狙っています。
通常AIの出力結果は文章形式なので、ワンフレーズ化して出力されるのはひと工夫が必要になります。
今回はAIプロンプトに出力されるテキストのフォーマットを指定させることで特定の形式の文字列を出力結果に出現させ、そこから正規表現を使って文字列を抽出するようにしました。
【練習法：(練習法の名前)】となるようにプロンプトを組み、
該当の文字列の(練習法の名前)部分を正規表現で抽出した。
③FigmaでのUI作成に挑戦した
今回はこれまでの開発で用いたChakra UIのようなUIコンポーネントを使うのではなく、FigmaでUIを自ら作成し、そのデザインをTailwind CSSで実装するフローで進めました。
なぜ今回はFigmaとTailwind CSSを使ったかというと、
- ユーザーの使いやすさを重視した実装をしたかった
- 普段はFigmaからコーディングすることが多く、同様のフローを想定した
- 素のCSSにそれほど苦手意識はないためTailwind CSSに慣れることで実装できるデザインの自由度を高めたかった
といった点があります。
大変だったこと・気づき
①アプリのアイデア出しの難しさ
今回の個人開発を通して最も苦労した、かつ最も知見を得られた点です。
コミュニティ内でアイデアの壁打ちをしている際に言われてハッとした言葉がありました。
『個人開発アプリを作成するのであれば、ただ「やりたい」で終わらずに「他と差別化できるもの」「他人に価値を与えられるもの」を作ってほしい。』
とはいえこの条件を満たせるようなアイデアを出すのは非常に難しく、コミュニティの方々と何度もアイデアの壁打ちと推敲を繰り返しながら上記のような目標に近づけるものを作っていきました。
今回だけでアイデア出しができるようになったとは到底思えませんが、アイデアを考える上での大事な知見を得られたのは確かな経験になったと思います。
②最初から完璧を目指してもうまくいかない、スモールステップを積み重ねることの重要さ
今回の個人開発は、全体のゴールに辿り着くまでの道のりがこれまでの開発と比較して長いものでした。
長期的な開発で形になるものを作り上げるにはMVP開発の考え方を取り入れることが必要でした。
MVPとは、必要最小限の製品（Minimum Viable Product）を略した言葉です。その名の通り必要最小限のプロダクト・サービスを開発したうえで、顧客の反応を検証しながら改善していきます
今回の開発フローでは、段階ごとにMVP計画を立てて1つ1つのMVP段階をクリアしていくことを心がけていました。
おそらく最初から完璧なものを作らないといけないと思っていたら、暗中模索に陥って途中で投げ出す事態になりかねないと思いました。
実際にはスモールステップで形にすることで見えてくる追加の改善点が数多く見つかり、計画の重要性を思い知りました。
③AI生成ツールをいかにコーディング実装内容に組み込めるかの考え方
今回のアプリではGoogle Geminiを活用しました。
日常生活の中でも感じていましたが、今回の開発を通して改めてユーザーが意図するような出力結果を生み出すためにはプロンプトの巧拙が大きく関わってくることを再認識しました。
- 読みやすいように出力フォーマットを定める
- 指示の前提となる条件を具体的に設定する
といった部分は今回の開発で多少は意識したものの、正直100%思いどおりの出力結果を導けているわけではありません。
プロンプトの書き方については我流で進めていた部分も否めないため、記載方法を研究して今後に備えていきたいです。
今後に向けて
ここまででアプリを「とりあえず形にする」段階までは到達したものの、実用に耐えられるものにするにはまだ課題が残っています。
具体的には
- 課題登録画面での選択肢の増加・再検討
- AI出力結果の精度向上
といった部分に改善の余地があるため今後も改修を進める予定です。
最後に
今回の個人開発はここまでの学習内容と比較しても数倍の作業規模のプロジェクトになりましたが、その分だけ数多くの学びと知識を得ることができました。
また、Reactの学習を始めてから半年近くで自作アプリという""形になるもの""を作れたことは大きな自信につながりました。
今回の経験を踏まえてより良いものを作れるように精進していきたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼