🌟

2年間開発を続けているテストメーカー立ち上げ時の技術選定と振り返り

2025/01/22に公開

このスライドは以下のイベントの登壇資料です

https://findy.connpass.com/event/339334/

https://togetter.com/li/2499565

アジェンダ

  • 自己紹介
  • テストメーカーの紹介
  • テストメーカーの技術選定
    • 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
  • 趣味
    • 将棋☗、カメラ📸、個人開発💻、ラム酒🥃、筋トレ💪、高校野球観戦⚾、麻雀🀄

テストメーカーとは

  • 概要
    • 「穴埋めテストを簡単に作れるWebアプリケーション」
    • 「穴埋めテスト」でGoogle1位(多分)🔍🌐
    • https://www.test-maker.app
  • 沿革
    • 2022年6月リリース
    • リリースツイートが2,000RT以上、IT Media Newsに掲載📣
    • 2025年1月現在、2万人以上の会員登録。有料版も提供💰
  • 主なユーザーは学校の先生、資格受験、企業研修など

マウスやタッチ操作で簡単穴埋めテスト作成&編集

画面収録 2025年1月14日 18時46分20秒


回答URLを配布して、簡単共有

screenshot.png

screenshot.png


テストメーカーの技術選定


技術選定一覧

※⭐をつけているものをこのあと解説します

  • フロントエンド
    • Next.js / Tailwind CSS / ⭐daisyUI / ⭐Slate.js (リッチテキストエディタ) / Vercel
  • バックエンド
    • ⭐frourio (Node.jsフレームワーク) / Prisma / PostgresQL / Firebase Auth / ⭐Railway
  • その他
    • Sentry / ⭐Posthog / Stripe

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>

daisyUI | 解説

  • Dropdownを作るのに、JavaScriptは不要!
    • <details><summary>で実装できる
    • そこにCSSでスタイルを当てれば、見た目はDropdownになる
  • 純粋にHTMLとCSSの勉強になるので、GitHub Repoを読むと楽しい
    • CSSしかないので、CSS筋が鍛えられる
  • 技術的なメリット
    • Server ComponentsのままでUIが実装できる

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


テストメーカーでWYSIWYGエディタを使った理由

  • テストメーカーの「マウスで選択したところが穴埋めになる」体験
    • 抽象化すると 「ユーザーの操作をフックに、特定のDOMを別のDOMへ変換する」 が必要
    • WYSIWYGエディタの 「Command+Bでspanをstrongへ変換する」 と一緒!
    • カスタマイズ性の高いWYSIWYGエディタライブラリを利用し、当該機能を実現

画面収録 2025年1月14日 18時46分20秒


frourio(https://frourio.com/)【Normal】

  • Node.jsフルスタックフレームワーク
  • 2025年現在もNode.js製FWは乱立
    • 個人的に最有力)Hono, frourio, Nest.js
    • 個人的に有力視)FoalTS, Blitz.js, RedwoodJS
  • frourioの特長
    • 関数を中心とした設計。ClassやDecoratorは使わない!

→ただ、テストメーカーのようなWebのみ&シンプルCRUDなサービスを今から始めるなら、Next.js+Supabaseのみでやります


Railway(https://railway.app/)【Not-Great】

  • 概要と長所
    • めっっっちゃ簡単に使えるPaaS。管理画面がイケてる。開発自体は盛ん
    • 料金|バックエンドサーバーとPostgresQLで月額$20程度
  • 欠点:不安定...というか信頼度が微妙というか...
    • 一番酷かったときで深夜3時に落ちて翌日14時頃まで復旧しなかった
    • Discordでサポートがあるが、英語なので正直しんどい
    • 割としばしば大きめのmigrationをやっているようで、DBの再起動したら
      ストレージがアメリカからシンガポールに勝手に移動&途中でCancelしたらDBが画面上から消失したことがある。 太平洋に落ちたのかと思った...

Posthog(https://posthog.com/)【Great】

  • Google Analyticsの代替
    • 価格:有料版もあるが、無料枠も(個人開発なら)十分な量
  • 特長
    • とにかくエンジニアフレンドリー
    • トラッキングの実装が簡単&そこそこモダン
    • データ分析が、SQLライクな独自言語でできる。BIツールがオールインされているイメージ

Posthog | スクショ

  • SQLライクにイベントを分析することができる
    • 新機能リリース後、何人がUI上で反応したか?といった、「欲しいデータだけどGAいじりたくないなぁ」みたいなものが分かる

screenshot.png


個人開発の技術選定Tips

  • 極論、simpleなもの選んでおけば大後悔はしない
    • 例:RailwayについてNot-Greatと評したが、元々がsimpleですぐ使えるツールなので、個人開発のスピード感には大いに貢献している
  • 【そのサービスの勝負どころ】に集中できる選定
    • 例:テストメーカーの最大の勝負どころはカスタマイズされたWYSIWYGエディタ。Slate.jsは破壊的変更が多いが採用の価値があった
    • 例:WYSIWYGエディタは開発に時間がかかるし、Bundle Sizeも大きい。
      daisyUIは「爆速でUI開発しつつ軽いバンドルサイズで実装」できる

⭐リソースが特に限られる個人開発は、メリハリをつけて尖った開発をしよう!⭐


ご清聴ありがとうございました!

こちらの記事にプロダクトマネジメントのTipsなども書いています。
【テストメーカー 支える技術】で検索🔍
https://zenn.dev/meijin/articles/personal-development-release-and-paid-story

Discussion