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
Technical Decisions and Reflections on "Test M...
Search
meijin
January 21, 2025
Programming
1
63
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
meijin
January 21, 2025
Tweet
Share
More Decks by meijin
See All by meijin
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
26k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
4
3.6k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
460
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.2k
個人開発がおすすめな理由
texmeijin
3
1k
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
430
初めてESLintプラグインにコントリビュートした話
texmeijin
0
220
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
100
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.9k
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
230
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
600
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
400
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
130
CSC509 Lecture 04
javiergs
PRO
0
300
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
dynamic!
moro
9
6.6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Navigating Team Friction
lara
189
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Raft: Consensus for Rubyists
vanstee
139
7.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Documentation Writing (for coders)
carmenintech
75
5k
Transcript
2年間開発を続けている テストメーカー立ち上げ時の 技術選定と振り返り 株式会社NoSchool CTO meijin
アジェンダ 自己紹介 テストメーカーの紹介 テストメーカーの技術選定 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万人以上の会員登録。有料版も提供 💰 主なユーザーは学校の先生、資格受験、企業研修など
マウスやタッチ操作で簡単穴埋めテスト作成 &編集
回答URLを配布して、簡単共有
テストメーカーの技術選定
技術選定一覧 ※ ⭐をつけているものをこのあと解説します フロントエンド 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> 0:00
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エディタライブラリを利用し、当該機能を実現
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のみでやります
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いじりた くないなぁ」みたいなものが分かる
個人開発の技術選定Tips
個人開発の技術選定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