Souta Tech Blog.

デザインもパフォーマンスもいいおしゃれなエディタを作りました。投稿日: 2022年 2月11日

そもそも論

最近コロナウイルスが絶賛流行っていて自粛生活の佐々木です🌳
最近少し忙しかったです。(言い訳でしかありません。)
自分自身、acvationというサイトを今年に入ってから本格的に開発をしています。
その中で自分がプロダクトとして最大限に提供したい価値として
誰でも簡単に投稿することができて、UI的にも優れていくれるものに変換してくれるといったものが必要不可欠だと考えます。
その部分を考えたときに自分なりの要件として

  1. 簡単にカスタマイズすることができる。
  2. 前回と比べて格段に投稿しやすいプロダクトにする
  3. プレビューをさらに実用的にそしてフォーカス時などのパフォーマンスも落とさないようにする

という部分を特に意識指定開発していこうと思っていたのが背景です。
また、実際にこの要件を満たすコードを書いていたところ詰まる部分などがとてもたくさんあり、
自分自身最初はそれほど難しいものではないと思っていたのですが、いざ開発してみると
ドキュメントのコードがうまく動かなかったりプレビューを導入するならではの難しさなどがあったので共有させていただきます。😀

実際に取り組んでみて

実際に考えから開発にするまでは一週間ほどかかりました。(元々の予定は3日間ぐらいで完成できると思っていました。)
まず最初に「react リッチエディタ」のように調べてみたら
とても有名なdraft.jsというライブラリを見つけて
実績としても申し分なくドキュメントを読んでみても使いやすそうだったので使ってみました。
→ 世の中の誰かが作っていただいたライブラリなどを使用してみてよければプロダクトに落とし込むの本当に好きです笑

実際に作ってみたんだけど?

まずは簡単にドキュメント通りに進めてみましたが早速問題が起こりました
え、ツールバー自体は利用することができないの??
というのもライブラリを入れてインポートすればデザイン周りも含め全てやってくれると思いましたが全然そんなことありませんでした笑
普段どれだけ頼っているのかがとても感じることができた瞬間でした。

そういうことなら自分で作ってみようと思ったところで実際にdraft.jsを中心としているものの
他のライブラリを多用してやってみた時にとてもしっくりくるものがあったのでそちらのスタイルシートを使って開発をしました。

やってみた感想

実際に実装完了して現在は運用していますが ← 是非使ってみてください🔥
個人的にかなり難しい部分がとてもありました。
当初はただ単に入力された文字をhtmlに変換して表示させるというだけしか思っていなかったのですが
そのHTMLに変換するときに装飾された部分をどのようにプレビュー表示できるのかどうかという部分にかなり苦戦しました。

どんなことあったの?

例えばなんですけど

//typeになっていないのが原因である。
// const editorRef = useRef<Editor>(null)
// ref設定をしないと意図しない挙動をする
// ref={editorRef}

refの部分をしっかりと設定しなかった時に今までの文字が突然コマ切れのように表示されるようになったり。
こんな感じでどう分割して表示するかを考えていました。

  const inlineStyle: DraftInlineStyle = editorState.getCurrentInlineStyle()
  console.log('class', inlineStyleHandler(inlineStyle))
  console.log('state', editorState)
  const splitHTML = (htmlTemplate: string) => {
    const split = htmlTemplate.split(/[]/)
    console.log(split)
  }

さらにエディタの部分はしっかりとこだわりたかったので本当に利用する価値のある機能のみのミニマムな構成にしようと思いました。
そのためオプションの選択が難しくなってしまった。。。
また、実際にコンソールで見たときに自分なりのロジックなどや正規表現などを用いて分割することができたりしたのですが
どのようにそのロジックを文字変換に変更しようという部分はかなり難しく
コード的にも冗長な部分がとてもあるメソッドとなっており、メモ化できる部分もたくさんあるためまだまだ修正は必要そうです。。。

今後の課題

acvationの課題部分にも記述させていただきましたがまだまだ未完成な部分がとても多いと考えております。
その中で自分なりに特に注意したいものになっているのは

  1. デザイン部分が完全に自分の主観で作っているので本当にユーザーが使いたいと思うニーズを満たすことができているのか ← やはりデザインのセンス😭
  2. 情報自体をステートで持っているのでもし途中で接続などが切れてしまったら再レンダリングされることになり入力していた情報が消えてしまう。
  3. 一つの処理の部分がそれぞれとてもウォッチしていて重いものになっているのでさらに高めることができるのではないのか

などを特に考えております。
また、もっといいプロダクトよりのライブラリなども改めて調べてみるとありそうなので
とりえずこの機能は実装完了として
時間の余裕があれば是非再度付け加えたいと思っています。📝
また、プロダクト自体さらにユーザーに寄り添って使いやすいものになるように精進してきます。

 これからは実際にどのようにコードを記述したかなども含めて共有することができればと考えているので楽しみにしてください!! 
また、少しずつわかりやすいように記述していけるように努めます。