Vue.jsで入力フォームにリアルタイムハイライト機能を自前実装した話

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Copyright coconala Inc. All Rights Reserved. ● 社内では「よしみん」と呼ばれています ● 会う度に髪色が違うと言われていました ○ 最近は金髪に落ち着き気味 ● 新卒では営業、総務を経て ● 2019年エンジニアへキャリアチェンジ ○ サーバーサイド、フロントエンド両方経験 ● 2022年フロントエンドエンジニアとして中途入社自己紹介 1 4 吉見夢輝（Yumeka Yoshimi）株式会社ココナラプロダクト開発部フロントエンド開発グループ経歴

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright coconala Inc. All Rights Reserved. やりたいこと 3 9 textareaにcssで装飾することはもちろんできます！が、入力した文字に対するハイライトのような装飾の仕方はできません。 [Q] cssで装飾するだけじゃない？ textarea { color: #fc6674; } textarea { background-color: #fc6674; }

Slide 10

Slide 10 text

Copyright coconala Inc. All Rights Reserved. やりたいこと 3 10 Vue.jsでtextareaにハイライトをつける機能のライブラリを調べると、下記のようなライブラリがヒットします。・vue-hilight-textarea：https://github.com/deerchao/vue-hilight-textarea 今回実装したいのは、 UIフレームワークを使用している入力フォーム（既に textareaがラップされている）※ 1 を使用している箇所 UIフレームワークには既に textareaが含まれている為、textareaを含むライブラリ使用だと難しい [Q] ライブラリを使えば簡単に実装できるのでは？ ※1を、さらにラップして使用できるようなハイライト機能コンポーネントを自前実装する

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright coconala Inc. All Rights Reserved. 実装内容 4 14 1.ハイライトを適用したい文字を判定してハイライト処理するメソッドを用意する   const replaceHighlightsText = (val: string) => { const escapeTextValue = val.replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, ''') let newTextValue = escapeTextValue .replace(/ハイライト/g, '$&') if (!newTextValue.match(/
$/)) { newTextValue = `${newTextValue}
` } textValue.value = newTextValue.replace(/\r?\n/g, '
') } ハイライトしたい文字列を判定し、 markタグで囲う（今回は「ハイライト」の文字列）入力された文字をエスケープ処理 &,<,>,",'の文字を文字コードに置き換える改行コードを
タグに置き換える textareaタグでは改行コードで改行されるが、今回見た目は　　　　　　　のdivタグとなるハイライト要素 ※textValue.value ハイライト要素のv-htmlに適用している文字列

Slide 15

Slide 15 text

Copyright coconala Inc. All Rights Reserved. ${el}から${property}のstyleを取得するメソッド実装内容 4 15 2.textareaの装飾をハイライト要素に適用するメソッドを用意する const synchronizeStyle = () => { if (!$textField.value) return Object.assign(backdropStyle, { width: getStyle($textField.value, 'width', false), height: getStyle($textField.value, 'height', false), letterSpacing: getStyle($textField.value, 'letterSpacing', false), font: getStyle($textField.value, 'font', false), borderWidth: getStyle($textField.value, 'borderWidth', false), borderStyle: getStyle($textField.value, 'borderStyle', false), padding: getStyle($textField.value, 'padding', false), caretColor: getStyle($textField.value, 'caretColor', false), backgroundColor: getStyle($textField.value, 'backgroundColor', false) }) } 入力フォームコンポーネント内のtextarea ※$textField.value ※backdropStyle ハイライト要素をラップしている styleオブジェクト ※getStyle(el, property, numericalize)

Slide 16

Slide 16 text

Copyright coconala Inc. All Rights Reserved. 2で作成したメソッド textareaの装飾をハイライト要素に適用する実装内容 4 16 3.1,2で作成したメソッドを画面表示時に呼び出す   onMounted(() => { if (!textFieldHighlighter.value) return const el = textFieldHighlighter.value.querySelector('textarea') if (!el) return $textField.value = el replaceHighlightsText(el.value) synchronizeStyle() listenEvents() }) 1で作成したメソッドハイライトを適用したい文字を判定してハイライト処理する入力フォームコンポーネント内のtextareaを取得 ※4で説明 textareaのinputイベントへハイライト処理をイベントリスナー登録する

Slide 17

Slide 17 text

Copyright coconala Inc. All Rights Reserved. 実装内容 4 17 4.textareaのinputイベントへハイライト処理をイベントリスナー登録する   const onInput = e => { replaceHighlightsText(e.target.value) } const listenEvents = () => { if (!$textField.value) return $textField.value.addEventListener('input', onInput) } 1で作成したメソッドハイライトを適用したい文字を判定してハイライト処理する入力フォームコンポーネント内のtextarea ※$textField.value

Slide 18

Slide 18 text

Copyright coconala Inc. All Rights Reserved. 実装内容 4 18 4.textareaのinputイベントへハイライト処理をイベントリスナー登録する   const removeEvents = () => { if (!$textField.value) return $textField.value.removeEventListener('input', onInput) } onBeforeUnmount(() => { removeEvents() }) 入力フォームコンポーネント内のtextarea ※$textField.value 登録したイベントリスナーは残り続けてしまうので、イベントリスナーの解除も行う

Slide 19

Slide 19 text

textareaを含んでいるコンポーネントを配置するハイライト要素をラップしている要素ハイライト要素

Slide 20

Slide 20 text

Copyright coconala Inc. All Rights Reserved. 実装内容 4 20 リアルタイムハイライト機能のコンポーネントの style .textFieldHighlighter { position: relative; &_backdrop { position: absolute; z-index: 10; overflow: auto; pointer-events: none; border-color: transparent; } &_highlights { height: 100%; white-space: pre-wrap; word-wrap: break-word; color: transparent; position: relative; mark { color: transparent; background-color: #fc6674; // ハイライトの色指定 opacity: 0.2; } } textarea { display: block; z-index: 11 !important; margin: 0; background-color: transparent; overflow: auto; resize: none; } } ハイライト要素ハイライト要素をラップしている要素入力フォームコンポーネント内のtextarea

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Copyright coconala Inc. All Rights Reserved. 詰まりポイント 5 24 const onScroll = e => { if (!$textField.value) return Object.assign(highlightsStyle, { height: `${getStyle($textField.value, 'height') + e.target.scrollTop}px`, top: `-${e.target.scrollTop}px` }) } イベントリスナーの登録と解除を行う $textField.value.addEventListener('scroll', onScroll) $textField.value.removeEventListener('scroll', onScroll) 入力フォームコンポーネント内のtextarea ※$textField.value onMounted時 onBeforeUnmount時 ※highlightsStyle ハイライト要素のstyleオブジェクト

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright coconala Inc. All Rights Reserved. 最後に 6 27 More Info ココナラエンジニアのX(Twitter) X /Twitter（@coconala_eng） https://twitter.com/coconala_eng 採用ホームページ https://coconala.co.jp/recruit エンジニア採用ホームページ https://coconala.co.jp/recruit/engineer ココナラの人と組織を伝えるブログココナラLIVE https://blog.coconala.co.jp/m/m4e4abe8b17e5 人生の可能性を広げたユーザーストーリーわたしのスキル解放記 https://blog.coconala.co.jp/m/me8a586112ad2 ココナラに所属するエンジニアによるブログテックブログ https://zenn.dev/coconala

Slide 28

Slide 28 text

Slide 29

Slide 29 text

一人ひとりが「自分のストーリー」を生きていく世の中をつくるユーザーにとって見えていなかった無数の可能性の扉を開く、そこにエンジニアとして一緒に貢献しませんか。