【ITニュース解説】ShadCN Rich Text Editor with Lexical + Lexkit

ウェブ上で情報を入力する際、ただ文字を打ち込むだけでなく、文字を太字にしたり、色をつけたり、画像を挿入したり、箇条書きにしたりといった、さまざまな装飾や整形ができる入力欄を「リッチテキストエディタ」と呼ぶ。ブログの記事作成画面やSNSの投稿画面などで、普段から目にする機会が多い機能だ。このリッチテキストエディタは、見た目以上に複雑な技術で成り立っており、開発者がウェブアプリケーションに組み込む際には多くの課題が伴う。

今回解説する記事の著者は、まさにこのリッチテキストエディタの構築に際して、長年の苦労を経験してきた開発者の一人だ。特に、Facebook（現Meta）が開発した「Lexical」という強力なリッチテキストフレームワークに対して、複雑な感情を抱いていた。Lexicalの基盤となるアイデアは非常に優れており、高いパフォーマンスと柔軟性を提供することは理解していたものの、実際にこれを使ってエディタを構築しようとすると、その開発体験（DX: Developer Experience）が期待を下回るものだと感じていたという。

開発体験（DX）とは、開発者がソフトウェアを開発する際に感じる快適さや効率性のことだ。コードの書きやすさ、デバッグのしやすさ、期待通りの動作が得られるかといった要素が含まれる。著者は、Lexicalを使って開発する際に、特定の機能を追加するための拡張機能を組み込む際に手間がかかったり、プログラムの型に関する情報（型安全性）が十分に提供されず、型を推測しながらコードを書く必要があったり、たった数行のコードを書くにも毎回格闘しなければならない状況に不満を感じていた。このような状況は、開発効率を著しく低下させ、ストレスの原因となる。

この開発上の課題を解決するために、著者は「LexKit（レックスキット）」という新しいフレームワークをLexicalの上に独自に構築した。LexKitは、著者が長年「こうあってほしい」と願い続けていた理想のエディタシステムを実現するために作られたものだという。その最大の目的は、開発体験（DX）を劇的に向上させることにある。

LexKitは、いくつかの重要な特徴を持っている。まず、非常にモジュール性が高い点が挙げられる。これは、まるでレゴブロックのように、必要な機能（拡張機能）を一つずつ組み合わせてエディタを構築できることを意味する。これにより、無駄な機能を含まず、シンプルで軽量なエディタを柔軟に作成できる。また、ReactというJavaScriptのライブラリに最適化されており、「React-first」という思想に基づいているため、Reactを使用しているプロジェクトにスムーズに統合できる。奇妙なラッパー（仲介役）を挟む必要がないため、開発者はReactの知識を直接活かして効率的に開発を進められる。

さらに、LexKitは「型安全性」を最初から考慮して設計されている。型安全性とは、プログラムのデータ型に関するエラーを開発の早い段階で検出し、実行時に起こりうるバグを防ぐ仕組みのことだ。LexKitでは、エディタの機能に関連するコマンドや状態クエリ（エディタの状態を問い合わせる命令）が最初から明確な型情報を持って提供されるため、開発者は型の推測に悩むことなく、自信を持ってコードを書ける。これにより、プログラムの誤りを減らし、開発のスピードと品質を向上させることが可能になる。著者がLexicalで感じていた不満点が、LexKitによって解決されていることがわかる。

記事では、人気の高いUIコンポーネントライブラリであるShadcn UIを使ったエディタのテンプレートも紹介されている。Shadcn UIは、開発者が美しく機能的なユーザーインターフェースを素早く構築するための部品（コンポーネント）を提供する。LexKitを使うことで、Shadcn UIのデザインと機能を取り入れたリッチテキストエディタを、非常に簡単にプロジェクトに組み込めることが示されている。

LexKitを実際に利用する方法も非常に簡潔に説明されている。まず、npmというパッケージ管理ツールを使って、LexKit本体とLexicalの関連パッケージをインストールする。その後、わずか10行程度のJavaScriptコードを書くだけで、基本的なリッチテキストエディタを動作させられるという。これは、createEditorSystemという関数を使ってエディタのシステム全体を作成し、必要な拡張機能（例えば、リッチテキスト機能、太字、斜体など）を配列として渡し、それをProviderというコンポーネントでラップするだけの簡単な手順だ。これにより、開発者はすぐに文字を入力し、基本的な装飾を試すことができる。この手軽さは、複雑な設定や多くのボイラープレートコード（定型的なコード）を記述する必要があった従来のエディタ開発に比べて、大きな進歩である。

著者は、LexKitを開発した理由として、やはり「開発体験（DX）へのこだわり」を強調している。型の推測に疲れ、プラグインの互換性の問題と格闘し、GitHubで見つけた断片的なコード例を継ぎ接ぎして使うような状況にうんざりしていたと述べる。LexKitは、このような開発者が抱える具体的な問題を解決し、より快適で生産的な開発環境を提供することを目指している。

今後の展望としては、より多くの拡張機能、多様なテンプレートやデモ、そして充実したドキュメントの追加を計画しているという。これは、LexKitがさらに多くの開発者にとって使いやすく、強力なツールになることを目指している表れだ。著者は、このプロジェクトを継続していくために、コメントやGitHubでのスター、機能の提案、バグ報告、あるいは少額の寄付といった形で、コミュニティからのサポートを求めている。

このLexKitは、リッチテキストエディタの構築という、これまで多くの開発者が「地獄」と表現するほど困難だった作業を、はるかに快適で効率的なものに変える可能性を秘めている。システムエンジニアを目指す初心者にとっても、このような開発者の課題意識から新しいツールが生まれ、それがどのように問題を解決し、開発体験を向上させるのかを理解する良い事例となるだろう。