LoginSignup
4
0

More than 3 years have passed since last update.

初ハッカソンでコロナ感染状況を可視化するサイトを作って、運良く最優秀賞を頂いた話

Last updated at Posted at 2021-01-19

はじめに

こんにちは。
先日、レッドインパルス株式会社主催のFirebaseオンラインハッカソンで最優秀賞をいただきました!
以前に、私が所属するRuten株式会社でオンラインハッカソンを開催したことがあるのですが、参加するのは今回が初めてでした。
1週間という短い時間と、チームメンバーが普段の業務を抱えているという状況を踏まえると、うまくやりきれたと思います。
この記事では、開発したものの紹介や、期間中に考えたことや、主催する側と参加する側の両方を経験したことでわかったことなどを書いていきたいと思います。

何を開発したのか?

私たちが開発したのは、コロナウイルスの感染状況をポップに可視化してくれるサイト「コロナ君」です。
coronakun-ogp.png
デプロイしたものは「コロナ君」で見られます。
当日の発表スライドは「コロナ君発表スライド」で見られます。
コロナ君の公式Twitterはこちらです。

コロナ君の特徴

for-qitta.jpg

  • コロナウイルスの新規感染者発生状況によって、表示されるコロナ君の個体数が変動する. -> 感染状況を視覚的に理解できる。
  • より新規感染者が多い都道府県上に、よりコロナ君が集まるようになっている。 -> 一目で感染者の分布を理解できる。
  • 都道府県と日付の絞り込みで、ピンポイントで正確な情報が得られる。 -> 視覚的な理解から正確な数値へ、と理解を深めることができる。

使用技術

  • フロントエンド
    • React.js(SPA)
  • バックエンド
    • Firebase Cloud Functions(Node.js)
  • インフラストラクチャ
    • Firebase Hosting
    • Firebase Cloud Storage
  • データリソース

構成

スクリーンショット 2021-01-19 19.58.44.png
React.jsベースのSPAがCloud Functionのエンドポイントを叩くと、Cloud Functionが日本政府のAPIを叩きに行って、データの整形をして返してくれるようにしています。
データの処理はできるだけCloud Functionで行うようにして、フロントの処理を軽くしようという意図があります。

企画や開発時に考えていたこと

  • (チームメンバーの得意な分野が幸いにもバラバラだったので、)共通の仕様だけ決めたら、後は完全に任せちゃう。
  • (チームメンバーが作業できる時間が限られていたので、)時間に対するレバレッジが効くように選択と集中をしよう。
    • 評価項目(アイデア、技術力、プレゼン)のうち、アイデアとプレゼンで稼ごう。
  • 早めに、アイデアを実現した最低限のものを開発してデプロイしてしまおう。
  • 発表スライドの見栄えから逆算して、デザインと機能の選択を行おう。

主催する側と参加する側の両方を経験したことでわかったこと

  • 評価はプロダクトというより発表時の印象に大きく左右される。
  • 時間の制約を考慮した意思決定をしているチームは強い。
  • 参加チームの中でユニークな技術を使っていると評価されやすい。
  • ハッカソンを通して自分の相対的な技術力や企画力を認識できて、内省する機会が得られる。

最後に

今回、このハッカソンに参加したことで内省することができたのが一番の収穫でした。内省したことについて詳しくは以下に書いたので、興味があればご覧ください。
「初めてのハッカソンで、運良く最優秀賞を頂けて、色々と感慨深くなった話~プログラミング初心者に届け~」
今回一緒にチームを組んだメンバーである太一と、大地くんが、それぞれフロント開発とデザインを担当してくれました。彼らが私の苦手なところを素晴らしい仕事で補ってくれたので、良い結果を出すことができました。感謝します。
ハッカソンは受賞すると景品がもらえますし、受賞しなくても内省する機会が得られるので、是非参加してみてはいかがでしょうか?
アセット 1.png

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0