初ハッカソン(サポーターズ主催)の感想とそこで作ったアプリの紹介

初めてハッカソンに参加したので、その感想と、そこで作ったアプリの紹介です。

目次

• 参加したハッカソン
• 作ったアプリの紹介
  • アプリ名
  • 内容
  • 技術構成
• 参加時点の自分の状況
• 参加後の技術スタック
  • フロントエンド
  • バックエンド
  • インフラ
  • その他
• 成長できた理由
• 雑談
  • GitHubの草がめっちゃ生える
  • 生成AIに頼りすぎたらやっぱりダメ
  • 設計ってやっぱ大事
  • ハッカソンに使った時間
• 今後やってみたいこと

参加したハッカソン

• 事前開発期間7日間(参加任意) & 本番2日間(必須参加)
• 私のチーム(計3人/即席チーム)は9日間すべて稼働

作ったアプリの紹介

アプリ名

GitHub Battle Community

内容

GitHubアカウントを持っている開発者たちが集まって、期間を決めてコントリビューション数を競い合う。期間最終日まで毎日コントリビューションをし続けたメンバーのみ、お互いのXとGitHubアカウントのリンクが共有されるので良き仲間と繋がれる。開発者のモチベーション向上だけでなく、初学者や孤独な開発者たちのコミュニティ形成の一助になるはず。

技術構成

参加時点の自分の状況

• 学部4年
• プログラミング歴は半年ちょっと
• フロントエンド
  JavaScript(React)でTodoリスト、電卓などは作れる
• バックエンド
  Python(Flask)で簡単なAPI実装をした経験がある(生成AIをかなり使ったけど)
• インフラ
  VercelとEC2(AWS)を一瞬使ったことがある程度
• その他
  普段の個人開発でGitを使ってGitHubにコミットしているが全然詳しくはない
  共同開発経験、実務経験ともに皆無

...と、いわゆる初学者です。レベル感としては、データベースと連携してログイン機能があるTodoリストアプリを最近なんとか作った(生成AI使いまくった)、という程度です。

「もっとレベルアップしたいなぁ...」と思っていたところに「初心者大歓迎」のハッカソンを見つけたので、プログラミング歴半年の自分でも参加に踏み切れたという流れです。

「ハッカソン」という名前だけは何度も聞いていたので、参加をしてみたいとずっと思っており、また1つ夢が叶いました。

参加後の技術スタック

結論、凄くレベルアップできた実感があります。具体的には以下です。

フロントエンド

• TypeScript(React), Next.js(App Router), Tailwind CSSを使えるようになった
  • 全部めちゃくちゃ使ってみたかったやつ

バックエンド

• Supabaseが何となくわかった
  • BaaS(Backend As A Service)
  • データベースにPostgreSQLを採用している
  • どうやってフロントエンドとバックエンドのSupabaseを接続してフルスタック開発するかがわかった
  • Supabaseのおかげでバックエンドのコード(Pythonなど)を1行も書かずにアプリ開発ができた
  • Supabaseが扱うデータベースはFirebaseなどと違ってSQLなのでGUI上での操作がすごい簡単だった
• GraphQL(APIにクエリを投げる言語)とREST(API設計のためのアーキテクチャ)を知った。違いも分かった。
  • 今回はGraphQLを使用してGitHuB GraphQL APIにクエリを投げた

インフラ

• Denoの存在を知った
  • ランタイム(JS/TS実行環境)
  • 気になってたやつ
  • Supabaseだけでは定期実行ができなかったので、Denoに助けられた
  • Supabaseのエッジ関数(edge function)とやらを使用した
• Dockerが何となくわかった
  • 仮想環境プラットフォーム
  • いつかは絶対に使ってみたいと思ってたやつ

その他

• Git/GitHubを使った共同開発の流れが分かった
  • branchの切り方、pull request/mergeのやり方、どう分業するかの理解
• VSCodeの拡張機能「Live Share」を使えばVSCode上で共同編集できることを知った
• Windows + V で、保持されているコピーデータから選んで貼り付けできることを知った

成長できた理由

ということで、予想以上に成長できました。それに伴って楽しかったのも良かったです。
成長できた理由は以下の様に考えています。

• 自分より経験が上のチームメンバーに、丁寧にわからないところを教えてもらった
  • わからないこと以外にも、気になったこととか話してみたいこととか雑談とかを結構発信していたが、すべて返信くれた。(感謝しかない)
• わからないことはわからないままにしない。わかるまで頑張った
  • 案外3時間本気出せば「あぁなんとなくならわかってきた」が来る
• 「やったことないからその技術は使わない」ではなく、「やったことないけどやれるようになってやる」精神でいろいろな技術に挑んだ
  • これはチームメンバー全員が同じ心持ちだったので快適だった(まあそもそもハッカソンがそういうものなのだろう)

雑談

GitHubの草がめっちゃ生える

