平成最後にハッカソンをした話
参加経緯
自分は本ハッカソンの情報をTwitterで発表当初から知っていました。
ただ、当時の自分はこのイベントを必ずチームで出場する必要があるものだと思っており、自分の所属している部活動に一緒に参加してくれる人がいなかったので参加を見送るつもりでした。
ですが、自分のバイト先の人 と話していてたまたま誘われて参加を決意しました。
ちなみにですが、個人で応募すると同様に個人で応募した人の中からランダムにチームが自動生成されるという事実を知ったのは応募フォームに自身の情報を記載している最中です。
開発スケジュール
チーム及びテーマが発表された次の日にどのようなサービスを開発するのかということを話し合いました。
ただ自分はその日は別のハッカソンの開発に追われていたので話し合いには参加できませんでした。
その結果、立案されたサービスの内容は、
「機械学習を駆使して現代の文を入力することでそれぞれを "ポケベル風" , "emoji風" に変換する」
というものでした。
そして開発担当としては
という配分になりました。
当初の自分の考えでは仕様的にクライアント側は入力と出力を行うだけで、Google翻訳のようなシンプルでおしゃれなサイトを作れば良い。
それなら、普段から使用しているReactを使用すればなんとかなるのではと思っていました。
オンラインMTG
その二日後ですがチームメンバー全員の用事が合いそうなのでオンラインMTGをすることになりました。
そこでクライアント側の使用が決まりました。
それは
というものでした。
最初は難しいと思っていましたがHTMLのdivにちょっと複雑なCSSを適用させればいけることに気づいたため、
ポケベルはMTGのあった日のうちに、リンク
ガラケーはその翌日に、リンク
完成させることに成功しました。
Reactの不具合
これをReactに実装することになりました。
基本的には前回のハッカソンと同じようにmaterial-uiのwithstyleでCSSを適用して開発を行いました。
ただ、今回はコンポーネント単体で動作を確認したかったのでStorybookを使用し各コンポーネントの動作確認を行うことになりました。
僕の予想ではここは普通に成功する内容だと思いました。
ただ、なぜか以下のようなエラーが発生します。
おそらくpropsの内容がおかしいと思われるのですが、解決方法はわかりませんでした。
(今なら、「withStyleは一応propsとして渡されているのでStorybookでのpropsの渡し方にそぐわないのでエラーが発生している」という仮説思いついたりしています(未検証ゆえにこの情報も間違っているかも))
取り敢えず、当時の僕はこの謎のエラーを解決することができませんでした。
そこで自分がチームにjQueryを代替としてしようする連絡を行いました。
jQueryは前時代的なWebフレームワークではありますが、自分は他ハッカソンでHTML専門の学生Webエンジニアとチームを組む際にしようすることが多かった点と、事前にcodepenで作成しておいたサンプルがそのまま適用することができるという点より自分は推薦しました。
その結果、APIサーバー担当のチームメンバーの一人がVueなら手伝えるという事で最終的にVueをしようすることになりました。
(その人は元々サーバーを担当ですが、自分よりもWeb開発技術は完全に上です。そして、一番得意なのはネイティブアプリ(主にswiftの開発らしいです。これが本当のフルスタックエンジニアってやつですね...))
素晴らしいVueの世界
自分は一度Vueを触ったことがあります。ですが、それは10ヶ月以上前の案件での仕様だったので完全に記憶の外です。
なので逐次実装方法について質問したりしていました。
個人的にはReact以上にHTMLに近く性に合う。また様々な便利機能があって感動しました。
OSSレベルのソースコードの完成
ハッカソンの2日前はバイト先のオフィスがある建物のとある一室を貸し切ってそこに3人で集まって、12時間程度(昼食の購入を除くと11時間)ぶっ通しで開発を行いました。
自分はポケベルの実装を行いました。
当然ですが機能も少ないので比較的容易に実装できました。1日もかからなかったと思います。
で、ガラケーの再現に関しては自分のサポートをしてくれているチームメンバーの一人が担当しました。
自分はてっきり画面に文字列が表示されれば十分だと思ったのですがガラケーのメール画面をほぼ完璧に再現していました。
そして、チーム内で OSSレベルとはしゃいで いました
平成最後のクソUI
今回のサイトのUIですがモダンな感じにして欲しいと頼まれていて、古臭いおしゃれなデザインとは??
ということをずっと考えていました。けど僕は良いデザインを思いつけなかったのでおしゃれじゃなくてもいいやということで探すと。。。
クソと名高いこのサイトを発見しました。
それをベースにログインフォーム、送信フォームなどを次々と作成していきました。
ちなみにログイン画面はWindows4のネットワーク設定画面を参考に参考にしました。
本番
スライド２枚と聞いて、「えぇ〜」って思いつつ、全く作成してないので「やった〜」ってなってました。
でも全員直前まで何かしらの作業をしてて結構ギリギリでした。
今回使用したスライドはいつもの使い回しです。すいません><。
発表
2分はわかっていましたがきついですね。
クソUIが理解されないと単に手抜きだと思われそうだったので非常に心配していましたが会場が目に悪いUIに笑ってくれたので一安心しました。
結果
控えめに言って今回のハッカソンのサービスの大半は地方のハッカソンレベルなら間違いなく優勝できるレベルのサービスだったと思います。
一位はマリオのチームでした。正直、納得です。これをVueで実装しているというのにもはや恐怖すら感じます。
そして、なんとトミーさんたちのチームが3位入賞しました。高レベルな戦場で結果を残していてトンデモナイ人が身近にいるんだなと感じました。
あと今回のハッカソンで感じたこととしては今回トップの結果を残した全てのチームに対して「非常に高品質なデモムービーを作成していたなぁ」という印象を受けました。今まではこのような技術はプログラングとは直結していないのであまり積極的に勉強していなかったのですが今後はそのような技術も身につけていきたいなと思いました。
懇親会
最初は同じ年代の人と同じテーブルに座ることになりました。そして自分の座ったテーブルはH12以降に生まれた人のテーブルでした。
当たり前ですがそこのテーブルに座るのは「高専生」ばかりでした(普通に大学1~2年生の人も少数でしたが居ました)。
これは実質高専カンファレンスでは???
で、しばらくするとテーブルの移動がありました。次は「Web/デザイン」「機械学習/ビッグデータ」「ゲーム」「ネイティブ」「バックエンド」ごとにテーブルが用意されました。自分は特に決まった専門分野はなですが最近「Web」しか開発していない気がするので「Web/デザイン」のテーブルに移動しました。
するとお隣には優勝チーム(スーパー平成マリオ)のチームの人やWebデザインの社員さんいました。
そこで今回の開発の話はもちろんWebエンジニアの実際の業務の話やらを聞きました。
その道を極めるとUnityもSwiftも書く必要が出てくるという話を聞いたりして「フルスタックじゃん」と思ったりしました。
せっかくなのでWebデザイン担当の社員さんに現在開発しているサービスのUIのレビューをしてもらおうと考えていたのですが話の流れ的にその話題に持って行くタイミングを見つけることができず結局見せれなかったのが心の残りです。
その後、社員さんからこのようなものをGETしました。
これをGETしただけでも個人的には優勝した気分になっていました(当然優勝はしたかったが)。
#平成最後のハッカソン pic.twitter.com/p5ecDXkGOm
— 白メガネの『クボ太郎』 (@kubo_programer) April 30, 2019
2次会
ホテルに戻っても眠気がこない僕は速攻２次会参加者の募集をしました。
その結果、自分を含めて5人の人々が集まりました。そして、そのうち一人がリーズナブルな値段のお寿司屋さんを見つけてくれたのでそこにい行くことにしました。やっぱ「JAPAN==SUSHI」ということもあり外国人が非常に多い風に感じました。彼らの会話でリスニングの練習をしようと思いましたが何も聞き取れませんでしいた><。
で、そこでは技術的な話から趣味の話を行ったりしました。
自分がびっくりしたのはDQX(ドラクエ10)をプレイしていた同士が自分以外に2人もいたことです。今まで趣味を共有できる機会は少なかったので非常に嬉しかったです。
ソースコード解読会
２次会終了後ホテルに戻った我々はし渋谷のカウントダウンを横目に優勝チームのGithubを読むといういかにも限界プログラマらしいことをしていました。
そこに自分のチームメンバーの一人が参加してくれていて、そこでVueの解説を行ってくれました。
そこでは今まで自分が感覚的(というよりネットで調べたもののコピペ)に書いていたコードの中身などの解説行ってくれました。
自分たちにとっては会読会というより解説会に近いように感じていました。
そこで学んだ知識も含めるとこのハッカソンは自分の人生の中で最も技術的に濃厚な数日間だったなと感じていました。
東京観光
自分は毎回東京に行っても何も観光せずに地元の福岡に帰っていましたが、今回はちゃんと観光しました
「絵師100人展」や「秋葉原のゲームセンター」など普段は絶対に行かないようなところを探検できてとても面白かったです。
ただ、普段歩かないせいで後半は足が痛すぎてずっと座っていたので、今度からはもっと運動しないとなと思ったりしました。
まとめ
今回のハッカソンは今までの人生の中で技術的に最も成長できた数日間だと思いました。
高レベルなチームの中で足手まといにならないように頑張ったことと高レベルな他参加者の素晴らしい作品と知見の共有は自分を成長させる上ではこの上ないものでした。
今後も皆さんと会う機会も多いと思います。自分は人の顔を覚えるのがあまり得意ではないので是非この「白メガネ」のふざけた顔を発見したら声かけてください。
では、またいつかどこかで会える日を楽しみにしています。
ちなみにこちらが今回の開発に使用したGithubです。今回はむちゃくちゃ雑なブランチやコミットメッセージ だったりしますがお気になさらず。
あとスターとフォローも忘れずに...
