さくらのマイクロコミュニティ(Webサービス開発者の会)#6
個人開発で挫折する人を救いたいyusuke_blog1026さくらのマイクロコミュニティ (Webサービス開発者の会) #6
View Slide
目次自己紹介サービス紹介こだわり開発の流れ1.2.3.4.
自己紹介yusuke_blog1026RUNTEQにてプログラミング学習中就職活動中React大好き。フロント領域に興味あり最近の推しライブラリはMantine
サービス紹介
に関する技術記事のみを 集めたデータベースサービス"個人開発"
その他各種技術系サイト一元化カテゴリ「個人開発記事」のみ抽出サービスコンセプト
メイン機能カテゴリ絞り込み機能ブックマーク機能+αメイン機能としては主に2つの機能があります
カテゴリ絞り込み機能
ブックマーク機能+α
使用技術・インフラ構成バックエンド フロントエンドその他Ruby 3.0Ruby on Rails 6.1.6(APIモード)TypeScript React 18.2.0 TailwindCSSMantine TanStack Query ReduxDocker Firebase Auth GitHubActions
プチバズりました
こだわりポイント
①シンプルで快適なUI/UX②パフォーマンス ③設計レイアウトをシンプルに、画面遷移を高速にAPI側からのデータ取得を最適化設計段階で実装が楽になるよう工夫こだわりポイント
①シンプルで快適なUI/UX高速な画面遷移シンプルなUIカテゴリをつなげて見ていけるようにしたかったためSPAによる高速な画面遷移を可能に他技術検索サイトと比較して見やすいレイアウトを意識。
必要最低限の機能のみを実装することで、直感的でわかりやすい画面構成にシンプルなUI
カテゴリをタップしていくことでサクサク関連カテゴリの記事を検索していくことができる高速な画面遷移
WebサーバAPIサーバデータベース①②③④⑤クライアント①URLをサーバに問い合わせ②必要な静的ファイルを返却③データリクエスト④データレスポンス⑤取得データを基にレンダリングCSR前提のSPA
②パフォーマンスAPI側から取得したデータをキャッシュし、パフォーマンスを向上Better UX byStale While Revalidateデータ取得回数の最適化キャッシュを再検証している間、古いレスポンスを再利用マウントの度にデータを取得しないようにする
Comp B Comp CComp AComp B Comp CComp AcacheuseQueryisLoadingisErrorisLoadingisErrorstoreClassical Fetch TanStack Query
× マウントされる度○ 初回のみデータ取得回数の最適化
useEffectfetch, [ ]useQuerystaleTime: Infinity常にfreshなため、re-fetchは行われないfetch every mountmountfresh
× スケルトンローダーを表示○ 古いレスポンスデータを表示Better UX byStale While Revalidate
useEffectfetch, [ ]useQueryalways no data in loadingno data in loadingonly first mountstale datastale dataafter second mount
設計IDaaSを用いたソーシャルログインコンポーネント設計ユーザー視点と開発者視点でのメリットを考慮してIDaaSを利用再利用可能なコンポーネントにできるだけ分離リリースまでの日数が限られていたため、設計段階でいくつか工夫
Figma上でワイヤーフレームを作成するのと同時に、最小単位のコンポーネントにまで切り分け、実装をスムーズにコンポーネント設計
実装コスト・セキュリティ面を考慮してユーザー認証としてFirebase Authを用いたソーシャルログインを採用IDaaSを用いたソーシャルログイン
開発の流れ
開発の流れ「RUNTEQ」にて推奨されているMVP戦略を採用
MVPリリースまでのロードマップ01企画・アイデア出しどういうサービスを作りたいのか?02設計ワイヤーフレーム作成コンポーネント設計DB設計03環境構築バックエンドはDockerフロントエンドはVite05各機能の実装フロントエンド→バックエンドで実装04デプロイ+自動化herokuとAWSにデプロイ一連のワークフローの自動化
独自ドメインGoogle Domainsで取得利用規約などKIYACで作成GA4の導入アクセス数や利用者数を取得するため導入OGP、メタタグOGPは[email protected]を使って対応リリース作業TwitterQiita本リリースまでにしたこと
動的なOGPへの対応AWSの[email protected]を用いてUser-Agent で bot かどうか判断
Twitterでの告知ezgifを用いて簡潔に使い方がわかる操作動画を作成・添付する冒頭に【個人開発】とつけることで、エンジニアの方からの拡散を狙う#駆け出しエンジニアとつけることで駆け出しにも利用できることを伝える
最後に「個人開発」で挫折する人を1人でも少なく