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
papa_developer
May 17, 2025
0
930
個人開発を集客から始めてみた結果
twitterの月間インプレッション1000万の橋田至が語る、React TokyoでのLT
papa_developer
May 17, 2025
Tweet
Share
More Decks by papa_developer
See All by papa_developer
Claude Code メモリ管理と効率的な開発手法
developerhost
9
2.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
671
58k
Optimizing for Happiness
mojombo
379
70k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Building Applications with DynamoDB
mza
96
6.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf 2023
tenderlove
30
1.2k
Speed Design
sergeychernyshev
32
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Transcript
個人開発、してますか? 個人開発は男のロマン!
個人開発の悩み 作っても誰にも使われない問題 そもそも誰にも見られない。知られない
なら集客から始めよう! とりあえず自己紹介サイトを作ってみることに
私の自己紹介サイトを React, Vite, Vercel で作 成! 普通のポートフォリオサイトでは面白くないので、ドラクエ風に! サイト →https://my-dq-portfolio.vercel.app/ GitHub
→https://github.com/developerhost/my-dq-portfolio 現在 19 スター獲得! Zenn にて技術記事を公開! その結果...
現在、累計 2.5 万 PV, 4000 ユーザー獲得!
工夫した箇所 RSS を用いて毎日更新された記事を取得 src/rss/rss-parser.mjs import { writeFileSync } from "fs";
import Parser from "rss-parser"; const parser = new Parser(); (async () => { const rssFeed = { zenn: { label: "Zenn", url: "https://zenn.dev/dirtyman/feed", favicon: "https://zenn.dev/images/logo-transparent.png", }, qiita: { label: "Qiita", url: "https://qiita.com/app_js/feed", favicon: "https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico", }, note: { label: "Note", url: "https://note.com/dall_develop/rss", favicon: "https://assets.st-note.com/poc-image/manual/note-common-images/production/svg/production.ico", }, }; const allArticles = []; for (const [site, info] of Object.entries(rssFeed)) { try { const feed = await parser.parseURL(info.url); const articles = feed.items.map((item) => ({ title: item.title || "", url: item.link || "",
react-simple-typewriter を用いてドラクエ風 のチャット UI を実現! src/components/ChatMessage.tsx import { Typewriter }
from "react-simple-typewriter"; interface ChatMessageProps { message: string; typeSpeed?: number; } export const ChatMessage = ({ message, typeSpeed = 50 }: ChatMessageProps) => { return ( <div className="z-20" style={{ whiteSpace: "pre-line" }}> <Typewriter cursor cursorStyle="_" delaySpeed={1000} key={message} typeSpeed={typeSpeed}
その他工夫した点 map を 2 重配列で持たせ、主人公が動き、話しかける動作を実現! md でブログを書ける機能を実装 "zenn-content-css": "^0.1.158", "zenn-embed-elements":
"^0.1.158", "zenn-markdown-html": "^0.1.158" ドラクエ風の UI は以下のライブラリなどを使用 "react-use": "^17.5.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7",
集客がある程度出来たので、現在作りたかった サービスを開発中! シーシャの地図アプリを開発中! リリースしたらみんな、インストールして使ってみてね!
ご清聴ありがとうございました! 話しかけてもらえると喜びます! また、現在一緒に expo, React Native で個人開発してくれる方を大 募集中! X →@dall_develop
まで!