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

by Yusuke Inai

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

サービス紹介

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

カテゴリ絞り込み機能

Slide 9

Slide 9 text

ブックマーク機能＋α

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

使用技術・インフラ構成バックエンドフロントエンドその他 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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

プチバズりました

Slide 14

Slide 14 text

こだわりポイント

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

開発の流れ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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