個人開発の失敗を避けるイケてる考え方 / tips for indie hackers

Transcript

1. 個人開発の失敗を避ける
   イケてる考え方
   フロントエンドカンファレンス沖縄2022（2022.11.19）
   プログラミングをするパンダ (@Panda_Program)
   

   View Slide

2. 2
   © 2012-2022 BASE, Inc.
   #front_okinawa
   自己紹介
   ● BASE株式会社
   ● 所属：BASE / Product Dev / CRM3
   ● 現在のお仕事：シニアエンジニア
   ○ フロントエンドで React（Next.js）を書いたり Vue.js を書いたり
   ○ バックエンドでは PHP を書いてます
   ○ 最近は顧客管理機能（CRM）を開発してます
   ● 好きなことと活動
   ○ DevOps とアジャイルの開発プロセス（特にXP）が好き
   ○ Software Design 2022年3月号で TDD 特集の2,3部を執筆しました
   ○ twitter: @Panda_Program
   プログラミングをするパンダ（@Panda_Program）
   

   View Slide

3. 3
   © 2012-2022 BASE, Inc.
   #front_okinawa
   自己紹介
   個人開発が好き
   プログラミングをするパンダ（@Panda_Program）
   ブログ書いてます
   https://panda-program.com/
   ビールの画像投稿サイト作りました
   https://beerbreak.info/
   Next.js + Vercel + Supabase
   

   View Slide

4. 4
   © 2012-2022 BASE, Inc.
   #front_okinawa
   本発表の対象者
   

   View Slide

5. 5
   © 2012-2022 BASE, Inc.
   #front_okinawa
   本発表の対象者
   個人開発を
   したことがない
   エンジニア
   

   View Slide

6. 6
   © 2012-2022 BASE, Inc.
   #front_okinawa
   本発表の対象者
   特にフロントエンド
   エンジニアは
   個人開発に向いている
   

   View Slide

7. 7
   © 2012-2022 BASE, Inc.
   #front_okinawa
   話さないこと
   

   View Slide

8. 8
   © 2012-2022 BASE, Inc.
   #front_okinawa
   本発表の対象者
   個人開発で
   何を作るべきか
   

   View Slide

9. 9
   © 2012-2022 BASE, Inc.
   #front_okinawa
   本発表の構成
   

   View Slide

10. 10
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

11. 11
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

12. 12
    © 2012-2022 BASE, Inc.
    #front_okinawa
    https://www.magicalquote.com/bookquotes/to-be-or-not-to-be/
    

    View Slide

13. 13
    © 2012-2022 BASE, Inc.
    #front_okinawa
    TO RELEASE OR
    NOT TO RELEASE,
    THAT IS THE QUESTION.
    

    View Slide

14. 14
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の最大の障壁は
    リリース
    

    View Slide

15. 15
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の目的を決める
    ● リリースの有無で行動が大きく変わる
    ○ 技術選定
    ○ 作りたいもの
    ○ 解決したい課題
    ○ 日常生活の中の優先順位 etc.
    ● 開発期間が長いほど自信が減る
    ○ 空振りした時のダメージ
    リリースするか、しないのか
    

    View Slide

16. 16
    © 2012-2022 BASE, Inc.
    #front_okinawa
    

    View Slide

17. 17
    © 2012-2022 BASE, Inc.
    #front_okinawa
    

    View Slide

18. 18
    © 2012-2022 BASE, Inc.
    #front_okinawa
    

    View Slide

19. 19
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の目的を決める
    ● 最短でリリースしよう
    ○ 時間というリソース配分がキモ
    ■ 慣れた技術がオススメ
    ■ 仕様を考える時間
    ■ デザインする時間
    ■ 利用規約 etc.
    ● 果たすべき責任がある
    ○ セキュリティは問題ないか
    ○ 他サービスに対する違反ではないか
    ■ ex. スクレイピングでのデータ
    取得が規約違反だった
    目的がリリースの場合
    

    View Slide

