ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント
今回は、技術選定の背景や使用感・工夫したことなどを書いていきたいと思います。
ノート共有型SNS『eeNotes』の投稿フォームにreact-quillを採用した理由や、カスタマイズのポイントを詳しく解説！
Quillって何が出来るの？様々なテキストエディタに関するライブラリが公開されている中でどうしてreact-quillを選定したの？比較したライブラリ郡ToolBarのカスタマイズについてQuillのデータ構造 DeltaについてDeltaフォーマット文字列の変更検知続きはその2で！おまけ
Quillって何が出来るの？
以下のようなリッチなテキストエディタを簡単に導入することが出来ます。
様々なテキストエディタに関するライブラリが公開されている中でどうしてreact-quillを選定したの？
GitHubでStar数が多かったライブラリを以下のような観点で比較し、判断していきました。
- テキストの色・背景色を簡単に変えることが出来るか
- eeNotesには、カーソル選択した文字に対してマークという背景色を変えて目立たせる機能があります
- Readonlyのプレビューモードが可能か
また、GitHubのCommit履歴などからメンテナンスが行われていることが確認でき、GitHubのStar数も3.7k(本家のQuillは27.4k)React製のテキストエディタライブラリで多かったことも理由の1つです。2020/08/23時点
比較したライブラリ郡
Quillの他に以下のライブラリも比較しました。
比較検討した詳細については、以下の記事を見てもらえると幸いです😄
次に導入する上で工夫した点の紹介をしていきたいと思います。
ToolBarのカスタマイズについて
QuillではToolBarを自由にカスタマイズすることが出来ます。eeNotesのToolBarは以下のように定義して組まれています。
- Config/quill.js
Quillのデータ構造 Deltaについて
QuillはというJSONのような独自形式で文字列の内容が管理されています。
Deltaフォーマット
- delta
文字列の変更検知
text-changeイベントを登録することで、文字列に変更があるたびに以下のフォーマットで検知することが出来ます。
- delta
続きはその2で！
ノート共有型SNSの投稿フォーム実装についてご紹介 その2
おまけ
eeNotesのチームメンバーがそれぞれ記事を書いてくれているので、ぜひ見てみてください！
関連記事：
ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント2024/6/5 23:272025/3/4 0:17ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック2024/6/5 23:272025/3/4 0:18テキストエディタライブラリ比較【前編】react-quill & Editor.jsの特徴と選定ポイント2024/6/5 23:272025/3/4 0:15テキストエディタライブラリ比較【後編】PELL & trixの特徴と選定ポイント2024/6/5 23:272025/3/4 0:13小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる
── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。
「自分の可能性をもっと広げたい」
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」
そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
🌐 詳しいプロフィールはこちら
https://obata-tomu.jp/