🗓️
初学者3人、フレームワーク禁止で挑んだ1週間のチーム開発記録【学習×家計簿×カレンダー】

2025/06/30に公開
 1.はじめにアプレンティスシップというプログラムに参加する中で、初学者同士で初めてチーム開発を行ないました。自分で考えたアプリケーションを開発するという経験も初めてで、それをさらにチームで作るという貴重な経験をさせていただきました。

フレームワークの使用は禁止。だけどなんとか形になった！ということで、記録も兼ねて、今回の経験を通して思ったことや学んだことなどをまとめていきたいと思います。

https://apprentice.jp/lp

 2.開発したもの今回チーム開発で作成したのは、学習時間と家計簿をカレンダー形式で記録・管理できるというアプリです。

カレンダーのマスにはその日1日の合計支出金額と合計学習時間が表示され、

画面左側で支出金額の登録が、画面右側で学習時間の記録ができます。
カレンダーにカーソルを合わせると「詳細・編集画面」に飛べるようになっており、

「詳細・編集」画面ではすでに登録しているデータの確認・修正と、新規登録ができるようになっています。


 3.開発するまでの流れ
 3-1.開発するアプリの要件今回チーム開発するにあたり、指定された条件は以下のものでした。
『自分たちの役に立つものを開発せよ』
ベースとなる技術はHTML/CSS/JavaScript/MySQL/Ruby(またはPHP）を使用すること
Rails,Laravel,Reactなどのフレームワークを使用しないこと
実装期間は1週間（準備期間は開発してはダメ）
以前教材でアプリケーションの作成を学習していた際にはRailsを使用して作っていたので、Railsを使ってはいけない？！どうやるんだ？？しかも1週間で実装？？！！状態です。

何もかもわからない状態でしたが、とりあえず何を作るか。アイデア決めから始まります。

 3-2.アイデア決め『自分たちの役に立つもの』ということで、まずはチームメンバーと普段何してますか？と言った感じの雑談から、自分たちの日常で使えそうなものはないか？アイデアをできる限り出しました。

チームメンバーは私を含め3人。全員でアイデアを絞り出しました笑
・自炊するよね〜→冷蔵庫の中の在庫からレシピを提案するアプリ

・今週起きた良かったこと(GOOD)・新しく学んだこと(NEW)をチームで集まった時に報告してるよね〜→GOOD&NEWを記録するアプリ

・学習時間の記録ってどうしてる？→学習時間をいい感じに管理できるアプリ

・家計簿の記録をカレンダーで管理してるんだよね〜→それをアプリにしてみる？
こんな感じで、ひたすらにアイデアを出しました。
アイデアを出していく中で、3人で共通しているものは全員がエンジニア転職を目指してプログラミングを学習しているということ。

プログラミング学習に関連することなら、自分たち全員に役に立つものだ！ということで、だんだんアイデアが固まってきます。
私たちが参加しているアプレンティスシップでは、毎日学習時間の報告と振り返りを個々に行うことになっていて、学習時間の記録に使えるアプリがいいのでは？ということで、

軸は「学習時間の記録」に決まりました。

ただ記録するだけではなく、達成感などが味わえるのが嬉しいよねという話になり、

家計簿の記録をカレンダーに書き込んでるけど、何もお金を使わなかった日に花丸をつけてて、めっちゃ達成感あるよ？となり、

カレンダー形式で学習時間を表示したら達成感味わえそう！ということで、カレンダー形式で表示することに。

それなら学習時間x家計簿をカレンダーで表示してもいいのでは？となり、学習時間と家計簿をカレンダー形式で記録・管理できるというアイデアに決まります。

 3-3.要件定義アイデアが決まったら、具体的にどんな機能が必要なのか？要件定義をしていきます。

開発期間は1週間しかないので、できるだけミニマルに。余力があればプラスαで。という感じで、必要な要件を洗い出していきます。

最終的にまとまった要件は↓こんな感じでした。

実は、私はこの要件定義で初めてチームで開発する時の難しさを実感しました。
アイデアは決まっていて、作りたいものも想像できているはずなのですが、時々他のメンバーと話が噛み合わない。
そうなんです。

まだ言葉でしか共有できていなくて、それぞれがお互いに頭の中で想像するしかなかったので、いまいちどんな感じなのかが分からず、その機能、こっちですでに実現できてない？みたいなことが発生してしまいました。
百聞は一見にしかず。どんなのを想像してるかを確かめることにしました。

私がイラストを描けるアプリを持っていたので、なんとなくこんな感じ？と書きながらお互いの認識をすり合わせることで、どんな機能が必要か？どう動きそうなのか？と言ったことを共有できました。
実際に描いたイラストはあまりにも粗末でお見せできるものではないのですが、やって良かったと思っています。

 3-4.設計要件定義が完了したら次は設計です。

ワイヤーフレーム・画面遷移図・テーブル定義・技術アーキテクチャの決定などを行います。

設計段階で1番時間がかかったのはワイヤーフレーム＆画面遷移図の作成でした。

今回私たちは画面の遷移が少なかったため、ワイヤーフレームと画面遷移図(UIデザインも）をセットで作成したのですが、準備期間の中でこの工程に1番時間をかけていたと思います。
デザインまで一気に行ったのが時間がかかってしまった原因だと今になって思います。

Figmaで作成していたのですが、つい楽しくなって、ゴリゴリにデザインをしてしまいました笑
ワイヤーフレームは画面構成やレイアウト、配置などをグレースケールで設計する。

画面遷移図は、ユーザーの操作に対してどう画面が遷移するかを整理する。

最後にUIデザインだったんですね。
デザイン楽し〜って思いながら色々いじってしまい、かなり時間を取ってしまったこと、反省しています。

（今この記事を書きながら気づいたのですが、現在アイデア出し中の個人開発のアプリのワイヤーフレーム・画面遷移図もデザインから設計してしまってました。。反省。。。）
ということで、Figmaで作成したのは↓こんな感じです。

 3-5.タスク出しどんなアプリを作るかが具体的に決まり、次はタスク出しです。

初学者でチーム開発する時に1番困るのがタスク出しなのでは？と思っていたのですが、その通りでした。

1人で開発する時なら、出戻りがあっても自分だけの責任・負担になるので、とりあえず実装！って感じでもいいのですが（本当はよくないかも。多分良くない。。）

チーム開発だと、誰かが止まったり、やり直したりしていると他のメンバーの開発にも影響が出てくるので、そういうわけにはいきません。

誰がどこやる？でざっくり決めるのだと危ないので、できる限りタスクを洗い出し、どう分担するかを考えました。

すみません。考えると言っても、初めの第一歩すらわからなかったので、ChatGPTにタスク分けのヒントを貰いました。（ゴリゴリ貰ってしまいました）
今までの準備期間で作成してきた要件定義やテーブル設計などをもとにAIが提案してくれたタスク分けをもとに割り振ったものが以下のものです。

あれ、少ない？と思ったかもしれません。

実は、作成予定のアプリ内容をメンターさんに見ていただいた際に、1週間で全てを実装するのは厳しいかも。ということで、MVP(Minimum Viable Product：実用最小限の製品) 段階のタスクになってます。

MVPではメイン画面を作ろう！となり、詳細画面は一旦保留になりました。(大幅に削りましたね）
タスク管理はNotionで行いました。

↓タスクの順番はちょっとバラバラになってますが、もう実装に夢中でちょっと管理は疎かだったかもしれません。反省。


 3-6.環境構築環境構築では、GitHub上にリポジトリを用意し、使用する技術で簡易的なページを表示できている状態にしておく。ということで、GitHubのリポジトリの作成と、使用する技術のバージョン選定、環境の準備などを行いました。

Dockerいいんでしょ？って感じで、Dockerを使って環境構築をしてみたのですが、個別にPCに色々インストールしなくて済むし、誰かのPCだけでうまくいかない。。と言ったマシンによる不具合に合わないという点では、初学者に優しい環境構築ができて、良かったと思います。

Dockerfileやdocker-compose.ymlとかの設定で別途学習が必要なので、それはそれで大変ですが。。。
かくいう私も、Dockerについてまだミジンコレベルでしか理解できていないので、ちゃんと時間を取って改めて学習しようと思っております。
環境構築以外と早く終わったな。と思っていたのですが、今思えば、ディレクトリ構成などもここで決めておけば良かったな。と思っています。（後からチームメンバーが整えてくれました。感謝。）

 4.いざ実装！ここまで、とても長くなってしまいましたが、ようやくプログラム書き書きタイムです！

前述のタスク分けで、私はカレンダー部分の実装を担当することになりました。

カレンダーの実装ってどうやんねん？状態だったので、分かりやすそうな解説記事や動画を参考に実装しました。

（お恥ずかしながら、JavaScript部分に関してはほぼ丸写しレベル。伸び代ですね。）
フロント部分ができたらカレンダーに合計記録を描画するためのAPIをRubyで作成していくのですが、これもどうやんねん？状態でした。笑
幸い他のチームメンバーが先に支出記録管理用と学習記録管理用のAPIを作っていてくれていたので、それを参考にカレンダー描画用のAPIが作成できました。
私が苦戦しながらなんとかカレンダーを表示させ、そこに合計記録を描画するAPIを作成する中、他のチームメンバーは爆速で開発を進めてくれ、なんと、MVP機能の他に、詳細画面の作成・カテゴリー追加機能の作成など、当初想定していた機能をほぼ全て作ることができました。

私はカレンダー部分しか実装できていないので、本当にチームメンバーに感謝してもしきれません。

 5.メンターさんからのフィードバック開発を終え、完成したアプリを発表し、アプレンティスシップのメンターの方々からのフィードバックをいただきました。
私は今回発表する側ではなかったのですが、作成したものをプロの方々に見ていただくだけで緊張しまくりで、手に汗握りながら代表メンバーの発表を聞いていました。

発表はめちゃめちゃ良かったです！私も転職で発言する時などはあれぐらい目指さないといけない。。と軽い危機感を抱きながら聞いてました。
メンターさんからのフィードバックとしては、UIがいい！1週間でここまでできていて素晴らしい！というような感じだったと思います。

(多分そんなことを言っていただけていたと思います。褒められた分に関しては、緊張で記憶が曖昧です。笑）

ご指摘があった部分は、

・合計時間・合計金額の表示が、月が変わっても最新の合計金額のまま固定になっていた

・学習時間と家計簿を組み合わせたことによる相乗効果が足りない

・使いたい！と思わせるような発表だともっと良かった

というような内容でした。
特に2つの機能を掛け合わせたことによる相乗効果がもう少しあれば良かったというご指摘はめちゃめちゃ刺さりました。

最初にアイデアとして達成感を味わえそうだということでカレンダー表示にしたものの、そこに学習記録と家計簿を合わせる必要があったかと言われると、そうでもないよな。と思いました。

どちらも記録したいものだから、2つを掛け合わせたのですが、それなら、勉強を頑張った分、使っていい金額が増えるだとか、

学習x家計簿をもっと融合できたな。と今振り返れば思います。

（言い訳ですが、実は最初にアイデアとしては出ていたものの、複雑かぁ〜。となり、却下してしまいました。複雑で良かった。。。反省。）

 6.振り返り
 チーム開発を振り返って今回のチーム開発を通して私が一番強く感じたのは、

「アプリケーション開発は準備期間のほうが長い!!」 ということでした。笑
この記事の分量からもわかる通り、実際にプログラムを書いていた時間は本当にわずか。

チーム開発だからこそ余計にそう感じたのかもしれません（実務ではまた違う面もあると思いますが）。
そして同時に、最初の段階がめちゃくちゃ大事だということも実感しました。

フィードバックにもあった通り、「なぜこのアプリを作るのか？」「誰のどんな課題を解決するのか？」といった開発に至る経緯や目的の解像度が甘いままだと、良いものは作れないんだなと痛感しました。
“使いたい！”と思ってもらえるものを作るには、もっと工夫と観察が必要だなと思います。
また、チーム開発を通して気づけたのは、

視覚で共有することがめっちゃ大事ということ。

ワイヤーフレームや画面遷移図があると、認識合わせがしやすくなるし、議論の効率も上がると感じました。

 個人的な学び・反省デザインって楽しい！

　良いデザインかどうかはさておき、見た目を考える時間はすごくワクワクしました。
Lintチェックを後回しにしすぎた

　試しに静的解析ツールをかけてみたら200件以上の指摘…笑

　早めにやっておけば修正も楽だったなと思います。
テストコードを書かなさすぎた

　「動けばOK」は通用しない。不具合を見逃したことがありました。
ディレクトリ構成を最初にちゃんと設計すべきだった

　途中で修正が入ると、チーム全体に影響が出てしまうので要注意。

 7.最後に何より今回の経験で大きかったのは、

「自分たちでもアプリケーションを作れるんだ！」という自信が芽生えたことです。
この経験を活かして、今後は自分自身のオリジナルアプリ開発にも挑戦していきます。

そしていずれは、「使いたい！」と思ってもらえるサービスを生み出し、

「雇いたい！」と思ってもらえるようなエンジニアになることを目指して、これからも学習を続けていきます。
最後までご覧いただき、ありがとうございました！