【ツールNo.22】今更聞けない！Draftをサクッと解説

この記事では、Draftという用語について、初めて聞いた方でも理解できるように、その仕組みや活用方法を丁寧に解説しています。図解や具体例を交えてわかりやすくまとめましたので、ぜひ参考にしてください。

Draftとは？

Draftとは、テキストやデータの編集処理において、変更の履歴や状態を構造的に管理するためのJavaScriptライブラリです。特にリアルタイムな共同編集が求められるWebアプリケーションでよく用いられており、Facebookによって開発されました。

わかりやすい具体的な例

わかりやすい具体的な例1

例えば、Web上のメモアプリで文章を入力しているときに、自動で太字やリンクの装飾ができることがあります。Draftはこうした編集の内容を内部で構造化して保持することで、テキストの見た目や機能を柔軟に制御します。しかも、途中でやめても、再開したときに続きから編集できるようにする仕組みもDraftによって実現できます。

ユーザーが入力した文字は、Draftの内部で構造化データに変換されます。そして太字やリンクなどの情報も一緒に保持されるため、後から表示や保存が自由にできます。

わかりやすい具体的な例2

ブログ投稿画面で、太字や見出し、引用などのボタンをクリックして装飾を加える機能があります。Draftはこれらの編集動作を検知し、エディターの状態をJavaScriptのオブジェクトに記録します。このように、Draftは単なるテキスト編集ではなく、コンテンツの構造と履歴をコントロールする役割を担います。

Draftはユーザーの操作を「EditorState」として受け取り、それを「ContentState」でテキストの状態に反映することで、編集の内容を保持しつつ表示できます。

Draftはどのように考案されたのか

Draftは、Facebook社がReactベースのエディター機能を実装する必要に迫られた際に開発されました。当時、既存のテキストエディターライブラリでは高度な構造化やリアルタイム編集が困難だったため、新たに設計されたのです。Reactの「ステート管理」思想にマッチする形で、状態の変化を扱いやすくする設計が導入されました。

考案した人の紹介

Draftは、FacebookのエンジニアであるDaniel Wulff氏によって考案されました。彼はフロントエンド開発の経験が豊富で、特にReactと密接に連携できるフォーム・エディターの必要性を感じていました。複雑な文章の構造や状態遷移をReactらしく扱えるように、Draftの基本設計をまとめ上げ、2016年にオープンソースとして公開しました。

考案された背景

2010年代後半、FacebookをはじめとするWebプラットフォームは、多機能かつリアルタイム性の高いエディターの需要が高まっていました。特にユーザー生成コンテンツが増える中、スタイル付きテキストの編集と状態管理が不可欠となり、Draftはその背景で誕生しました。

Draftを学ぶ上でつまづくポイント

Draftでは「EditorState」や「ContentState」といった概念が出てくるため、初学者にとっては理解が難しく感じることがあります。例えば、なぜ状態を2つに分けて管理するのかが直感的にわかりづらいという声がよくあります。Reactのstateとは異なり、Draft特有の構造を持っているため、それぞれの状態の役割と更新の流れを図解などで理解すると習得しやすくなります。

Draftの構造

Draftは、EditorStateとContentStateの2つの状態オブジェクトを使って構成されています。EditorStateはカーソル位置や選択範囲などのUI側の情報を保持し、ContentStateはテキストやスタイルの内容を管理します。これにより、状態を明確に分離しながらリアルタイム編集を実現できます。

Draftを利用する場面

Draftは、Webベースのテキストエディターを構築する際に利用されます。

利用するケース1

たとえば、Facebookの投稿作成画面では、ユーザーが太字やリンク、タグを自由に設定できます。こうした自由な入力を実現するために、Draftが採用されています。ユーザーがボタン操作をするたびにEditorStateが更新され、それに応じてContentStateに反映されるため、UIとデータの整合性が保たれています。また、履歴管理も可能なため、元に戻すといった操作も容易に行えます。

利用するケース2

社内ドキュメント作成ツールで、複数人が同時に同じ文章を編集する場面でもDraftは有効です。リアルタイムの変更内容を保持しつつ、編集中の状態を他のユーザーと共有できます。これにより、チーム全体で同時に1つのドキュメントを完成させる協働作業が可能になります。

さらに賢くなる豆知識

Draftは「Immutable.js」との相性が良く、状態管理において変更不可のオブジェクト構造を前提としています。このため、意図しない副作用を避けられる利点があります。また、プラグイン設計が柔軟で、例えば絵文字対応や画像のドラッグ＆ドロップ機能なども追加可能です。Draft自体はメンテナンスが停止していますが、派生ライブラリ「Draftail」なども活用されています。

あわせてこれも押さえよう！

Draftの理解を深めるには、関連する編集ライブラリや状態管理ツールについても学ぶことが効果的です。以下に5つのキーワードを紹介し、それぞれ簡単に説明します。

• Slate.js

Draftの代替として注目されているリッチテキストエディターライブラリで、より柔軟なカスタマイズが可能です。

• ProseMirror

構文的に文書を扱える高度なエディターライブラリで、文書の階層構造を保持できます。

• React

Draftと同様にFacebookが開発したUIライブラリで、コンポーネントベースの構造を持ち、エディターと高い親和性を持ちます。

• Immutable.js

Draftで使用される不変データ構造ライブラリで、状態の一貫性を保つために活用されます。

• Editor.js

ブロック型エディターとして注目されており、見た目も洗練されたUIが特徴です。

まとめ

Draftについて理解することで、より高度なテキストエディターの設計や、状態管理における構造の重要性を学ぶことができます。業務や開発において、より柔軟で信頼性のあるUIを構築できるようになります。今後のWebアプリケーション開発において、大きな強みとなる知識です。