【Vue.JS】 WebPackを使わずにコンポーネントで遊ぶ

## 対象読者
- 1. 環境構築はやりたくないけど、すぐにVueで遊んでみたい方
  - .vueファイルを使用する場合、WebPackサーバーなどの環境構築が必要となる
- 2. 自分のPC上でとりあえず遊んでみたい方
  - ※ サイトとして公開する場合は、別途環境構築が必要

## サンプルアプリ
- クリックすると赤色→緑色に変化するコンポーネントを作る
- <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349189/2becc9e8-9a25-62e4-d704-016d3cbb1641.gif">

## 手法
- .vueファイルを使わずに、全て.jsファイルで定義する
- `import`文 , `export`文を使わずにコンポーネントを使用する
    - 通常のJavaScriptでimport文を使用するとエラーとなるため

# 作り方

## フォルダ構成
- 空のフォルダを作成し、その中に以下の4ファイルを作成する
    - フォルダ名は任意。ここでは sample_folder とした

```:フォルダ構成
sample_folder
    ┝ application.html
    ┝ application.js
    ┝ parent_vue.js   ← 自作のコンポーネントを記述する
    ┝ vue.js          ← CDNをダウンロードする(後述)
```

## ファイル生成方法
- 下記のソースコードをファイルごとに丸コピすれば動作します
- 解説を見たい方
    - 各ソースコードの下に解説がございます

### 1. HTMLファイル
```html:application.html
<!DOCTYPE html>
<html lang="js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SampleApp</title>
</head>
<body>
  <div id="app">
    <!-- ② このdiv内で自作コンポーネントを呼び出している -->
    <parent-component></parent-component>
  </div>
</body>
  <!-- ① 同一フォルダ内のファイルをインポートする。-->
  <script src="vue.js"></script>
  <script src="parent_vue.js"></script>
  <script src="application.js"></script>
</html>
```
- ① `<script src="○○.js"></script>`の部分
    - この部分で同じフォルダ内の.jsファイルを全て読み込む

- ② 自作したコンポーネントを呼び出すために、`<div id="app"></div>`タグを作成する           
    - このdivの外では、vueコンポーネントを使用できないことに注意
    - id名は何でも良いが、後述するapplication.js内で定義するid名と同名とする

    - `<parent-component></parent-component>`が自作したコンポーネントタグである
      - 上記のタグ名は何でも良いが、後述するparent_vue.js内で定義するコンポーネント名と同名でなければならない

### 2. JSファイル(コンポーネント呼び出し用)
```javascript:application.js
var parent = new Vue({
    el: "#app",
    // application.htmlで定義したid名と同一にする
});
```
- このファイルでVueインスタンスを生成する
    - `el:`には、application.htmlで定義したid名を書く

### 3. JSファイル(コンポーネント定義用)
```javascript:parent_vue.js

// Vue.component('コンポーネント名', {定義}) の形式とする
Vue.component('parent-component',{
  template: 
  ` <div id="parent_root">
      <div v-bind:style="myStyle" v-on:click="changeColor">
        {{message}}
      </div>
    </div>
  `,
  // component内ではdataは関数として定義しなければならない
  data: function() {
    return {
        message: "Click! Me.",
        myStyle: {
          color: 'red',
          fontSize: '18px',
          "background-color": '#ebb',
          border: 'solid 2px',
        }
    }
  },
  methods: {
    changeColor: function(){
      console.log("checked.");
      this.message ='confirmed'; 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'background-color', '#beb'); 
    }
  },
});
```
- このファイルでは、自作のコンポーネントを定義する
    - `Vue.component('コンポーネント名', {定義})`の形式とし、`{ }`内に記述する
    - コンポーネント名は、application.htmlで使用するコンポーネントタグと同名でなければならない

#### 補足: templateの書き方(規則)
- `template: `部分とは
   - htmlに相当する部分。下記2点を守ること
     - 1. template内では、初めと終わりを`｀ `バッククォーテーションで囲うこと
     - 2. template内では、必ず単一の`<div>タグ`で囲うこと

```vue:参考)templateの書き方
template:
  `<div>
    この中に、htmlタグを自由に記述する
  </div>`,
```

#### 補足: Style(CSSに相当)の書き方
- 今回の書き方では`<style>タグ`が使用できないため、代わりに2つの手法を紹介する
    - 1. `v-bind:style`を使用し、自作のスタイルを`data: `内で定義する
        - 本記事ではこの方法を採用。`myStyle`として定義している
    - 2. `is属性`を使用して、styleタグを偽装する
        - template内に一旦別名のタグを作成し、is属性でstyleタグとして機能させる
        - [方法はこちら](https://blog.rainbowsite.net/2018/11/23/post-91/)
 
### 4. CDNファイル
- [Vue公式のCDNダウンロードサイト](https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt-直接組み込み)を開き、`直接組み込み`の章までスクロールする
- `開発バージョン`ボタンをクリックし、ファイルをダウンロード
- ダウンロードした`vue.js`ファイルを上記のsample_folder内にコピーすれば準備完了
    - (記事上部の`フォルダ構成`の章を参照のこと)
    - 簡単！


## 動作
- 作成した`application.html`をダブルクリックすれば、ページが表示されます

## 参考
- [Vue.JS入門](https://www.youtube.com/playlist?list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW)
    - たにぐちまこと氏の "ともすたチャンネル" (Youtube)
    - 初心者にもわかりやすく説明されているため、オススメです。

- [JavaScriptのimport / export構文](https://se-tomo.com/2019/02/13/)