Ryo.gift | Web developer blog

Web開発者のブログです。

直接DOMを更新する問題

最近、新規にアプリを開発するときの技術選定でSPAを導入するケースが多くなりました。SPAとはSingle Page Applicationの略で単一のWebページのみで構成されており、ユーザーの操作や各種イベントによって非同期でサーバーと通信後、必要なデータを受け取り、一部の要素を更新します。SPAを導入する際の代表的なJavaScriptフレームワークにはReact、Vue.js、Angularがあります。これらのフレームワークを使うことで、自然とベストプラクティスやデザインパターン(Observer パターン)の恩恵を受け取ることができます。私は先に業務でVue.jsを使う機会に恵まれましたが、なぜ、こんな実装をしているのかが理解出来ていませんでした。後になって「JavaScript Primer」という書籍を読みながら、「こういうことだったのか」と感動しています。その書籍を読み進める中で1つ、SPAを使うかどうかの判断材料になる点がありましたので部分的ではありますが、メモ程度にまとめた内容を残しておきたいと思います。

直接DOMを更新する問題

  • 対象の要素の状態がDOM上にしか存在しないため、状態をすべてDOM上に文字列で埋め込まないと管理できない。
  • 操作に対して更新する表示箇所が増えてくると、表示の処理が複雑化する。
  • 状態を管理するmodelを導入することで拡張性は高まるが、コード量が増える。

引用元: イベントとモデル · JavaScript Primer #jsprimer

技術選定のときにリッチなUIを多用するWebアプリであるかが、SPAを導入する際のポイントになるのではないでしょうか。例えば、直帰率の高いサイトではSPAは不要になると思います。新しい技術を導入するかどうかを適切に判断できると楽しいですね。