P2HACKS2025 勉強会基礎編

P2HACKS 勉強会 〜 基礎編 〜

本資料について 本資料は、2025年11⽉17⽇に公⽴はこだて未来⼤学で開催された、 P2HACKS2025 勉強会 〜基礎編〜の勉強会資料です。 本資料は、P2HACKS 2022開催時のコアメンバーであるゆひ⽒が、 「P2HACKS2022 勉強会〜基礎編〜」と題して作成したものをベースと しています。P2HACKS 2024からは、あずらたがこの資料を引き継ぎ、 資料を書き換えながら使っています。 公開するにあたって、あずらたが責任をとれる画像以外は、画像を図形に 置き換えております。 本資料のベースを作っていただいたゆひ⽒に感謝の意を表明しつつ、本資料を 公開いたします。

今⽇の⽬的 ● 講義を受講したあと、ハッカソン⾃体についてや、ハッカソンの 乗り切り⽅について知っている状態になっている

今⽇の内容 1. ハッカソンとは？ 2. アイディアの出し⽅ 3. 開発の進め⽅ 4. 発表のやり⽅ 5. その他こまごまとしたトピック

ハッカソンとは？

ハッカソンには何かしらテーマがある 過去のテーマ例: ● 未来 ● ひんやり ● フラッシュ テーマに沿っているか？というのも1つの評価軸

ハッカソンの流れ アイデアソン 開発 発表

各フェーズのゴール アイデアソン ⬜ どのようなプロダクトを作るか決める 開発 ⬜ 動くプロダクトを作る 発表 ⬜ プロダクトの魅⼒を伝える

アイデアの出し⽅

アイデアってどう考えるんだろう？ アイデアはどう考えればよいか、1分くらい考えてみよう 例: 思いつき, 定番を調べてみる, etc...

答え どんな回答でも正解！ というか、正解はない

アイデア出しには⾊んな⽅法がある ● 連想ゲーム ● ブレスト・KJ法 ● 強制連想法

連想ゲーム マインドマップで 思いついたことを つらつら書き連ねる （画像⾮公開）

連想ゲームでやるなら？ 連想する⾔葉を書き出す ⾔葉の定義について調べてみる 気になった事象を整理 考えた事象を元にサポートアイデアを考える

「アピール」がテーマなら... 連想する⾔葉を 書き出す ⾔葉の定義について 調べてみる SNS, ⼈間以外へのアピール, ... そもそもアピールってどういうもの？ ⇒ 訴えかけること！ 気になった事象を整理 発⾔をでかくするの⾯⽩そうだな... 考えた事象を元に サポートアイデアを考える 発⾔をでかくする意味って何？ ⇒ ⽬⽴ちたいから？

ブレスト・KJ法 ブレインストーミングでいっぱい考えて、KJ法でまとめるやり⽅ ● ブレインストーミング ○ 「批判をしない」「⾃由奔放に」「質より量」「連想と結合」の4原則で、 とにかく⾊んなアイデアを書き出す ● KJ法 ○ 書き出したアイデアをグルーピングして、グループごとの関係性や評価を⾏う 参照元: https://www.ritsumei.ac.jp/~yamai/kj.htm

• https://www.ritsumei.ac.jp/~yamai/kj.htm

ブレスト・KJ法の例 フィールドワークの感想を ふせんに書き出しているようす 場所ごとに分けて、 更にそれぞれの場所の感想を グルーピングしている （画像⾮公開）

強制連想法 ⇒ 2つのものを強制的に関連づけて、アイデアを出す⽅法 例えば、（テーマ）×（変数）で無理⽮理アイデアを出す （変数）には、テーマとは全く関係のないことを⼊れる AIにしりとりさせた結果を⼊れてみたりする

例えば「フラッシュ」なら ● 海苔 × フラッシュ = 週刊誌の編集者になりきって、記事の写真に 海苔を載せるアプリ ● 輪郭 × フラッシュ = フラッシュ撮影で撮ったときに出た、 輪郭の美しさを競うアプリ ● 空港 × フラッシュ = ...

