こんにちは、BIPROGY の町田です。
ここでは、４年連続開催となり恒例行事となりつつある、学生向けハッカソンのチュートリアルを書こうと思います。
今年参加頂く参加者の皆様、BIPROGY に興味のある皆様にぜひ読んでいただきたいと思います。
私は３年前、このハッカソンに参加し、サマーインターンシップを経て、BIPROGY に新卒入社することにしました。
ハイスキルエンジニア採用で迎え入れていただき、日々チャレンジングな経験をさせてもらっています！
ここでは、私自身このハッカソンに参加した中で、これやっておくといいよ！とか、ああしておけばよかったな...と思ったことを書き出します。
私は、自分が参加した以降のハッカソンすべてにオブザーバーとして参加させてもらっているので、そこから感じた雰囲気なども踏まえて、アドバイスを書き出していこうと思います。
参加者の皆様の参考になれば幸いです。
ハッカソン概要
DX Hack は土日の２日間で行なわれるオンラインのハッカソンです。
あらかじめ社会課題が数種類提示され、それを解決するアイデア出しからプロトタイプ作成まで２日間で一気に行ないます。
チームメンバーは運営によって決められ、どのチームも初対面で開発を行なうことになります。
ハッカソンの数日前に Day 0 という形で、顔合わせの機会は設けられていますが、ハッカソン前の準備期間は非常に短いです。
ハッカソン当日の大まかな流れは以下の通りです。
- Day 1 午前 チームビルディング・アイデア検討
- Day 1 午後から Day 2 16 時まで ハッカソンタイム
- Day 2 16 時から 成果発表
はい、全然開発する時間がないですね。大変です。
しかし、ご安心を！BIPROGY の開発部門エンジニアがメンターとしてサポートします！
ハッカソン初心者の方でも安心して開発に望んでください！
とはいいつつも難しいことはたくさんある
困ったときはメンターに頼ることもできるとはいえ、大変なことは沢山あります。
かつて DX Hack に参加した先輩として、自分が大変だと思ったことやその対策をお教えします。
チームによって当てはまる・当てはまらないことがあると思うので、取捨選択して参考にしてください。
コミュニケーションが大変
ほぼ初対面のチームメンバー、時間に余裕のないハッカソン、就活イベント特有の成果に対する焦りとヒリヒリ感（？）...
学生を不安にさせる要素が DX Hack には沢山あります。
そんな中で、忘れてはならないのは笑顔です。
リモートワークで一番難しいのはコミュニケーションです。
ムスっとした表情で会話してしまうと次第にギスギスしてきて、チームワークが上手くいかなくなる場合もあるので、是非皆さん笑顔を忘れずに！
カメラをオンにして笑顔で会話すると、心理的安全性が高まります。
また、何か完成したらメンバーを褒めたりして雰囲気を盛り上げることも大事です。
気配りを忘れずに！
周りの人の進捗がわからない
こちらもコミュニケーションの問題ですが、リモートだと周りの人の状況がわかりづらいです。
基本的にハッカソンタイムでは、個人個人に別のタスクをアサインし、個別で開発することになりがちです。
そのため、誰の作業がどの程度進んでいるか・詰まっているかを把握することは難しいです。
ましてや、ほぼ初対面のメンバーなので、詰まった人が自力で直ぐに問題を解消できるのか・できないのかわかりません。
進捗確認は定期的に行ないましょう。
上手くいくチームは一時間に一回など、コンスタントに進捗を確認しているイメージがあります。
チームの中でテックリード的な役回りを担っている方は、周りへの気配りをお願いします。
経験の浅い方は、困ったことがあったら他の方へ積極的に聞くようにしてください。
チームで解決できない困りごとがあれば、メンターを積極的に頼ってくださいね！
また、開発環境を複数人でシェアするツールを活用して、ペアプログラミング・モブプログラミングをするのもアリです。
テックリード役のメンバーの知識を最初に共有しておくと、経験の浅いメンバーも開発イメージがつきやすくなるかもしれません。
誰かの開発環境の中に入り込める VSCode の Live Share は学習コストが少なく、便利なツールです。
また、メンバーに開発環境の構築をしてもらうのが大変な場合は、AWS Cloud9 のようなサービスを活用してみるのもよいでしょう。クラウド上で環境構築し、複数人で同じ環境を使って開発できます。ただ、Cloud9 を使いこなすにはインフラ知識が必要な場合があるので、急ぎの時に使うとちょっと大変です。
時間がなくて発表資料が作れない
ハッカソン後半になると、「もう少しで完成させられる！」という思いから、ついつい開発に集中しすぎてしまう場合があり、発表資料はギリギリになって準備する、なんてこともあります。
チームの方針にもよりますが、発表資料作りは早めに終わらせておくと良いかもしれません。
DX Hack では「プロトタイプの完成度」ももちろん評価されますが、「課題が解決できそうか」 「独創性」という観点からも審査員は評価を行ないます。
必ずしもプロトタイプがきちんと開発できているかだけで、評価が下されるわけではありません。
そのため、自分のチームがどんな課題に対してどんな価値を提供しようとしているのか、きちんと伝えられるよう発表資料はしっかり作っておくと良いと思います。
発表時間は非常に短いので、伝えたいことをコンパクトに伝える工夫もしないといけません。
資料作りはしっかりやりましょう。
開発効率を上げよう
次に、開発の部分にフォーカスします。チームのテックリード次第で選定技術は変わると思うので、あくまで参考程度にしてください。
DX Hack では、とにかく開発にかけられる時間が少ないです。
そのため、わからない点が多い・わからない点が解決しづらい技術は扱わない方が良いです。
例えば、学生ハッカソンでは「① Web 作りたいけど、詳しいメンバーがいない。② 皆 Python は書ける」 ⇒ 「じゃあ有名だし Django でいいのでは？どんなものかは知らないけど」という技術選定をよく見ます。
しかし、Django は初めて扱うには少々とっつきづらいところがあり、何も知らない状態で利用すると非常に苦労します。
そうなると、Django のことを調べるだけで半日経過することもあり、とても大変です（私もそういうことを一度経験しました）。
チームにテックリードもいないので、フォローも難しいです。
ここでは、このようなアプローチで技術選定するのはいかがというアドバイスを書きます。
ぜひ参考にしてみてください。
フレームワークについて
プログラム言語という観点で選ぶのも良いと思いますが、学習コストの低さでフレームワークを選ぶのも良いと思います。
ここでいう学習コストとは、チームがハッカソンでプロトタイプを作るための十分な知識を身に着けるのに必要な時間を指します。
主語はチームです。主語を個人としていないのは、誰かがフレームワークを理解していれば、その人がリードすればチームメンバーもある程度は開発できるようになるからです。
その際、テックリードはメンバーが困った際は、きちんとフォローしてあげてください。
また、テックリード役の知識はプロトタイプを作る程度のもので十分です。あるに越したことはないですが、認証やユーザ管理など、提案する価値と関係の薄い部分はプロトタイプに実装されていなくても良いです。
DX Hack は安定稼働するシステムを開発するイベントではないので、まずはプロトタイプとして最低限の機能を実装するところを目指してもらえればと思います。
私はそういった観点から、技術選定をすることをオススメします。
チームのテックリードがきちんと理解しているフレームワークがあるなら、それを利用すると良いかもしれません。
また、チームメンバーの得意な言語で選ぶ場合には、学習コストの低い軽量なフレームワークを選ぶと良いでしょう。Python なら Flask や FastAPI が良さそうです。
クラウドの知識がある方がいれば、個人的には AWS Lambda や Firebase を利用したサーバレスアーキテクチャの採用も良いと思います。
クラウドの構築知識が必要ですが、ソースコード自体は楽に実装できます。
最後にですが、ハッカソン前にサンプルコード的なものを準備しておくと、ハッカソン当日に楽に開発できます。
事前準備が効いてくる部分も大きいので、もし時間があったら選定した技術は深掘りしておくと良いです。
ノーコードやローコード、既存のアプリケーションを活用しよう
ハッカソンタイムは短いので、フロントエンド・バックエンドを隅から隅まで実装することは難しいかもしれません。
そんなときは、ノーコード・ローコードツールや既存のアプリケーションを活用し、プログラミングをしない決断をするのも大切です。
LINE や kintone を利用するのも良いでしょう。
DX Hack では、弊社エンジニアの他にも LINE ヤフーやサイボウズから技術サポートしてくれるエンジニアの方をお呼びしています。
わからないことがあっても頼ることができるので、とても安心感があります。
是非これらを活用して、開発効率を高めてみてください。
また、例年だとビデオ通話機能を実装する代わりに Zoom を活用しているチームもいました。
開発をしないで済む選択肢は常に考えておくようにしましょう。
生成 AI を活用しよう
言われなくても使っているよ！という方も多いと思いますが、ChatGPT や GitHub Copilot のような生成 AI を活用すれば、より開発効率を高めることができます。
知らないフレームワークを使う際も、生成 AI をフル活用すればなんとかなるかもしれません。
また、Create のような Web 向けの生成 AI も登場しています。開発効率を高めるために、是非生成 AI を使ってください。
（余談）弊社の各種就活イベントに毎年オブザーバー参加していて感じていることなのですが、生成 AI の普及以前と以降を比べると、後者の方が参加者のアウトプットの量が増えたな、という感覚があります。
参加者が毎年詰まること
ここでは、参加者が毎年詰まることについて紹介します。
例年、質問を頂いたメンターがフォローして解決していますが、参加者の皆様はおそらく問題が起こると解決できるかヒヤヒヤしてしまうと思うので、参加前に予習がてら確認していただくと良いと思います。
CORS - Cross-Origin Resource Sharing
フロントエンドとバックエンドを別のオリジンで動作させる場合、CORS の設定が必要になります。
オリジンとは プロトコル + ドメイン + ポート番号 を繋ぎ合わせたもので、例えばhttp://localhost:8080がオリジンです。
ありがちなパターンを簡単に例示すると、React とバックエンドを別サーバで実行すると、必ず CORS の設定が必要になります。（React: http://localhost:3000、バックエンド: http://localhost:8080のような場合）
こちらの記事が詳しいので、詳細は割愛します。
クロスオリジンで実装する予定の方は、CORS の設定方法をチェックしておくと慌てなくてすみます。
便利なライブラリが既に存在することも多いので、「選定技術 + CORS」で調べておくと良いでしょう。
デプロイについて
もし上手く実装できたら、発表のときに共有したいですよね。
そんなときにデプロイできなくて困ることもあると思います。
Render は GitHub と連携して簡単にデプロイできるので、良かったら試してみてください。
もちろん、AWS などのメガクラウドにデプロイするのも良いと思います。
おわりに
DX Hack では、失敗しても全然問題ありません。
大切なのは、チームを盛り上げる姿勢や積極性なのではないかと思います。
私もかつて DX Hack へ参加し、チームのリーダー兼テックリード役で２日間を過ごしました。
しかし、正直なところ上手くはいきませんでした。
情報が集まるポータル的な画面とバックエンド、通話システムを作るという欲張りな計画を掲げていたのですが、最終的にはアプリケーション間の結合が上手くいきませんでした。
デモをする際はできている部分を紙芝居的に移しながら、何を実現したいのか伝えようと頑張った記憶があります。
残念ながらアプリケーションの完成度はイマイチで、賞を頂くこともなかったです。
DX Hack へ参加する時点では、自分には技術力がないな、と思っている学生の方もいると思います。
しかし、大切なのは DX Hack に参加した後だと思います。
上手くいったチームは、どんな発表をしたか、どんな技術を使っていたか、自分のチームは何が良くて何がダメだったか、振り返ってみてください。
自分に足りないものがあったら勉強してください。
そうすれば、様々な会社で欲しいと思ってもらえる人材に成れると思います。
是非、DX Hack を学びを得るための通過点として活用してもらえればと思います。
We Are Hiring!
弊社のエンジニアであるメンターとも積極的に交流してもらって、弊社のことをよく知ってもらえると嬉しいです！