宣言的UIって何なん？ 〜日本昔ばなし「やめ太郎」〜

昔々、あるところに「やめ太郎」と言う中年ザコーダーがおったそうじゃ。

ある日、やめ太郎はこんな画面をコーディングしておったそうじゃ。

• テキストフォームに文字を入力すると、それと連動して下の文字列も変わる。
• 一番下の行には、それを大文字にしたものが表示される。

という仕組みだったそうじゃ。

HTMLでいうと、こんなイメージじゃ。

<main>
    <input type="text" value="hello!">
    <!-- ↑入力フォーム -->

    <p><!-- 上のフォームに入力した文字列がここに表示される --></p>
    <p><!-- それを大文字にした文字列がここに表示される --></p>
</main>

コードは次のような感じだったそうじゃ。

「大枠となるmain要素を作っておくれ」

const main = document.createElement("main");

「messageの初期値はhello!にしておくれ」

let message = "hello!";

「次はinput要素を作っておくれ」

const input = document.createElement("input");

「そのinput要素のvalueにはさっきのmessage、つまりhello!を入れておいておくれ」

input.value = message;

「そのinput要素に何か入力するたびにinputHandlerという関数が実行されるようにしておくれ」

input.addEventListener("input", inputHandler);

「そのinput要素を、大枠となるmain要素の中に入れてやっておくれ」

main.appendChild(input);

「次はp要素を1つ作っておくれ」

const p1 = document.createElement("p");

「そのp要素の中身は、さっきのmessageを入れておいておくれ」

p1.innerHTML = message;

「このp要素も、大枠となるmain要素の中に追加しておくれ」

main.appendChild(p1);

「次は、p要素をもう1つ作っておくれ」

const p2 = document.createElement("p");

「そのp要素の中身は、さっきのmessageを大文字にしたものを入れておくれ」

p2.innerHTML = message.toUpperCase();

「このp要素も、大枠となるmain要素の中に入れてやっておくれ」

main.appendChild(p2);

「そして、その大枠のmain要素をbodyタグにぶち込んでやっておくれ」

document.body.appendChild(main);

この様に「〇〇しておくれ。次は〇〇しておくれ」と言う、いわゆる「命令的な」コードを書いておったそうじゃ。

面倒くさがりなやめ太郎は、こう思ったそうじゃ。

ワイ「欲しいUIと書くコードが掛け離れてるから、ややこしいなぁ」

ワイ「このUIを構築するためには、こんな命令たちを書いていかなアカンな！」
ワイ「って感じで、頭の中で変換してからコードを書くのがちょっと億劫やな」

ワイ「これくらいシンプルなUIならそれほど苦にならへんけど」
ワイ「もっと複雑な画面を作ることになったら大変そうやなぁ」

ワイ「もっと、求めているUIをそのままコードとして書けたらいいのになぁ」

ワイ「つまり、欲しいパーツと書くべきコードが」
ワイ「もっと対になっている感じだったらええのになぁ・・・」

時は流れ・・・

ある日、やめ太郎は、おじいさんとおばあさんからもらったVue.jsを使って同じUIを作ってみたそうじゃ。

Vue.jsの場合は、次のようなコードだったそうじゃ。

テンプレート部分

<template>
  <main>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
    <p>{{ message.toUpperCase() }}</p>
  </main>
</template>

「{{ message }}の部分は変数の中身が表示されるんやで」

JavaScript部分

<script>
export default {
  data() {
    return {
      message: "hello!"
    };
  }
};
</script>

「messageの値が変わったら、それと連動して画面上の文字列も変更するんやで」

先ほどの命令的なコードに比べると、欲しいUIを比較的そのまま書くことができたため、

ワイ「欲しいUIはこんな感じやで！」

・・・みたいに、宣言する感じで書けてええやん！

「今まで↓こんな感じのコードだったのが・・・」

const main = document.createElement("main");

let message = "hello!";

const input = document.createElement("input");
input.value = message;
input.addEventListener("input", inputHandler);

main.appendChild(input);

const p1 = document.createElement("p");
p1.innerHTML = message;

main.appendChild(p1);

const p2 = document.createElement("p");
p2.innerHTML = message.toUpperCase();

main.appendChild(p2);

document.body.appendChild(main);

「↓こうやもんな！！！」

<template>
  <main>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
    <p>{{ message.toUpperCase() }}</p>
  </main>
</template>

これはええで！！！

やめ太郎は、そんな風に思ったそうな。

欲しいUIを頭の中で一度整理して、

「〇〇しておくれ」
「次は〇〇しておくれ」

という命令に変換しなくても、
Vue.jsのおかげで宣言的にUIを書くことができたやめ太郎。

そのおかげで、コーディングもサクッと終えることができたそうじゃ。

空いた時間で、鬼退治もできたそうな。

めでたしめでたし

まとめ

宣言的UIのメリット

• 「どうやってやるか」じゃなくて「どんなのが欲しいか」で書ける。
• Vueを使うと、htmlのタグっぽく書けるので更にそこが強まる。

おまけ

よめ太郎「Vueだけじゃなくて、ReactだってJSX使えばhtmlっぽく書けるじゃねぇか！」

よめ太郎「Angularだって宣言的じゃねえか！」

よめ太郎「お前の好きなElmだって宣言的じゃねえか！」

ワイ「せやで」

ワイ「でもこのお話は、Vueのイベント用に作ったから」

ワイ「こうするしかなかったんや・・・」

〜完〜