共同開発すると、個人開発より草がたくさん生える気がします。
例えばOrganizationのリポジトリにコントリビュートすると、そこのメンバーである自分のGitHubアカウントにもコントリビュートが反映され、草が生えますが、その頻度が多い。
なぜなら個人開発ではやらないpull requestや、issue立てたりdiscussion立てたりdiscussionに回答したりがあるので、草は個人開発してたときよりたくさん生えるなぁという感じがします。(今回頑張ったから多かっだけの可能性もあるが)

いかにして草は生えるか↓
https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/viewing-contributions-on-your-profile

生成AIに頼りすぎたらやっぱりダメ

自分は普段開発に生成AIをかなり使うのですが、さすがにコードの意味は自分でも理解してから生成されたコードをコピペするようにしていました。
しかし今回はハッカソン。開発期間が決められており、正直急いでいたのでもはや自分でも意味を理解していないコードを、生成AIに言われるがままにコピペしまくっていました。
その結果...

• 気付いたらコードがぐちゃぐちゃで複雑・難解なロジックになってる
• このコード何？と聞かれても答えられない。自分も困るし相手も困る。

という事態が途中で発生しました。

チーム内で会話して共同開発していくにあたって、自分担当のところは責任もって理解していないと最終的に効率が落ちるので、実装スピードを下げてでもある程度は自力で頑張った方が絶対に良いですね。生成AIに聞いても理解しきれる自信がある分だけ聞くというのが良いです。

あと、自力でコード書けたときの快感は、生成AI使ってると味わえないですね。

生成AIは用法・用量を守って正しく使いましょう

設計ってやっぱ大事

開発の前段階の「設計」は大事だ、とよく聞いてはいましたが、身をもって体験しました。
具体的に感じたシーンとしては、ルーティング処理を実装してるときです。

/〇〇, /△△などのエンドポイントの名前をどうするか、そのページの中身はどうするか、そのページからどんなページに遷移するのか、などをしっかり話し合わないで開発に移ってしまった結果、フロントエンド担当者(自分)とバックエンド担当者(チームメンバー)で対応してないコードを書くことになってしまいました。
最終的に「どうする？」「どっちに合わせて変更する？」「そもそもどうすべきなんだっけ？」みたいな話になり、コードを修正する羽目になりました。最初からキッチリ設計していたらこの修正の手間は省けたはずです。反省ですね。

~愚痴ゾーン~

• でもコード書く前に全体像考えるのめんどくさいんだよなぁ...
• 予定立てるのとかも好きじゃないし...行き当たりばったりで生きてきたし...
• 個人的には、さっさと開発に移って、書きながら考えるのが好き。実際に書いてみてからじゃないとわからないこともあるし...

ハッカソンに使った時間

私は以下6点フルセットのため、かなり時間を使えました。

1. 就活が終わっている
2. バイトをやっていない
3. 大学夏休み
4. ゼミ/サークルに属していない
5. ゼミに入っていないので卒論がない
6. 文系だから研究がない

...なんか悲しくなりますが、とにかく他の参加者よりは時間を使えたと思います。各日の開発にかけた時間は以下です。

• 1日目(8/17) : 2時間

• 2日目(8/18) : 8時間30分

• 3日目(8/19) : 6時間30分

• 4日目(8/20) : 6時間30分

• 5日目(8/21) : 7時間

• 6日目(8/22) : 7時間

• 7日目(8/23) : 8時間30分

• 8日目(8/24) : 13時間30分

• 9日目(8/25) : 5時間

計64時間30分(1日あたり平均約7時間)

今後やってみたいこと

今回のハッカソンとは関係なしに、個人的に今後何をしたいか

• 基本情報技術者試験に合格したい
• 今回覚えたモダンな技術をふんだんに使って、個人開発してみる
  • 1人でもくもくと開発する経験を積んでこそ力がつくはず
• 生成AIと連携しているアプリを作ってみたい
  • GPTのAPIとか気になる
• X, Instagram, Youtube, Gmail, Line, Google Mapなど、普段使っている有名サービスのAPIと連携していろんなことやってみたい
• Webスクレイピングしてみたい
  • 記事の自動収集とか
• UIの自動テストをしてみたい
  • PythonのSelenium WebDriverを一瞬だけ使ったことがあり、面白かったので
• 競プロやりたい
  • AtCoderは敷居高そうだからまずはpaizaでランク上げていきたい
• 自分のHP作りたい
• ハードウェアの勉強したい
  • 仕事道具であるPCの中身を全然知らない状態が単純に嫌
  • 自作PCとか組めるようになったら楽しそう
  • ラズパイで生物を感知するとかできるらしく、絶対おもしろい
• セキュリティの勉強したい
  • ハッキングって奥深くて面白そう(勿論法には触れません)
• 個人でアプリを開発し、商用化したい
  • Stripeで決済システム実装してみたい
• 3Dプリンターを扱ってみたい
  • Fusion 360で3Dモデルの設計をするの楽しいらしい
  • Three.jsという3次元CG作れるJSライブラリもあるらしい