第一弾2024🔰大学生がハッカソンに出場した感想-マウントなし、自己肯定感上がります-

はじめに

初めまして、yamamotoです。
先日サポーターズ主催の初心者向けハッカソンに、同じ飲食店でアルバイトをしている友人と参加し、結果箸にも棒にもかからない結果を手にすることができました。 😆
意外とこういうダメダメな結果を残した大学生の経験談は少ないと考え、執筆に至りました。
参加するか迷っている方の力になれれば幸いです。

最初に当時のメモを掲載し、その後、ハッカソンを通して学んだことや気をつけたいことについて述べようと思います。

(実際に作成したものがこちら(type sprint))

type sprintというtypescriptのタイピングゲームを作りました。typingとtypescriptとsprintをかけたオヤジ的ネーミングのゲームです。

着想はプログラミングの文法をテーマにしたタイピングゲームあったらいいのにね。というところからで、友人がBlenderを使いたいということからタイピング、プログラミング、3Dアニメーションの三要素を掛け合わせたものを作りました。
画像を見ていただいたらわかる通り、まぁギリギリなクオリティです笑。
作った自分が言うのもアレですが、あんまりプレイしたくないですね。普通に右画面邪魔ですもん。

(発表資料がこちら)
https://www.canva.com/design/DAF6fcIq5O0/u5G3aM5jYmcpy0_xMWX9Mg/edit?utm_content=DAF6fcIq5O0&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

なお、ダメダメだったからといって楽しくなかったわけではなく、俺たちなんでこんなひどく意味わからないもの作ってるんだ。という笑いが絶えない最高のハッカソンになりました。

当時のメモ

事前開発期間

MTG一回目

