My log.

やった事とかを残しておく

初めてのハッカソン~I will give you all my code~

2019年12月7日~15日まで行われた学内ハッカソンに参加したので、書いていきます!

参加したもの

今回、私はp2hacksという育成型ハッカソンに参加してきました。 1チーム3名~5名程度、全部で12チームが参加しました。 育成型ということで、私も友達2人とチームを組み、チーム開発の経験を得ることにしました。

ハッカソンのテーマ

この時期にハッカソンが行わられるということは、、、そう!
"クリスマス"でした!
クリスマスをテーマにアプリケーションを開発するというのが、今回のハッカソンです。

つくったもの

いろいろな要素がある『クリスマス』の中で、私たちが注目したのは、ズバリ『クリスマスツリー』!
読者の皆様の中にも、押し入れからツリーを取り出して家族とともに飾りつけをした。そのような経験をお持ちの人もいるのではないでしょうか。みんなで1つのツリーを装飾する。楽しかったですよね?ね?
しかし、歳を重ねるにつれて、そんなこともしなくなりますよね。ましてや、一人暮らしの大学生がツリーを買うこともないでしょう。

けど、私たちにはインターネットという文明の利器があるのです!

と、いうわけでだいぶ前置きが長くなりました。私たちが開発したのはこちら!

TreeHub

エディット画面

僕らにはインターネットがある・・・!

ということで、私たちが開発したのは、”オンライン上で一つのツリーをみんなで飾りつけをする”アプリケーションです。(完成には至らなかったので、以下こうしたかった!という理想が含まれます)

まず、リンクを開くと1枚目の画像が表示されます。 ツリーが2つありますね?2つのうち、ユーザーが編集するのは右側のツリー。左側のツリーは、他のユーザーが編集した最新のツリーが表示されているのです! ツリーの編集方法はいたって簡単。"セーブ"ボタンの下にある青いボタンをクリックすると

デコレーションを表示
デコレーション
このように可愛いらしいデコレーションが表示されます。

好きなデコレーションを一つクリックして、左側のツリーのすでにデコレーションされておる場所をクリックすると、装飾できます。

f:id:atarubift:20191217232433p:plain
飾り付けた

最後に、ツリーの下にあるセーブボタンを押すと、この編集がデータベースに保存されて右側に保存される。 大事なことなのでも一度書きますが、ツリーの下にあるボタンを押すとデータベースに保存されます。 右側のセーブボタンは、残念ただのダミーさ、、、。

と、まぁ、個人で編集したツリーを集めようというアプリです。

実装できたのは、デコレーションをデータベースに保存するところまででした。
つまり、右側のツリーはいつまでたってもベルが飾りつけられたまま変わらない!

開発まわり

React? js? Firebase? ナニモワカラン。

メンバーのうち2人がフロントエンド、私がバッグエンドを担当しました。 Reactを主として使い、データベースや本番環境へのデプロイはfirebaseを使いました。 両方とも今回のハッカソンで初めて触ったので、ナニモワカランの連続。 『画像をデータベースに保存して、保存された情報を左側の木に表示する』 説明するのは簡単なんですが、その機能の実装だけができませんでした。辛い。 時間も足りず、完成までたどり着けなかったのはとても悔しいです。 事前知識なしで開発に挑むのはさすがに無謀すぎました。

反省点

  • 計画性
    これがまるでなかったのが今回の反省ですね! 何を作るのかを決めた段階で、技術検証を行い、何が適しているのかをしっかり決めることが必要に感じました。 と、言っても何が最適なのかわかるほどの知識がなかったため、今回はしょうがなかったのかなぁ。。。

  • タスク管理
    いつまでに何をするのか。これを明確化できず、同じようなことをいつまでも繰り替えしてしまいました。 ハッカソンそのものの締め切りとは別に、タスクごとの期限を設けて危機感を持たせる必要があると思いました。

全体を通しての感想

初めてハッカソンに参加して、チーム開発についても学ぶことができました。チーム内でわからないところは教えあい、高めあうことができるというのは、チーム開発のいいところだなって思いました。githubの使い方や、React, js, Firebaseといった触ったことのない技術に触れたことはとてもいい経験になりました。 分からないことだらけではあったけど、調べる力もに着けることができたし、今後の開発に役に立てることができそうです!