個人開発で挫折する人を救いたい

さくらのマイクロコミュニティ（Webサービス開発者の会）#6

Transcript

1. 個人開発で挫折する人
   を救いたい
   yusuke_blog1026
   さくらのマイクロコミュニティ （Webサービス開発者の会） #6
   

   View Slide

2. 目次
   自己紹介
   サービス紹介
   こだわり
   開発の流れ
   1.
   2.
   3.
   4.
   

   View Slide

3. 自己紹介
   yusuke_blog1026
   RUNTEQにてプログラミング学習中
   就職活動中
   React大好き。フロント領域に興味あり
   最近の推しライブラリはMantine
   

   View Slide

4. サービス紹介
   

   View Slide

5. 　　　　　　　　に関する技術記事のみを
   　　集めたデータベースサービス
   "個人開発"
   

   View Slide

6. その他
   各種技術系サイト
   一元化
   
   
   
   
   カテゴリ
   「個人開発記事」
   のみ抽出
   サービスコンセプト
   

   View Slide

7. メイン機能
   カテゴリ
   絞り込み機能
   ブックマーク機能
   ＋α
   メイン機能としては主に2つの機能があります
   

   View Slide

8. カテゴリ絞り込み機能
   

   View Slide

9. ブックマーク機能＋α
   

   View Slide

10. View Slide

11. 使用技術・インフラ構成
    バックエンド フロントエンド
    その他
    Ruby 3.0
    Ruby on Rails 6.1.6
    （APIモード）
    TypeScript React 18.2.0 TailwindCSS
    Mantine TanStack Query Redux
    Docker Firebase Auth GitHub
    Actions
    

    View Slide

12. View Slide

13. プチバズりました
    

    View Slide

14. こだわりポイント
    

    View Slide

15. ①シンプルで快適な
    UI/UX
    ②パフォーマンス ③設計
    レイアウトをシンプルに、
    画面遷移を高速に
    API側からのデータ取得を
    最適化
    設計段階で実装が楽になる
    よう工夫
    こだわりポイント
    

    View Slide

16. ①シンプルで快適なUI/UX
    高速な画面遷移
    シンプルなUI
    カテゴリをつなげて見ていけるよ
    うにしたかったためSPAによる高
    速な画面遷移を可能に
    他技術検索サイトと比較して見や
    すいレイアウトを意識。
    

    View Slide

17. 必要最低限の機能のみを実
    装することで、直感的でわ
    かりやすい画面構成に
    シンプルなUI
    

    View Slide

18. カテゴリをタップしていく
    ことでサクサク関連カテゴ
    リの記事を検索していくこ
    とができる
    高速な画面遷移
    

    View Slide

19. Webサーバ
    APIサーバ
    データベース
    ①
    ②
    ③
    ④
    ⑤
    クライアント
    ①URLをサーバに問い合わせ
    ②必要な静的ファイルを返却
    ③データリクエスト
    ④データレスポンス
    ⑤取得データを基にレンダリング
    CSR前提のSPA
    

    View Slide

20. ②パフォーマンス
    API側から取得したデータをキャッシュし、パフォーマンスを向上
    Better UX by
    Stale While Revalidate
    データ取得回数の最適化
    キャッシュを再検証している間、
    古いレスポンスを再利用
    マウントの度にデータを取得しな
    いようにする
    

    View Slide

21. Comp B Comp C
    Comp A
    Comp B Comp C
    Comp A
    cache
    useQuery
    isLoading
    isError
    isLoading
    isError
    store
    Classical Fetch TanStack Query
    

    View Slide

22. × マウントされる度
    ○ 初回のみ
    データ取得回数の
    最適化
    

    View Slide

23. useEffect
    fetch
    , [ ]
    useQuery
    staleTime: Infinity
    常にfreshなため、
    re-fetchは行われない
    fetch every mount
    mount
    fresh
    

    View Slide

24. × スケルトンローダーを表示
    ○ 古いレスポンスデータを表示
    Better UX by
    Stale While Revalidate
    

    View Slide

25. useEffect
    fetch
    , [ ]
    useQuery
    always no data in loading
    no data in loading
    only first mount
    stale data
    stale data
    after second mount
    

    View Slide

26. 設計
    IDaaSを用いたソーシャ
    ルログイン
    コンポーネント設計
    ユーザー視点と開発者視点でのメ
    リットを考慮してIDaaSを利用
    再利用可能なコンポーネントにで
    きるだけ分離
    リリースまでの日数が限られていたため、設計段階でいくつか工夫
    

    View Slide

27. Figma上でワイヤーフレームを作成するの
    と同時に、最小単位のコンポーネントに
    まで切り分け、実装をスムーズに
    コンポーネント設計
    

    View Slide

28. 実装コスト・セキュリティ面を考慮して
    ユーザー認証としてFirebase Authを用
    いたソーシャルログインを採用
    IDaaSを用いた
    ソーシャルログイン
    

    View Slide

29. 開発の流れ
    

    View Slide

30. 開発の流れ
    「RUNTEQ」にて推奨されているMVP戦略を採用
    

    View Slide

31. MVPリリースまでのロードマップ
    01
    企画・アイデア出し
    どういうサービスを
    作りたいのか？
    02
    設計
    ワイヤーフレーム作成
    コンポーネント設計
    DB設計
    03
    環境構築
    バックエンドはDocker
    フロントエンドはVite
    05
    各機能の実装
    フロントエンド→バックエン
    ドで実装
    04
    デプロイ＋自動化
    herokuとAWSにデプロイ
    一連のワークフローの自動化
    

    View Slide

32. 独自ドメイン
    Google Domains
    で取得
    利用規約など
    KIYACで作成
    GA4の導入
    アクセス数や
    利用者数を取得
    するため導入
    OGP、メタタグ
    OGPは
    Lambda@Edge
    を使って対応
    リリース作業
    Twitter
    Qiita
    本リリースまでにしたこと
    

    View Slide

33. 動的なOGPへの対応
    AWSのLambda@Edgeを用いてUser-Agent で bot かどうか判断
    

    View Slide

34. Twitterでの告知
    ezgifを用いて簡潔に使い方がわかる操作動画を
    作成・添付する
    冒頭に【個人開発】とつけることで、エンジニア
    の方からの拡散を狙う
    #駆け出しエンジニアとつけることで駆け出しに
    も利用できることを伝える
    

    View Slide

35. 最後に
    「個人開発」で挫折する
    人を1人でも少なく
    

    View Slide