20. 20
    © 2012-2022 BASE, Inc.
    #front_okinawa
    

    View Slide

21. 21
    © 2012-2022 BASE, Inc.
    #front_okinawa
    

    View Slide

22. 22
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の目的を決める
    ● ゴールを決めよう
    ○ リリースしなくてもいい
    ○ 馴染みのない技術・手法がオススメ
    ■ Rust でも DDD でも何でも
    ○ GitHub にコードを上げよう
    ○ 技術ブログを書こう
    ● 気楽にやろう
    ○ CRUD のある Blog や TODO リスト
    が丁度いい
    目的が学習の場合
    

    View Slide

23. 23
    © 2012-2022 BASE, Inc.
    #front_okinawa
    学習しながらの
    リリースを目的とした開発は
    モチベ維持が難しい
    

    View Slide

24. 24
    © 2012-2022 BASE, Inc.
    #front_okinawa
    初めての場合は
    リリース駆動開発
    に徹しよう
    

    View Slide

25. 25
    © 2012-2022 BASE, Inc.
    #front_okinawa
    なぜリリースに
    こだわるのか
    （その１）
    

    View Slide

26. 26
    © 2012-2022 BASE, Inc.
    #front_okinawa
    リリースするまでは
    言い訳の悪魔に
    ずっと襲われているから
    

    View Slide

27. 27
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の目的を決める
    ● 技術の勉強になってるから十分だ
    ○ だからリリースしなくてもいい
    ● 使ってくれる人がいるかわからない
    ○ だからリリースしたくない
    ● デザインがイケてないから見せたくない
    ○ だからリリースしたくない
    ● ダサいプロダクトを出して大外れしたと思
    われたくない
    ○ だからリリースしたくない
    言い訳の悪魔
    

    View Slide

28. 28
    © 2012-2022 BASE, Inc.
    #front_okinawa
    Quoted by t_wada Simulator にて生成　 https://unit8.net/quoted/index.html
    

    View Slide

29. 29
    © 2012-2022 BASE, Inc.
    #front_okinawa
    Quoted by t_wada Simulator にて生成　 https://unit8.net/quoted/index.html
    

    View Slide

30. 30
    © 2012-2022 BASE, Inc.
    #front_okinawa
    なぜリリースに
    こだわるのか
    （その２）
    

    View Slide

31. 31
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の
    活動の原資は？
    

    View Slide

32. 32
    © 2012-2022 BASE, Inc.
    #front_okinawa
    × お金 💰
    × スキル 💻
    

    View Slide

33. 33
    © 2012-2022 BASE, Inc.
    #front_okinawa
    ○ 時間 🕑
    ○ モチベーション 💪
    

    View Slide

34. 34
    © 2012-2022 BASE, Inc.
    #front_okinawa
    リリースまでの間に
    時間とモチベが
    減り続ける 📉
    

    View Slide

35. 35
    © 2012-2022 BASE, Inc.
    #front_okinawa
    https://www.reddit.com/r/Bitcoin/comments/lqopxj/what_its_actually_like_to_hodl/
    

    View Slide

36. 36
    © 2012-2022 BASE, Inc.
    #front_okinawa
    唯一の失敗は
    リリースを
    しないこと
    

    View Slide

37. 37
    © 2012-2022 BASE, Inc.
    #front_okinawa
    まずはリリースをしよう
    

    View Slide

38. 38
    © 2012-2022 BASE, Inc.
    #front_okinawa
    実は、慣れたら
    学習しながらリリースもできる
    

    View Slide

39. 39
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

40. 40
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

41. 41
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続ける
    

    View Slide

42. 42
    © 2012-2022 BASE, Inc.
    #front_okinawa
    フリーミアムの
    SaaSを使う
    

    View Slide

43. 43
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

44. 44
    © 2012-2022 BASE, Inc.
    #front_okinawa
    技術選定
    フロントエンド
    バックエンドエンド
    インフラ（DB、デプロイ先）
    

    View Slide

