🌟
2年間開発を続けているテストメーカー立ち上げ時の技術選定と振り返り
このスライドは以下のイベントの登壇資料です
アジェンダ
- 自己紹介
- テストメーカーの紹介
- テストメーカーの技術選定
- Great or Normal or Not-Great
- 個人開発の技術選定Tips
自己紹介
@meijin_garden)
名人(- 職種・SNS
- 株式会社NoSchool CTO
- 2016年〜株式会社LIFULL Webエンジニア
- 2019年〜株式会社NoSchool CTO
- Twitter(X): 名人|マナリンクCTO 🔍
- Zenn: https://zenn.dev/meijin 🔍
- 好きな言語はTypeScript、好きなCSSプロパティはobject-fit
- 株式会社NoSchool CTO
- 趣味
- 将棋☗、カメラ📸、個人開発💻、ラム酒🥃、筋トレ💪、高校野球観戦⚾、麻雀🀄
テストメーカーとは
- 概要
- 「穴埋めテストを簡単に作れるWebアプリケーション」
- 「穴埋めテスト」でGoogle1位(多分)🔍🌐
- https://www.test-maker.app
- 沿革
- 2022年6月リリース
- リリースツイートが2,000RT以上、IT Media Newsに掲載📣
- 2025年1月現在、2万人以上の会員登録。有料版も提供💰
- 主なユーザーは学校の先生、資格受験、企業研修など
マウスやタッチ操作で簡単穴埋めテスト作成&編集
回答URLを配布して、簡単共有
テストメーカーの技術選定
技術選定一覧
※⭐をつけているものをこのあと解説します
- フロントエンド
- Next.js / Tailwind CSS / ⭐daisyUI / ⭐Slate.js (リッチテキストエディタ) / Vercel
- バックエンド
- ⭐frourio (Node.jsフレームワーク) / Prisma / PostgresQL / Firebase Auth / ⭐Railway
- その他
- Sentry / ⭐Posthog / Stripe
https://daisyui.com/)【Great】
daisyUI(Tailwind CSSのコンポーネントライブラリ
<details class="dropdown">
<summary class="btn m-1">open or close</summary>
<ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</details>
daisyUI | 解説
- Dropdownを作るのに、JavaScriptは不要!
-
<details>
と<summary>
で実装できる - そこにCSSでスタイルを当てれば、見た目はDropdownになる
-
- 純粋にHTMLとCSSの勉強になるので、GitHub Repoを読むと楽しい
- CSSしかないので、CSS筋が鍛えられる
- 技術的なメリット
- Server ComponentsのままでUIが実装できる
https://docs.slatejs.org/)【Not-Great】
Slate.js(- Slate.jsについて
- 競合としてTiptap、Quill、Editor.js、Lexicalなどがある
- 長所
- フルカスタマイズ可能。機能ごとに提供されている
- 短所
- バージョンが未だに0系。実態として破壊的変更が多い
- 実質Plateというラッパーライブラリが必須だが、こちらも破壊的変更が多い
→今から始めるなら、Tiptapをおすすめします
✅「リッチテキストエディタ 基礎」でGoogle1位のこの記事をぜひ!
テストメーカーでWYSIWYGエディタを使った理由
- テストメーカーの「マウスで選択したところが穴埋めになる」体験
- 抽象化すると 「ユーザーの操作をフックに、特定のDOMを別のDOMへ変換する」 が必要
- WYSIWYGエディタの 「Command+Bでspanをstrongへ変換する」 と一緒!
- カスタマイズ性の高いWYSIWYGエディタライブラリを利用し、当該機能を実現
https://frourio.com/)【Normal】
frourio(- Node.jsフルスタックフレームワーク
- 2025年現在もNode.js製FWは乱立
- 個人的に最有力)Hono, frourio, Nest.js
- 個人的に有力視)FoalTS, Blitz.js, RedwoodJS
- frourioの特長
- 関数を中心とした設計。ClassやDecoratorは使わない!
→ただ、テストメーカーのようなWebのみ&シンプルCRUDなサービスを今から始めるなら、Next.js+Supabaseのみでやります
https://railway.app/)【Not-Great】
Railway(- 概要と長所
- めっっっちゃ簡単に使えるPaaS。管理画面がイケてる。開発自体は盛ん
- 料金|バックエンドサーバーとPostgresQLで月額$20程度
- 欠点:不安定...というか信頼度が微妙というか...
- 一番酷かったときで深夜3時に落ちて翌日14時頃まで復旧しなかった
- Discordでサポートがあるが、英語なので正直しんどい
- 割としばしば大きめのmigrationをやっているようで、DBの再起動したら
ストレージがアメリカからシンガポールに勝手に移動&途中でCancelしたらDBが画面上から消失したことがある。 太平洋に落ちたのかと思った...
https://posthog.com/)【Great】
Posthog(- Google Analyticsの代替
- 価格:有料版もあるが、無料枠も(個人開発なら)十分な量
- 特長
- とにかくエンジニアフレンドリー
- トラッキングの実装が簡単&そこそこモダン
- データ分析が、SQLライクな独自言語でできる。BIツールがオールインされているイメージ
Posthog | スクショ
- SQLライクにイベントを分析することができる
- 新機能リリース後、何人がUI上で反応したか?といった、「欲しいデータだけどGAいじりたくないなぁ」みたいなものが分かる
個人開発の技術選定Tips
- 極論、simpleなもの選んでおけば大後悔はしない
- 例:
Railway
についてNot-Greatと評したが、元々がsimpleですぐ使えるツールなので、個人開発のスピード感には大いに貢献している
- 例:
- 【そのサービスの勝負どころ】に集中できる選定
- 例:テストメーカーの最大の勝負どころはカスタマイズされたWYSIWYGエディタ。Slate.jsは破壊的変更が多いが採用の価値があった
- 例:WYSIWYGエディタは開発に時間がかかるし、Bundle Sizeも大きい。
daisyUIは「爆速でUI開発しつつ軽いバンドルサイズで実装」できる
⭐リソースが特に限られる個人開発は、メリハリをつけて尖った開発をしよう!⭐
ご清聴ありがとうございました!
こちらの記事にプロダクトマネジメントのTipsなども書いています。
【テストメーカー 支える技術】で検索🔍
Discussion