ボトムアップ的に、使える技術を列挙し、実現可能な範囲を設定→そこから解決できる課題を選定といった形でMTGを進めた。その結果、プロダクトの方針を固めることができた。　具体的には、Typescriptのタイピングゲームを作ること、Blenderを使った3Dモデルを使うことまでは決めることができた。一歩前進かな。
お互いほぼ初心者(プログラミングの文法がわかる、開発環境がある、程度）のため、ハッカソンの本番開発期間が非常にキツくなりそう。頑張ってなんとか完成まで漕ぎ着けたいという話をした。

MTG二回目

主にプロダクトをどう完成に導くか、について話し合い、フレームワークなどは学習コストが高いため使わないこと、kanbanflowを使いタスクを管理すること、インフラ周りはfirebaseに全て頼ることなど決定した。

また、html、css、javascriptは私に、Metasequoia、Blenderは友人に任せるという役割分担を決定した。この時、このまま開発に進んでいいのか何度も立ち止まって考え直したことで、時間はかかったものの、お互いに腹落ちした上で開発に進んでいけそうだ。　GDについての本では、筋からずらすな、一度決めたことを差し戻すなといった記述をよく見るが、時間に猶予がある場合はあらゆる可能性を検討した方が納得の上進めるのではないかと感じている。

(実際のkanbanflowはこんな感じ。色で二人の役割分担をしました。)

1日目(朝9時から23時まで)

事前開発期間でプロダクトの方向性や技術の選定がある程度完了していたことが功を奏し、作業を進めることに専念できた。私の方では、15時ごろまでにyoutube動画やAIの力も借りながらもなんとかタイピングゲームとしてのゲームロジックを完成させることができた。それ以降はこれを元にゲームらしくなるような演出を作ることに力を注いだ。

スタート画面ではタイピングゲームらしく、"粋"にタイトルをタイピングすることでゲームスタートできるような仕組みにした。 しかし、タイトルをセンターに位置付けるのに時間を食ってしまい、結局、スタート画面が完成したのは20時だった。今までhtmlやcssについてのしっかりと学んだことがないことが原因だったと考えられ、新卒で選びたいキャリアはバックエンドであっても、フロントの技術もある程度わかっていないと個人開発をする上で不都合があるということに気がついた。

20時からはBlenderで作成したアニメーションをgif化し、貼り付けること、BGMをつけることなどを行った。ちょうどいいBGMが見つからなかったり、BGMの音量調整に手間取ったりとつまづきが多かった。エラーにならないバグが多くあり、何度なんでやねん！と叫んだかわからない。

あと残すところメニュー画面の充実とステージのバライティーを増やすことが目下の目標となる。明日の3時が最終締め切りであることからしっかりと取り組んで完成まで漕ぎ着けたい。

(この日作成したスタート画面がこちら)

二日目(朝9時から15時まで)

朝起きてからひたすらに開発をした。ここまでに、ゲームロジック、スタート画面はある程度完成していたので、あとは賑やかしを充実させてゲームの完成度を上げることに時間を使った。作成したgifを透過させる&その背景を動くようにすることでアニメーションが走っているような演出を実装した。

しかし、開発期間終了ギリギリにいざfirebaseにデプロイをすると、全くもってレスポンシブルデザインになっていないことが判明した。どうにもできず、そのまま発表に移った。 😢

発表は相方がほぼほぼカバーしてくれたために比較的楽に済ませることができた。他の人を見ていると発表資料をかっこよく作るためのサービスを使っている人が多く、やはり伝える努力は大事だと感じた。

全体として振り返ると、ゲームロジックというものは物凄く大事であるものの、ゲームの中で一部分的でしかなく、見た目がモダンか、という点にもサービスの使いやすさが大きく依存していると感じた。

また、開発工程についてはうまくコントロールできたと思う。元々仲の良い二人での開発だったこともあり、二人で笑いながら楽しく実装できた。実際作れたものは小学生がお遊びで作ったものみたいだったが、まぁ初めの一歩としては少しはまともなものが作れたのではないかと思った。いや作れてないか笑

以上でハッカソンの感想を終わりとする。

ハッカソンで感じた3つの課題

１、webシステムを知らなすぎ

webシステム全体への理解がまだまだ浅かった。言い換えると、webがどういう構造になっているのか、を理解していなかった。それにより、どういう技術を使えばいいのか、ということを決められなかった。たとえば、Three.jsを使うのと、Blenderで作ったモデルを動かすのは何が違うの？とか、firebaseの中でもどれを使うと何ができるの？、javaでも同じことができるのに、javascriptを使うのってなんで？といった初歩的な話から疑問に次ぐ疑問で、歩みが遅くなってしまった。

システム全体を理解することで、自信を持って技術選定できるようになると思う。 これから少しずつ勉強していきたい。イメージがしにくい範囲なため、理解のために誰かに教えを乞うことも視野に入れた方がいいかもしれない。

２、風呂敷の畳めなすぎ

開発をする前にどんどんアイディアばかりが膨らみ最低限の機能以外を実装する方法を考えている時間が長すぎた。それにより、完成させるべき機能が後回しになり、広げすぎた風呂敷を綺麗に畳む時間が足りなかった。
いわゆるスコープ管理とでもいうような、領域決めをさっさとする力を身につけたい。

慣れが大きく作用するとは思うが、論理思考的にアイディアを整理することを意識できるようになりたい。この課題はソフトスキルによって解決できるもののため、優先的に解決したい。

３、手を動かす人が足りなすぎ

基本的に自分一人でゲームロジックなどを作っていたため、どう頑張ってもうまく動くシステムを作るには時間が足りなかった。まだjavascriptにすらちゃんと慣れていなかったために動かすだけで非常に時間がかかった。
もしももう一人手を動かせる人がいたらもう少しまともなものを作れたと思う。次はチーム開発らしく、二人以上でコードを書く機会を作りたい。

また、コードだけでなく、BGMを探したり、手本となるようなサイトを探すのにも時間がかかった。それだけでも代わりにやってくれるメンバーを入れると効率的に開発ができると感じた。

参加してよかった4つの点

１、デプロイできた

デプロイして後悔するというフェーズを踏めたことは非常にうれしい。firebase上で行なったためブラックボックスになっている点は多々あるが、工程を踏めばこうやってドメインを取得できて、インターネット上からアクセスできるようにするんだなっという動きをおおよそ理解できた。
文系学部で全く関連のない活動をしている人にとってデプロイしなければいけない機会は結構貴重、ほんといい経験ができた。

２、htmlの基礎、cssの基礎への理解が深まった。

今まで避けてきたマークアップ言語についての理解が少しだけ深まったと思う。フロントエンドエンジニアやマークアップエンジニアになるつもりはそれほどないが、触ってみて理解するという機会を得ることができたのは非常に良かった。やらなきゃが原動力になったため、だいぶ体に染み込んだ。

３、アイディアを形にできた

こういうのがあったらいいなを実現できる機会って意外とない。
今回はある程度という注釈付きではあるが、形にできたと言えば形にできた。それは一つ良かったと思う。
一度一歩を踏み出せたのだから次ももっとできるという自信にもつながった。

終わりに

今回、ハッカソンに参加し、よくも悪くも非常に良い経験ができました。
主催していただいたサポーターズの皆さん、僕たちを完膚なきまでに叩きのめしてくれた参加者の皆さんには感謝しかありません。
次回参加にあたり、今回の反省を活かして、少しでもマシなプロダクトを作りたいなと思っています。

以上 yamamotoでした。