45. 45
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    ● 好きなものを使う
    ○ Web なら、React, Vue, Svelte
    ■ Next.js, Remix, Nuxt.js, Svelte
    Kit
    ○ Astro, Qwik、Rust で WASM etc.
    ● モバイルアプリでもOK
    ○ Flutter
    ○ React Native etc.
    ● デスクトップアプリでもOK
    ○ Electron
    ○ Tauri etc.
    フロントエンド
    

    View Slide

46. 46
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    ● Firebase
    ○ 認証、DB（NoSQL）、ストレージ
    ○ ホスティング、サーバーレス関数 etc.
    ● Supabase
    ○ 認証、DB（PostgreSQL）
    ○ ストレージ（S3）
    ○ GraphQL も
    ● Hasura
    ○ GraphQL、認証、DB（PostgreSQL）
    バックエンド - BaaS
    

    View Slide

47. 47
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    バックエンド
    

    View Slide

48. 48
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    ● 静的サイト
    ○ Github Pages
    ○ Cloudflare Pages
    ○ Netlify、Firebase
    ● Node.js 環境
    ○ Vercel、Netlify
    ● 様々な環境
    ○ Heroku（11/28から有料化へ...）
    ○ render（コンテナ）
    ○ AWS Lamda
    ○ 言語に応じて調べてみてください
    デプロイ先
    

    View Slide

49. 49
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    デプロイ先
    

    View Slide

50. 50
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    ● PlanetScale
    ○ YouTube 出身の人が作った
    ● アイデア次第で何でもOK
    ○ Google Sheets（旧 SpreadSheet）
    ○ Notion
    ○ microCMS, WordPress etc.
    データベース
    

    View Slide

51. 51
    © 2012-2022 BASE, Inc.
    #front_okinawa
    無料で続けるための技術選定
    データベース（PlanetScale）
    

    View Slide

52. 52
    © 2012-2022 BASE, Inc.
    #front_okinawa
    本発表の構成
    個人開発の目的を決める
    １
    無料で続けるための技術選定
    ２
    ３ 個人開発の楽しさとメリット
    

    View Slide

53. 53
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発は
    純粋に楽しい
    

    View Slide

54. 54
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● 初心にかえれる
    ● 思い通りに作れる楽しさ
    ● 何かに熱中するのは幸せ
    ○ 人生の幸福３種類
    ■ 何かを作ること
    ● ex. 創作
    ■ 良質な作品を味わうこと
    ● ex. 美術館、小説
    ■ 暇潰しすること
    ● ex. Twitter
    個人開発の楽しさ ＝ ものづくりの楽しさ
    

    View Slide

55. 55
    © 2012-2022 BASE, Inc.
    #front_okinawa
    楽しいだけではなく
    メリットもある
    

    View Slide

56. 56
    © 2012-2022 BASE, Inc.
    #front_okinawa
    メリットその①
    いつの間にか
    事業の仕組み
    を理解できる
    

    View Slide

57. 57
    © 2012-2022 BASE, Inc.
    #front_okinawa
    ４つの例を
    ご紹介します
    

    View Slide

58. 58
    © 2012-2022 BASE, Inc.
    #front_okinawa
    何を作るべきなのか知りたい！
    イケてるサイトを作りたい！
    人に使ってもらいたい！
    お金を稼ぎたい！
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    ヒットするサービスを作るために...
    個人開発の楽しさとメリット
    

    View Slide

59. 59
    © 2012-2022 BASE, Inc.
    #front_okinawa
    何を作るべきなのか知りたい！
    イケてるサイトを作りたい！
    人に使ってもらいたい！
    お金を稼ぎたい！
    イノベーションを学ぶことになる
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    ヒットするサービスを作るために...
    個人開発の楽しさとメリット
    

    View Slide

60. 60
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    

    View Slide