各フェーズのゴール アイデアソン ✅ どのようなプロダクトを作るか決める 開発 ⬜ 動くプロダクトを作る 発表 ⬜ プロダクトの魅⼒を伝える

開発の進め⽅

よっしゃアイデア決めた！開発するぞ〜！ ...で、何から⼿をつける？

プログラミングするまでに必要なこと ● 機能の洗い出し ● 対象プラットフォームの決定 ● 使うツールの決定 ● 画⾯構成の決定 意外と多い

プログラミングするまでに必要なこと ● 機能の洗い出し ● 対象プラットフォームの決定 ● 使うツールの決定 ● 画⾯構成の決定 意外と多い

「機能を洗い出す」とは？ ⇒ 「プロダクトがやること」を明確する

どうやって機能を洗い出すか？ ⇒ ユーザーとプロダクトの間で「誰が何をするか」というストーリーを 作って境界線を引き、システムがやること1つ1つを機能とする 例: サンタが近づくとブレーカーが落ちるプロダクト 1. サンタがユーザーの家に近づく 2. (使⽤者の家にある) システムがサンタの接近を検知 3. システムがブレーカーを落とす

プログラミングするまでに必要なこと ● ● ● ● 機能の洗い出し 対象プラットフォームの決定 使うツールの決定 画⾯構成の決定 意外と多い

対象プラットフォームの決定 チームによっては最初から決めている場合や、 開発するプロダクトによっては選択肢がない場合も それぞれできることも異なるので、事前に調べておこう！

プログラミングするまでに必要なこと ● 機能の洗い出し ● 対象プラットフォームの決定 ● 使うツールの決定 ● 画⾯構成の決定 意外と多い

開発に必要なツール ● 開発ツール ○ 何で作るか？ ● コミュニケーションツール ○ どう連絡をとりあうか？ ● ソースコード管理ツール ○ 書いたコードはどう管理するか？ ● タスク管理ツール ○ やるべきことはどう管理するか？

開発に必要なツール ● 開発ツール ○ 何で作るか？ ● コミュニケーションツール ○ どう連絡をとりあうか？ ● ソースコード管理ツール ○ 書いたコードはどう管理するか？ ● タスク管理ツール ○ やるべきことはどう管理するか？ 先ほどの 「対象プラットフォームの決定」 を参照

開発に必要なツール ● 開発ツール ○ 何で作るか？ ● コミュニケーションツール ○ どう連絡をとりあうか？ ● ソースコード管理ツール ○ 書いたコードはどう管理するか？ ● タスク管理ツール ○ やるべきことはどう管理するか？

代表的なコミュニケーションツール ● Slack ○ ○ ビジネス向けチャットツール Googleカレンダー・Google Driveなどとの連携が可能 ● Discord ○ ○ ○ ゲームに特化したチャットツール ここ数年は多くの開発者コミュニティがDiscordを使っている P2HACKS 2025で全体連絡に使⽤

開発に必要なツール ● 開発ツール ○ どれで作るか？ ● コミュニケーションツール ○ どう連絡をとりあうか？ ● ソースコード管理ツール ○ 書いたコードはどう管理するか？ ● タスク管理ツール ○ やるべきことはどう管理するか？

別にGoogle Driveとかでよくない？ ⇒ 変更が競合して、何が最新版かわからなくなるのでおすすめしない 例: レポートのファイル名 どれが最新なのかわからない・新しい版を作るたびに容量が2倍3倍... バージョン管理ツールは、これらの問題を解決するための専⽤ツール

ソースコード管理ツールはGitがデファクトスタンダード ● Git ● Subversion ● Mercurial 技術質問サイト「Stack Overflow」の調査では、 回答者の9割がGitを使って開発している* https://survey.stackoverflow.co/2021#section-most-popular-technologies-other-tools

• https://survey.stackoverflow.co/2021#section-most-popular-technologies-other-tools

GitHubで歴史をやりとりする Gitで変更を記録して、GitHubにアップロードすると、 他の⼈がGitHubを介して、⼿元に他の⼈の変更を持ってこれる GitHub Git 変更を追加 Git 変更を追加 歴史 歴史 歴史 他の⼈の 変更を取得 他の⼈の 変更を取得

