モダンなJSフレームワークは宣言型プログラミングを選ぶ

モダンなJSフレームワークであるVue.jsやReactなどは宣言的という特性を取り柄としている。

Reactの公式サイトによると、宣言的なViewを

アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。

宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

と解釈している。

この記事では、宣言的方式なとそうではない方式との違いを理解した上で、なぜモダンなJSフレームワークは皆宣言的方式を選ぶのかについて考える。

宣言的プログラミングと命令的プログラミング

Wikipediaにあるわかりやすい定義によると、宣言的プログラミング（Declarative programming）は「何を得たい」というWhatの部分を記述し、命令的プログラミングは（Imperative programming）　は「どうやって得るか」つまりHowの部分を記述する。

具体例を挙げる。

文字列の表示をコントロールするボタンを作るとする。

命令的方式では、DOM（Document Object Model）に対して、文字列やボタンなどのHTML要素の生成と表示/隠すロジックの実装を逐一記述することが必要。最終的にDOMがどういう風になるのかはコードからでは分からない。

const ctn = document.getElementById("container");

const txt = document.createElement("p");
txt.className = "text";
txt.id = "text-to-toggle";
txt.innerHTML = "This is sample text.";

const btn = document.createElement("button");
btn.innerHTML = "toggle text";
btn.onclick = function (event) {
  const txt = document.getElementById("text-to-toggle");
  txt.classList.toggle("hidden")
};

ctn.appendChild(txt);
ctn.appendChild(btn);

動く実例は以下を参照。

See the Pen
Imperative Sample by shiiyan (@shiiyan)
on CodePen.

<div id="container">
  <p v-show="isVisible">This is sample text.</p>
  <button @click="toggle">toggle text</button>
</div>

var app = new Vue({
  el: "#container",
  data: {
    isVisible: true
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
});