チームハッカソンを終えて

## 1,はじめに
この記事は，初ハッカソンでの成果，気付き，今後への活かし方をまとめました．
ツッコミどころ満載の記事ですが，最後まで読んでくださると幸いです．

## 2,簡単に自己紹介
* エンジニアを目指す20歳
* 8月から勉強を開始（3ヶ月強経過）
* これまでに，Linux Git GitHub Ruby MySQL HTML CSS JavaScriptを学習

## 3,今回のハッカソンの詳細
#### ルール
* アプリ制作期間は1週間
* アプリはローカル環境で動作するもの
* 制作期間の最終日にプレゼンをして作品を発表

#### 使用可能技術
* HTML 
* CSS 
* JavaScript 
* MySQL 
* Ruby

#### 使用不可技術
* Ruby on Rails 
* Riact
* その他フレームワーク

## 4，課題
* 食材の買い忘れを無くしたい！！
* 買い物リストを作成する手間を無くしたい！！

## 5,使用技術
* フロントエンド：HTML CSS JavaScript
* バックエンド：Ruby（WEBrick使用）
* DB：MySQL

## 6,完成したアプリ

1，ログイン画面からログインをする
![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/d3f98f1b-2be0-7215-e2b9-3a564d8fdb10.png)

2，選択画面から料理を選択（今回はプリン，オムレツ，茶碗蒸しを選択）
![screencapture-localhost-8000-cooking-select-html-2023-12-09-19_25_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/4fcdc7e8-4b19-8d79-0b1e-39d8832ade55.png)


3，買う材料を選択し，分量を変更，メモを記入し確定を押す
![ingredients.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/d8f7f366-975d-517b-28c6-57f56921ce8c.png)

4，履歴に登録される
![history.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/96d52524-3718-304b-1654-428d8e60477b.png)

5，詳細を見たい履歴を選択すると，購入するべき材料が表示
![screencapture-localhost-8000-decide-2023-12-09-19_34_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/93fc4472-01ed-b2a1-7de6-fb11ccd97d7f.png)

## 7,その他チームでやったこと
* 課題定義
* 要件定義
* 画面遷移図作成
* DB設計 

### 7-1,課題定義
###### 背景目的
* 食材の買い忘れを無くしたい！！
* 買い物リストを作成する手間を無くしたい！！
###### 達成状態
* レシピの材料の自動表示
* 買い物リストの自動生成

ここの課題定義の時間をしっかり確保せず，解決したい課題と，達成状態がしっかり定義できていないまま，開発を進めてしまったことが，最も大きくて根本的な反省ポイントです

### 7-2,要件定義
###### ページ遷移図，ワイヤフレーム，機能データ
* ページ遷移図
![スクリーンショット 2023-12-10 20.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/fffcb939-316b-c321-fefb-07a43ba8575e.png)
![スクリーンショット 2023-12-10 20.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/ea8d1ed4-9b65-850a-df9a-25952af221db.png)

* ワイヤフレーム，機能データ
![スクリーンショット 2023-12-10 20.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/499b2125-e5d8-806d-5a8a-f5b3cea06e98.png)
![スクリーンショット 2023-12-10 20.52.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/36766381-1bf1-16cd-bf70-def4731f81a5.png)
![スクリーンショット 2023-12-10 20.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/2de6041e-c1d1-6972-379f-fb211ddf0e16.png)
![スクリーンショット 2023-12-10 20.52.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/bfa22f9e-481f-5b5d-6c8b-b919980389fd.png)
![スクリーンショット 2023-12-10 20.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/1b53a6e2-168a-3562-24c6-218c9cfcde25.png)
![スクリーンショット 2023-12-10 20.53.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/dacf7065-7b53-b0d3-e392-f4ec2e5926b5.png)
![スクリーンショット 2023-12-10 20.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/6909cb28-9112-10dc-a752-ee38dc2fc835.png)
![スクリーンショット 2023-12-10 20.52.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/b6df0063-ac7c-5885-72d2-13740fc86264.png)

### 7-３,DB設計
実際に作成したER図
![スクリーンショット 2023-12-09 22.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578531/f032f546-366f-1181-f2ae-984babe99d91.png)


### 7-4,プレゼン
実際に私がチーム代表としてプレゼンをしました．
人生初プレゼンが私以外の3人のチームを背負ったプレゼンでとても緊張しました．
練習をした分できはよかったので，新しいチャレンジができたことはとてもよかったです．

## 8,今回の振り返り
KEEP
* 誰にでも当てはまる課題に対するアプローチだった
* チームの関係性がよくコミュニケーションが密だった
* 発表までに動作するアプリを作れたこと

PROBLEM
* 開発初期段階のタスクの完成度が低く，後々見返すと取り返しのつかないミスをたくさんしていた
* コンセプトと結果の整合性が取れていなかった

TRY
* とにかく，課題定義，要件定義など，開発初期段階のタスクを洗練させる
* アイディア出しの際に、課題の解決となるサービスかを今一度確認する。
* 課題主体でサービスを考える。(多機能だから良いとは限らない)
* 作業に取り掛かる前に、サービスの全容を明確化し共有する。
* なぜなぜ分析をする。気になったらそのままにせず発言する。
* コアの機能を明文化し、そこに注力する。

## 9,最後に
今回の記事はチーム開発のチーム全体の成果反省を記事にしました．
今後は自分のタスクや反省課題なども追加で記事にしたいです．