リッチエディターを安全に開発・運用するために

2025/07/22 【PRTIMES.DEV】エディター勉強会 #1の登壇資料です。

スライド内のURL
▼プレスリリースのエディタにサニタイザーを導入した話
http://developers.prtimes.jp/2023/12/27/sanitizer-introduction/

▼Tiptapエディターのテスト戦略：Playwright、Vitest Browser Mode、Editorインスタンスを用いたテスト
https://developers.prtimes.jp/2025/02/20/press-release-editor-frontend-testing-tips/

▼PR TIMESにおけるリファクタリングデー
https://developers.prtimes.jp/2021/12/13/introducing-refactoring-day/

Transcript

1. リッチエディターを 2025/07/22 株式会社PR
   TIMES 夛⽥⼩百合 安全に開発・運⽤するために
2. 自己紹介 株式会社 PR TIMES エンジニア プレスリリース配信エディターの開発に従事 X（Twitter）: @unachang113 しろたんと野球観戦が好きです 夛田小百合（Tada Sayuri）
3. Agenda エディターを安全に開発でき る要素 Tiptapバージョンアップの 進め⽅ 来るTiptap
   v3に向けて
4. エディターを安全に 開発するための要素 01
5. エディターを安全に開発するための要素 メンテナンスできる状態であること だれも触れない・触りたくないコードになってない？ テストはある？ 静的解析できてる？ 依存パッケージのバージョンアップできてる？ 仕様がなるべくシンプルであること 仕様が複雑になればなるほど⾃由記述のエディターはつらみが増す 複雑な仕様が沢⼭詰まった機能は結果的にメンテナンスしづらい
6. メンテナンスできる状態であること だれも触れない・触りたくないコードになってない？ テストはある？ 静的解析できてる？ 依存パッケージのバージョンアップできてる？ 仕様がなるべくシンプルであること 仕様が複雑になればなるほど⾃由記述のエディターはつらみが増す 複雑な仕様が沢⼭詰まった機能は結果的にメンテナンスしづらい エディターを安全に開発するための要素 今⽇はこの話がメイン
7. Tiptapバージョン アップの進め⽅ 02
8. バージョンアップ前のエディターの状況 バージョンアップ前はv2.0.0betaを使用 古いエディターと新しいエディターの並行開発が行われている状態 バージョンアップしようとすると新旧両方の確認が必要 古いエディターにはテストがほとんどない状態 手動で２つのエディターを確認するのはコストが高い コア機能すぎてバージョンアップが事故れない 事故るとプレスリリースが配信できなくなるので多数の企業に影響が出る 約 2 年 間 T i pta p の バ ージ ョ ン ア ッ プ が で き な い 状 態
9. バージョンアップ前のエディターの状況 Before After
10. バージョンアップできない故のつらみ 新しいバージョンだとサクッと実装できるものが実装できない 古いバージョンで起きているバグを回避して実装を行うので工数がかかる ex. tableExtensionでNodeViewを使おうとするとHTML構造がtable>divになる (v2.2.0で解消) https://github.com/ueberdosis/tiptap/pull/3984 ドキュメントがあてにならない Tiptapドキュメントは最新バージョンに沿うように更新されている ドキュメントを見てこれで実装できそう！と思って実装してみると型エラーになる ライブラリにセキュリティインシデントが起きてもすぐ対応できない
11. バージョンアップできなかった当時の嘆き refを使って無理やり開発。コードは複雑に
12. バージョンアップできなかった当時の嘆き 気付けると嬉しいな〜で 結局バージョンアップできず 終話
13. サニタイザーで不正なHTMLを防いでいたので なんとかなったけれど、 もしサニタイザーがなかったら...＼(^o^)／ バージョンアップできなかった当時の嘆き サ ニ タ イ ザ ー に つ いて 詳 し く は こ ち ら https://developers.prtimes. jp/2023/12/27/sanitizer -introduction/
14. バージョンアップチャンスの到来 2024年12⽉に古いエディターが提供終了になることが決まる 古いエディターの確認をコスト減らせる 事故らずバージョンアップできればOKの状況に
15. PdMとの調整 PdMにバージョンアップが必要な理由を説明しスケジュールを確保する Tiptapを使⽤した部分の新規機能・改修のリリースをバージョンアップが完了する までの間停⽌することが必要だった PR
    TIMESの場合、バージョンアップできていないことにより新しい機能の追加開発 ができない箇所があったのでそれを材料に相談 不具合の内容によっては時間がかかる可能性が⾼かったため、多めにスケジュール を確保させてもらった