61. 61
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● イノベーションとは「新結合」である
    ○ 既存のものを組み合わせること
    ○ 一概に「これを作れ」とは言えない
    ● 「自分の困りごとを解決しよう」
    ○ 何を作るべきかというよくある問い
    ○ 大企業がトライできないこと - nits
    ● アイデア = 多産多死モデル
    ○ 数打ちゃ当たる - 1000に3つ
    ○ cf. 産業革命とIT革命
    ■ 機械（ハード）とソフトウェア
    ■ 寝ながらコーヒーを飲む機械
    イノベーションを学ぶ
    

    View Slide

62. 62
    © 2012-2022 BASE, Inc.
    #front_okinawa
    何を作るべきなのか知りたい！
    人に使ってもらいたい！
    イノベーションを学ぶことになる
    マーケティングを学ぶことになる
    ヒットするサービスを作るために...
    イケてるサイトを作りたい！
    お金を稼ぎたい！
    〇〇を学ぶことになる
    〇〇を学ぶことになる
    個人開発の楽しさとメリット
    

    View Slide

63. 63
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    

    View Slide

64. 64
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● ものづくりはマーケティングと対局
    ○ マーケティングは戦略
    ■ What, Who（誰に何を売るか）
    ○ ものづくりは実行
    ■ How（どうやって作るか）
    ● 市場機会を発見する
    ○ 個人開発の市場はレッドオーシャン
    ■ ブルーオーシャンまだあります？
    ○ セグメントに分ける
    ■ 消費者 - ペルソナはここ
    ■ マーケット（市場）
    マーケティングを学ぶ
    

    View Slide

65. 65
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    マーケット（市場）セグメンテーション - コーヒー
    『ブランディングの教科書』 羽田康祐ほか（p.192 ~ 198）
    

    View Slide

66. 66
    © 2012-2022 BASE, Inc.
    #front_okinawa
    他にどんな軸で
    分けられる？
    

    View Slide

67. 67
    © 2012-2022 BASE, Inc.
    #front_okinawa
    家庭用 vs 屋外用
    ホットコーヒー vs アイスコーヒー
    自分達用 vs ギフト用
    ファミリー世帯 vs 少人数世帯
    女性用 vs 同僚用 vs 男性用
    作業場 vs オフィス用
    コーヒー市場セグメント化の軸
    個人開発の楽しさとメリット
    プライベート時間 vs 仕事時間
    『ブランディングの教科書』 羽田康祐ほか（p.192 ~ 198）
    

    View Slide

68. 68
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    マーケット（市場）セグメンテーション - コーヒー
    『ブランディングの教科書』 羽田康祐ほか（p.192 ~ 198）
    

    View Slide

69. 69
    © 2012-2022 BASE, Inc.
    #front_okinawa
    見方によっては
    レッドオーシャン
    ではない
    

    View Slide

70. 70
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● 本物の顧客志向になる
    ○ 必ずニーズから出発する
    ■ 課題は自分だけ？他の人は？
    ○ 顧客の Job を解決する
    ■ Jobとは不満、不便、不平 etc.
    ● 「良いものを作れば売れる」は間違い
    ○ 「良い」の定義は顧客の課題から
    ○ エンジニアと顧客の「良い」は違う
    ■ PHP / Rust, jQuery / React
    マーケティングを学ぶ
    

    View Slide

71. 71
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    『実践マーケティング思考』佐藤義典
    

    View Slide

72. 72
    © 2012-2022 BASE, Inc.
    #front_okinawa
    Quoted by t_wada Simulator にて生成　 https://unit8.net/quoted/index.html
    

    View Slide

73. 73
    © 2012-2022 BASE, Inc.
    #front_okinawa
    フロントエンド
    エンジニアは特にこれも
    

    View Slide

74. 74
    © 2012-2022 BASE, Inc.
    #front_okinawa
    何を作るべきなのか知りたい！
    人に使ってもらいたい！
    イノベーションを学ぶことになる
    マーケティングを学ぶことになる
    ヒットするサービスを作るために...
    イケてるサイトを作りたい！
    お金を稼ぎたい！
    デザインを学ぶことになる
    〇〇を学ぶことになる
    個人開発の楽しさとメリット
    

    View Slide

