Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

フロントエンドエンジニアの方が個人開発をしてみたいと思える発表にします。

# 個人開発の目的
- 学習か、リリースか

# ツールやフレームワーク
ランニングコストを抑えるためのサービス選定

# 楽しさとメリット
- ものづくりの楽しさ
- 視野が広がる
- デザイン、PMF、マネタイズ、マーケティング、イノベーションetc.
- キャリアを拓いてくれる
- 私は元々サーバーサイドエンジニアだった

# 私の開発事例
技術ブログ(Next.js + Tailwind UI + Storybook + Cloudflare Pages)

仕事に活かすためには「コードの質」を追求しよう

panda_program

November 19, 2022
Tweet

More Decks by panda_program

Other Decks in Programming

Transcript

  1. 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)
  2. 3 © 2012-2022 BASE, Inc. #front_okinawa 自己紹介 個人開発が好き プログラミングをするパンダ(@Panda_Program) ブログ書いてます

    https://panda-program.com/ ビールの画像投稿サイト作りました https://beerbreak.info/ Next.js + Vercel + Supabase
  3. 15 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める • リリースの有無で行動が大きく変わる ◦

    技術選定 ◦ 作りたいもの ◦ 解決したい課題 ◦ 日常生活の中の優先順位 etc. • 開発期間が長いほど自信が減る ◦ 空振りした時のダメージ リリースするか、しないのか
  4. 19 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める • 最短でリリースしよう ◦

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

    リリースしなくてもいい ◦ 馴染みのない技術・手法がオススメ ▪ Rust でも DDD でも何でも ◦ GitHub にコードを上げよう ◦ 技術ブログを書こう • 気楽にやろう ◦ CRUD のある Blog や TODO リスト が丁度いい 目的が学習の場合
  6. 27 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の目的を決める • 技術の勉強になってるから十分だ ◦

    だからリリースしなくてもいい • 使ってくれる人がいるかわからない ◦ だからリリースしたくない • デザインがイケてないから見せたくない ◦ だからリリースしたくない • ダサいプロダクトを出して大外れしたと思 われたくない ◦ だからリリースしたくない 言い訳の悪魔
  7. 28 © 2012-2022 BASE, Inc. #front_okinawa Quoted by t_wada Simulator

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

    にて生成  https://unit8.net/quoted/index.html
  9. 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. フロントエンド
  10. 46 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 • Firebase ◦

    認証、DB(NoSQL)、ストレージ ◦ ホスティング、サーバーレス関数 etc. • Supabase ◦ 認証、DB(PostgreSQL) ◦ ストレージ(S3) ◦ GraphQL も • Hasura ◦ GraphQL、認証、DB(PostgreSQL) バックエンド - BaaS
  11. 48 © 2012-2022 BASE, Inc. #front_okinawa 無料で続けるための技術選定 • 静的サイト ◦

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

    YouTube 出身の人が作った • アイデア次第で何でもOK ◦ Google Sheets(旧 SpreadSheet) ◦ Notion ◦ microCMS, WordPress etc. データベース
  13. 54 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • 初心にかえれる •

    思い通りに作れる楽しさ • 何かに熱中するのは幸せ ◦ 人生の幸福3種類 ▪ 何かを作ること • ex. 創作 ▪ 良質な作品を味わうこと • ex. 美術館、小説 ▪ 暇潰しすること • ex. Twitter 個人開発の楽しさ = ものづくりの楽しさ
  14. 58 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい! イケてるサイトを作りたい! 人に使ってもらいたい! お金を稼ぎたい!

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

    イノベーションを学ぶことになる 〇〇を学ぶことになる 〇〇を学ぶことになる 〇〇を学ぶことになる ヒットするサービスを作るために... 個人開発の楽しさとメリット
  16. 61 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • イノベーションとは「新結合」である ◦

    既存のものを組み合わせること ◦ 一概に「これを作れ」とは言えない • 「自分の困りごとを解決しよう」 ◦ 何を作るべきかというよくある問い ◦ 大企業がトライできないこと - nits • アイデア = 多産多死モデル ◦ 数打ちゃ当たる - 1000に3つ ◦ cf. 産業革命とIT革命 ▪ 機械(ハード)とソフトウェア ▪ 寝ながらコーヒーを飲む機械 イノベーションを学ぶ
  17. 62 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい! 人に使ってもらいたい! イノベーションを学ぶことになる マーケティングを学ぶことになる

    ヒットするサービスを作るために... イケてるサイトを作りたい! お金を稼ぎたい! 〇〇を学ぶことになる 〇〇を学ぶことになる 個人開発の楽しさとメリット
  18. 64 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • ものづくりはマーケティングと対局 ◦

    マーケティングは戦略 ▪ What, Who(誰に何を売るか) ◦ ものづくりは実行 ▪ How(どうやって作るか) • 市場機会を発見する ◦ 個人開発の市場はレッドオーシャン ▪ ブルーオーシャンまだあります? ◦ セグメントに分ける ▪ 消費者 - ペルソナはここ ▪ マーケット(市場) マーケティングを学ぶ
  19. 67 © 2012-2022 BASE, Inc. #front_okinawa 家庭用 vs 屋外用 ホットコーヒー

    vs アイスコーヒー 自分達用 vs ギフト用 ファミリー世帯 vs 少人数世帯 女性用 vs 同僚用 vs 男性用 作業場 vs オフィス用 コーヒー市場セグメント化の軸 個人開発の楽しさとメリット プライベート時間 vs 仕事時間 『ブランディングの教科書』 羽田康祐ほか(p.192 ~ 198)
  20. 70 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • 本物の顧客志向になる ◦

    必ずニーズから出発する ▪ 課題は自分だけ?他の人は? ◦ 顧客の Job を解決する ▪ Jobとは不満、不便、不平 etc. • 「良いものを作れば売れる」は間違い ◦ 「良い」の定義は顧客の課題から ◦ エンジニアと顧客の「良い」は違う ▪ PHP / Rust, jQuery / React マーケティングを学ぶ
  21. 72 © 2012-2022 BASE, Inc. #front_okinawa Quoted by t_wada Simulator

    にて生成  https://unit8.net/quoted/index.html
  22. 74 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい! 人に使ってもらいたい! イノベーションを学ぶことになる マーケティングを学ぶことになる

    ヒットするサービスを作るために... イケてるサイトを作りたい! お金を稼ぎたい! デザインを学ぶことになる 〇〇を学ぶことになる 個人開発の楽しさとメリット
  23. 76 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • いいデザインを知る ◦

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

    「Redesigning Laravel.io」    (medium) ◦ Tailwind CSS の作者が Laravel の ホームページを再デザインする思考 過程 デザインを学ぶ https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0
  25. 78 © 2012-2022 BASE, Inc. #front_okinawa 何を作るべきなのか知りたい! 人に使ってもらいたい! イノベーションを学ぶことになる マーケティングを学ぶことになる

    ヒットするサービスを作るために... イケてるサイトを作りたい! お金を稼ぎたい! デザインを学ぶことになる ビジネスモデルを学ぶことになる 個人開発の楽しさとメリット
  26. 79 © 2012-2022 BASE, Inc. #front_okinawa 個人開発の楽しさとメリット • ビジネス =

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

    MVP リリース = 市場の反応を見る ◦ 無駄をなくす • 顧客参加 ◦ アジャイルのプラクティス ◦ XP -> 本物の顧客参加 ◦ スクラム -> スプリントレビュー • 「本当に顧客の欲しいものを作っている か?」 開発者の視野を広げる
  28. 88 © 2012-2022 BASE, Inc. #front_okinawa HTML・CSS って何?状態 →学習へ <div></div>

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

    + CSS だけでも サービスは作れない
  30. 92 © 2012-2022 BASE, Inc. #front_okinawa React + Material UI

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

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

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

    React に興味を持つ キャリアが広がる 現職 フロントも任せてもらい、Next.js(React)と PHP で新規開発を担当 フロントに専念したいと思い、フロントエンドエンジニアとして転職 個人開発の楽しさとメリット
  34. 100 © 2012-2022 BASE, Inc. #front_okinawa Next.js + Tailwind CSS

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

    すぐにリリース = その後はひたすら 改善 ◦ しっかり設計 = 改善の速度が落ちな い • 学習対象にテストを加える ◦ テストの視点があるときれいな設計 に繋がる ◦ 複雑なところだけでいいかも • アーキテクトの視点を持つ ◦ 変化に強い技術選定 個人開発を仕事に活かすコツ
  36. 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/
  37. 114 © 2012-2022 BASE, Inc. #front_okinawa Special Thanks 資料のレビューありがとうございました!(時系列順) 02さん

    (@cocoeyes02) がっちゃんさん (@gatchan0807) ジャバ・ザ・ハットリさん (@nodenodenode1) catnoseさん (@catnose99)