はじめに
こんにちは！@shun_pです。私の本業はYouTubeチャンネルの運営をするプロデューサーをしたり、企業の動画施策を支援する動画マーケティングをしています。プログラミングとは縁のない人生を歩んできた私ですが、1年数カ月前にPythonを始めてすっかりプログラミングにハマり、今年の5月から@Sicut_studyが運営するプログラミングコーチングJISOUで、フロントエンドの学習を始めました。仕事でもPythonを活用していますが、職業エンジニアではないので「兼業エンジニア」と最近名乗っています。（兼業農家、兼業トレーダー的な、ね）
9月の21日と22日の2日間にわたって、JISOUで初のハッカソンが開かれました。もちろんハッカソンへの参加は初体験で、しかも1人参加。最後まで作り切れるのかやりきれるのか不安な面もありましたが、なんとか完走することができました。疲労と同時に、達成感を感じると共に、2日間一つのことだけに集中できたというとても幸せな感覚に包まれています！
しかもなんと...参加者9名の中で1位の評価をもらうことができました！評価はされるものを作りたいとは思っていましたが、優勝は想定外でした...!テストや大会、コンテストなどで1位、優勝、というものを記憶の限り人生の中で一度も経験したことがなかったので、人生初優勝でした。
ハッカソンへの参加はとても大変ですが、学びと経験、自信がめちゃくちゃドライブされるので、超おススメです！特にプログラミングを始めて少し経った頃の人たちには自分の現在地を知るためにもとてもいい機会だと思います。ハッカソンに参加する前の自分と参加したあとの自分では兼業エンジニアとしては別者になった感覚があります！ ぜひ機会があれば参加してみてください。
参考：今回のハッカソンのルールとテーマ
### 日程
1日目
9:00 テーマ発表
9:30 ハッカソン開始
2日目
17:00 成果発表（プレゼンテーション）
17:30 結果発表
### ルール
期間内であれば開発時間は自由
成果発表ではコードと発表スライドを提出
発表は1チーム3分間
CI/CDやテストは不要
技術選択は自由
期間外の事前準備は可能（環境構築等）
テーマは当日発表
チームは1人から4人まで
質問や壁打ちはGatherで受け付け
### 審査ルール
・技術的に優れているか (20%)
・ユーザー価値につながるか(30%)
・UI/UX, 完成度 (20%)
・プレゼンテーション (30%)
さてどんなアプリを作ったか紹介させてください。
作ったアプリ
当日発表されたテーマは 「AIで日常を魔法に」 でした。
AIで魔法...何を作ろうかと考え、いくつかのアイディアを出した結果、ちょうどいま英語学習系のYouTubeの準備をしていることもあり、課題感があったので英語学習アプリにしました。
こんなコンセプトです。
作ったアプリはこちら
自分が撮った写真をアップロードすると、英語の学習教材になって表示されるというもの（音声付き）
日常の体験を英語にして学ぶことで、ネイティブが生活を通じて学ぶ学習方法と同じ形で英語を学ぶことができて、効果的に英語を学ぶことができる、というアプリを考えました。
表示の仕方や、問題の出し方、関連表現など、やりたいことはあったのですが時間制約と自分の技術力の中でできることを考えると、ハッカソンの中ではここまでが限界だったので、これを提出物としました。
実際の画面↓↓
技術スタックについて
自分の技術力を考えたときに無理のない技術スタックの選定にしました。外部サービスを叩くAPIをcloud funcitonsで実装しようかとしていましたが、時間が間に合わなくなりそうだったので、途中でアドバイスももらい、すべてフロントエンドで完結させることにしました。（なので、上記のサービスはデプロイはせず、発表のときにローカルサーバーを公開して参加者にみてもらいました。）
| カテゴリ | 技術・ツール | 説明 |
|---|---|---|
| フロントエンド | React | UIの構築に使用。動的なコンポーネント管理と状態管理を行う。 |
| TypeScript | フロントエンドのロジック処理に使用。 | |
| ストレージ | Supabase Storage | 音声ファイルや写真を保存するための外部ストレージ。 |
| 画像解析 | OpenAI GPT Vision | 写真から英文を生成するために使用。 |
| 翻訳 | OpenAI Translation | 生成した英文の日本語訳を生成するために使用 |
| 音声生成 | OpenAI TTS | 英文に対応した音声ファイルの生成に使用。 |
| トンネルサービス | ngrok | ローカル環境の外部公開 |
開発チームについて
今回は1人でハッカソンに参加しました。ですが、AIの開発支援を非常に活用したので、ある種のチーム開発をしていました。どんなAIでどんな役割分担をしていたのか、がこちら。これについては、初めて参加したハッカソン、思考プロセス編 でもうちょっと詳しく書きたいと思います。
| ツール | 担当業務 | 説明 |
|---|---|---|
| Cursor | エディタ | 頼れるリードエンジニア。Cursorなくしてこの速度では開発できなかった |
| ChatGPT | エンジニア | エンジニア。Cursorの回答が納得できない時などに活用。 |
| v0 | UI作成 | 凄腕UIデザイナー |
| Claude | PM補佐 | アーキテクチャ、技術スタック、ユースケース検討、キャッチコピー、アプリ名考案等の各種壁打ち |
| 人間 | PM兼PJM | 各種指示。プレゼン作成。 |
GPTとClaudeは実際にはもっと入り乱れて使っていますが、だいたいこんな感じ。私自信の技術力は全然ありませんが、AIのおかげでめちゃくちゃ強化してもらっています。AI強化型人間？かっこよく言うと、AI駆動型開発者？いやAI依存型人間か...
プレゼンテーションについて
今回のハッカソンは、ユーザー価値やプレゼンテーションの配点が高めでした。技術力だと勝てないのでプレゼンテーションやストーリーを頑張るしかない！！と考え、ハッカソン2日目の14時過ぎぐらいには開発を終えて、2時間ぐらいをプレゼン準備にあてました。
以下、参考までに発表資料すべてです。
↑黒くなってしまっていすがアプリのキャプチャを動画で埋め込みました
参加して気づいたこと
@Sicut_study がハッカソンに参加することの目的は、優勝することもさることながら 「今の自分に足りないことを見つけること」 と話してくれていました。まさにそうで、今回ハッカソンに参加して以下のことに気づくことができました。
（弱いところ）
・フロントエンド開発の構造的な理解、知識の不足
作りたいUIに対して、どういう画面設計やコンポーネント設計、モジュール分割をすべきか、それはどれぐらい難易度があるのか時間がかかるのか漠然としかわかっていない
・制約時間の中で、雑に作るところと、丁寧に作るべきところの優先度の判定
・こうやって作ると、あとで大変になるかよな という先読み（Pythonだと割とわかってきている）
(克服法)
・人が作ったコードをたくさん見る
・手を動かしてReactとTypeScriptに慣れる（高速に失敗する）
これだけの気づきを与えてもらえる機会がもてた ことはとてもいい時間だったと思います
所感
最後に発表会があったのですが、参加した皆さんの成果物を見ていてそれぞれ個性的で、同じテーマをもらってもこれだけ違うアウトプットがでてくるのか！と刺激的でした。
そしてなにより、2日間集中して取り組んだことが終わったことへの安堵感が参加者全員からでていて、その空気を共有できて、仲間っぽい感覚が生まれたのが楽しかったです。マラソンや登山を走り切ったあと、参加者同士でたたえあう感じというか、「やりきった感」なのでしょうか、達成感に包まれました。ハッカソンに参加したメンバーは、エンジニア歴が長い人もいれば短い人もいてバックグラウンドは様々でしたが、みんなが同じテーマに向かって取り組むというのが、学生だったころを思い出させてくれて、最高でした！
おしらせ：JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