これまでフロントエンドというかSPAは触り程度しか経験なかったので、仕事で本格的に導入する前の勉強としてvueに触れてみようと思う。なるべくサンプルコードと思考の過程を言語化してみる。

私の経歴としては、古くはASPやJScriptだったり、JavaやJSP、JavaScriptで業務系webアプリの開発が一番経歴の中で長い。他にも.net系やSalesforceやAWSやAzureのAPIやらサービス使ってゴニョゴニョしたりしてきた。

なお、今回は Visual Studio Code の利用を前提としておきます。(拡張機能の Live Server があるとコード書きながら動作確認する手間がだいぶ省けるので)

はじめに

公式のガイド(https://v3.ja.vuejs.org/guide/introduction.html)にザっと目を通す。

最初にHelloWorldを試す。HTMLファイルを新規作成して、インストール(https://v3.ja.vuejs.org/guide/installation.html)のページにあるCDNを利用してVueを利用できるようにscriptタグを挿入しておく。

study01.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Study01</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

</body>
</html>

次にJSファイルを作成。メッセージ ”Hello World” を data として持つVueオブジェクトを定義して、id が app の divエレメントにマウントするように定義する。

study01.jp

const HelloWorldApp = {
  data() {
    return {
      message: "Hello World"
    }
  }
}

Vue.createApp(HelloWorldApp).mount('#app')

HTMLに id が app の divタグを追加して、メッセージを出力するように中括弧二つで囲った命令文を記述する。

study01.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Study01</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

  <div id="app">
    {{ message }}
  </div>

  <script src="./study01.js"></script>
</body>
</html>

ブラウザで動作チェック。message にセットした文字列が表示されることを確認。

ここまでは 宣言的レンダリング の例。次にもう少しVueっぽいことをしてみる。

mounted を試す

Vueインスタンスに mounted を追加して、1秒(1,000ミリ秒)ごとにカウントアップしてみる。

study01.js

const HelloWorldApp = {
  data() {
    return {
      message: "Hello World",
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}

Vue.createApp(HelloWorldApp).mount('#app')

HTMLにカウンターを表示するように追記する

study01.html

HTMLにカウンターを表示するように追記する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Study01</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

  <div id="app">
    {{ message }} : {{ counter }}
  </div>

  <script src="./study01.js"></script>
</body>
</html>

ボタンをクリックすると message を alertで表示することができた。

とりあえず、今回はここまで。

Categories: Tech

0 Comments

Leave a Reply

%d bloggers like this: