学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning

私は個人開発が好きです。今まで個人開発のサービスをいくつかリリースしましたが、残念ながら一発当てた経験はありません。

しかし、個人開発のおかげでバックエンドエンジニアだった私がフロントエンドエンジニアとして転職できたり、TSKaigi 2025 に登壇する機会に恵まれました。

本発表ではサービスを当てることではなく、学習のモチベーションを維持し、自分の資産となる個人開発の考え方を紹介します。

本内容は「Study Hack #03 学習を成果に繋げるための個人開発の考え方 by HireRoo」で発表したものです。
https://hireroo.connpass.com/event/362799/

Transcript

1. Study Hack #03@HireRoo（2025/8/8） プログラミングをするパンダ（@Panda_Program） 学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ 1
2. 2 © 2012-2025 BASE, Inc. 自己紹介 • BASE株式会社 • 所属：BASE / Product Dev / feature dev1 • 現在の仕事：Senior Enginner ◦ フロントエンドもバックエンドも書くフルスタックです ◦ スクラム開発やチーム開発のプロセス改善が好きです ◦ 今はフロント中心にサイトリニューアルPJを担当しています（10ヶ月目） • 活動実績 ◦ 執筆 ◦ CodeZine様で「バックエンドエンジニアのためのフロントエンド入門」を連載 ◦ 2024/12に「アジャイル開発」で一人アドベントカレンダーを完走しました ◦ 登壇実績 ◦ Developers Summit 2025、PHPerKaigi 2025、TSKaigi 2025, PHP Conference JP 2022 など ◦ twitter: @Panda_Program プログラミングをするパンダ（@Panda_Program）
3. 3 © 2012-2025 BASE, Inc. 宣伝 技術書典18で心理的安全性のあるチームの作り方の書籍を出しました • 『成功する開発チームの作りかた 対話と信頼 の好循環 』（全85ページ） ◦ 心理的安全性のあるチームを作る話 • 技術書典マーケットで販売中です ◦ PDF版のみ ◦ https://techbookfest.org/product/p mc1tu6jc5YzbP1pmN3mfH
4. 4 © 2012-2025 BASE, Inc. 宣伝 YouTubeでエンジニア向けのラジオを配信してます（@dialog-radio） https://www.youtube.com/@dialog-radio/videos • ブログや登壇とはまた違った内容です ◦ プロダクトエンジニアって何だろう？ ◦ プロダクトオーナーとエンジニアの違い とは？ ◦ 勉強会のスキルアップ以外の意義とは？
5. 5 © 2012-2025 BASE, Inc. 宣伝 BASEはリアーキテクチャ中です • BASEはモジュラーモノリスで開発している ◦ 各モジュールはクリーンアーキテクチャ ◦ 業務領域の理解をして、コードに反映さ せる取り組み（DDD）で開発している • （ただ、レガシーなモノリスもまだ全然ある）
6. 本発表の前提
7. 7 © 2012-2025 BASE, Inc. 本発表の前提 「個人開発の失敗を避けるイケてる考え方 / tips for indie hackers」@Panda_Program https://speakerdeck.com/panda_program/tips-for-indie-hackers-5e33891f-2054-4044-87da-623799f8d8bd
8. 8 © 2012-2025 BASE, Inc. 本発表の前提
9. 9 © 2012-2025 BASE, Inc. 本発表の前提
10. 10 © 2012-2025 BASE, Inc. 本発表の前提
11. 11 © 2012-2025 BASE, Inc. 本発表の前提
12. 12 © 2012-2025 BASE, Inc. 本発表の前提 プログラミングをするパンダについて|CodeZine（コードジン） https://codezine.jp/author/2094
13. 13 © 2012-2025 BASE, Inc. 本発表の前提 リリースのための個人開発
14. 14 © 2012-2025 BASE, Inc. 本発表の前提 今回は真逆 学習のための個人開発の話 リリースしなくても良い
15. © 2012-2025 BASE, Inc. 本発表の背景 今回のテーマは「個人開発を通した勉強法」。「何かを作ってみたい」「個人開発をしてみ たい」── そんな気持ちから始めた 個人開発が、 スキルアップやキャリアの広がりにつな がる こともあります。今回は、 個人開発がきっかけでキャリアチェンジや技術イベントで の登壇経験を得た プログラミングをするパンダ様が、これまで個人開発にどのように取 り組んできたのかをお話しします。 Study Hack #03 学習を成果に繋げるための個人開発の考え方 - connpass https://hireroo.connpass.com/event/362799/
16. © 2012-2025 BASE, Inc. 本発表の背景 私は個人開発が好きです。今まで個人開発のサービスをいくつかリリースしましたが、残 念ながら一発当てた経験はありません。しかし、個人開発のおかげでバックエンドエンジ ニアだった私が フロントエンドエンジニアとして転職できた り、 TSKaigi 2025 に登壇する 機会に恵まれました。本発表ではサービスを当てることではなく、学習のモチベーション を維持し、自分の資産となる個人開発の考え方を紹介します。 Study Hack #03 学習を成果に繋げるための個人開発の考え方 - connpass https://hireroo.connpass.com/event/362799/
17. １ ２ ３ © 2012-2025 BASE, Inc. 目次 作成した個人開発サービスと 使用技術の紹介 個人開発がキャリアを拓いて くれた話 個人開発のモチベーション維持と AIの利用
18. 1. 作成した個人開発サービスと 使用技術の紹介
19. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介 1. ウィスキー蒸留所の紹介サイト（ 2018年） a. HTML + CSS b. https://jp-whiskey.panda-program.com/ 2. HIP HOP の動画サイト（ 2019年） a. Laravel + React + Material UI + Docker on EC2 b. https://hipsty.vercel.app/ 3. Creepy Nuts のファンサイト（ 2020年） a. Next.js + SWR + Tailwind CSS b. https://creepy-nuts-fans-next-panda-program.vercel.app/ 4. ビール好きのための SNS（2022年） a. Next.js + SWR + Tailwind CSS + Supabase b. https://beer-break.panda-program.com/
20. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介
21. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介
22. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介 1. ウィスキー蒸留所の紹介サイト（ 2018年） a. HTML + CSS b. 学んだこと : 自作サイトを出すこと + アプリケーションは作れていない 2. HIP HOP の動画サイト（ 2019年） a. Laravel + React + Material UI + Docker on EC2 b. 学んだこと : フロントから DBまで、アプリケーションを作るということ 3. Creepy Nuts のファンサイト（ 2020年） a. Next.js + SWR + Tailwind CSS（+ Figma） b. 学んだこと : 慣れた技術だと作りたいものをすぐに作れる 4. ビール好きのための SNS（2022年） a. Next.js + SWR + Tailwind CSS + Supabase（+ 自作 UIライブラリ） b. 学んだこと : 投稿してくれた方々への感謝（ + 作るのに時間をかけすぎたらダメ）
23. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介 • 使用技術の変遷 ◦ 2019年: GatsbyJS + サイトのテン プレート + Netlify ◦ 2022年: Next.js（SSG） + Tailwind CSS + Vercel ◦ 2025年: React + 自作 SSG + Vite + Cloudflare Pages • フロントエンドの動向をみながらアップ デート 個人のテックブログ パンダのプログラミングブログ https://panda-program.com/
24. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介 • 学習対象 ◦ Next.js の App Router ◦ クリーンアーキテクチャ ◦ Web 以外でも実現したいので CLI ツールを導入 ◦ モデリング ◦ スクラムガイドを読んで、 要素とそれぞれの関係、構造と 振る舞いを特定 • 学習目的なのでリリースしていない スクラムチームの管理ツール Panda-Program-Web/scrum https://github.com/Panda-Program-Web/scrum
25. © 2012-2025 BASE, Inc. 作成した個人開発サービスと使用技術の紹介 作る前 作った後
26. 2. 個人開発がキャリアを 拓いてくれた話
27. © 2012-2025 BASE, Inc. 本発表の背景 個人開発の目的と技術選定 リリースのため → 触り慣れている技術 学習のため → 触ったことのない技術
28. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 1. フロントエンドエンジニアとして副業・転職できた a. 5年前に Next.js の Production 導入を提案・実現した b. フロントエンドエンジニアとして副業をした c. 今ではエンジニア 7人チームのデザインリニューアル PJのリーダーを担当して いる 2. ツールやフレームワークの勘所を抑えられるようになった a. GatsbyJS は静的サイト向きだが、 Web アプリケーションには向かない b. Firebase はクセがあるので Supabase の方が使いやすい（ 3年前） c. Tailwind CSS をv0.7.4から触っていた（同僚に教えてもらった） i. ただ、デザイナーと協業するなら、これは本番導入しない方がいいなと 思っていた → 面接で「どのツールやライブラリが気になってますか？」にすぐ答えられる
29. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 • Laravel JP Conference • HIP HOP のサイトで実践したことを発表 する予定だった ◦ 「個人開発で Laravel上でクリーンな アーキテクチャ、 TDD、CI/CDを実践 する環境を構築した話」 • コロナで中止 😭 技術カンファレンスでプロポーザル初採択（2020年）
30. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 • PHPerKaigi 2022（オンライン） • JSON Parser ◦ CS 的なことをやりたかった ◦ 自宅からライブコーディングした ◦ https://github.com/Panda-Progra m-Web/php8-json-parser 厳密には個人開発ではないかもだけど、「学 習のための開発」として ライブコーディングに挑戦（2022年）
31. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 • モデリングを学んでクリーンアーキテク チャで実装したいと思った ◦ scrum チーム管理のアプリケーショ ンを作った ▪ https://github.com/Panda-Pr ogram-Web/scrum ◦ GitHub で公開はしたが、リリースは していない • プロポーザルを書いたら、 TS Kaigi で登 壇できた 設計について学んだ集大成（2025年）
32. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 クリーンアーキテクチャ の提唱者の ボブおじさんにメッセ 送ったら返事きた
33. © 2012-2025 BASE, Inc. 個人開発がキャリアを拓いてくれた話 「The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か」@t_wada https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend?slide=59 t_wadaさんのスライドで 自分のブログが紹介され た（嬉しすぎた）
34. 3. 個人開発のモチベーション維持と AIの利用
35. © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 「趣味は個人開発」といえるとカッコいいな、クリエイターだなと思う かっこよさ、優越感、承認欲求、どんどん出そう そのうち「作ることそのものが好き」「好きだから作る」「好きだから触ってみる」に変わる 自分はゲームに熱中する感覚で作ってた（バスでも電車でも旅行先でもコーディングして た） しかし、2022年9月にスプラ 3が発売されてからはそちらに熱中 …（3000時間が溶けた） ゲーム熱が冷めてから、個人の時間を開発や執筆や登壇準備に充てられた
36. © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 個人開発またやります！ React + React Router（旧Remix） + Convex + Cloudflare で作成中 Claude Code使ってます
37. © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 個人開発に AIを使うことの是非 • リリース目的ならフル活用しよう ◦ やりたいことを伝えて、 Agent に コードを書かせる • 学習目的なら Askだけにしよう ◦ tab も使いたくない ◦ Ask ででてきたコードをコピペす るのもダメ。写経する • LLM にコードを書かせると学べないこと ◦ モデリング、命名、リファクタ、設計、 テストの書き方 etc. • そもそも LLM を使うと脳の活動が低下す る、らしい ◦ 査読前論文だが、興味深い結果 • 「研究グループは AIの使用そのものを否定 するものではなく、「 AIを使う前にまず自力 で考えるプロセスを踏むことが重要」と指摘 している」とのこと https://ledge.ai/articles/chatgpt_brain_activity_decline _mit
38. © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 個人開発に AIを使うことの是非 • リリース目的ならフル活用しよう ◦ やりたいことを伝えて、 Agent に コードを書かせる • 学習目的なら Askだけにしよう ◦ tab も使いたくない ◦ Ask ででてきたコードをコピペす るのもダメ。写経する • LLM にコードを書かせると学べないこと ◦ モデリング、命名、リファクタ、設計、 テストの書き方 etc. • そもそも LLM を使うと脳の活動が低下す る、らしい ◦ 査読前論文だが、興味深い結果 • 「研究グループは AIの使用そのものを否定 するものではなく、「 AIを使う前にまず自力 で考えるプロセスを踏むことが重要」と指摘 している」とのこと https://ledge.ai/articles/chatgpt_brain_activity_decline _mit
39. 39 © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 学習資産 @laco2net「Angularの学習コストは本当に高いのか？」（参照日 2025/8/8） https://lacolaco.hatenablog.com/entry/2019/02/19/001547 “コストには2種類あります。費用の発生と資産の購入です。 支払った資本が、将来の収益の獲得に貢献するならば、それ は費用ではなく資産となります。「一度払った学習コストを 再利用して新しい技術を学ぶ」というのは、学習コストを資 産計上するということです。”（太字は発表者）
40. 40 © 2012-2025 BASE, Inc. 個人開発のモチベーション維持とAIの利用 学習資産 - Angular 以外でも通用すること • HTML / CSS / TypeScript • 状態管理 • コンポーネント設計 • 依存性の注入 etc. 学習コスト（費用） - Angular に特有のもの • Directive • Routing @laco2net「Angularの学習コストは本当に高いのか？」（参照日 2025/8/8） https://lacolaco.hatenablog.com/entry/2019/02/19/001547
41. © 2012-2025 BASE, Inc. 本発表の背景
42. © 2012-2025 BASE, Inc. 本発表の背景 学習したことを 様々な形で発表すれば 成果がついてくる インプット アウトプット アウトカム
43. © 2012-2025 BASE, Inc. 本発表の背景 （注）個人開発でも、 テストを必ず書く！
44. © 2012-2025 BASE, Inc. 本発表の背景 ご清聴ありがとうございました