Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yusuke Inai

March 30, 2023
Tweet

More Decks by Yusuke Inai

Other Decks in Programming

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は
    [email protected]
    を使って対応
    リリース作業
    Twitter
    Qiita
    本リリースまでにしたこと

    View Slide

  33. 動的なOGPへの対応
    AWSの[email protected]を用いてUser-Agent で bot かどうか判断

    View Slide

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

    View Slide

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

    View Slide