Help us understand the problem. What is going on with this article?

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

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

by Yametaro
1 / 47

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


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

hello.gif


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

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


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のイベント用に作ったから」


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


〜完〜

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away