仮想DOMを利用しない場合のJSアーキテクチャについて

Question

前提

現在、フロントエンドのコーディングを行っています。
PaaSで送信された静的HTMLに対して、JavaScriptで機能を被せるような形です。
（リアルDOMに対する操作が基本なので、仮想DOMは利用できない想定です。）

複数のAPI通信とイベント動作を持たせる予定なので、管理が複雑化する恐れがあります。
そのため、MVCやMVVMのアーキテクチャを取り入れようと思っています。

発生している問題・エラーメッセージ

上記の通り、仮想DOMを利用しない場合でも、reactやvueを利用するメリットはあるでしょうか。
jQueryあたりを利用する想定ですが、自前でアーキテクチャを考えたほうが良いでしょうか。

Comments

[yambejp]

具体的に何をどうしたいというのはないのでしょうか？

[maisumakun]

「仮想DOMを使用しない」で「ReactやVueを利用する」とはどういう意味でしょうか。

[maisumakun]

「ReactやVueで何かを描画する」=「仮想DOMを使用する」です。

[takashiaihara]

みなさま、ありがとうございます。
ReactやVueでは、MVVMのアーキテクチャが使用されているということで、
その考え方のみ流用できないか、という背景でした。
MVVMにおけるViewの部分のみ、仮想DOMを使用しないリアルDOM操作に置き換えられれば
雑なイベント管理が避けられるのではと思っていましたが、申し訳ありません。私の勉強不足です。

今回の案件で、モダンなJSライブラリを使用できればスキルアップにつながるのではと
上司を説得できる材料を探していましたが、難しそうですね。

こちらの質問は、しばらくしたら削除します。
ありがとうございました。

[maisumakun]

> ReactやVueでは、MVVMのアーキテクチャが使用されているということで、

いえ、ReactやVueはビュー部分のみです（MVVMの仕組みを作るのに使うことはできます）。

[takashiaihara]

ありがとうございます。
いい経験になりそうなので、一旦自前で構成部分を考えながら試行錯誤してみた上で、
Reactなどに挑みたいと思います。

Answer 1

仮想DOMではなくテンプレートですよね？

参考記事: 仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう

---

reactやvueを利用するメリットはあるでしょうか。

メリットは大いにあります。

とあるAPIが静的HTMLを返してきたとしましょう。
それはdangerouslySetInnerHTMLで任意のDOMの配下にぶら下げる事が可能です。

DOMツリーで見るとこんな感じ

- Reactで管理出来ている領域
  - モーダルボックス
  - コンフィグ
  - APIとHTTP通信を行う箇所
  - APIから送られてきたHTMLをベタッと貼り付ける領域

こんな感じでReactで作った巨大な管理画面世界の中に、
ベタッとHTMLを貼り付けて、上から操作する仕組みを用意してしまえば楽に実装出来ます。

JavaScriptにはバブリングを利用したイベント移譲が可能です。
どうせ奥のHTMLがドラスティックに変化したら即死なのはjQueryでもReactでもVueでも一緒なので、
event.target.closestからCSSセレクタで要素を確認して当てはまるなら実行みたいなイベントを作って行けば問題ありません。

また、特定の箇所からHTMLをぶら下げるということは、
親の要素はReactやVueの世界によりやりたい放題ですよね？

CSSの子孫セレクタを使って上にactiveクラスが存在しないので、
下の要素の○○は非表示にしますみたいな事である程度の見栄えは変えられます。

.item {
  display: none;
}

.active .item {
  display: block;
}

---

ReactとjQueryの共闘も可能

高度な事がやりたい場合、
払い出されたHTMLをベタッと貼り付けるだけでは実現出来ない可能性があります。

jQueryは現状ブラウザが読み込んでいるdocument.bodyから探索していく手法もありますが、
HTML文字列をベタッと貼り付けると、閉じた世界でDOMツリーを作って探索できます。

払い出されたHTMLの内部を探索して、
必要な情報だけ吸い上げて、不要な情報は捨ててしまえば良いのです。
後はフルReactやVue.jsだけで表現して好き勝手やれば問題ありません。

---

jQueryでやるのはオススメしない

基本的にjQueryやネイティブJavaScriptでDOMをいじるのはやめたほうがいいです。
そもそもJavaScriptには「変化しろ！」という命令しか存在しないので、
壊れたDOMは二度と元に戻りません。
（戻れという命令が無いんですね）

結局コピーをとったりなんやかんややり始めると、
自分の作った管理エリアからAPIから払い出されたHTMLをぶら下げるというやり方になります。
やっている事はバグだらけのオレオレReactな訳で、工数増えるだけの無駄な作業です。

今はjQueryの方が超詳しくて、ReactやVueは全然なんだ……
だから一度jQueryで実装してみるんだ……ならまだわかります。
しかしゼロベースでどちらが相応しいかで考えた場合、絶対にJSフレームワークを使うべきです。