「個人開発！月30万の売上！3ヶ月達成！」を目標に開発してきた【エンジニア専門マッチングサービス】をβ版リリース！技術も全て公開🎉
はじめに
はじめは勉強がてら、自分の触りたい技術を使って好きなサービスでも作ろうかなと思って開発した個人開発でしたが、気づいたら個人開発の規模を遥かに超えていて、「月30万の売上を3ヶ月で達成する」という大きな目標と、「エンジニアという専門領域で困っている人と教えたい人をもっと簡単にマッチングさせられるような仕組みを世に生み出したい」という強い思いを掲げて「DokuPro(ドクプロ)」というエンジニアに特化したマッチングサービスを開発するに至りました！
そんなこんなで約半年ちょい開発を行い、2024年5月の頭に先行リリース(ウェイティングリスト登録)を行い、このたび本格的に先生・生徒としてサービスが利用できるように「private β版リリース」を公開しました！
※「`private β版`」では、基本的な機能はすべて問題なくご利用頂けますが、正式リリースされる前のテスト段階としての公開の意味も兼ねておりますので、ご利用の際はぜひたくさんのフィードバックをお待ちしております。
技術本プレゼントキャンペーン開催中！
👇誰でも簡単に参加可能です！Xにて公式アカウントをフォロー&リツイートするだけなので、お気軽参加ください！👇
https://twitter.com/dokupro01/status/1796837336145436846
※ 今回の記事では、一定数要望も頂いておりましたので技術構成なども公開しておりますので、、もし興味ない場合は技術の箇所はスキップしてお読み頂けると幸いです
作成したサービス 【DokuPro(ドクプロ)】
「独学でプログラミングを学ぶ」を応援するエンジニア専門のマッチングサービス「DokuPro(ドクプロ)」というサービスを作成しました。
完全にエンジニアに特化しており、「分野」(AI・ゲーム・インフラなど)別の検索に加えて、最新の人気の「言語」や「フレームワーク」に加えて「ライブラリ」での検索にも対応しているのが特徴です。
※ 詳細なサービスの説明は後述します。
難しい手順はございませんのでとりあえず始めたい方は、下記にて無料会員登録を行い、簡単に使用を開始できますのでぜひ一度お試しください。
開発者プロフィール
X(Twitter): Sado
Webエンジニア3年目で、半年ほど前までは受託開発のお仕事で開発をさせて頂いてましたが、もっと自分でサービスことを考えつつ、ビジネス寄りで開発もしたいと考えるようになり、それなら自分でサービスを作ればよくない？ってなったので、退職後から現在まで約半年間はDokuProの開発に専念してきました。
前々職ではWeb系の広告媒体を運営して営業やマーケティングもしていたので、開発をただこなすだけじゃなくて、サービスをどうしたらよくできるかとかどうしたら、伸びるかとかを考えるのが好きです！
エンジニア専門の学習サービスなどを運営されております方(企業様)、シナジーが生まれそうなものがあればぜひお気軽にメッセージお待ちしております！
開発のきっかけ
⚠先行公開時の記事をすでに拝見した方は、こちらスキップください！
自分自身まったくの異業種からエンジニアに未経験転職を成功しているのですが、そのときに実際に独学で学習を行いポートフォリオなどもなんとか作成できたのですが、かなり遠回りもしましたし、よくない学習の仕方やアンチパターンなよくない設計や実装も行っていて、いま思うと無駄が多すぎたと感じております・・・。
このとき、自分なりにかなりリサーチは行っていたものの、やはりネットの情報には限界や正しくない内容などもあることから、現エンジニアから生の声やアドバイスなどを聞くのが一番説得力あるなと感じました。
なお、その後エンジニアになり2年くらい経過したのちに自分の未経験から転職した成功事例をもとに、これからエンジニアを目指す人へのアドバイスや相談などに乗る機会がありましたが、独学での勉強に躓いてしまう方やとても高いお金を払ってスクールに通っていたが、全く身になっておらず相談に来る方などがほとんどでした。
そんな経験を得て、下記のことをふと思いました。
スクールに通うようなお金がない人でも、頑張って独学でお金をかけずエンジニアにはなれるが完全独学は躓きポイントが多すぎるし挫折する
独学で学びつつも、現エンジニアの方のサポートやアドバイスなども受けられる環境があればベスト
現エンジニアと繋がれるようなそれっぽいサービスはあるが、下記懸念点がある
現状エンジニアだけに特化した、各エンジニアのいろんな分野のプロフェッショナルな現エンジニアを見つけて、繋がれるようなサービスは存在していない(インフラやAIなど細かく各分野に分かれているようなサービスがない)
生徒からも手数料を徴収しているサービスが多い(お金がなくても、頑張ってエンジニア目指す人に結局優しくない)
上記のことから・・・じゃあ自分がそれを満たすようなものを作ればよくない？という考えになり、思い切って開発することにしたのです！
詳細なサービスについての説明
冒頭でも軽くご説明させていただきましたが、完全にエンジニアに特化した、教えたい現エンジニアと教えて欲しいエンジニア(を目指している)をつなぐマッチングサービスです。
エンジニアのすべての分野に対応しており、最新の人気技術の検索にも対応できるよう随時追加導入しております。
先生と生徒間で契約を行い、メッセージのやりとりもサービス内で行うことができます。
※その後の細かいやりとりに関しては、規約の範囲内で外部ツールを使用することも可能。
エンジニアの分野一覧
下記のすべてのエンジニア分野に対応済みです。
※インフラは、ネットワーク・セキュリティ・クラウドなども含みます。
サーバーサイド
フロントエンド
インフラ
モバイルアプリ
AI
ゲーム
データベース
データサイエンティスト
ノーコード
UI/UX
ブロックチェーン
他社サービスとの比較
細かい箇所の違いはございますが、他社サービスと比較した場合の大きな違いのみにフォーカスすると、下記の２つがございます。
完全にエンジニア(プログラミング)のみに特化しているため、検索の精度が高い
最新の人気の技術や、マニアックな技術までカバーされているため、自分が聞きたいことに対する専門の知識を持った先生を探しやすい
契約時の生徒の契約手数料が掛からないので、完全に先生に支払う料金のみに出費を抑えられ、コスパよく問題を解決することができます
利用用途・使い方
生徒・先生それぞれの視点で、利用用途と使い方を説明します。
生徒としての主な利用用途・使い方の説明
これからエンジニアを目指している方はもちろん、現在エンジニアの方でも苦手としている専門分野の技術、わからないことなどを、各分野専門のプロのエンジニアに相談することなどができます。
基本的に自分の教えてほしい分野や技術などで検索、もしくは「未経験からエンジニア転職」などの「目的別」などで検索して、その目的や技術に精通したプロの先生が提供しているプランを見つけて契約すると先生とマッチングできます。
目的での検索イメージ
事前にその先生の自己紹介や経歴、プランなどを確認して、なにか「プランについての質問」などしたい場合に関しては、事前にメッセージで質問することが可能です。
DokuProでは、すべてのエンジニアの分野と最新のトレンドな言語・ツール、フレームワーク、ライブラリから探すことができたり、使用目的などから選ぶことも可能なので、効率よく自分の状況に適した先生を簡単に探すことができます。
目的から探す
人気の分野(一部抜粋)
人気の言語(一部抜粋)
人気のツール(一部抜粋)
人気のフレームワーク(一部抜粋)
人気のライブラリ(一部抜粋)
生徒側のざっくりな使用イメージ
先生としての主な利用用途・使い方の説明
現エンジニアの方が得意とする技術の分野で、独自のプラン作成を行い、生徒から契約をもらうことで生徒とマッチングします。
「プラン」は20個まで作成可能なので、得意な技術単位で独自プランを複数作成することができます。
なお、それぞれのプランごとに「コース」というものを作成でき、コースでは「チャットサポートコース」のようにサポートの仕方によって金額を分けたりすることが可能です。
※専門性のある方に先生をしていただきたいという思いから、最低1年以上の経験をしている分野・技術でのプラン作成をお願いしております。
先生は契約したプラン(コース)の金額に応じてアプリケーション使用手数料を差し引いた金額の対価を得ることができます。
なお、契約できるプランの契約形態は単発プランと月額プラン(一ヶ月単位)がございます。
生徒との契約によって得た売上は、銀行口座・本人確認を済ませて、出金申請をすることによって収益を得ることができます。
先生側のざっくりな使用イメージ
※「先生」と「生徒」それぞれの利用について
「先生」と「生徒」はモードの切替をすることができるので、どちらとしてもご利用したい場合でも、ユーザーの登録をそれぞれでする必要はありません。
サービスの利用ターゲット層
これを読んでいる志高きそこのアナタ！そう、志が高い現エンジニア(先生)もしくは、これからエンジニアを目指してみようかと夢に向かって頑張っているあなた(生徒)こそがターゲットなのです。
少しでも皆様のためになればと思って、エンジニア同士が簡単にマッチングできる場を作ったので、ぜひDokuPro(ドクプロ)を一度ご利用頂けると嬉しいです！
このサービスを通して、皆様の人生が少しでも良き方向にいくようにお手伝いができることを祈っております。
マネタイズ(サービス利用料について)
先生と生徒が契約した際に発生する先生の売上金額のうち`22%`を差し引いた金額(ここに決済手数料なども含む)がDokuProの収益となります。
なお、繰り返しになりますが、DokuProではこれからエンジニアになりたい人を全力で応援したい気持ちから、生徒からの手数料は一切頂いておりません。
UIについて
最初は`figma`のプラグインなどを駆使して自分でUIをサンプリングもしつつ構築していき、ある程度のレイアウトなどは自分で設計を行い`figma`のコメントの機能で記載しつつ、それを専門のデザイナーさんに依頼させていただきました。
UIについては、極力文字を減らしシンプルなUIになることを意識して開発しました。
また、デバイス間によってインタラクションコスト(身体的・認知負荷)がなるべく変わらないようにすることも特に意識して設計しました。
下記便利だったfigmaのプラグインを紹介します。
選択した2つのオブジェクト間を矢印で結んでくれるプラグイン
https://www.figma.com/community/plugin/733902567457592893/autoflow
複数のワイヤーフレームライブラリを使えるプラグイン
https://www.figma.com/community/plugin/742764242781786818/wireframe
作ったデザインをワイヤーフレームに変換できるプラグイン
https://www.figma.com/community/plugin/764471577604277919/wire-box
アバターや人の名前などダミーコンテンツを適当なものに差し替えてくれるプラグイン
https://www.figma.com/community/plugin/731627216655469013/content-reel
FontAwesomeやMaterialDesignなど10万以上のアイコンから必要なものを選べるプラグイン
https://www.figma.com/community/plugin/735098390272716381/iconify
他サイトのデザインをまるまるコピペして参考にできるプラグイン
※ 関係ないですがキャラクターなども今後用意する予定なのですが、`Canva`のAIによる生成が結構叩き台の作成としてかなりおすすめでした。
DokuPro(ドクプロ)を支える技術について
ここではリリースしたDokuProで選定した技術やサービスなどを紹介します。
ぜひ個人開発やポートフォリオの作成などの参考までに。
フロントエンド
フロントエンド周りの選定技術について紹介します。
Next.js(React)
フロントはNext.js（React）を使っています。SSRが使いたかったのと、TypeScriptとの相性を考えてNext.jsを選定しました。
なにかとサーバーサイドでデータフェッチできるのは便利です。
なお、Next.jsは最新バージョンを使用してますが、当時App Routerがまだ安定しているとはいえなかったため、Pages Routerを選定して現在まで使ってます。
いまのところ、特段Pages Routerで不自由なことは起きてないので、なにかしら問題が出ることがない限りこのままいこうと思ってます。
グローバル状態管理
グローバルの状態管理には、React標準のuseContextを使ってます。Jotaiの導入も検討したのですが、一旦は無駄にライブラリを導入したくなかったのと、後述するTanStack Query(旧React Query)を使っていることもあり、そもそもあまりグローバルで状態管理する必要がいまのところないため、共通のレイアウト箇所のデータなどで、どうしても必要な箇所は`useContext`で実装しています。
非同期状態管理
非同期の状態管理には、TanStack Query(旧React Query)を選定しています。
比較対象としては、SWRというものが存在していて、どちらかというと`SWR`のほうがシンプルに扱えておすすめです。
ただ、`TanStack Query`のほうが少々オプションが多かったりとっつきにくさはありますが、慣れると結構自由度が高くおすすめです。
※このTanStack Query(旧React Query)は個人的にかなりおすすめの神ライブラリでデータフェッチ後のキャッシュ管理、エラーハンドリングや無限スクロールなど簡単にできるかつコンポーネントの記述量もかなり減り楽になるので、本当におすすめです！ここで深堀りはしませんが、ぜひ一度使ってみてください。
https://tanstack.com/query/latest
CSS・UI
UI設計は`figma`を使用。
CSSには勢いがあるのと、使い慣れていたこともあるTailwind CSSを採用しました。
おかげでかなり楽ちんに実装できてます。
また、Tailwindを採用した理由のもう一つにshadcn/uiを選定したためです。
`shadcn/ui`はRadix UIとTailwindを使って書かれた UI コンポーネントをまとめたもので、Tailwind を通じてスタイルをカスタマイズもできるもので、とてもおすすめでDokuProでもかなり愛用してます。
使っていた当初は、海外でちらほら人気が出ていた程度だったのですが、なんとみるみる人気になっていたみたいで、2023 JavaScript Rising Starsでは、ぶっちぎりの総合ランキング1位になっていてびっくりしましたｗ
lint+type check+フォーマット
綺麗でバグの少ない統一性のあるコードを保つために、下記を導入しました。
細かいルールを追加してimportの順番や`type import`の強制、tailwindのクラスの記載順なども制御するようにしてます。
ESLintでコードの構文チェックをしています
Prettierでコードフォーマット（ソースコードを整形してくれるツール）してます
下記のようにhusky + lint-stagedを使って、コードに💩が紛れ込まないようにする目的でhuskyの導入をしました
https://qiita.com/derasado/items/768dff547b02b7159df3
その他ライブラリ
TypeScript向けのスキーマ宣言・検証ライブラリで、かなり扱いやすいです
FontAwesomeなどの様々なアイコンを簡単に利用することができるReact用のライブラリです
Reactのフォームライブラリで、input入力した値の管理を簡単に扱うことができて、`zod`とも相性がいいです。記述量もかなり減るのでおすすめです
シンプルで扱いやすい、カルーセル用ライブラリで、`shadcn`でも採用されています
バンドルされたファイルに含まれる各パッケージの容量を可視化しています
SVGファイルを最適化してJSXの変換して、Reactコンポーネントと利用できるようにしています
エラーを可視化、監視するモニタリングツールで、Slackへの通知も簡単にできます。こちらはサーバーサイド側でも活用してます
こちらでレンダリングの可視化設定をOnにして、不要なレンダリングが起こっている箇所を把握してメモ化などを行っています
サーバーサイド
サーバーサイド周りの選定技術について紹介します。
Laravel(API)
サーバーサイドには使い慣れていたという理由から`Laravel`を選びました。
Laravel認証パッケージのSanctumが便利という点も選定理由の一つです。
もしも、今後新しくなにかを作るならサーバーサイドもTypeScriptで統一して書けると楽ちんなのとデプロイの選択肢も増え簡単なので、Next.jsを選定すると思います。
lint+type check+フォーマット
サーバーサイドも同様に、綺麗でバグの少ない統一性のあるコードを保つために、下記を導入しました。
コーディング規約に沿ってPHPコードを美しく整形してくれるオープンソースソフトウェアです
PHPStanはPHPのLinterの静的解析ツールの一つで、レベルを設定して型チェックや未定義の変数があるかなどのチェックをしてくれます(DokuProでは、レベル6で運用してます)
Visual Studio Code（VSCode）でPHPを扱う際に非常に便利な拡張機能でフォーマッターやコード補完などの機能が便利で、私は有料ライセンスで導入してます
その他ライブラリ
PHPプログラミング言語用の単体テストを行うためのフレームワーク
入力補完を行いやすくするヘルパーファイルを生成することができるライブラリ
言わずもがな有名なオンライン決済サービスで、決済部分に`Connect`で使用
エラーを可視化、監視するモニタリングツールで、`Slack`への通知も簡単にできます。こちらはフロントエンド側でも活用してます
ライブラリではなく、VScodeの拡張機能であまり知られてませんが、地味に便利なので紹介しますが、`config`を定義した際に定義元に`Cmd + Click`でジャンプできるのでなかなかに便利です
DBクライアントツールとして使用しており、無料でも十分使いやすく、ER図の出力もできるのが便利で導入
インフラ・DB
主にインフラ・DB周りの選定技術について紹介します。
開発環境
開発環境には、Dockerを使用しています。
本番インフラ環境
本番環境にはフロントサーバ、APIサーバともにCloud Runを採用しています。
最初はHeroku、Render、Vercelなどもデプロイ工数が掛からないので候補にあったものの、今後スケールしたときのコスト面や安定性を考えて少し時間を掛けて`Cloud Run`でのデプロイにしました。
選定理由としては、なんといっても無料枠が大きいことと、フルマネージドサービスなためインフラ管理のコストが大きく削減できることです。
日本語での情報もそこそこに多いイメージですのでおすすめです。
また、GCPのサービスでは他に下記も利用しています。
CIツール。自動テストと自動デプロイを実行
アップロードする画像の保存先
DBで、MySQLを利用しています
フルマネージド `cron` ジョブサービスで、主にバッチ処理に使用しています
ユーザー リクエストの外部で作業を非同期で処理できるもので、主にメール送信などの非同期処理で利用しています
API キー、パスワード、証明書、その他の機密データなどのシークレットを機密保存しています
CDN
CDNは無料で使えるCloudflareを利用しています。
静的ページには、ページルールで長めのキャッシュを設定しておいて、パージが必要になったら一括でパージしています。
現在ベータ版のメールのDMARC Managementなんかも無料で使えるので、昨今厳しくなったGmailの要件の対応後問題ないかレポートを確認するのに結構便利で活用してます。
いざというときに簡単に海外からのアクセスを制限できるのも便利ですね。
https://www.cloudflare.com/ja-jp
メール配信
最初は使ったことがあったSendGridを採用しようと思っていたのですが、いつの間にかそもそも個人では使用不可で法人のみ使用可能な状態となっておりました・・・。
※ 2024年4月にFreeプランが改悪されたようで、`月12,000`件の配信が上限だったものが、1日`100`通に制限されてしまったようですね。
上記の理由もあって、DokuProのメール配信は、Amazon SESを採用しました。
SESは基本的にコストも良心的ですし、12 か月間は、毎月最大 3,000 件のメッセージ料金が無料になります。
https://aws.amazon.com/jp/ses/pricing/
CI/CD
`Github`でPRの作成時には`PHPUnit`によるテストや`PHPStan`・`PHP-CS-Fixer`によるLinting・フォーマッターなどがGitHub Actionsで実行されるようにしています。
mainブランチにマージした時点で、`Cloud Build`が走り、`Cloud Run`に自動デプロイされる仕組みになっています。
今のところ、月間の無料枠内のビルド時間で収まっています。
初期時点では、フロントのビルドも実行するようにしていたのですが、`husky`を導入したことにより不要になりました。
https://github.co.jp/features/actions
通知系
通知は主にすべてそれぞれの専用`Slack`チャンネルに飛ばすようにしてます。
おおまかに下記を通知するようにしています。
`Github`の`issue`・`PR`などの変更やマージなどに関してすべて
`GitHub Actions`のそれぞれのワークフローの成功可否
`Notion`の変更・ページ作成
パッケージ追加・更新の通知(周知系の通知自動化)
詳細はこちらで記事化してます
デプロイの成功可否(`CloudBuild`)
エラー(info)ログ系
Sentry通知(サーバーサイド・フロント)
Googleフォーム系(お問い合わせや要望・フィードバック)
メール(Amazon SES)によるバウンス通知など
DB
DBに関して当初は、PlanetScaleが素晴らしいサービスで採用していたのですが、途中で度重なる改悪や社内レイオフなどもあって安心できなかったので、Cloud SQLを他Googleサービスも使用していることから統一する形で採用することにしました。
Cloud SQL自体に無料枠はありませんが、大手サービスなので安心して使用でき、フルマネージドサービスなので、運用コストを抑えつつ使用できるのが魅力的です。
なお、自動バックアップなども設定することができます。
あまり知られていませんが、1年確約利用割引（CUD）なども利用すると、コストを抑えることができるのでおすすめです。
https://cloud.google.com/sql?hl=ja
なおキャッシュ・セッション周りに関しては、サーバーレスデータベースであるUpstashの`Redis`を利用しています。
無料プランから使用できるのでおすすめです。
その他
チケット・PRは全て`Github Issues`で紐づけるようにして管理してます
Github Projectsでボードでの管理もしています
チケットはフィルタできるように必ず`Feature`・`Fix`・`Bug`・`Refactoring`などのラベルを設定するようにしてわかりやすく管理してます
TODOコメントや、FIXMEなどのコードベースのコメントを管理できて、設定でハイライトなどもできるのでなかなかに便利です
コマンドラインでgitコマンドやmakeコマンドなども補完されるので、地味にかなり時短になってます
ウェブページの品質を測定するためのオープンソースの自動化ツールで、特にLPなどのSEOに関わるページのチェックに使用してます
Next.jsでGTM経由でGA4を設定して、アクセス解析してます(https://qiita.com/derasado/items/a6de3bcb4c8f703fbc01)
通知やコミュニケーションツールに使用
Wiki・ドキュメント系すべて
一部Gメール→Slackへの通知系はGASでハンドリングしてます
β版リリースまで継続するために意識したこと
個人開発でサービスを作ろうとすると、やることが多くなってしまいがちでしまいには途中で辞めてしまうなんてことも結構あるかと思います。
それだけは今回避けようと思い、とにかく意識していた点は下記です。
前述したMVP（Minimum Viable Product）で開発を行う
初回リリース時の必要機能を極限まで絞り、リッチにしすぎないようにする
もちろん差別化できるような機能などのこだわるところは、しっかりと取り入れる
暇な時間で「ビジネス寄りのことも考える」ことで、リリース後のイメージもある程度持っておき、日々開発だけするモチベーションを下げることなく保っておく
例えばリリース後の集客方法などのアイデアをNotionなどに蓄積させておくなど
キレイなコードの書き方にこだわりすぎない
ここも結構こだわってリファクタしたりと時間を掛けてしまいがちですが、個人開発をしてサービスをリリースするのであれば、前述した「ビジネス寄りのことを考える」時間を増やしてビジネス的な視点を持つことが俯瞰してプロジェクトのことを考えられるので、もっと大事なことなのではないのかなと思ってます
できる限り、毎日少しだけでもコードを書いて習慣化する
ここ本気でやろうとしている方は必然的に実行できるのではないかと思います
今後について
今後の予定では「private β版」の安定稼働や皆さまのフィードバックを頂いた上で、近日中に正式版リリースを行う予定です。
なお、正式版とprivate β版の基本的なサービスとしての機能に違いはございませんが、今後ユーザーの皆様からのフィードバックをしっかりと反映しつつ新機能を追加し、より扱いやすく身近なサービスにしていきたいと思っております。
終わりに(宣伝)
「これからエンジニアを目指している・目指したい！」や、「現役エンジニアだけど、新しいことにチャレンジしたくて、その分野のプロのエンジニアにちょっとアドバイスして欲しい」といった方は「生徒」として、
既に現役エンジニアとしてご活躍されていて、「これからエンジニアを目指す人を支援したい！」や「副業がてら困っている人のお手伝いしたい！」などの方は「先生」としての利用がすぐに可能なので、無料会員登録を絶賛お待ちしております！
ここまで長い記事を読んでいただいてありがとうございました！最後に是非いいねやストック、最新情報がチェックできる公式アカウントのSNSフォローなどもよろしくお願いします！
公式Xアカウントでは「未経験エンジニア無料支援」や「技術本プレゼント」などのキャンペーンも発信してますのでぜひチェックしてください！
開発者Xアカウント： X(Twitter)アカウント
DokuPro公式Xアカウント： X(Twitter)アカウント
DokuPro | ドクプロ
この記事が気に入ったらサポートをしてみませんか？