この記事は、6/11~18に開催された2023年度春ハッカソンの参加記事です。
今回26チームが参加し(過去最多！)、我々26班『Rack™』はtraP部員が作成したミッションをクリアすることでtraPに親しむことができるサイト『traP Mission』を作成しました。
メンバー
- @Ras (20B)
- チームリーダー
- バックエンド
- フロントエンド
- デプロイ
- @mizoreyuki (22B)
- フロントエンド
- ロゴ作成
- @Alt--er (23B)
- バックエンド
- スライド作成
- @cp20 (23B)
- フロントエンド
- デプロイ
- @Kuryu (23B)
- フロントエンド
- ロゴ作成
成果物
誰でも閲覧可能ですが、部員認証を行うと自身のミッションクリア状況や新規ミッションの作成を行うことができます。
今回のテーマである「いか」「しか」「めか」から、(大学統合後のtraPの動きは未定ですが)医科歯科大の学生にもミッションをクリアすることでtraPに親しんでもらうことや、頭文字を組み合わせると「しめい(=Mission)」になることからこの名前になりました。
開発はGitHubを用いて行いました。
今回からtraP公式のプロジェクト用Organizationが使えるようになり、新規orgを立てる必要がなくなりました。
また、部内向けPaaS基板の『Showcase』で直接GitHubが使えるようになり、デプロイ体験がさらに向上しました。
traP-jptraP-jp準備期間
準備期間は基本オンラインで毎日1~2時間程度の集会を行いました。
チームリーダー含めメンバー全員がオフラインでのtraPハッカソンに参加した経験がなかったため、開発期間に入る前に一度顔合わせも行っています。
また、今回は開発期間が2日のみだったため、準備期間はアイデア決め、使用する技術スタックの勉強を主に行いました。
1日目 (日)
互いに自己紹介をし、何を作りたいかを議論
どうやら、ゲーム制作志望とWeb制作志望が混成した班であることが判明
1日目ではどちらのジャンルにするか決まらなかったため、一旦JavaScriptでゲームを作ることを想定し、JavaScriptに慣れる目的でFizzBuzzとタイマーを書いてくる課題を出題しました。
2日目 (月)
引き続き内容について議論を行いました。
具体的な形からはまだ遠く、とりあえずテーマ(「いか」「しか」「めか」)から連想してみることに
ミッションという言葉はまだ出て来ませんが、traPクエストと呼ばれる原型が現れました。
3日目 (火, オフライン)
班メンバー顔合わせも兼ねて滝地下にて
2日目に出たテーマから3つ抜粋し深掘りしてみることに
過去のハッカソンブログも大いに参照されました！記録って大事
4日目 (水)
3つに絞った案が5つに増えました
グループ内で話しやすい雰囲気になってアイデアも湧きやすくなったのか
とはいえ、最後に採択されたのは堅実に具体性を高めていったtraPクエスト(仮)でした
このあたりで技術スタックも決まり始め、ハッカソンと同期間にtraP内で開催されていた『Webエンジニアになろう講習会』を理解してくることを課題にしました。
5日目 (木)
アイデアが決まったため、役割分担を決めたりアイデアの詳細を詰めました。
6日目 (金)
フロントエンド経験者の@cp20が大まかにページのプロトタイプ、実装方針などを考えてきてくれました
当日はほぼこのまま進んだので:dai::igyo:です
軽くAPI仕様を決め開発期間に備えます
開発期間
1日目 (土)
9時 全員集合しました、偉い！！！！！！！！
そして、、、
@Rasと@cp20がそれぞれの自作テンプレートを持っていたため、環境構築は一瞬で終わります。
バックエンドは、@Rasがテンプレートを今回用に書き替えている間に@Alt--erにエンドポイントの実装をしてもらいました。初めてだったとのことですが、テンプレートを参考に順調に進めてくれました。
初日は、@kuryuがページのヘッダー、@mizoreyukiがフッターを実装をしました。@cp20は用事のため対面で開発できた時間は長くありませんでしたが、初心者2人のイシューのアサインとコードレビューを無限にしてくれました。
昼は最近大岡山にできた銀だこ！！！！
余談ですがハッカソン中はこの写真も投稿された#random/memoryというチャンネルの流れが活発でチャンネル作成者が喜んでました
20時まで作業をし、明日に続きます。
2日目 (日)
1日目と2日目の間の時間は開発して良いということになっていたので、@cp20は深夜2時ぐらいまで進捗を産んでいました。そのせいで翌日遅刻してきました。
ということもありつつ開発は進み、バックエンド側は@alt--erが引き続き実装しつつ、@RasもOAuthなどをちょこちょこ実装していたりしました。
フロントエンド側は、@cp20が本気を出して実装しつつ、@Kuryu、@mizoreyuki、@Rasがそれぞれ1ページずつ実装するということをやっていました。
さらに@mizoreyukiの案を元に@Kuryuがファビコン、ロゴ、OG画像などを作成しました。
開発期間終了間近で、バックエンドの方が一通りできてきた頃に@Rasが中心となってデプロイ作業を行い、CORSなどを乗り越えて無事デプロイできました。というのは半分嘘で、バックエンドとフロントエンドを繋げての動作確認を全く行っていなかったために、バグが大量に発生しました。そのいくつかはすぐに修正できるものでしたが、全てを直すことはできず、試遊会の間もいくつか致命的なバグを抱えながらの運用になりました。
また、@alt--erが中心となって発表用のスライドを作成し、実際の発表までを行いました。
結果
賞は取れませんでしたが、雰囲気も良く圧倒的成長できました。
メンバーコメント
@Ras
前回の春ハッカソンを完成まで持っていけなかったため、リベンジも兼ねてチームリーダーとして参加しました。
バックエンドに関してはこれまで何度か担当したため、独りよがりで実装しすぎないよう気を付けていましたが、@Alt--erが積極的に質問をしてくれたおかげでバランス良く進めることができました。
また、2日目からはフロントエンド側にも参加しました。こちらは比較的経験が浅いためフレームワークの使い方を学びながら進めていきました。
フロントエンド担当の3人も着実に実装を進め、なんとか完成まで間に合わせることができました。
賞は取れませんでしたが色々なことができていい体験になりました！！！めちゃめちゃ楽しかった！！！お疲れ様でした！！！
@mizoreyuki
知識も経験も全然ない状態でハッカソンに凸ったので結構大変でした...。しかし、@cp20くんのテンプレートやアドバイスのおかげでなんとか走り切れました。彼の手によってwebページがどんどん綺麗になっていく様は壮観でした。私はイシュー消化に手間取ってロゴの案を出すとこまでしかできなかったのですが、@Kuryuさんが素敵なロゴを完成させてくれてよかったです。バックエンドと発表を担当した@Rasさんと@Alt--erくんもありがとうございます。
皆さんお疲れ様でした！！
@Alt--er
知識ほぼ0の状態からでしたが、強い方々に色々教えてもらってなんとか役割を持つことができました！初めはテンプレートのコピペとちょっとした部分を書き換えてといった実装が中心でしたが、最終的には自力で実装した部分も増えてきたので成長も感じつつあります。
1日目,2日目共にフロントエンド班からはある種の悲鳴が飛んでましたね...全く手伝えなくてごめん&&皆さんありがとうございました！！
@cp20
初めてのハッカソンで、わからないことも多かったですが、とりあえず動くものを作れたのは良かったと思います。チームで開発した経験があまりなくて、イシューのアサインとかコードレビューとかは普段あまりやって来なかったので、そういうのをやれたのはすごいいい経験になりました。@Kuryuさんも@mizoreyukiさんもすごい頑張ってくれたので感謝です。
@Kuryu
プログラミングも開発も初心者でわからないことだらけでしたが、チームの方々にたくさん教えていただきなんとかなりました。ロゴの作成は@mizoreyukiさんの原案があったので爆速で作ることができました。その結果ロゴを誤字りましたゴメン
ハッカソンを通して色々な面で圧倒的成長を果たせました！！あとめっちゃ楽しかったです！！圧倒的感謝！！！
