PHP 初心者が WordPress の プラグイン 作成 ！ part33 ( ココナラの公開設定を調査 その3)
この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part33 ではココナラのフロントエンドで使用されているJavaScriptを調査してみます。
前回から通常のブラウザを使用して、ココナラの公開設定を調査しています。
PHP 初心者が WordPress の プラグイン 作成 ！ part32 ( 通常のココナラの公開設定を調査 その2)
オブジェクトに直接代入しただけでは「入力した」と検知されないことがわかってきました。
さてどうしたものか。
フロントエンド
さらに調査を進めると、ココナラでは「Nuxt.js」と「Vue.js」というフロントエンドのフレームワークを使用していることがわかりました。
Nuxt.jsはサーバサイドレンダリング(SSR)のフレームワークのようなのでほおっておいて・・。
昨今Reactに次ぐ人気のVue.jsです。これでピンときました。
ここから推測
このフレームワークで使用されているメカニズムは「仮想DOM」です。
「公開設定」ボタンをクリックした際に値の参照先は「仮想DOM」らしいのです。
ヘッドレスブラウザからタイトルの部品に入力していたDOMはいわば「実際のDOM」でした。
ヘッドレスブラウザからの入力では「仮想DOM」には届かず(反応せず)クリックしても「タイトルを入力してください」と表示されていたようです。
仮想DOMに届け！
仮想DOMに届かないのは実際のDOM操作を「管理外」から操作してしまったためです。
では管理されている状態で変更することはできないのか。調べてみました。
JavaScript – [Vue]INPUTの内容が管理外で変更されたときデータに値を反映するには｜teratail
同じように悩まれている方を発見。アンサーでは
DOMの直接操作が必要になる場合は、カスタムディレクティブを使用するのがVueでは一般的な方法だと思います。
と回答をもらっています。
以下、カスタムディレクティブの解説サイトです。
カスタムディレクティブ — Vue.js (vuejs.org)
・・・よくわかりませんでした(笑
なのでこちらの記事を読んでみました。
Vueで直接DOMノードを参照するプロパティを知ってｱﾊ体験したのでまとめてみた – Qiita
$elや$refsというプロパティが重要なようです。
そうなのか・・・わけもわからず延々とコンソールをいじっていたらいきなりなんかできました！
__vue__って何・・・$elは？・・・謎すぎます。
まとめ
通常のブラウザを用いてココナラのNuxt.jsとVue.jsを調査しました。
わかったことは
- Vue.jsの管理外からDOMを操作しても仮想DOMに反映されない。
- いろんなサイトでは$elを使うと操作できると書いてありましたがなぜか__vue__プロパティを使うと操作できた。
ということです。次回は過程を少し解説して次に進めたらと思います。
今日はここまで！