CyberAgent主催のハッカソンインターンで特別賞(2位)を受賞しました！
はじめに
こんにちは。Webフロントエンドを専攻しているkqitoです。
今回は初めて参加したCyberAgent主催のCA Tech Challenge AbemaTV Hack -クライアントサイド編-(ハッカソン形式インターン)に参加し、特別賞（2位)を獲得することができたので、その感想や勉強になったことを共有したいと思います。(許可を得てブログを書いています。)
インターンの大まかな説明
日程
ハッカソンは3日間で開催され、初日に公開されたお題に沿って最終発表の時まで開発をする感じでした。
初日は台風の影響で２時間ぐらい遅れてしまいました...満員電車辛い。
環境
個人つきそれぞれメンターが1人ついて、わからないところ・悩んでいるところをそのメンターに対して相談できる環境でした。
例えば、
- コードの意味がわかりません。
- この機能を実装しようとしているんですけど、どうしたらいいか悩んでいます。
と言った質問も受け付けてくれるような環境でした。
私はコーディング自体に躓くことはあまりなかったので、主にUI/UX的なデザインや実装する機能のアドバイス等を相談をさせて頂きました。適切な回答を納得する形で頂けるので悩んで手が止まるということはありませんでした。
部門
本インターンでは
- Webフロント
- ios
- andriod
の三部門があり、私はWebフロント部門で参加しました。
また最終発表で表彰されるのは各部門の1人のみなので、全体で3人が表彰されることになっています。
課題について
課題の内容
ハッカソン初日にgithubを通じてとあるWebアプリを提供されました。
それは十字キーなどで再生する動画を切り替えることができるWebアプリでした。（コード自体は控えさせて頂きます。）
そして本命のハッカソンのお題はそのWebアプリに対してに何か機能を付け加えてくださいといった自由なお題でした。
具体的にいうとなんでも評価して頂ける課題で、例えば
- 既存のAbemaTVに対する改善案
- 新機能の実装
- PWA化
など様々なベクトルで開発を行っても良いというものでした。
課題の難易度について
課題自体 - 少し難易度高め
この課題について私は自由がすぎるために難易度が少し高いと感じました。
というのも、3日間という短期間において(実際に開発できるのは1.5日程?)完成度の高い物を作るのは難しいと感じました。（ハッカソンあるある）
提供されたコード - 普通
提供されたコードはCQRSの概念が取り組まれているコードで非常に洗練されているアーキテクチャだと感じました。正直な話、読んでいるだけで勉強になりましたw
また、可読性も良く理解しやすい良質なコードでした。
しかし実力不足で一部のコードを理解するのに時間がかかりました。それはRxjsの部分です。というのもRxjsを利用したことがないのでオペレーター等の使い方がわからず最初はとっつきにくかった感じでした。
個人的な考えですが、オペレーターは関数型言語的な思想があるので慣れないと理解のスピードが遅くなってしまうと思っています。
Rxjsの理解をした後は順調に開発を進めることができたと思います。
(追記) 最近Rxjsを利用してゴリゴリリアクティブプログラミングしていますが、正直すごいライブラリだと感じました。
Rxjs最強。
開発について
なにを開発したのか
私は テレビと番組表を同一ページで視聴することができる機能 を開発しました！
なぜこれを実装しようとしたのか
その機能によってユーザの利便性の向上・UI/UXの新しい表現が期待できると思ったためです。
ちなみにこれは実際のAbemaTVのサイトを見て「この機能があったら便利なのでは」と感じたので、それを実装しました。
また、工数的にも自分の実力に見合った物だと感じたという事もあります。
・実際に実装できた事
最終的には以下の事を実装することができました。
- 実際のAbemaTVの番組表の再現
- テレビをPicture in Picture化し、番組表も同時に視聴できるように変更
- テレビを隠すことで番組表を見やすくする機能の実装
- スマホ対応
以上を実装したことで閲覧している番組を番組表上でハイライトしたり、各番組をクリックすることでページ遷移することなくテレビを切り替えることができました。
短期間で自分が実装したい内容を達成することができたので完成度としてはなかなか高いのではないかと思います。
・実装しきれなかった部分
逆に実装できなかった事として以下のことが挙げられます。
- 番組詳細ページ・コンポーネントの実装
- 番組表やテレビ以外のコンテンツの再現
これらは時間が足りなく実装できなかった部分でした。もうすこし時間を効率よく使っていたら実装できていたかももしれないので、次のハッカソンでは時間の使い方に気を配る事を意識したいです。
最終結果
冒頭で説明したように、本インターンは各部門で優秀賞(1位)のみの表彰です。
表彰が始まるとそれぞれの部門の素晴らしい作品を作成した方々が優秀賞を受賞していきます。しかし、私がWebフロントの優秀賞を獲得することは叶いませんでした...
受賞ならず...残念！！
と思いきや.....
特別賞を受賞!!!!!!
すごくビックリしたのを覚えています。 特例で特別賞を頂くことができました!! (タイトルに2位と表記したのは理解しやすくするためです)
3日間の努力が受賞という形になったのが非常に嬉しかったです!! なによりも、メンターの方や同じテーブルの方の協力の元で受賞することができたので感謝の気持ちで一杯でした。
その後
懇談会
表彰のあとは一緒に頑張ったインターンの参加者の方々や人事の方、メンターの方とお食事をご馳走になりました。 楽しく会話をしたり、実際の職場のお話等を聞く事ができCyberAgentの雰囲気などを知る機会にもなりました。
三日間の疲れも吹き飛ぶぐらい楽しく会話させて頂きました
勉強になったこと
洗練されたアーキテクチャ
今回提供されたCQRSの思想を取り入れたコードは非常に洗練されていたと感じます。 テスト性や非同期通信における副作用を考慮していたり非常に勉強になりました。ただ、初期学習コストは他のアーキテクチャと比較しても高めと感じました。
CyberAgentの雰囲気
社内環境は素晴らしいの一言に尽きる位充実していました。
特に社員の方々同士がいつも楽そうにしており、私も気分良く会話・開発する事ができました。
また、上記で述べたようにコミュニケーションは成果物やプロジェクトに直結すると私は考えているため、エンジニア視点からしても働きやすい環境だと感じました。
ハッカソンにおける立ち回り方
はじめてのハッカソンに参加する事で、短期間で完成度の高い成果物を出す立ち回り方を学習する事ができました。
実際に優秀賞をとった方はWebアプリケーションの完成度が極めて高く、ライブラリの利用方法やUI/UXが洗練されており素晴らしい成果物を作成していました。
次回は今回の反省を生かしながらイベントに参加したいです。
反省点
汚いコードを量産
時間が限れている中で急いだ結果、コードを汚く書いてしまった部分があると自覚しています。
- ステートを持つコンポーネントを作成
- 可読性を考慮しない(モジュール分割しないなど)
などをやってしまいました。 今後はなるべく余裕を持って美しいコードを書いていきたいと思います。
まとめ
今回のインターンで様々な事を勉強する事ができました。そして自分に対する課題も見つかったのでそれに向けて努力していきたいと思います。
最後になりますが、関わって頂いた社員の方々や一緒に頑張った皆様、本当にありがとうございました！
