JPHACKS に出場した
2021-10-30
こんにちは
どうも、僕です。
人生初ハッカソン、出場しました。総合すると、毎日忙しかったものの、とても楽しくコードを書くことができたと思います。
また、一緒に出てくれたメンバーや、今回のハッカソンに出場していた皆さん、また、開催してくれた方々には感謝しかありません、ありがとうございました。
作品
チームメンバー
チームメンバーは、僕を含めて4人いました。
人の金で焼肉を食うことしか考えていない [ましくん](https://twitter.com/masibw) と、たくりんとんの真似をすると言って「酒飲まないと yum~~~」と言ってきた会社の同期の [てつ](https://twitter.com/tetsuzawa) と、僕の内定先のインターンに参加してくれていた [シェンくん](https://twitter.com/cn_eveerjp) で参加しました。
メンバーのみんなは本当に優秀で、僕が念じる頃にはほしいエンドポイントができてるという状態でした。
平日の開発期間は、それぞれバイトや学校、研究が忙しい中、それぞれの時間を見つけて作業をするスタイルでやっていきました。
事前にやったこと
事前に3回ほど集まって、決起集会を行いました。ちなみに3回中1回は爆睡、1回は2時間遅刻ということで自分がまともに出たのは1回しかありませんでしたが、作戦を練り練りしていました。
集まった時にしたことですが、初めに、以下のことを話し合いました。
この時点で、だいぶ面白そうなものが出たりしてて、没になった案として、就活サービス sner の置き換えや、フロントエンド版 ISUCON の採点基盤システム、マイクロフレームワーク、クラウドツールのシミュレーターなどがありました。
結局、写真を投稿するプラットフォームを作ろうということになり、決まってからは以下のようなことを話し合いました。
機能面や、必要な機能、逆に時間があれば実装するものなどを明確に決めないと、実装の際に自分たちの作りたいものを見失ってしまう可能性があったため、ここを事前に固めました。また、ハッカソン期間中はそれを issue にまとめ、PR を作る際にその番号を貼り付けて管理をしていました。
また、技術選定も行い、メンバーの技術スタックなどを考慮して Next.js と Go で実装することになりました。Docker 上に Nginx と MySQL を準備し、デプロイは EC2 にしました。
作ったもの
映えとるという、写真を共有することができるサービスを作りました。
写真を共有するだけだと、既存のインスタグラムなどのサービスがあるだろうと思う人もいると思います。そことの差別化としては、スマートフォンやデジタルカメラには、exif という位置情報やシャッタースピード、絞り値や感度などをはじめとした膨大なデータが保存されていて、自分たちのサービスはその exif の情報を取りだしてどのような場所でどのような写真を撮ったかどうかを詳細に共有できるというサービスになっています。
exif について詳しくは [Wikipedia](https://ja.wikipedia.org/wiki/Exchangeable_image_file_format) を見てみてください。
ターゲットユーザーは、スマートフォンで写真を撮ることが好きな人から、一眼レフを趣味程度で持ち歩いている人を想定していて、その層のユーザーが投稿されている写真から細かいカメラの設定やデバイス、レンズの種類などを参考にして勉強をすることができます。また、一眼レフユーザーからすると、自分の設定を共有することができます。
やり残したこと
やり残したことがいくつかあります。
もしアワードにいけたら追加開発期間があるので、機能の追加もそうですが、技術的な観点で見た最適化やコードを綺麗に書くことをしていきたいです。
キャッシュの残し方
next/image にスタイルを当てるのが厳しくて、結局剥がしてしまいました。（もしかしたらよしなにやる方法があるかもしれないですが、手が回りませんでした）
画像のキャッシュや CSR の際の効率化などについての自分の知見が浅く、ここまで対応することができませんでした。もっと精進します。
無限スクロールの実装などもしたのですが、そこでも最適化ができていないように感じているので、もう少し綺麗なコードをかければよかったかなと反省しています。
脱フレームワーク
現状、フロントエンドでは、Next.js、chakra-ui、@google-maps/wrapper、の3つのライブラリが使われています。
Next.js はモダンフロントエンドの集大成のようなフレームワークですが、できればなしで実装をしたかった感じがあります。画像などの重いデータを使うため、SSR、prefetch、キャッシュなどがお気軽に導入できる Next.js を導入しましたが、実際今回実装した機能は時間をかければ fastify などのサーバサイドで動くライブラリと、preact のような軽量のフロントエンドライブラリを用いて自分でで実装をすることができるイメージは湧いていますし、実際にやりたかったなということを思っています。また、Google Maps の wrapper に関しては、適当に入れたところ地味に剥がしにくくて困ったので安易に導入するのは良くないなと思いました。
ただ、限られた期間の中で成果を出すのもハッカソンの大事なポイントだと思うので、フレームワークに乗っかったことが間違いだとは思っていませんし、むしろ限りなく正解に近い選択をしたのではないかなと思います。
テストやエラーハンドリング
ボロボロです...。落ちないでくれ(● ˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾
余談
発表当日だけ、EC2 のインスタンスを10倍の値段のものに変えたら爆速になりました。
まとめ
楽しかったです。
みんな忙しい中でしたが、最後まで一生懸命頑張ることができました。個人的には結果も求めますが、それと同じくらい楽しむことも大切にしたいと思って出場していたので、そこが果たせたのはよかったです。この記事はコードフリーズ後、発表直前くらいのタイミングで書いていますが、これから発表緊張します。
楽しかったのですが、自分の中で技術的な挑戦をすることができなかった気がしています。技術的に難しいことをするのはそもそもの要件には入っておらず、そこをもう少し詰めることができたら自分の中の手応えなどが変わってきたのだろうなと思ったりもしています。どちらかというとアイディアソンとプレゼン力勝負のような認識になってしまっていて、そこが少し悔いが残っています。
ただ、このメンバーでコードを書けたことはとても楽しかったですし、いい経験にもなりました。
来年あたりに東京で集合してみんなで焼肉を食べに行こうと思います！
ありがとうございましたmm