2021-05-13

Ubieだからこそプロダクト開発を全力で楽しめている

f:id:ngsw_taro:20210512132408p:plain この4月にUbie入社4年目を迎えました。入社当初5, 6人しかいなかったメンバーも今では100人を超えました。プロダクトも成長し、顧客も増えました。入社から3年間で状況は様変わりしましたが、Ubie Discovery*1で働く本質的な楽しさは変わらないどころか、なんなら今が一番楽しいと思っています。本エントリでは、この「楽しい」に集中できる理由と、そうしておけば万事良しの理由について話します。

*1:Ubieという会社は現時点でUbie DiscoveryとUbie Customer Scienceの2大組織で構成されており、僕やエンジニアなどが所属する組織がUbie Discoveryです。詳しくは「スタートアップで、カルチャーが全く違う2つの組織を作った話」をご覧ください。

2021-03-31

いまさらだけどContentEditableをいじって、キャレットの扱いがしんどいということがわかったよ

Web JavaScript

WYSIWYGエディタに憧れてContentEditableをいじってみると、けっこうな底無し沼だと。気づいたときにはどっぷり浸かってるやつ。ググればそれなりに知見が見つかるし、良い感じのライブラリもある。けど僕がやりたかったことは、自分でコードを書いて実現するのが早いんじゃないかなーと思って、沼にダイブした。

やりたいことは、ワープロソフトみたいなやつというよりも、編集しているテキストのスタイルがリアルタイムに変化するMarkdownエディタっぽいやつ。つまりユーザがスタイルを当てるんじゃなくて、ユーザが入力したテキストに応じてスタイルを当てたい。より正確には、テキストの見た目をおしゃれにするだけではなくて、もっと高度な何か、Reactのコンポーネントとか、を埋め込むとかしたかった。

f:id:ngsw_taro:20210331161758g:plain

Draft.jsやEditor.jsのような、ContentEditableを扱いやすくしてくれるライブラリも検討した。 Reactのコンポーネントを埋め込むのも簡単そうだった。ただ、ContentEditableの内容を入力のたびに再構築するような方法を採ると、キャレット（エディタ内にあるテキストが挿入される箇所を示す | これ）が編集箇所とは無関係に先頭とかに飛んでしまう現象があった。パフォーマンス上の懸念はありつつも、ContentEditableの内容を再構築する方法は、ユーザの入力内容を解析してUIに反映する上で一番楽な方法だと思ったので、これを譲りたくなかった。

かくして~~やめときゃいいのに~~素のContentEditableをいじることとなった。