LoginSignup
1
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-08-22

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

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.


一方で、Vue.jsを使った宣言的方式では、構築したいDOMを最初から宣言することになる。

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

v-showはVueが提供するディレクティブの一つで、isVisibleという変数が真の場合に対象要素<p>を表示し、偽の場合に表示しないという意味を持つ。

どういうことを実装したいのかはHTMLのテンプレートを見るだけでわかる。JavaScriptでやるのはボタンをクリックすると文字列の表示をコントロールする変数の値が逆転する関数を定義すること。実際のDOM操作はフレームワークがやってくれる。

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

動く実例は以下を参照。

See the Pen Declarative sample by shiiyan (@shiiyan) on CodePen.

感想

宣言的方式とインタラクティブUIとの相性がいい。上記のような簡単な例では大差ないが、宣言的方式は明示的に状態管理の変数が存在し、複雑なインタラクティブUIを実装する時に、直接DOMをいじることより、状態変数をいじった方がやりやすい。

宣言的に方式はコード全体の見通しが良い。特に最初から実現したいHTMLテンプレートを記述することによって、HTMLからコンポーネントの設計が可能となり、高度なデザインを実装する難易度を下げられる。また、後からスタイルや表示内容の修正箇所の特定にも貢献する。

宣言的に方式により、画面表示と状態管理が別々のコンポーネントで定義することも可能となり、良い設計の起点となるかも。

参考

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1