はじめに...
Y君・K君と私の3人でチームを組み、ハッカソンに参加しました。
この日記では、開発期間中の進め方や、実際に感じた疑問・つまずいたポイントを記録として残していきます。初めてのチーム開発・Webアプリ開発ということもあり、リアルな気づきや学びを言語化することを目的としています。
Y君との会話から課題発見！
今回のハッカソンでは、特定の開発テーマは設定されておらず、自由にアイデアを考えてよい形式でした。だからこそ、「なにか身近な課題や不便を解決できるものを作りたい」という思いが強くありました。そんな中、チームメンバーのY君と話している中で、ある課題が見えてきました。
Y君は現在、バレーボールのコーチをしており、試合データの記録や活用方法に悩みを抱えているとのことでした。
- 試合の記録はすべて紙で行われている
- そのため、データの保存が不完全で、あとから振り返ることが難しい
- そもそも記録したデータがうまく活用されていない
この話を聞いて、私たちは「試合データの記録・保存・活用をもっと簡単に、効率的に行えるアプリを作ろう」という方向でアイデアを固めていきました。
簡単な要件定義
最初に、アプリにどんな機能が必要かを簡単に洗い出しました。「便利にすること」よりも、「これまで紙で行っていたことをそのままデジタル化する」というシンプルな方向を意識しました。
Y君の現場での課題をもとに、以下のような機能が必要だと考えました：
- データを入力するページが欲しい
- 試合ごとの記録を振り返りたい
- 複数試合のデータをもとに分析したい
- 選手ごとの成績を個別に見たい
入力する内容は、これまで紙に手書きで記録していた情報をそのまま反映する形で設計することにしました。
各自の担当を決定
- 私 ：フロントエンド
- K君：バックエンド
- Y君：インフラ
技術の決定
フロントエンド
React単体でも実装は可能でしたが、Next.jsのルーティング構造やAPIの試しやすさが、今回のようなチーム開発においては特に有効だと感じました。また、私自身、以前からNext.jsに触れてみたいという思いがあり、実際の開発の中で使いながら学ぶ良い機会だと考えて採用しました。
ファイルベースでページを作れる点や、プロジェクト構造が分かりやすい点もあり、各メンバーが自分の担当領域に集中しやすい環境を整えられたと感じています。
バックエンド・インフラの技術選定理由は担当にあとで書いてもらうかも...
Figmaでページデザインを作成
チーム内で完成イメージを共有するために、Figmaを使ってページのデザインを作成しました。開発を始める前に画面構成を視覚的に確認することで、メンバー間の認識のズレを防ぎ、「どのページにどんな情報が必要か」を明確にする手助けとなりました。
↓↓↓ ルートページ ↓↓↓
↓↓↓ データ入力ページ ↓↓↓
などなど...
てか、何から始めてどこまでやればいい？？？
Reactの学習はしていたものの、実際にアプリを開発した経験はこれが初めてでした。
「どこから手をつければいいのか」「どこまでやれば自分の担当として十分なのか」——最初はその感覚すらつかめませんでした。
この感覚は、自分だけでなくチームの他メンバーも同じでした。各自が自分の担当領域（フロント・バック・インフラ）に関する技術にはある程度触れたことがあるものの、実際の開発経験が少なかったため、開発の最初から最後までの流れや、他の領域と自分の担当がどうつながるのかが分からず、手探り状態でのスタートとなりました。とりあえず調べるしかない...
Web APIの実態は???
これまでは「APIを叩くだけでOK」という使い方しかしてこなかったため、内部でどんな処理が行われているのか、深く意識したことはありませんでした。
まず、Web API(Application Programing Interface)とは
Web APIとはAPIの一種で、日常的に利用しているWebブラウザーで用いられているHTTP/HTTPSプロトコル（通信規則）を用いてネットワーク越しにアプリケーション間で利用できるインターフェースです。HTTP/HTTPSプロトコルはWebブラウザーとWebページを提供するWebサーバーの間でデータをやり取りする通信規格であるため、広く一般的に用いられています。
出典: NTTドコモビジネス
JSでWeb API使うとしたら？？
特定のURL(APIエンドポイント)に対して、HTTPリクエストを送信し、サーバからデータを取得・送信することを指す。
＜用語の使いかた＞
- APIを叩く：APIにリクエスト(HTTP通信)を送ること。
- フェッチする：リクエストを送って、レスポンスとしてデータを受け取ること
- URLを指定：通信先のAPIのエンドポイントを指定すること
RESTとは？？？
Web APIについて調べていると、よく出てくる言葉。設計思想で概念らしい。バックエンドが意識すること。
REST は Representational State Transfer の略で、Web API の構築方法に関するルールとガイドラインの集まりです。
出典：Red Hat
＜フロントエンド視点での嬉しさ(?)＞
- URLとHTTPメソッドのパターンで、ほとんどのAPIに対応できる
- fetchやaxiosでそのまま使える
- バックエンドと棲み分けしやすい
- 一貫性があって保守しやすい
ここで、#1終了。