Technical Decisions and Reflections on "Test Maker" After Two Years of Development

Transcript

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