Webエディタライブラリ「CodeMirror」から学ぶ Webアプリ開発のテクニック

by igarashi

Slide 1

Slide 1 text

Webエディタライブラリ「CodeMirror」から学ぶ Webアプリ開発のテクニック 2024.7.5 新規事業部 Zennチーム Igarashi

Slide 2

Slide 2 text

Xへの投稿の際は、ハッシュタグ #devio2024 でお願いいたします。 2 お願い

Slide 3

Slide 3 text

Igarashi Ryosuke ● 2015/7⼊社 ● CX事業本部（旧モバイルアプリサービス部）でバックエンド‧インフラを担当 ● 2021/6より新規事業部 Zennチーム ● フロントエンドもやってますが何もわからない⾃⼰紹介 3

Slide 4

Slide 4 text

はじめに 4

Slide 5

Slide 5 text

とは Zennは「知見を共有するエンジニアに対価を」というコンセプトでつくられた技術情報共有コミュニティです。 5

Slide 6

Slide 6 text

3種類の投稿形式で、その時々に合った粒度で知見を残すことができますひとまず雑にメモしたいあのテーマで誰かと議論したい最近学んだあの話を記事にしよう労力がかかった分有料で販売しようあの話をまとめて本にしよう 6

Slide 7

Slide 7 text

著者が金銭的な対価を受け取れる仕組み知見をまとめて有料の本として販売してみよう応援したい著者には有料のバッジを贈ろうバッジを受け取った著者に分配金が支払われます 7

Slide 8

Slide 8 text

8 8

Slide 9

Slide 9 text

catnose さんが個人プロジェクトとしてリリース運営会社がクラスメソッド株式会社に 2020年9月 2021年6月 5人の小さなチームで運営中現在のこれまで 9 企業運営になってからも自分たちがワクワクすることに積極的に取り組むスタンスは変わっていません。ほぼすべての意思決定はチームメンバーだけで行われており、メンバー一人ひとりのアウトプットがサービスの質に直結します。

Slide 10

Slide 10 text

本編 10

Slide 11

Slide 11 text

最近のエディタ周りのアップデート 11

Slide 12

Slide 12 text

ZennのMarkdownエディタの作り⽅アップデートで⾏ったことはほとんどすべて「Zenn Tech Blog」で公開しています。 12

Slide 13

Slide 13 text

お話すること CodeMirrorの実装からわたしが学んだこと‧興味深かったこと伝えします。 🚀 パフォーマンス最適化 🚀 状態管理のアーキテクチャ 🚀 拡張性 13

Slide 14

Slide 14 text

CodeMirrorの実装からわたしが学んだこと‧興味深かったこと伝えします。 🚀 パフォーマンス最適化 🚀 状態管理のアーキテクチャ 🚀 拡張性収まりきらなかったので記事として書きます 󰢛 お話すること 14

Slide 15

Slide 15 text

注意‧免責事項 ● 本スライドの内容はCodeMirrorのドキュメントやソースコードを参考に作成していますが、正確ではない可能性があります。 ● 本スライドの内容はCodeMirror v6に関する内容です。v6はv5以前とは実装が全く異なりますのでご注意ください。 15

Slide 16

Slide 16 text

ZennのエディタとCodeMirror 16

Slide 17

Slide 17 text

ZennのMarkdownエディタ ZennのMarkdownエディタはCodeMirrorというライブラリをベースに、多数のカスタマイズを加えています。 17

Slide 18

Slide 18 text

ZennのMarkdownエディタ 18

Slide 19

Slide 19 text

ZennのMarkdownエディタ 19 Markdown記法のデコレーション URLをペーストで自動的にリンク生成画像をD&Dでアップロード・リンク生成ショートカットキーによる Markdown記法の挿入（太字・斜体など） SlackライクなEmojiの入力補完

Slide 20

Slide 20 text

CodeMirrorとは “CodeMirrorは、Web⽤のコードエディターコンポーネントです。多くの編集機能をサポートするテキスト⼊⼒フィールドを実装でき、さらなる拡張を可能にする豊富なプログラミングインターフェイスを備えています。”（翻訳） 20 引用: https://codemirror.net/

Slide 21

Slide 21 text

Features 21 - Modularity - Speed - Bracket Closing - Linting - Flexible Styling - Theming - Collaborative Editing - Undo History - Multiple Selections - Internationalization ...and more - Accessibility - Mobile Support - Bidirectional Text - Syntax Highlighting - Line Numbers - Autocompletion - Code Folding - Search/Replace - Full Parsing - Extension Interface

Slide 22

Slide 22 text

Language Support 公式がサポートする⾔語。この他に、コミュニティが作成した⾔語サポートもあります。 22

Slide 23

Slide 23 text

ちなみに ProseMirrorという、Notionライクなブロックベースのエディタライブラリもあります。ラッパーライブラリとしてやなどが有名です。作者はCodeMirrorとおなじ⽅です。 23

Slide 24

Slide 24 text

ブロックエディタのトレードオフ良いところ ● プレビュー不要 ● リッチな表現をUIで実現できる⼤変なところ ● 編集‧表⽰の2つのモードの実装が必要 ● 細かい挙動の調整 24

Slide 25

Slide 25 text

質問✋ 技術記事を書く時に使いたいエディタはどっち？（A）Markdownベースの「テキストエディター」（B）Notionライクな「ブロックエディター」 25

Slide 26

Slide 26 text

🚀パフォーマンス最適化 26

Slide 27

Slide 27 text

基礎知識 27 このテキストエディタのHTMLはどのようになっているでしょうか？

