Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人開発で挫折する人を救いたい
Search
Yusuke Inai
March 30, 2023
Programming
2
3.6k
個人開発で挫折する人を救いたい
さくらのマイクロコミュニティ(Webサービス開発者の会)#6
Yusuke Inai
March 30, 2023
Tweet
Share
More Decks by Yusuke Inai
See All by Yusuke Inai
で、エンジニアになって1年経ったけどどう?
youliangdao
1
330
人よりアウトプットができるようになるためのコツ
youliangdao
0
180
Next.jsから見る Webフロントエンドの歴史
youliangdao
1
1.1k
SaaSスタートアップで3ヶ月働いてみて感じた現実(リアル)
youliangdao
0
480
Qiitaでバズりやすい記事の書き方を伝授する
youliangdao
0
3.8k
React って本当に使う意味あるの? 〜SPA と React の「キホン」の「キ」〜
youliangdao
1
230
PumaとUnicornって結局何なん!?
youliangdao
0
1.2k
"ぼくのかんがえたさいきょうの"勉強法
youliangdao
0
390
低レイヤへの誘い
youliangdao
0
290
Other Decks in Programming
See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
110
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
370
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
120
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
170
🔨 小さなビルドシステムを作る
momeemt
3
670
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
print("Hello, World")
eddie
1
520
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.7k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
21
11k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Code Reviewing Like a Champion
maltzj
525
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
It's Worth the Effort
3n
187
28k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
個人開発で挫折する人 を救いたい yusuke_blog1026 さくらのマイクロコミュニティ (Webサービス開発者の会) #6
目次 自己紹介 サービス紹介 こだわり 開発の流れ 1. 2. 3. 4.
自己紹介 yusuke_blog1026 RUNTEQにてプログラミング学習中 就職活動中 React大好き。フロント領域に興味あり 最近の推しライブラリはMantine
サービス紹介
に関する技術記事のみを 集めたデータベースサービス "個人開発"
その他 各種技術系サイト 一元化 カテゴリ 「個人開発記事」 のみ抽出 サービスコンセプト
メイン機能 カテゴリ 絞り込み機能 ブックマーク機能 +α メイン機能としては主に2つの機能があります
カテゴリ絞り込み機能
ブックマーク機能+α
None
使用技術・インフラ構成 バックエンド フロントエンド その他 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
None
プチバズりました
こだわりポイント
①シンプルで快適な UI/UX ②パフォーマンス ③設計 レイアウトをシンプルに、 画面遷移を高速に API側からのデータ取得を 最適化 設計段階で実装が楽になる よう工夫
こだわりポイント
①シンプルで快適なUI/UX 高速な画面遷移 シンプルなUI カテゴリをつなげて見ていけるよ うにしたかったためSPAによる高 速な画面遷移を可能に 他技術検索サイトと比較して見や すいレイアウトを意識。
必要最低限の機能のみを実 装することで、直感的でわ かりやすい画面構成に シンプルなUI
カテゴリをタップしていく ことでサクサク関連カテゴ リの記事を検索していくこ とができる 高速な画面遷移
Webサーバ APIサーバ データベース ① ② ③ ④ ⑤ クライアント ①URLをサーバに問い合わせ
②必要な静的ファイルを返却 ③データリクエスト ④データレスポンス ⑤取得データを基にレンダリング CSR前提のSPA
②パフォーマンス API側から取得したデータをキャッシュし、パフォーマンスを向上 Better UX by Stale While Revalidate データ取得回数の最適化 キャッシュを再検証している間、
古いレスポンスを再利用 マウントの度にデータを取得しな いようにする
Comp B Comp C Comp A Comp B Comp C
Comp A cache useQuery isLoading isError isLoading isError store Classical Fetch TanStack Query
× マウントされる度 ◦ 初回のみ データ取得回数の 最適化
useEffect fetch , [ ] useQuery staleTime: Infinity 常にfreshなため、 re-fetchは行われない
fetch every mount mount fresh
× スケルトンローダーを表示 ◦ 古いレスポンスデータを表示 Better UX by Stale While Revalidate
useEffect fetch , [ ] useQuery always no data in
loading no data in loading only first mount stale data stale data after second mount
設計 IDaaSを用いたソーシャ ルログイン コンポーネント設計 ユーザー視点と開発者視点でのメ リットを考慮してIDaaSを利用 再利用可能なコンポーネントにで きるだけ分離 リリースまでの日数が限られていたため、設計段階でいくつか工夫
Figma上でワイヤーフレームを作成するの と同時に、最小単位のコンポーネントに まで切り分け、実装をスムーズに コンポーネント設計
実装コスト・セキュリティ面を考慮して ユーザー認証としてFirebase Authを用 いたソーシャルログインを採用 IDaaSを用いた ソーシャルログイン
開発の流れ
開発の流れ 「RUNTEQ」にて推奨されているMVP戦略を採用
MVPリリースまでのロードマップ 01 企画・アイデア出し どういうサービスを 作りたいのか? 02 設計 ワイヤーフレーム作成 コンポーネント設計 DB設計
03 環境構築 バックエンドはDocker フロントエンドはVite 05 各機能の実装 フロントエンド→バックエン ドで実装 04 デプロイ+自動化 herokuとAWSにデプロイ 一連のワークフローの自動化
独自ドメイン Google Domains で取得 利用規約など KIYACで作成 GA4の導入 アクセス数や 利用者数を取得 するため導入
OGP、メタタグ OGPは Lambda@Edge を使って対応 リリース作業 Twitter Qiita 本リリースまでにしたこと
動的なOGPへの対応 AWSのLambda@Edgeを用いてUser-Agent で bot かどうか判断
Twitterでの告知 ezgifを用いて簡潔に使い方がわかる操作動画を 作成・添付する 冒頭に【個人開発】とつけることで、エンジニア の方からの拡散を狙う #駆け出しエンジニアとつけることで駆け出しに も利用できることを伝える
最後に 「個人開発」で挫折する 人を1人でも少なく