Windowsで、GUIを使ったサクサクvue.js開発してみる

FNCT創造工学演習、予備実験向けにハンズオンを作成しました。

## 事前準備
[こちらの記事の「node.jsをインストールする」](https://qiita.com/hIDDEN_xv/items/7b1230c237eba392e525#nodejs%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)を参考に、開発PCにnode.jsをインストールしてから、下記ハンズオンを進めてほしい。

## vue.js開発環境をセットアップする
vue.jsの開発環境を構築する。
コマンドプロンプトを開いて、下記コマンドを実行しよう。

```:コマンドプロンプト
> npm install -g @vue/cli
```

vue.jsが正しくインストールされているかを確認。
下記コマンドを実行して、バージョン番号が表示されるか確かめよう。バージョン番号は、インストールを実行するときによって上がっているかも。

```:コマンドプロンプト
> vue --version
3.6.3
```

## vue.jsプロジェクトを作成する

vue.jsの開発用GUIを起動しよう。
下記コマンドを実行すると、しばらく待つとブラウザで開発コンソールのページが開かれるはずだ。

```:コマンドプロンプト
> vue ui
```

ブラウザで以下のページが表示されれば、vue.js GUI環境の起動は成功だ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/12769535-d665-35c0-1456-d11b3687843d.png)

ここからプロジェクトを作成していこう。
「作成」タブに移動して、「＋ ここに新しいプロジェクトを作成する」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/9db2b66f-5ff3-3089-a23c-da10a3de2247.png)

最初にプロジェクト名を入力する。他の項目は、いったんそのままでOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/571394fe-5743-959e-80aa-17692021fda1.png)

次は「デフォルトプリセット」を選んで「プロジェクトを作成する」をクリックしよう。
プロジェクトのセットアップがはじまるので、しばらく待機だ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/826836bd-23cd-5cea-1834-52218224db87.png)

セットアップが終わったら、左端のタスクメニュー＞serve＞「タスクの実行」ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/00e65eb7-da32-1d36-8f8e-2fa7aac0f0b5.png)

ここもしばらく待つとビルドが完了するので、「アプリを開く」ボタンをクリックしよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/a4560809-51b1-41c6-3c5d-39bf3a1b8f5c.png)

このようにvue.jsのテンプレートページが表示されれば、全て成功だ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/87092e5c-f2e4-2b3d-ce60-2cb186feda30.png)

## 作成されたvue.jsプロジェクトを開き、編集する
一般にソフトウェアプロジェクトは、多くのファイルやフォルダを扱って開発を進めるので、単純なテキストエディタではなく、なんらかの開発環境を使うのがオススメだ。
今回は、多様なプロジェクトの開発に対応できる[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)（以下、VSCode）を使ってみよう。ダウンロードページからインストールパッケージを入手して、インストールしておいておこう。

インストールが完了したら、起動したVSCodeに、先ほど作成したvue.jsのプロジェクトフォルダをドラッグする。
するとプロジェクトのフォルダ構成一式が読み込まれるので、srcフォルダ内にあるApp.vueファイルをクリックして開こう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/b18b4381-cf34-dc02-99a9-a57601b0fa7c.png)

右下に拡張機能をインストールする通知が表示されるはずだ。
vue.jsの開発を進めるうえで便利なので、「Install」をクリックしてインストールしておく。

一緒にオススメの拡張もリストアップされているので、どうせならひととおりインストールしておこう。開発がスムースになるはずだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/7bc36e38-360a-8fc0-6fac-750e545acf89.png)

インストールが完了してからApp.vueを開きなおすと、ソースコードが色分けされていると思う。これで拡張のインストール成功が確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/f1512ebd-ccc6-3a8b-8eb0-d4fe23e66404.png)

このソースコードを見てみると、9行目に下記のような記載がある。
画面部品（vue.jsではコンポーネントと呼ぶ）として、HelloWorld.vueを読み込んでいる。

```vue:/src/App.vue
import HelloWorld from './components/HelloWorld.vue'
```

このHelloWorld.vueを開いて見てみよう。src/componentsフォルダ内にあるはずだ。
大きく、 `<template>` `<script>` `<style>` タグで括られているのが見て取れるはずだ。
vue.jsでは、単一ファイルコンポーネントといい、画面の部品ごとにHTMLタグ・JavaScriptのコード・スタイルの3点セットで分割し、切り分けて開発できるスタイルをとっている。

```vue:/src/templates/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure 
      check out the

    ....
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
....
</style>
```

### メッセージを変更してみる
このサンプルでは、コンポーネントの呼び元（親）からコンポーネント（子）にデータを渡して、メッセージを表示している。
この部分のソースを見てみよう。

```vue:/src/App.vue（＝親）
<HelloWorld msg="Welcome to Your Vue.js App"/>
```

```vue:/src/components/HelloWorld.vue（＝子）
<h1>{{ msg }}</h1>

...

props: {
  msg: String
}
```

App.vueのほうの `msg="Welcome to Your Vue.js App"` の、「Welcome ...」の部分が、HelloWorld.vueの `{{ msg }}` の部分に挿入されているのが分かるだろうか。
またこのための値を値を収める変数を、 `props: { msg: String }` の部分で用意している。

試しに `msg="..."` の部分を書き換えてファイルを保存すると、書き換えたとおりに表示が変わるはずだ。（変わらない場合は、ページをリロードしよう）

### ボタンでメッセージを書き換えてみる
ボタンイベントを受け取って、メッセージを変更する処理を書いてみよう。
サンプルの `<template>` 部分の分量が多いので、下記のように整理してしまう。

```vue:/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}{{ msg2 }}</h1>
    <button v-on:click="msg2 += ' kick!'">kick me!</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }, // ← カンマも忘れず
// ↓ここから
  data() {
    return {
      msg2: ""
    }
  }
}
// ↑ここまでを追加する
</sclipt>
```

このように書き換えてページをリロード、ボタンをクリックする度にメッセージが変更されていくはずだ。
実際の動きを確認してみてほしい。

上の例ではHTMLタグの中に直接処理を記載していたが、HTMLと処理を分離してみよう。
今度は `<template>` と `<script>` までを下記のように修正する。

```vue:/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}{{ msg2 }}</h1>
    <button v-on:click="kick">kick me!</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      msg2: ""
    }
  },
  methods: {
    kick: function () {
      this.msg2 += " kick!";
    }   
  }
}
</script>
```

### 入力データを受け取る
テキストボックスに入力されたデータをスクリプトで受け取り、それをリアルタイムにページにも表示する。
少し長くなるが、 `<template>` と `<script>` を下記のように書き足そう。それぞれ `<p>...</p>` の部分と `data() { ... }` の部分だ。

```vue:/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="kick">kick me!</button>
    <p>
      <input type="text" v-model="name" /><br />
      {{ name }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: ""
    }
  },
  props: {
    msg: String
  },
  methods: {
    kick: function () {
      this.msg += " kick!";
    }   
  }
}
</script>
```

## まとめ
以上、vue.jsの機能はまだまだ数多くあるのだが、環境構築からさわりまでをざっと触れてみた。ほかの記事や書籍などで、いろいろ調べてみてほしい。

続く記事では、APIコールを試してみよう。