Slide 28

Slide 28 text

基礎知識 28 contenteditable=”true”により、 divやspanのテキストが編集可能に 1⾏⽬ 2⾏⽬ 3⾏⽬ class指定によるハイライトの装飾

Slide 29

Slide 29 text

仮想スクロール⼤量のデータをブラウザにレンダリングする際に、可視範囲のDOMだけを動的に⽣成することで、レンダリングにかかる時間を⼩さくしてパフォーマンスを向上させるテクニック。動的な変数をもとにレイアウト（描画範囲）を決定する。 ● エディタの⾼さ ● １⾏あたりの⾼さ ● スクロール位置 ● その他 29

Slide 30

Slide 30 text

仮想スクロール 30 例えばこんなCSS div.outer { height: 500px; overﬂow: auto; } div.inner { height: 10000px; }

Slide 31

Slide 31 text

仮想スクロールトレードオフ ● DOMが⽣成されていない部分はブラウザ検索が効かない（別途実装が必要） ● など 31

Slide 32

Slide 32 text

レイアウト計測はコストが⼤きいテキストの⽂法解析 ↓ テキストを構造化 ↓ テキストのデコレーションや様々な状態を適⽤ ↓ ようやくレイアウトが計測できる 32

Slide 33

Slide 33 text

レイアウト計測はコストが⼤きい変数が変わるたびに１フレーム内で何度もレイアウト計測を実⾏してしまうとフレーム落ちが発⽣する 👉 requestAnimationFrameを使う 33

Slide 34

Slide 34 text

requestAnimationFrameとは CSSなどでは表現が難しいアニメーションを、 JavaScriptからブラウザのリフレッシュレートにあわせてスムーズに描画するためのAPIです。 34

Slide 35

Slide 35 text

ブラウザのレンダリングサイクル ● ブラウザはMainスレッドでレンダリングを⾏う ● 初回は全部通りますが、2回⽬以降は差分更新 ● 余った時間でクライアント JavaScriptの実⾏も⾏う 35 https://web.dev/learn/performance/understanding-the-critical-path?hl=ja

Slide 36

Slide 36 text

フレーム落ちとは ● 処理時間が⻑いJavaScriptがあると、レンダリングタイミングが数フレームに1回になる。 ● 50ms以上かかるタスクは分割したほうが良いとされています。 36 https://web.dev/articles/long-tasks-devtools?hl=ja

Slide 37

Slide 37 text

フレーム落ちとは ● requestAnimationFrameを使うことで、処理をフレームの先頭に先送りする。 37

Slide 38

Slide 38 text

requestAnimationFrameの例アニメーションの場合、コールバック関数の中で再帰呼び出しをして、差分時間から移動距離を算出する 38 引用: https://developer.mozilla.org/ja/docs/Web/API/windo w/requestAnimationFrame 再帰的に呼び出し呼び出された時間開始からの経過時間時間から移動距離を測る

Slide 39

Slide 39 text

requestAnimationFrameの例 39 フレームごとにrequestAnimationFrameのコールバックが実行される

Slide 40

Slide 40 text

CodeMirrorの場合エディタの状態が更新された時 ● テキストのDOM更新は即座に⾏う。 ● レイアウト計測はrequestAnimationFrameで次のフレームの先頭で⾏い、仮想スクロールを更新 40 引用: https://github.com/codemirror/view/blob/6.28.4/src/editorview.ts#L67-L72

Slide 41

Slide 41 text

ハイライトもコストが⼤きいテキストの⽂法解析 ↓ テキストを構造化 ↓ テキストの選択範囲や様々な状態を反映 41

Slide 42

Slide 42 text

ハイライトもコストが⼤きいこれらをDOM更新と同じタイミングで実⾏するとコストが⼤きいのでフレーム落ちが発⽣する可能性がある。 👉 setTimeout/requestIdleCallbackを使う 42

Slide 43

Slide 43 text

setTimeoutとは指定した時間が経過した後にコールバックを実⾏するAPIです。ブラウザ環境においては、setTimeoutの待ち時間の間、ブラウザの処理を実⾏することができる。 43

Slide 44

Slide 44 text

requestIdleCallbackとはブラウザのスレッドがアイドル状態のときに実⾏される関数をキューイングできます。優先度が低くコストが⼤きい処理をさせるのに有効です。 44

Slide 45

Slide 45 text

requestIdleCallbackとは 45 ただし、Safariはまだ⾮対応です。

Slide 46

Slide 46 text

CodeMirrorの場合 requestIdleCallbackが⾮対応環境 ● setTimeoutで500ms遅延 requestIdleCallbackが対応環境 ● setTimeoutで100ms遅延 ● requestIdleCallbackで0~400ms遅延 46

Slide 47

Slide 47 text

CodeMirrorの場合 47 IdleCallbackで解析レイアウト計測してレンダリング大量のコードをペースト 100ms

Slide 48

Slide 48 text

まとめ 48 ● 仮想スクロールは⼤量のデータをパフォーマンスを落とすことなくレンダリングするテクニック。 ● レンダリングコストが⼤きい処理はブラウザに⽤意されたAPIを⽤いて遅延実⾏させることでフレーム落ちを抑える。 ○ requestAnimationFrame ○ setTimeout ○ requestIdleCallback

Slide 49

Slide 49 text

おわりに 49

Slide 50

Slide 50 text

おわりに ● CodeMirrorの実装から学んだ、広く活⽤できそうな知識‧テクニックをお話しました。 ● なにかのお役に⽴てれば幸いです。 ● 素晴らしいライブラリと作者に感謝します。 50