GitHubにあって、Gitにない機能 ● ● ● ● ● 主にプロジェクト管理に関する機能 Issue機能 ⇒ コードの変更とプロジェクトの管理が紐付く Pull Request機能 このあたりは、「タスク管理」で解説 Wiki機能 プロジェクト機能 (GitHub Project) CI/CD機能 (GitHub Actions)

実践編（Git/GitHub勉強会）の宣伝 実践編として、Git/GitHub勉強会をします ⽇時: 11/18 18:10〜19:40 場所: 594教室 GitやGitHubについて、最低限コード提出に必要な内容で実施予定

開発に必要なツール ● 開発ツール ○ 何で作るか？ ● コミュニケーションツール ○ どう連絡をとりあうか？ ● ソースコード管理ツール ○ 書いたコードはどう管理するか？ ● タスク管理ツール ○ やるべきことはどう管理するか？

ハッカソン中によくあること 「あれ終わった！」「これ終わった！」という連絡が⾶び交う そしてその情報はチャットの海に流される...

タスク管理ツールを使うメリット ⇒ タスクの担当者・優先度・完了したか等、現状が可視化でき、 戦略に活かすことができる これによって、 ● やるべきことの漏れ抜けを防⽌できる ● 「依存する機能ができるから、先にこっちを仕上げよう」といった 判断もできるようになる

Issue 実装したい機能1つ1つを ”Issue” として⽴てられる

GitHub Project Issueをまとめて いい感じに表⽰してくれる 機能 （画像⾮公開）

ちなみにハッカソン運営もタスク管理をしています

プログラミングするまでに必要なこと ● ● ● ● 機能の洗い出し 使う技術の決定 使うツールの決定 画⾯構成の決定 意外と多い

画⾯構成の考え⽅ ⇒ ⼊⼒したい内容と出⼒したい内容によって考える 例: Suicaの残⾼に応じて懐が寒くなるプロダクト ● 懐が寒いかの判断材料にSuicaのアカウント連携が必要 ○ ● 懐を寒くするためにエアコンやファンと連携が必要 ○ ○ ● ⼊⼒: Suicaのアカウント情報 ⼊⼒: 連携をするための設定が必要 ここではSwitchbotのアカウント情報となっている 懐が寒いかどうかの判定を出⼒ ○ 出⼒: 現状の設定温度 ⇒ 「懐の温度を表⽰する画⾯」「各種設定をする画⾯」の2つが必要

画⾯のイメージはとにかく共有しよう 例: Figma 例: 紙

各フェーズのゴール アイデアソン ✅ どのようなプロダクトを作るか決める 開発 ✅ 動くプロダクトを作る 発表 ⬜ プロダクトの魅⼒を伝える

発表のやり⽅

審査基準を⾒てみる

審査基準を⾒てみる（補⾜） 発表⾃体の評価もあるが、 発表でこれらを補完する という要素もある

伝えるべき情報とそうでない情報 審査基準に則るなら、伝えるべき情報は、例えば次の通り ● ● ● ● ● プロダクトのコンセプト プロダクトの魅⼒的な部分 動作デモ 使⽤技術 開発過程 逆にそれ以外の内容を盛り込むと、ノイズになってしまう

審査基準を⾒てみる ● 筋道を⽴てて発表しているか ● 発表⽅法の⼯夫をしているか ● 質疑応答の際に意図を汲み獲れるか ⇒ これらをやればいい

筋道を⽴てるとは？ どういう課題があるのか (Why) どうすれば課題は解決するのか (How) プロダクトの提案 (What)

これはゴールデンサークル理論と呼ばれる⽅法 https://youtu.be/qp0HIF3SfI4?si=vircFcIj3FIj2E-n

• https://youtu.be/qp0HIF3SfI4?si=vircFcIj3FIj2E-n