75. 75
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    

    View Slide

76. 76
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● いいデザインを知る
    ○ デザイナーが見ているサイトを見る
    ■ dribbble, Cocoda etc.
    ● デザインはセンスではない
    ○ デザインの4原則
    ○ 近接 / 整列 / 反復 / コントラスト
    ● look and feel（見た目と雰囲気）
    ○ 「使いやすい」だけでは売れない
    ○ ブランド戦略
    ■ マーケティングの重要な要素
    ■ ex. 純粋想起
    デザインを学ぶ
    

    View Slide

77. 77
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● オススメのブログ
    ○ 「Redesigning Laravel.io」　　　
    （medium）
    ○ Tailwind CSS の作者が Laravel の
    ホームページを再デザインする思考
    過程
    デザインを学ぶ
    https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0
    

    View Slide

78. 78
    © 2012-2022 BASE, Inc.
    #front_okinawa
    何を作るべきなのか知りたい！
    人に使ってもらいたい！
    イノベーションを学ぶことになる
    マーケティングを学ぶことになる
    ヒットするサービスを作るために...
    イケてるサイトを作りたい！
    お金を稼ぎたい！
    デザインを学ぶことになる
    ビジネスモデルを学ぶことになる
    個人開発の楽しさとメリット
    

    View Slide

79. 79
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● ビジネス = 役務・物品の提供 + 対価
    ○ 個人開発は役務（サービス）の提供
    ● ビジネスモデルを知るために
    ○ 「図解 ビジネスモデル大全」etc.
    ○ 有価証券報告書
    ● 個人開発でマネタイズ
    ○ 都度・定額課金、広告、アフィ etc.
    ● お金の話をするのはイヤですか？
    ○ 「ロマンとソロバン」
    ○ OSS も会社でやる時代
    ■ Next.js, Nuxt.js, Rome etc.
    ビジネスモデルを学ぶ
    

    View Slide

80. 80
    © 2012-2022 BASE, Inc.
    #front_okinawa
    いつの間にか
    事業の仕組み
    を理解できる
    

    View Slide

81. 81
    © 2012-2022 BASE, Inc.
    #front_okinawa
    開発者として
    視野が広がる
    

    View Slide

82. 82
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    ● リーン開発
    ○ MVP リリース = 市場の反応を見る
    ○ 無駄をなくす
    ● 顧客参加
    ○ アジャイルのプラクティス
    ○ XP -> 本物の顧客参加
    ○ スクラム -> スプリントレビュー
    ● 「本当に顧客の欲しいものを作っている
    か？」
    開発者の視野を広げる
    

    View Slide

83. 83
    © 2012-2022 BASE, Inc.
    #front_okinawa
    要約すると
    

    View Slide

84. 84
    © 2012-2022 BASE, Inc.
    #front_okinawa
    社長・マーケター・PM・
    デザイナー・エンジニア
    を一人で兼ねる
    

    View Slide

85. 85
    © 2012-2022 BASE, Inc.
    #front_okinawa
    メリットその②
    キャリアが広がる
    （私の事例）
    

    View Slide

86. 86
    © 2012-2022 BASE, Inc.
    #front_okinawa
    1社目 サーバーサイドエンジニアとしてWordPressの受託会社に入社
    キャリアが広がる
    個人開発の楽しさとメリット
    

    View Slide

87. 87
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    https://jp-whiskey.panda-program.com/
    

    View Slide

88. 88
    © 2012-2022 BASE, Inc.
    #front_okinawa
    HTML・CSS って何？状態 →学習へ
    ばかり
    ローコードツールを使った
    どこにデプロイしたのかもわからない
    リリースしても（もちろん）無風
    習作のつもりで作った
    挑戦と挫折
    「ウィスキー工場の見学予約を楽に」が
    目的
    個人開発の楽しさとメリット
    次はログインしたり投稿したり、動きの
    あるサイトを作ろうと考える
    

    View Slide

