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
40
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
25k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
4
3.2k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
420
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.1k
個人開発がおすすめな理由
texmeijin
3
980
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
410
初めてESLintプラグインにコントリビュートした話
texmeijin
0
210
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
95
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.7k
Other Decks in Programming
See All in Programming
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
200
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
140
インターフェース設計のコツとツボ
togishima
2
690
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
290
FormFlow - Build Stunning Multistep Forms
yceruto
1
150
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
340
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
10
1.7k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
510
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
740
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
240
TypeScript LSP の今までとこれから
quramy
1
490
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
470
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
690
Practical Orchestrator
shlominoach
188
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Visualization
eitanlees
146
16k
Docker and Python
trallard
44
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Adaptive Systems
keathley
43
2.6k
Fireside Chat
paigeccino
37
3.5k
Side Projects
sachag
454
42k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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