Reactで魅力的なUIを実現！Hackathon Meetup #3でインタラクティブ開発に挑戦

2025年8月10日、京都で開催された「Webアプリ開発入門【HackathonMeetup#3/5】ピザ懇親会あり」。対面・オンライン合わせて24名が参加し、参加者の78%が満足度5点満点、22%が4点と高評価をいただきました。

↓今回は異例のオンライン参加者が大半を占める形となりました！
スクリーンショット2025-08-2015.58.07.png

「フロントエンドって難しそう...」「Reactって何から始めればいい？」そんな疑問を抱えていた参加者たちが、実践的なハンズオンを通じて、ハッカソンで「魅力的なフロントエンド」を作れる技術を習得した様子をレポートします。

イベントの様子

開催概要

日時: 2025年8月10日（土）15:00-20:30（懇親会含む）
会場: ストライク京都イノベーションオフィス/Hive Kyoto
参加者: 24名（対面3名、オンライン20名、登壇者1名）
講師: たくてぃんさん
形式: ハンズオン勉強会 + YouTube Live配信
ハンズオン資料：https://docs.google.com/document/d/143nKsakOdKflgyOEnz3hI0XPnIlEXIBA6ChobRM6XJA/edit
SlideShare：https://www.slideshare.net/slideshow/web-_-react-bootcamp-by-craftstadium/282548120

全5回シリーズ「Hackathon Meetup」の第3回目。第2回で学んだバックエンドAPIと連携できるフロントエンド開発にフォーカスし、実際にReactコンポーネントを作りながら学ぶハンズオン形式で開催しました。

講師紹介：たくてぃんさん

今回の講師を務めたのは、神戸出身のエンジニア「たくてぃん」さん。専門学校でIT技術を学び、フロントエンド・バックエンド・インフラまで幅広い領域で活躍されています。

Go、Rust、TypeScriptを愛用し、「品質が高いプロダクト・内部品質が高いソフトウェアを継続的に開発できるように日々精進中」という信念のもと、ソフトウェア開発における設計やDevOpsの実践にも力を入れている実力派エンジニアです。

普段は神戸のエンジニアバー「HACK.BAR」でも活動されており、勉強会やハックバーでGeekな話をすることを楽しみにされているとのこと。今回のハンズオンでも、その豊富な経験と実践的な知識を惜しみなく共有していただきました。

100%が満足と回答！実践的なReact開発を習得

イベント終了後のアンケート（回答者9名）で見えた成果がこちら：

数字で見る成果

満足度: 4.8/5.0（100%の方が満足以上と回答）
理解度: 4.1/5.0（実践的な内容でも高い理解度）
ハッカソン参加意欲向上: 89%（8名中7名が「非常に参加したくなった」または「参加したくなった」）
関西ビギナーズハッカソンvol.6 参加希望: 100%

特に注目すべきは、ハッカソン未経験者が4名、経験1-3回が5名という初心者が多い中での高い満足度。Reactという最新技術に対する参加者の学習意欲の高さが伺えます。

モダンなReact開発環境を実践

学習内容のハイライト

今回のハンズオンでは、最新の開発環境と実践的な技術を習得：

環境構築

Bun（高速パッケージマネージャー）の導入
create-react-router v7.8.0で最新のReact環境構築
Tailwind CSSによるモダンなスタイリング

実装内容

コンポーネントベース設計の理解
useStateフックによる状態管理
インタラクティブなカウンターアプリの実装
コンポーネント分割による再利用可能な設計

講師のたくてぃんさんによる丁寧な指導で、参加者は「自己紹介サイト」と「カウンターアプリ」を実際に作成。Windows/Mac両対応の詳細な環境構築手順書により、環境差異によるトラブルを最小限に抑えることに成功しました。

スクリーンショット2025-08-2015.59.19.png

実践的なハンズオン資料

たくてぃんさんが準備したハンズオン資料は、初心者にも分かりやすい構成：

