値の変化に追従する UI を作成するのに便利

今まではほとんど普通の HTML と CSS によるアプリケーション開発でした。

ここからは、React や Vue といったモダンなライブラリ/フレームワークの真価が発揮される機能を扱っていきます。

まずは次のアプリを見てください。

参考コード

クリックすると表示される値が 1 増える
<template>
  <div id="app">
    <button @click="plusNumber">{{ number }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  methods: {
    plusNumber() {
      this.number = this.number + 1;
    }
  }
};
</script>

<style scoped>
button {
  font-size: 30px;
}
</style>

ボタンをクリックすると、表示される値が増えていくアプリケーションです。

まだどのようになっているのか完全に理解しなくてもかまいません。

値の変化に追従していく UI を持ったアプリケーションです。こういった場合にモダンフレームワークは非常に便利です。

次の講義より、少しずつこのコードを理解していきましょう。