前回までのあらすじ

サイトが作れましたね

#2では、サイト立ち上げから1ページの編集までやりました。index.vueを編集すれば、自分好みのWebサイト・アプリが作れるまでいきました！ですがそもそも「Vue」ってなんだ？フロントの処理ってどうやるんだ？って方が多いかなと思います。そこで今回はvueについて解説していきます。これを見れば、フロント(ボタン処理やデータ入出力など)を一通りできるようになります！

Vue(Nuxt)を使ってみよう！

そもそもVueとは？

Vue.js（通称 Vue）は、JavaScriptフレームワークの1つで、ユーザーインターフェース（UI）を構築するためのフレームワークです。Vueは、モダンなウェブアプリケーションの開発を簡素化し、柔軟性を提供することを目的としています。主な特徴と機能はこんな感じです。・HTMLとJavaScriptを組み合わせて使えるので、状態とビューが同期しやすくなります。・コンポーネントベースの開発ができます。全体をいくつかの小さな部品に分割できるので、再利用性を高めることができます。・ソースを編集すると、それに依存するビューが自動的に更新されます。（ホットリロード）・v-if などのHTMLだけではできない特定の振る舞いや操作を追加することができます。・ルーティング、状態管理、フォーム処理などのさまざまなライブラリやプラグインが利用できます。

、、、要するに、「くっそ書きやすい、Htmlとjsがっちゃんこしたやつ」と思ってもらえれば大丈夫です。笑

とりまやってみる

解説は一旦おいといて、実際にVueで何かやってみましょう！やってるうちにわかってくる、みたいなこともありますしね！今回作るのは「電卓」です！、、、え？初っ端から難しそうだって？大丈夫ですよ。やってみると結構シンプルです。「思ったほどでもねぇな」ぐらいです。笑まずは完成版ソースをお見せします。

 <template lang="pug">
.container
  .card.p-4.m-2#calculator
    .display
      p.subtitle(v-if="firstOperand") {{ displayValue }}
      p.subtitle(v-else) 入力してね
    .columns.is-mobile
      button.button.is-info.column(@click="appendNumber(7)") 7
      button.button.is-info.column(@click="appendNumber(8)") 8
      button.button.is-info.column(@click="appendNumber(9)") 9
      button.button.is-info.column(@click="setOperator('/')") /
    .columns.is-mobile
      button.button.is-info.column(@click="appendNumber(4)") 4
      button.button.is-info.column(@click="appendNumber(5)") 5
      button.button.is-info.column(@click="appendNumber(6)") 6
      button.button.is-info.column(@click="setOperator('*')") *
    .columns.is-mobile
      button.button.is-info.column(@click="appendNumber(1)") 1
      button.button.is-info.column(@click="appendNumber(2)") 2
      button.button.is-info.column(@click="appendNumber(3)") 3
      button.button.is-info.column(@click="setOperator('-')") -
    .columns.is-mobile
      button.button.is-info.column.is-5(@click="appendNumber(0)") 0
      button.button.is-info.column(@click="calculate()") =
      button.button.is-info.column(@click="setOperator('+')") +
</template>

<script setup>
const displayValue = ref("0");
const firstOperand = ref(null);
const operator = ref(null);
const waitingForSecondOperand = ref(false);

const appendNumber = (number) => {
  if (waitingForSecondOperand.value) {
    displayValue.value = String(number);
    waitingForSecondOperand.value = false;
  } else {
    displayValue.value =
      displayValue.value === "0" ? String(number) : displayValue.value + number;
  }
};

const setOperator = (op) => {
  if (operator.value !== null && !waitingForSecondOperand.value) {
    calculate();
  }
  firstOperand.value = parseFloat(displayValue.value);
  operator.value = op;
  waitingForSecondOperand.value = true;
};

const calculate = () => {
  if (operator.value === null || waitingForSecondOperand.value) return;
  const secondOperand = parseFloat(displayValue.value);
  let result = 0;

  switch (operator.value) {
    case "+":
      result = firstOperand.value + secondOperand;
      break;
    case "-":
      result = firstOperand.value - secondOperand;
      break;
    case "*":
      result = firstOperand.value * secondOperand;
      break;
    case "/":
      result = firstOperand.value / secondOperand;
      break;
    default:
      break;
  }

  displayValue.value = String(result);
  operator.value = null;
  firstOperand.value = result;
  waitingForSecondOperand.value = true;
};
</script>

<style lang="scss" scoped>
#calculator {
  max-width: 300px;
}

.display {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

※別記事より解説したPugとBulmaを使用しています。どうでしょうか？本当にシンプルでしょ？では、部分部分で解説します。

【解説】ソースの見方

よくみるとソースは、・Html部分：template ~ ・Js(Ts)部分：script setup ~ ・Css(scss)部分：style lang="scss" ~ に分かれています。つまり、そう言うことですね。笑 Html部分にはHtml関連を入れればいい、ってことですね。笑

【解説】今回使う変数や関数の説明

displayValue：表示される数字や計算結果 firstOperand：+などの演算をする時の、最初の数値を記憶するためのもの operator：選択した演算子 waitingForSecondOperand：第二の数値が入力されたかのフラグ appendNumber：数字を押したときに表示される数値を更新する setOperator：演算子を設定する calculate：計算を行い、結果を表示する

そして、Nuxt3では refを使わないと値の保持ができません。どういうことかというと、今回 const displayValue = ref("0") のように宣言(この名前の変数にこんな値を入れた)したんですが、普通のJavaScriptとかだと変数は、 let displayValue = "0"とするのですが、これだと入力とかボタンで処理で値が変わってもそれが反映されないんですよね。（データが保持されないという）そのために ref("~")のようにしましょう。またそのrefを使っているため、script内で変数を使う際は .valueをつける必要があります。（displayValue.value = "1"）

【解説】ボタン処理について

ボタンの処理では @click="関数"となっています。これで、そのボタンを押せばその関数が走る(処理される)ようになります。通常は v-onという形で記述するのですが、@として略すことができます。(v-on:click="関数" = @click="関数") 他にもこういう@系では、@clickの他にも入力フォームで使える@changeや@enterのようにたくさんあるので違う記事でもしかしたら紹介するかもしれません。お楽しみに！

【解説】v-ifとかについて

 p.subtitle(v-if="firstOperand") {{ displayValue }}
p.subtitle(v-else) 入力してね

この v-ifとv-else は単純に条件分岐です。この場合で言うとfirstOperand != null (省略してfirstOperandのみでもOK)の場合は {{ displayValue }}を出し、それ以外は"入力してね"を出す、と言う感じです。また、{{ ~~~ }} はjs部分のものを出すときに使います。今回だと displayValueの値が表示されます。他にもよく使うのは、v-else-ifや v-forがあります。文字通りelse if(条件分岐)文、for（繰り返し）文です。

まとめ

こんな感じでNuxt3で結構簡単に電卓が作れましたね！普通に　Html,Js,Cssでやると３ファイル必要になり、しかもv-ifや@clickの部分はHtml,Jsのみでやると結構めんどくさくなるので、皆さんもくっそ楽なNuxt3で色々開発してみてください！