16. バージョン上げてみる バージョンを上げた作業⽤ブランチをとりあえず作ってみた local環境で試しに最新版までバージョンを上げて確認を実施 エラー内容を確認しどれくらい作業が重たそうかを観測 エラーが出た箇所をひたすら直す ⼩さくリリースができない パッケージの更新のためFeatureFlagを利⽤してのリリースができなかった 1つベースになるプルリクを⽤意して、型エラー以外は修正を細かくプルリクを切っ てベースのプルリクにマージすることで開発を進めた
17. テスト戦略を考える ⾃動テストは昔より増えたけど・・・ ハッピーパスのテストは増えたけど網羅的に書けていない 正直テストカバレッジの測定してない ⾃由記述のエディターで⾃動テストで全ての⼊⼒ケースを担保するのは現実的では ない
18. テスト戦略を考える ⾃動テストと⼿動テストのハイブリッドで確認をすることにした ⾃動テスト PlaywrightによるIntegrationTest
    +
    VitestでのUnitTest ESLint等の静的解析ツールを使ったチェック ⼿動テスト アドホックテスト システムテスト リファクタリングデーでの⼿動テスト
19. 自動テスト 主に実装したものが壊れてないかを最低限担保するために使用 バージョンアップでfailしやすいのは型エラーが多いので、 静的解析でエラーが出 ていないかをまず確認 Playwrightの結合テストがfailしていないかとVRTで見た目が変わってないかを確認 ハッピーパスの結合テストがあったので操作も自動テストで確認することができた ので手動での確認を一部短縮できた テ ス ト 戦 略 に つ いて 詳 し く は こ ち ら h tt ps : / /d e ve l op e rs .p r t i m e s . jp / 2 02 5 /0 2 / 2 0/ p re s s - re l ea s e - e d i to r-f ro n te n d -te sti n g - t i ps /
20. ⼿動テスト（アドホックテスト） システムテスト実施前に動かない箇所を潰す エディターは操作パターンが多いことから過去、システムテストを実施した際 に⼤量にチケットが起票されることが多かった 起票されたチケットの中にはテストケースがそもそも回せなくなるような内容 も多く、システムテストが進まない状態になることも多かった システムテストを⾏う前にチームのエンジニアで担当領域を決めアドホックテ ストを実施、不具合を潰したあとにシステムテストを⾏った
21. ⼿動テスト（システムテスト） 各機能の動作確認＋過去に失敗したテストケースをベースに確認 新しいエディターのリリース、古いエディターの廃⽌、各種新機能を追加した 際のテストケースが資産として残っていた 基本的なエディターの動作確認＋過去のリリースで発⽣したバグのリグレッシ ョンテストをメインに2⼈で558件のテストケースを実施 アドホックテストで事前に不具合を潰せていたため、バージョンアップ起因の 不具合は0でシステムテストを終えることができた
22. 念押しで確認の目を増やし、安全性を高める 大きいバージョンアップになるので、なるべく多くの人の目を通した状態でリ リースしたい PR TIMESでは月に1回、リファクタリングデーというリファクタリング作業を 定期的に実施する日があり、その中でエディターの手動テストも実施される リファクタリングデー内の手動テストも通し、改めて問題がないことを確認し た上でリリースを行った 手動テスト（リファクタリングデー） リ フ ァ クタ リ ン グ デ ー に つ いて 詳 し く は こ ち ら https://developers.prtimes. jp/2021/12/13/ introduc ing-refactoring-day/
23. リリース後 不具合なくリリースを完遂することができた 🎉 リファクタリングデーの際にrenovateを用いて継続的にマイナーバ ージョンアップの実施ができるように
24. 来るTiptap
    v3に 向けて 03
25. Ti ptap v3について 🎉先日、メジャーバージョンアップがリリースされました 🎉 個人的に嬉しい新機能 MarkViewのサポート 型付けが厳密になった 再レンダリングなしでReactからEditorのStateを取得できるようになった
26. どうやってv3バージョンアップを進める？ v2.0.0beta→v2最新版のバージョンアップを進めた時と基本は⼀緒 バージョンアップ対応中は機能リリースを⽌める合意を取り、エラーが出た箇 所を粛々と直していく Breaking
    Changeが多いのでハッピーパスだけの⾃動テストが通った！軽い⼿ 動テストもヨシ！の状態でリリースするのは正直怖い v2の最新版で作ったテストケースを整理したもの＋リリース後追加した機能の テストを⼿動で再実施を⾏うことになりそう
27. どうやってv3バージョンアップを進める？ バージョンアップの際にリファクタリングはしない 今まで実装したものが新機能で置き換えられる誘惑・・・ リファクタリングとバージョンアップを並⾏でやると何が原因で壊れたかわか らなくなる バージョンアップだけに集中する
28. PR
    TIMESのエディターをv3にあげてみた 型エラーが多い・・・ 型が厳密になって嬉しい反⾯、たくさん型エラーが出ている まず最初は型エラーを修正するところから対応が始まりそう 現在PR
    TIMESのエディターで観測している型エラー NodeViewでgetPos()がundefinedの場合の処理がない ExtensionをextendしているExtensionでOptionの型が継承されない setContent
    commandのoptionが変わってる package名が変更になっている
    etc...
29. まとめ バージョンアップは⼿順を踏んで進めれば安全に⾏える！ Tiptapバージョンアップは塩漬けにすると⾟いからマメに⾏おう！ Tiptap
    v3、みんなでバージョンアップ頑張ろう！！！！！！！ 知⾒共有できたらうれしいです！！！！
30. Thank
    You!