Windows/Mac両対応の環境構築手順
エラー時の対処法を詳細に記載
画像付きの丁寧な解説
VSCode拡張機能の設定まで網羅

参加者からは「セットアップ時の不具合の対応や質問にも丁寧に答えていただき誠にありがとうございます」という感謝の声が寄せられました。

参加者の声から見える価値

アンケートから最も印象に残った点として挙げられたのは：

「登壇者の体験談」
「関西ビギナーズハッカソンvol.6のテーマ発表」
「ストライク京都イノベーションオフィス（会場）」

技術習得だけでなく、実際のハッカソンへの期待感を高める構成が参加者の心を掴みました。

CraftStadiumコミュニティの成長

参加者属性の多様性

大学生: 3名
大学院生: 1名
専門学生: 2名
その他: 3名（社会人含む）

幅広い年齢層（学生から1987年生まれの方まで）が参加し、多様なバックグラウンドを持つ参加者同士の交流が生まれました。

参加動機の分析

参加者の動機は多岐にわたりました：

「Reactに興味があったのと、宿泊型ハッカソンの割引」
「ハッカソンに興味があり、参加することを決めましたが技術が稚拙なのでなるべく役に立てるようになるために参加」
「関数型に興味をもち、Reactの理解を深めたいから」
「関西ビギナーズハッカソンの予習として」

技術習得だけでなく、コミュニティへの参加や実践的な学習機会を求める声が多く寄せられました。

連携効果の実証

CraftStadium経由: 3名
Connpass経由: 4名
Google検索: 1名

複数のチャンネルから参加者が集まり、CraftStadiumプラットフォームとしての認知度向上を確認できました。

技術的連続性が生む価値

参加者からのフィードバックで特に評価が高かったのは、シリーズ全体の技術的連続性：

段階的なスキルアップ

第1回：モチベーション向上（体験談）
第2回：バックエンド基礎（Node.js API）
第3回：フロントエンド実装（React）← 今回
第4回：プロダクト企画力（デザイン思考）
第5回：発表スキル完成（プレゼン術）

「第2回で作成したAPIと連携できる」という実践的な構成により、参加者はフルスタック開発の全体像を理解できるようになりました。

改善点と今後の展開

参加者からの要望

今後開催してほしいテーマとして：

「関数型プログラミング」
「Reactでアプリ作る（TODOアプリなど）」

より深い技術理解を求める声が寄せられ、参加者の成長意欲の高さが伺えます。

次回予告：デザイン思考ワークショップ

次回は技術から一歩離れ、プロダクト企画力を磨きます。

Hackathon Meetup #4：デザイン思考ワークショップ

開催日: 2025年11月頃を予定
テーマ: ユーザー中心のプロダクト設計
形式: ワークショップ形式

こんな方におすすめ

技術はあるけどアイデア出しが苦手
ユーザーのニーズを的確に捉えたい
ハッカソンで「価値あるプロダクト」を作りたい

まとめ

たくてぃんさんの「品質が高いプロダクト・内部品質が高いソフトウェアを継続的に開発できる」という理念が、参加者にも伝わり、単なる「動くコード」ではなく「良いコード」を書くことの重要性を学ぶ機会となりました。

「Reactでかっこいいアプリを作りたい」「フロントエンドを極めたい」「ハッカソンで活躍したい」

そんな想いを持つ方は、ぜひ次回のHackathon Meetup #4にご参加ください。技術だけでなく、プロダクト全体を設計する力を一緒に身につけていきましょう！

シリーズ情報

Hackathon Meetup #4: デザイン思考ワークショップ
開催日: 2025年11月頃を予定
申込: 後日connpassにて公開予定

本記事は、株式会社CoPalette主催「Hackathon Meetup #3」の開催報告です。CraftStadiumは「創るたびに、強くなる。」をミッションに、ハッカソンプラットフォームの運営を通じて技術者コミュニティの成長を支援しています。