89. 89
    © 2012-2022 BASE, Inc.
    #front_okinawa
    学び
    PHP だけでも
    HTML + CSS だけでも
    サービスは作れない
    

    View Slide

90. 90
    © 2012-2022 BASE, Inc.
    #front_okinawa
    1社目
    2社目
    サーバーサイドエンジニアとしてWordPressの受託会社に入社
    サーバーサイドエンジニアとして転職、個人開発で React に興味を持つ
    キャリアが広がる
    個人開発の楽しさとメリット
    

    View Slide

91. 91
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    https://hipsty.vercel.app/
    

    View Slide

92. 92
    © 2012-2022 BASE, Inc.
    #front_okinawa
    React + Material UI + Atomic Design
    Laravel、EC2 + Docker
    バックエンドの改修がしづらい
    → オブジェクト指向設計に興味を持つ
    YouTube API を利用、定期的にチャンネ
    ルごとの最新動画を取得してDBに保存
    デザインが苦手なのでMaterial UIを使っ
    たら、友人から「Googleのサービス？」
    と言われた
    需要もないし宣伝も足りなかった
    リリースしても（もちろん）無風
    挑戦と挫折
    「日本語ラップ動画の視聴をラクに」が
    目的
    個人開発の楽しさとメリット
    気合い入れたのに無風だったので、喪失
    感からバーに行って一人で飲んだ
    

    View Slide

93. 93
    © 2012-2022 BASE, Inc.
    #front_okinawa
    学び
    コードを作り込んでも
    最新の技術でも
    ターゲットに刺さらなければ
    誰も使ってくれない
    

    View Slide

94. 94
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    https://panda-program.com/
    v1, v2
    

    View Slide

95. 95
    © 2012-2022 BASE, Inc.
    #front_okinawa
    GatsbyJS + Scss + Tailwind CSS
    記事一覧やランキングなど改修して
    Reactを学んだ
    GatsbyJSのスターターを使った
    GraphQL のクエリの書き方を学べた
    サービスは「ガワ」と「コンテンツ」
    から成ることに気づく
    リリースしても無風だったが、
    たまにバズった
    挑戦と挫折
    「自分のサイトを持ってみること」が
    目的
    個人開発の楽しさとメリット
    WPもCreate React Appも選ばなかった
    

    View Slide

96. 96
    © 2012-2022 BASE, Inc.
    #front_okinawa
    学び
    個人開発は技術選定の
    知見が溜まる
    

    View Slide

97. 97
    © 2012-2022 BASE, Inc.
    #front_okinawa
    1社目
    2社目
    サーバーサイドエンジニアとしてWordPressの受託会社に入社
    サーバーサイドエンジニアとして転職、個人開発で React に興味を持つ
    キャリアが広がる
    フロントも任せてもらい、Next.js（React）と PHP で新規開発を担当
    個人開発の楽しさとメリット
    

    View Slide

98. 98
    © 2012-2022 BASE, Inc.
    #front_okinawa
    1社目
    2社目
    サーバーサイドエンジニアとしてWordPressの受託会社に入社
    サーバーサイドエンジニアとして転職、個人開発で React に興味を持つ
    キャリアが広がる
    現職
    フロントも任せてもらい、Next.js（React）と PHP で新規開発を担当
    フロントに専念したいと思い、フロントエンドエンジニアとして転職
    個人開発の楽しさとメリット
    

    View Slide

99. 99
    © 2012-2022 BASE, Inc.
    #front_okinawa
    個人開発の楽しさとメリット
    https://panda-program.com/
    

    View Slide

