0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【開発未経験3人】Webアプリを作るまでにぶつかった壁と学び

Posted at

1. はじめに

 2025年7月にオンラインで開催された【技育CAMP2025 ハッカソン Vol.8】に参加しました。
 このハッカソンは、7月18日にキックオフが行われ、そこから約10日間の開発期間を経て、7月26日・27日の2日間で成果発表を行う形式でした。本記事では、実際に参加してどのようにアプリを開発し、どんな学びがあったのかを振り返ります。

2. 参加のきっかけ

 「チームで開発をしてみたい」「何かを作り上げる経験をしてみたい」「Next.jsを実践で試してみたい」——そんな気持ちをずっと持っていました。これまでは、簡単なアプリを個人で開発したことはありましたが、チーム開発は今回が初めて。初めての共同作業ということで不安もありましたが、それ以上に「誰かと一緒に開発する経験をしてみたい」という気持ちが強く、思い切って参加を決意しました。

3. チーム構成と担当

 今回は、同じ大学の同級生2人を誘って、3人チームで参加しました。既存チームでの参加だったため、最初からある程度方針を共有した状態で開発に臨むことができました。チーム内では、それぞれがフロントエンド・バックエンド・インフラという領域を担当し、各自が触れてみたい技術を使うという方針を取りました。担当は以下の通りです。

  • フロントエンド:
    私が担当。Figmaを用いてWebデザインの作成。Next.jsとTypeScriptを用いて、ルートページ、データ入力ページ、試合データ表示ページ、試合データ分析ページ、選手登録ページの実装。
  • インフラ:
    Y君が担当。ラズパイ上でのWebサーバや開発環境の構築。
  • バックエンド:
    K君が担当。Laravelを用いたAPI開発や、MySQLを用いたDB設計。

4. 開発したアプリについて

 私たちのチームが開発したのは、バレーボールの試合データを簡単に記録・分析できるWebアプリ「VPS(Volleyball Play Scope)」です。
開発のきっかけは、チームメンバーのY君がバレーボールチームのコーチをしており、現場で次のような課題を感じていたことでした:

  • 試合のデータを紙で記録していると集計が大変
  • 記録データが正確に保存されず、後から見返せない
  • 記録したデータが十分に活用されていない
  • 個人やチームのパフォーマンスを振り返る手段がない

 そこで、誰でも簡単にデータを入力でき、試合ごとに選手の成績を可視化・活用できるツールを目指して開発を進めました。

5. 開発プロセス

 キックオフ後、まずはチームで集まり、簡単な要件定義からスタートしました。「誰が・どんな情報を・どんな流れで扱うのか」をざっくりと話し合いながら、アプリの方向性と最小限の機能を整理しました。その後、完成イメージをチーム内で共有するために、私が画面デザインを作成し、それをもとにさらに必要なデータ項目や機能を洗い出して、要件を具体化していきました。実際の開発では、“とりあえず動くもの”を最優先にする方針で進めました。限られた期間の中で最低限の機能(データの登録・表示)が動く状態を目指し、それぞれの担当領域に分かれて開発を進行。フロント・バック・インフラが独立して開発しやすいように意識しながら、必要なタイミングで連携や調整を行いました。

6. 技術的チャレンジと解決方法

 私たち3人は、全員がチーム開発未経験かつ、Webアプリケーション開発やWeb周辺技術に関する知識も十分とは言えない状態での参加でした。そのため、開発を進める中で一番苦労したのは、自分の担当領域と他の領域との“つながり”を理解することでした。「フロントエンドでのデータ入力が、バックエンドを通じてどのように保存されるのか」「APIがどこでどのように関わるのか」など、各自が実装する中で他の領域の仕様がイメージできず、開発が止まってしまうことも多くありました。
 結果として、実際に手を動かすよりも、調べたりドキュメントを読んだりする時間の方が長くなる場面も多く、学びながら進めるハッカソンとなりました。ただし、それが逆に良い経験にもなり、今後の開発において「なぜこの技術が必要なのか」「どこでつながるのか」といった全体像を意識する重要性を実感できました。

7. 結果と振り返り

 最終的には、最低限の動作確認ができるところまで開発を進めることができましたが、フロントエンドとバックエンド間のAPI連携がうまくいかず、想定していた完成度には届きませんでした。特に、チーム全員がチーム開発やWebアプリケーション開発に不慣れだったこともあり、チーム間での完成イメージのズレや、お互いの進捗や状態が把握しきれないことが原因で、連携部分で多くの時間を消費してしまいました。
 一方で、今回の経験を通して「チーム内で完成イメージをしっかり共有することの重要性」や、「進捗の見える化とこまめなコミュニケーションがプロダクトの完成度を大きく左右する」という学びを得ることができました。たとえプロダクトとしては不完全だったとしても、“どこでつまずいたか”や“どうすればもっとスムーズに進められたか”を体感できたのは、今後の開発経験にとって非常に大きな財産になったと感じています。

8. 今後の展望

 今回のハッカソンを通じて、自分の担当領域だけでなく、アプリ全体の構造や連携部分への理解を深めることの重要性を強く実感しました。今後は、フロントエンドの技術を磨きつつも、バックエンドやAPI連携の知識も学び、よりスムーズにチーム開発を進められるエンジニアを目指したいと考えています。また、今回のアプリ「VPS」は完成度としては不十分でしたが、今後も継続的に開発を進め、実際に使える形にまでブラッシュアップしていきたいと考えています。今回の反省を次回に活かして、また別のハッカソンやチーム開発の機会にも積極的に挑戦していきたいです。

9. 終わりに

 今回のハッカソンは、初めてのチーム開発・Webアプリケーション開発ということもあり、わからないことだらけで苦戦の連続でした。それでも、実際に手を動かして「動くものを作る」ことに挑戦した経験は、とても貴重な学びになりました。何よりも、チームで協力しながら一つのものを作り上げていく過程の楽しさと難しさを実感できたのが大きな収穫です。もし「自分はまだ実力が足りないかも」と不安を感じている方がいたら、思い切ってハッカソンに参加してみることをおすすめします。実力よりも、挑戦する意欲と学ぶ姿勢があれば、きっと得られるものは大きいはずです。
 最後に、技育CAMPの運営の皆さま、そして一緒に挑戦してくれたチームメンバーに感謝します。この経験を糧に、次はもっと完成度の高いアプリを作れるように成長していきたいです!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?