はじめに
私は2024年7月より、内定直結型エンジニア学習プログラム「アプレンティス」に6期生として参加しています。
アプレンティス｜活躍するエンジニアの育成・マッチングサービス
プログラムの一環で、3名のプログラミング未経験者によるチーム開発を行いました。本記事では、その過程や開発したアプリケーション「YALOOP」について紹介します。
チーム開発の開発要件
テーマは「自分たちの役に立つものを開発する」こと。技術スタックはHTML、CSS、JavaScript、MySQL、Rubyで、フレームワークは使用せずに進めました。
完成アプリ「YALOOP」の概要
YALOOPは、タスク管理と時間計測を行うアプリです。主な機能は以下の通りです
タスクを記入してStartボタンを押した時
・左側のカウウントが進みます
・ページはリロードさせずにfechAPIによる非同期処理でデータベースに保存し、右側にタスクが反映されます
・タスク記入欄は操作できなくします
・StartボタンがStopボタンに変わります
Stopボタンを押した時
・サーバー、ブラウザをリロードしてデータベースの情報を画面に表示します
・左下のグラフにタスクと時間が反映されます
・すぐにStopボタンを押すとタイムが0分でグラフの変化がわからないため、プレゼン時は左下にダミーデータを挿入するボタンを設置して対応しました
・同じ名前のタスクをこなした場合は時間が合算されます
・グラフは過去30日な学習時間にも切り替えられます
・右下のSaveボタンを押すと日報が保存され、メッセージが出ます
・右上の日付を変更すると過去の日報が見ることができます
作品のリポジトリはこちら↓
GitHub:https://github.com/traning8988/yaloop
開発日程
1.アイディア決め
2.スライド作成、要件定義
3.設計、タスク出し
4.環境構築
5.実装、プレゼン定義
1~4の項目を個人課題と並行して各１週間づつ
5の期間はチーム開発のみに集中して１週間で行う
アイディア決め
チームで話し合い、私たちが困っていた「時間管理」をテーマにアプリを開発しました。開発の全体像を共有するため、インセプションデッキを作成し、以下の10の質問に答えました。
インセプションデッキ
インセプションデッキの概要はこちらをご覧ください↓
インセプションデッキとは？作成メリットや構成要素・作り方を解説
私たちのプロジェクトのインセプションデッキは以下の通りです。
問1.私たちはなぜここにいるのか
誰に向けているのか→自分たちの時間管理に対しての解決
自分たちの仕事の核となる価値→日報の継続のハードルを下げる
何をお客様に届けたいのか→リズムを作り出すのに、習慣化のきっかけ
問2.エレベーターピッチ
誰に向けているのか→目標に向けて学習している人
要約すると何なのか→学習時間の可視化、継続のハードルを下げるモノ
どんな価値が生み出せるのか→学習のリズム、習慣化のきっかけ、継続のハードルを下げる
ライバルとの違いは何か→シンプルでわかりやすい、機能の量（少なく）
問3.パッケージデザイン
ひらけば説明なくても使える
デザインが説明になってる
問4.やらないことリスト
やること
・時間の可視化のシステム
・下記の項目の日報
・何時間やったかのコミットタイム
・達成したタスク等
・自由記入欄
やらないこと
・他ユーザーはなし
あとで決めること
・レスポンシブ対応
・Twitter、Discodeへの投稿機能
問5.ご近所さんを探せ
メンターの方々
問6.技術的な解決策を描く
HTML/CSS/JavaScript/MySQL/Ruby/
WEBrick/Docker/fechAPI
問7.夜も眠れない問題
どうやってフレームワークを使わずに作るのか
いざこざあったら必ず一人が仲裁役に回る
問8.期間を見極める
カリキュラムのスケジュール通りに進める
開発期間は最初の4日でメイン機能は完成させる
問9.トレードオフスライダー
スコープ→問４のやることを全て備える
予算→0
納期→9/5 22:00
品質→バグを出さずに動くようにする
問10.何がどれだけ必要か
カリキュラムの中で学習したもの（HTML/CSS/JavaScript/MySQL/Ruby）
Webrickの知識、Dockerを使った環境構築方法
４日間という期間でメイン機能を作り上げるために計画を練る
スライド作成、要件定義
スライド作成はハッカソンプレゼンテーションYahoo! JAPAN Hack Day 2018を参考にして構成しました。
https://docs.google.com/presentation/d/1aJ4mUAktdZJ0oBqEfizD93t7-JU_Kirb5vrd4XHiFGs/edit#slide=id.g2ed814620e2_4_20
要件定義
こちらの記事を参考に要件定義を考えました↓
https://be-marke.jp/articles/knowhow-website-requirement-definition
1.背景
・現状の問題
学習を継続するのは難しい
学習の習慣化のきっかけが欲しい
2.プロジェクト概要
人員: 3人
スケジュール:
使用ツール: Docker
定例ミーティング: 週２回（火、土21:30~)
3.サイト構成
サーバーOS: Debian
クライアントOS: macOS
デバイス: PC(余裕があればモバイル)
サイトマップ: トップページのみ(日、月の切り替え)
4.システム要件
・必須機能
タスク入力
スタートストップ休憩ボタン
開始、終了の差分で合計時間の出力
完了後に時間をグラフに出力（縦棒グラフなら上限を決めておく）
1日単位と月単位でグラフ化（ボタンひとつで入れ替えられる,非同期処理？）
完了後日報機能（行ったタスクと時間を出力、フリーの記入欄にデフォルトの項目を入れておく）
・追加開発
UIの色変更機能（時間、タスク進行中）
レスポンシブデザイン
ユーザー登録機能
一度作ったタスクはタグ化して紐付け再度選択できる
ストックタスクは編集、削除できる（？）
x連携、Discode（x,Discodeのアイコンをクリックすると日報とurlを載せてあとはポストを押すのみ）
5.技術要件
HTML,CSS,Ruby,JavaScript/AJAX,SQL/MySQL,Git/GitHub,Docker,TuwitterAPIv2/webrick
フレームワークなし
6.インフラ要件
ローカルのみ
7.セキュリティ要件
現時点では考慮しない
8.リリース要件
本番リリースなし
9.保守運用
なし
設計、タスク出し
設計については、フリーボードを使用してチームメンバー全員で共有して進めました。
テーブル定義は以下の通りです。
タスクの振り分けについてはフロント、バックで分けるか機能ごとに分けるかで迷いました。今回はデザインずれが無いように一人がフロントを担当して二人でバックを担当しました。
環境構築
DockerでRuby3.2.2,MySWQLの環境を構築して'webrick','mysql2'のgemfileの導入をしました。環境構築フェーズの初回ミーティングの時にDockerfile,Docker-compose.ymlをGitHubで共有して構築を試みましたが、dbの接続がうまくいきませんでした。次回のミーティングまでにDockerfile等の修正をして、volumeMountのキャッシュを削除する設定を追加する等の対策でどうにか全員で同じ環境を共有することができました。
環境構築までの準備が予定よし少し早く終えたので実装開始までにチームでGitHubを使用方法をシュミレーション、テストファイルを作ってWebrickの使い方をシュミレーション、DBのテーブル作成等をして実装にスムーズに入れるようにしました。
実装（担当箇所を中心に）
実装開始後すぐに、チームメンバーが全体のデザインを提供してくれたおかげで、スムーズに開発を進めることができました。
私が担当したのは、以下の部分です：
・DockerfileとDocker-compose.ymlの作成
・データベースの構築
・ルーティングの構築
・サーバーの構築
・左上のタスク機能（Start、Stop、タイマー機能）
・右下のSave機能（ユーザー入力データをデータベースに保存）
StartボタンとSaveボタンの機能は、Fetch API を使用して非同期通信を実装しました。
Save機能は、右上に表示されている日付に紐付けて、ユーザーの入力データをデータベースに保存しています。
振り返り
よかった点
・開発中は基本的にDiscordを活用し、音声通話を繋いでコミュニケーションを取りながら進めたため、認識の齟齬が発生することなくスムーズに開発を進めることができました。
・チーム全員が全ての工程を自分ごとと捉えて進められたので、迷った時に相談し合えた。
・先にタスクが終わったメンバーから率先して振り分けていないタスクを巻き取っていった。
・GitHubは準備段階で色々試していたので比較的少ないトラブルで終えられた。
今後の課題
・準備段階でどんなデータが必要でどんなデータベース設計をしっかり考えてきたつもりだけど、開発中盤でデータベース設計の爪が甘くクエリが複雑になってしまった。
・睡眠を取らずに寝落ちするまでやると、後半何がしたかったのか分からないコードになっていて結局やり直すことになった。メリハリを大事にして開発する。
・今回はほとんどの時間をチームメンバーと共有しながらできたので問題にならなかったが、次回も同じように行くとは限らないので細かいタスク分けまでしっかりする。
・データの受け渡しのイメージがしっかりできていなかった為、ルーティングの部分で苦戦した。
最後に
今回のチーム開発は、何よりもメンバー全員のチームワークの良さが際立ちました。メンバーが最高で、互いにサポートし合いながら開発を進めることができたおかげで、非常に楽しい時間を過ごすことができました。開発に夢中になり、気づけば時間を忘れて没頭する瞬間も多く、ものづくりの楽しさを改めて実感しました。
何かを作り上げることの大切さを深く感じるとともに、実際に手を動かして形にすることが大きな力になるという貴重な経験を得ました。これからも、今回の経験を活かしてさらに成長していきたいと思います。