質疑応答の際に意図を汲み取り、返答するには？ ⇒ ⾃分たちの⾔いたいことだけ⾔わない・質問をちゃんと理解する まず⼤事なのは、相⼿の主張を勘違いしないこと 質問に対して⾃分の理解が怪しいなと思ったら、ちゃんと聞き返す ⾃分たちのスタンス (解決の⽅向性) に合わせて、 「⾃分たちはこういうスタンスなので、こう思っています」という ⾒解を返すこと

各フェーズのゴール アイデアソン ✅ どのようなプロダクトを作るか決める 開発 ✅ 動くプロダクトを作る 発表 ✅ プロダクトの魅⼒を伝える

その他こまごまとしたトピック

その他こまごまとしたトピック ● メンターをうまく使おう ● APIキーの扱いには注意しよう

メンターをうまく使おう

P2HACKSではメンターがつきます！ 期間中は、メンターが技術相談に乗ってくれます！ でもメンターをうまく使えないと、損をしてしまいます...

良くない質問の例 「エラーが出てしまい動きません。どうしたら直りますか？」 「ChatGPTに聞いてみたけどうまく動かないです」 こういった質問の場合、通常よりも解決に時間を要してしまいます

メンターはこういうことを考えている ● ⾃分が対応できる技術領域？ ● そもそも何を実現したいんだろう？ ● 何を解決してほしいんだろう？ ● 何か⾒落しをしてないだろうか？

だから、こういう情報を与えよう ● ⾃分が対応できる技術領域？ ⇒ 環境は何を使っているのか？ ● そもそも何を実現したいんだろう？ ⇒ 何を解決したいのか？ ● 何を解決してほしいんだろう？ ⇒ 妨げるものは何か？（エラーの内容は？） ● 何か⾒落しをしてないだろうか？ ⇒ 質問者⾃⾝がやった対応は？ とは⾔いつつ、 やりたいことが 具体的に定まっていれば、 対応するのに⼗分です

ベストな質問の例 ReactとTypeScriptで◯◯◯する機能を実装したいと思い、次の記事を参考に作成して います。 https://qiita.com/... しかし、`HogefugaException`というエラーが出てしまい、先に進めていません。 次のような対応は参照しましたが、改善しませんでした。 ● https://qiita.com/... 環境は以下のとおりです。 ● ● MacBook Pro M1チップ Node.js v20.16.0

• https://qiita.com/...

コミュニケーションツールの装飾機能も活⽤しよう 全く同じ内容ですが、どちらが⾒やすいですか？

Discordでは⽂字の装飾が可能 ソースコードはバッククォート（Shift + @）3つで囲むとよい ```java ← ここに言語の名前を入れる package me.azurata.example; import java.util.*; public class Main { public static void main (String[] args) { System.out.println(“Hello, world!”); } } ```

APIキーの扱いには注意しよう

APIキーとは ⇒ 外部Web APIを使⽤するときに必要なパスワードのようなもの APIキーが必要なAPIサービスの例 ● ● ● ● ● Google Maps Platform APIs Instagram API Open AI API Discord API etc...

Discord APIを使った例 @bot.event async def on_ready(): print(f'{bot.user.name} としてログインしました') bot_token = "..." bot.run(token=bot_token) # ここでAPIキー（トークン）を使っている

APIキーが漏れるとサービスを不正利⽤される APIキーが使える = そのサービスを利⽤できる 皆が⾒える場所にそのまま上げてしまうと、 勝⼿にサービスを使われてしまう cf. AWS アクセスキー

APIキーは.envファイルで管理する とはいえ、APIキーがないとAPIにアクセスできない ⇒ .envというファイルを作って記述するとよい 「dotenv」などと呼ばれるライブラリを使⽤すると、プログラムから 動的に.envファイルの中⾝を読み込むことができる そして、.envファイルは、皆の⾒える場所に置かないようにする

実例（Python）

質問コーナー

再掲: 実践編 (Git/GitHub勉強会) の宣伝 実践編として、Git/GitHub勉強会をします ⽇時: 11/18 18:10〜19:40 場所: 594教室 GitやGitHubについて、最低限コード提出に必要な内容で実施予定

ハッカソンエントリー https://p2hacks2025.github.io/ 公式X: @p2hacks エントリーお待ちしています！

• https://p2hacks2025.github.io/