NEWSニュース

2020.01.15

TECH BLOG

たった2人で!?フロントエンジニアだけで「HACH DAY 2019」に参加してきた話

こんにちは、CAM19新卒エンジニアのまるけんです!

前回、前々回に引き続き今回も「HACK DAY 2019」に参加してきたレポートを書きたいと思います。全3チームのレポートは全て異なりますので最終回である今回も是非ご覧ください!

 

これまでの記事はこちらをどうぞ。

Vol.1 日本最大級のハッカソン「HACK DAY 2019」に新卒だけで出場してみた話

Vol.2 新卒1年目だけで「HACK DAY 2019」に参加してみた話

 

チームメンバー紹介 

メンバー集めの段階でバックエンドの獲得に失敗。

しかし出場を諦められず、まさかのフロントエンド2人での参戦を決めました!

まるけん(フロントエンドエンジニア)

デザインの学校出身。今回のハッカソンでは主にデザインやコーディングを担当

 

とも(フロントエンドエンジニア)

ゲーム系の学校出身。今回は環境構築とロジック部分を担当

 

出場目的


 

僕たちのチームはフロントエンドのみなので、AWSやGCPといったクラウドサービスを使った凝ったプロダクトづくりは難しいと判断。

そこで、今回のハッカソンでは自分たちの得意な領域を生かしつつ、新たな領域に挑戦して力をつけることを目的としました。具体的には普段の業務で新卒があまり触れることがないフロントの開発環境構築周りや、サービスのUX向上を目的としたアニメーションの強化などです。

 

会場に入ると


 

開発開始時刻の12時前に会場入りしましたが、既にプロダクト作りに使うであろうパーツを広げているチームがちらほら。VRをやるんだろうな、大きな傘は一体何に使うんだろう?と、周囲のチームがどんなものを作り上げるのか楽しみでワクワクしました。

 

プロダクトの説明


 

僕たちはもちろんWeb屋さんなのでWebでの開発をしました。作ったものは、エンジニアの初心にかえって「TODOアプリ」です。

ハッカソンにきてTODOアプリ?と思うかもしれませんが、もちろん一味違うものを作りました。

 

T – ちょっと

O – 押せそうで

D – どうしても

O – 押せない

アプリ

広告が無限にでてきたり、登録したタスクがふわふわと逃げたりするアプリです。

画期的なプロダクトは諦めていたので思い切ってネタに走りました。

構想としては、アニメーションによってリスト追加ボタンが逃げたり、しまいには消すはずのTODOリストが増えてしまったりすることすら考えていました。

※実際に作った動画はコチラ

時間が間に合わず、”まだ”使えるアプリになっています。力及ばずで少し残念です。

 

技術に関して


 

技術的に少し凝りたかった&最新の技術を使いたかったのでWeb Componentsを導入してみました。Web ComponrntsとはCustom ElementとShadow DOMを組み合わせたWeb標準の技術のことで、今後の利用が期待されています。最大の特徴はカプセル化された機能をWeb標準で作成でき、繰り返し使えることです。今回のTODOアプリでは、ページコンポーネントとボタンコンポーネントを作成し、ボタンが押された際にアニメーションイベントとページ切り替えイベントを渡すようにしました。

そうすることでネイティブアプリのような画面の切り替えを実現しています。このWeb Componentsの定義や扱いを楽にするためにlit-html,lit-elementというJavaScriptライブラリを使いました。VueやReactという選択肢もありましたが、環境構築をCLIに頼らずに1から整えてみる!という僕らの課題設定から、あえてフレームワークは使いませんでした。アプリケーションはSPA(シングルページアプリケーション)の形を用いて開発しています。

 

バンドルツールには webpackを使用しました。社内の多くのサービスで使われており、他のバンドルツールに比べて複雑ですが、その分細かな設定ができるからです。

lit-elementにCSSを読み込むためにinline-lit-element-loaderを使いました。lit-elementではCSSファイルを個別に読み込む必要があり、バンドルというよりはローダーとしての役割を果たしています。ベンダープレフィックスに対応したかったのでPostCSSを導入しようとしましたが、lit-elementへ読み込むためのwebpackの設定に時間がかかってしまったのと、ハッカソンにあまり関係がないという観点から途中で断念。これは次回の課題となりました。

 

ルーターにはvaadin-routerを使用しています。

TODOアプリのデータをどこかに格納する必要がありましたが、僕らのチームにはバックエンドエンジニアがいません。そこでブラウザのローカルストレージにデータを格納することにしました。オブジェクトデータを文字列に変換して保存し、呼び出す際はその逆を行います。

 

保存にはstorejsを使いました。無理やり実装しましたが、リロードしてもデータが保存されるようになったのでナシよりのアリかなと思います。

もちろんブラウザをクリアするとデータは全て吹き飛びます(笑)

次回はフロントだけでもFirebaseを使ったデータ管理機能を短時間で組めるくらいにはなりたいです。

 

ハッカソンに出てみて


 

まるけん

今回アニメーションをゴリゴリに実装してネイティブアプリのような挙動を作ることができました。使っていて気持ちのいいTODOアプリを目指した反面、広告をしつこくだすといった「使いにくさ」も同時に実装したことでアニメーションの奥深さを知ることができました。社内でのアニメーション利用はまだまだ浸透していないので、より長く使ってもらえるサービスを作り続けて行くためにも、使える領域をどんどん増やしていきたいと思います。そして何より、やっぱり2人はきつすぎたので次回は人数増やしたいですね!

 

とも

正直めちゃくちゃ大変でした(汗)

実装が間に合わず、作りたい機能や必要な物を削りながら深夜駆動開発をしてなんとか形だけでも完成させたという感じです。(普段は0時に寝てるからめちゃくちゃきつかった…) 今回のハッカソンでは、普段やらないような1からの環境構築をして、アプリを作成することができました。

入社した時は理屈もわからずにnpm run 〇〇などをターミナルに打ち込んでいたのですが、npm run 〇〇のやっていることの理解、さらに中身を作成できるようになりました。

業務で環境系に触れる人は多くないので、その中の一人として力になれるように一層努力し、今回のハッカソンで得た知識や学んだことを利用し、会社全体としてよりよい開発環境を作り上げていきたいと思います。

 

まとめ


 

普段何気なく使っている環境を自分たちで構築することは社内サービスの理解にも繋がりとてもいい経験になりました。アニメーションイベントをコンポーネント間で渡せたこともいい経験になりました。

こういう技術は繰り返し触れていくことで身についてくるものだと思います。今後、新規サービス開発に携わる際もこの経験がいきてくると感じました。

ハッカソン出場に当たっては、準備不足が否めない結果となってしまいましたが今回つまずいたことでエンジニアとしての課題も見つかったので、それらを補いつつ次回は準備をしっかりして参加したいと思います。もちろん人数も増やして!