100. 100
     © 2012-2022 BASE, Inc.
     #front_okinawa
     Next.js + Tailwind CSS + Cloudflare
     Pages
     Tailwind UI を買ったので使ってみた
     プロトタイプは6時間、完成まで10日
     Vercel を使っていたが、無料枠超過によ
     り Cloudflare Pages に移行
     RSSでzenn、はてブ、noteの投稿を集約
     別のサイトの個人開発の息抜きに作った
     挑戦と挫折
     「自分のブログをモダンなデザインにリ
     ニューアルすること」が目的
     個人開発の楽しさとメリット
     Storybook 公開中
     

     View Slide

101. 101
     © 2012-2022 BASE, Inc.
     #front_okinawa
     学び
     慣れた技術だと
     素早く作れる
     

     View Slide

102. 102
     © 2012-2022 BASE, Inc.
     #front_okinawa
     個人開発の楽しさとメリット
     https://panda-program.com/posts/from-gatsby-to-nextjs
     

     View Slide

103. 103
     © 2012-2022 BASE, Inc.
     #front_okinawa
     一番アクセス数が多いサイトが自分のブログ😅
     自分はまだチャレンジャー
     （ここで紹介してない外れたサービスが他にも3つ...）
     

     View Slide

104. 104
     © 2012-2022 BASE, Inc.
     #front_okinawa
     ご注意
     

     View Slide

105. 105
     © 2012-2022 BASE, Inc.
     #front_okinawa
     もしも仕事に活かすなら
     漫然とやるだけではダメ
     

     View Slide

106. 106
     © 2012-2022 BASE, Inc.
     #front_okinawa
     個人開発の楽しさとメリット
     ● 学習対象に設計を加える
     ○ すぐにリリース = その後はひたすら
     改善
     ○ しっかり設計 = 改善の速度が落ちな
     い
     ● 学習対象にテストを加える
     ○ テストの視点があるときれいな設計
     に繋がる
     ○ 複雑なところだけでいいかも
     ● アーキテクトの視点を持つ
     ○ 変化に強い技術選定
     個人開発を仕事に活かすコツ
     

     View Slide

107. 107
     © 2012-2022 BASE, Inc.
     #front_okinawa
     フロントの人は
     個人開発に
     取り組みやすい
     

     View Slide

108. 108
     © 2012-2022 BASE, Inc.
     #front_okinawa
     個人開発は楽しい！
     

     View Slide

109. 109
     © 2012-2022 BASE, Inc.
     #front_okinawa
     個人開発の挑戦と挫折を
     深掘りした「沼編」
     いつかやるかも
     

     View Slide

110. 110
     © 2012-2022 BASE, Inc.
     #front_okinawa
     個人開発は総合格闘技
     寝技立ち技なんでもあり
     ノーコードでもローコードでも当たれば良い
     

     View Slide

111. 111
     © 2012-2022 BASE, Inc.
     #front_okinawa
     まずはリリースしよう！
     

     View Slide

112. 112
     © 2012-2022 BASE, Inc.
     #front_okinawa
     ご清聴
     ありがとうございました
     

     View Slide

113. 113
     © 2012-2022 BASE, Inc.
     #front_okinawa
     Special Thanks
     おすすめの資料
     「Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる」by @catnose99 さん
     （各サービスのスペックや使用感が詳しく書かれている）
     https://zenn.dev/catnose99/scraps/6780379210136f
     「イケてる個人開発の進め方」 by @yuno_miyako2 さん
     （個人開発における時間配分の話が載っている）
     https://www.docswell.com/s/6649915/ZG7885-yuno_miyako
     運営者ギルド（個人開発者のコミュニティ）
     https://qiita.com/organizations/admin-guild
     Indie Hackers（海外の個人開発者のコミュニティ）
     https://www.indiehackers.com/
     

     View Slide

114. 114
     © 2012-2022 BASE, Inc.
     #front_okinawa
     Special Thanks
     資料のレビューありがとうございました！（時系列順）
     02さん
     （@cocoeyes02）
     がっちゃんさん
     （@gatchan0807）
     ジャバ・ザ・ハットリさん
     （@nodenodenode1）
     catnoseさん
     （@catnose99）
     

     View Slide