Day1：3日でVue.jsを用いたアプリケーションを動かす


#1日目の取り組み記録

###【Story】
・3日休みだ。なんか楽しいことがしたい。楽しいことってなんだ？→データ分析とか機械学習とは違う領域の知識に触ってみたい
・早速調べる。SPA(Single Page Application)が流行ってるらしい。画面作るのもなんか楽しそう
・AngularとReactがフレームワークとして有名らしい。使ってみよう。→環境構築で爆死
・友達にきく。→まずはVue.jsが簡単らしい
・本屋いく

.....ということで早速以下の書籍を購入して進めました。

<img width="300" alt="text.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/4b1fb9ec-23c0-2ff3-740c-208b2e791a40.jpeg">

https://www.amazon.co.jp/Vue-js-Nuxt-js%E8%B6%85%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798056596/ref=cm_cr_arp_d_bdcrb_top?ie=UTF8

Amazonのレビューみたら分かりやすいけど、誤植が多いと。確かに心当たりあった。。。

###【環境構築】
＊大きく分けてやったことは以下の通り

#### ①node.jsのインストール
以下からインストーラを入手
https://nodejs.org/en/download/

環境PATHが設定されていないので別途設定する
cmdからデスクトップにいてもnpmコマンドが動くことを確認する

#### ②ディベロッパツールのインストール
以下のコマンドでインストール
npm install -g @vue/devtools

Googleのプラグインでもインストールできるがブラウザ依存になるため、スタンドアロン版がオススメ

#### ③cli-service-globalのインストール
以下のコマンドでインストール<br>npm install -g @vue/cli-service-global
vue-cliを動かすために必要

#### ④VueCLIのインストール
以下のコマンドでインストール
npm install -g @vue/cli

Vue.js開発のためのコマンドツール
アプリケーションのbuildとかプロジェクト作成とかが簡単にできるよ

#### ⑤VueCLIを利用してコマンドラインからプロトタイプを動かす
1.app.vueのファイルを用意する

```vue:app.vue
<br>app.vue<br>
<template>
  <div id="app">
    <h1>Hello!</h1>
    <p>This is message...</p>
  </div>
</template>
```

2.ファイルのある場所へ移動する
3.以下のコマンドを実施
vue serve
4.コマンドラインに表示されたURLに遷移
http://localhost:8080/

あくまでも動作確認

#### ⑥コマンドラインからプロジェクトを作成する
1.プロジェクト作成場所に移動する
2.以下のコマンドを実施する
vue create ロジェクト名
3.プリセットの指定
コマンドラインに色々でてくるけど基本はデフォルトのまんまでOK
4.プロジェクトの実行
npm run serve
5.コマンドラインに表示されたURLに遷移
http://localhost:8080/

成功したらこんな感じ↓↓
<img width="400" alt="picuture1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/1a69e33a-a5ef-4fc0-b8a0-1fcfd8b1814a.jpeg">


#### ⑦プロジェクトをビルドする
1.以下のコマンドを実施する
npm run build
2.distフォルダ配下に必要なファイルが作成されたことを確認する

サーバに上げるときに必要
dist配下のindex.htmlファイルは絶対パスで記載されているため、直接クリックしてもページは空白表示される。

### ⑧GUIツールを使ってみる
1.以下のコマンドを実施
vue ui

2.ブラウザでVueプロジェクトマネージャが起動
==Vueプロジェクトマネージャでできること=============================
・プロジェクトの作成
・プロジェクトのインポート
・プロジェクトのビルド
・プリセットの設定
・依存するパッケージリストのインストール
===============================================================

UIが結構きれいだしイケテル
<img width="400" alt="picuture2.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/95165c68-2e47-5257-ca7c-0af395e0e7e9.jpeg">

＊おまけ：勉強になった単語集

SPA(Single Page Application)・・・単一のWebページでコンテンツ切り替えを行うことで、ブラウザの挙動に縛られないWeb表現を可能にする
フルスクラッチ ・・・自前で全部jsのコードを書く方法
DOM操作　　　・・・htmlのタグの操作がjavascriptからできるよ
レンダリング     ・・・文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。なんかjsのコードからHTML用のタグとか生成してくれてた。

＊エディタについて
Visual Studio Codeを利用。Gitにそのままコミット&プッシュできるし便利。

### Vue.jsの基本
＊テンプレート

script内はjavascriptだからコメントアウトの仕方が違うのがなんか面白い

```vue:
 <!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="http://localhost:8098"></script>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
        <style>
		ここでコンテンツのレイアウトとか文字色とか設定
		</style>

        <h1>
		</h1>

        <div id = "">
		id値でjavascriptの処理対象になるタグを引っ張ってくるよ
		</div>

        <script>
		javascriptのコードを記載
		</script>
</body>
</html>
```

＊HTMLタグとjavascriptを紐づける

```vue:
<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="http://localhost:8098"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>Vue.js</h1>
    <div id="app">
    {{ message }}
    </div>
    <hr>
    <input type="text" onInput="doAction(event);">


    <script>
    var data = {
        message:"please type"
    }


    var app = new Vue({
        el: '#app',
        data: data
    })

    function doAction(event){
        data.message = event.target.value
    }

    </script>
</body>
</html>
```
＊ レンダリングしてみる

```vue:
    <script>
    var data = {
        message:'Hello'
    };

    var app = new Vue({
        el: '#app',
        data: data,
        render: (element) =>{
            return element("p",
                            {'style':'font-size:20pt; color:red'},
                            data.message);
        }
    })

    function doAction(){
        data.message = "Hey";
    }

    </script>
```

＊配列とか使って複数のタグをレンダリングしてみる

```vue:
    <script>
    var data = {
        message:'Hello',
        items:['one','two','three','four','five']
    };

    var app = new Vue({
        el: '#app',
        data: data,
        render: (h) =>{
                return h("div",
                    [
                    h("p",{'style':'font-size:20pt; color:red'},data.message),
                    h("ol",data.items.map(i=> h('li',i)))
                    ]
                );
        }
    });

    function doAction(){
        var newdata = ['いち','に','さん','よん','ご']
        data.message = "clicked";
        data.items[0] = '零';
        for (n in data.items){
            data.items[n] = newdata[n];
        }
    }

    </script>
```

＊ ユーザーの入力によって表示されるデータを変更する★オススメ

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <h1>Vue.js</h1>
 <div id="app">
 <p v-html="messages"></p>
 </div>
 <hr>
 <input type="text" onInput="doInput(event);"> <!--入力フィールド-->
 <button onclick="doAction();">
 click
 </button>
 
 <script>
 var data = {
 messages: '<li>Hello</li>'
 };
 
 var app = new Vue({
 el: '#app',
 data: data
 });

 function doInput(event){
 data.message = event.target.value;
 }

 function doAction(){
 data.messages += '<li>' + data.message + '</li>'
 }

 </script>
</body>
</html>
```

＊v-bindでstyleの情報をjs側に埋め込む

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <h1>Vue.js</h1>
 <div id="app">
 <p v-bind:style="style_value">{{message}}</p>
 </div>

 <hr>
 <input type="number" onChange="doChange(event);" value="20">

 <script>
 var data = {
 message:'Hello',
 style_value:'font-size:20pt; color:red'
 };

 var app = new Vue({
 el: '#app',
 data: data
 });

 function doChange(){
 data.style_value = 'font-size:' + event.target.value + 'pt; color:red;';
 }

 </script>
</body>
</html>
```

＊v-bindでクラスの情報をjs側に埋め込む

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 .red {
 font-size:20pt;
 font-weight:bold;
 font-style:normal;
 color:red;
 }
 .blue {
 font-size:24pt;
 font-weight:plain;
 font-style: italic;
 color:blue;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <p v-bind:class="classes">
 {{message}}
 </p>
 </div>
 <hr>
 <button onclick="doAction();">
 click
 </button>
 
 
 <script>
 var classObj = {
 red: true,
 blue: false
 };
 
 
 var data = {
 message: 'Hello Vue!',
 classes: classObj
 };
 
 
 var app = new Vue({
 el: '#app',
 data: data
 });
 
 
 function doAction() {
 classObj.red = !classObj.red;
 classObj.blue = !classObj.blue;
 }
 </script>
 </body>
</html>
```

＊v-ifでクリックすると表示レイアウトが切り替わるようにする★オススメ

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 .ok {
 font-size:24pt;
 color:blue;
 padding: 5px 10px;
 border: 2px solid red;
 }
 .ng {
 font-size:20pt;
 color:gray;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <p v-if="flag" class="ok">
 正常な表示
 </p>
 <p v-else class="ng">
 ※問題発生中
 </p>
 </div>

 <button onclick="doAction()">
 Click
 </button>

 <script>
 var data = {
 flag:true
 }

 var app = new Vue({
 el: '#app',
 data:data
 });

 function doAction(){
 data.flag = !data.flag;
 }

 </script>
</body>
</html>
```

＊v-ifとtemplateを使って表示画面を切り替える★オススメ

```vue:
<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 li {
 font-size:16pt;
 color:gray;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <template v-if="flag" class="ok">
 <p>テーブルの表示</p>
 <table>
 <tr><th>Name</th><th>mail</th></tr>
 <tr><td>Taro</td><td>taro@yamada</td></tr>
 <tr><td>Hanako</td><td>hanako@flower</td></tr>
 <tr><td>Sachiko</td><td>sachiko@happy</td></tr>
 </table>
 </template>
 <template v-else class="ng">
 <p>リスト</p>
 <ul>
 <li>Taroのアドレスは、taro@yamadaです。</li>
 <li>hanakoのアドレスは、hanako@flowerです。</li>
 <li>Sachikoのアドレスは、sachiko@happyです。</li>
 </ul>
 </template>
 </div>

 <button onclick="doAction()">
 Click
 </button>

 <script>
 var data = {
 flag:true
 }

 var app = new Vue({
 el: '#app',
 data:data
 });

 function doAction(){
 data.flag = !data.flag;
 }

 </script>
</body>
</html>
```
＊v-forでリスト処理

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <p>※データをテーブル表示する</p>
 <table>
 <tr>
 <th>ID</th>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, id) in items">
 <td>{{id}}</td>td>
 <td>{{item.name}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>
 </table>
 </div>

 <script>
 var data = {
 items:[
 {name:'Taro', mail:'taro@yamada', tel:'999-999'},
 {name:'Hanako', mail:'hanako@flower', tel:'888-888'},
 {name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
 {name:'Jiro', mail:'jiro@change', tel:'666-666'},
 {name:'mami', mail:'mami@mumemo', tel:'555-555'}
 ]
 }

 var app = new Vue({
 el : '#app',
 data : data
 })

 </script>


</body>
</html>
```

＊配列処理

```vue:
<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <table>
 <tr>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, key) in items">
 <td>{{key}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>
 </table>

 </div>

 <script>
 var data = {
 items:{
 Taro:{mail:'taro@yamada', tel:'999-999'},
 Hanako: {mail:'hanako@flower', tel:'888-888'},
 Sachiko: {mail:'hanako@flower', tel:'888-888'}
 }
 }

 var app = new Vue({
 el: "#app",
 data: data
 });

 </script>

</body>
</html>
```

＊v-forとv-ifの合わせ技★オススメ

```vue:
 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <p>※データをテーブル表示する</p>
 <table>
 <tr>
 <th>ID</th>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, index) in items" v-if="index % 2 == 0">
 <td>{{index}}</td>td>
 <td>{{item.name}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>

 <tr v-else>
 <td>***</td>
 <td>*****</td>
 <td>*****</td>
 <td>*****</td>
 </tr>

 </table> 
 </div>

 <script>
 var data = {
 items:[
 {name:'Taro', mail:'taro@yamada', tel:'999-999'},
 {name:'Hanako', mail:'hanako@flower', tel:'888-888'},
 {name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
 {name:'Jiro', mail:'jiro@change', tel:'666-666'},
 {name:'mami', mail:'mami@mumemo', tel:'555-555'},
 ]
 }

 var app = new Vue({
 el: '#app',
 data: data
 })
 </script>

</body>
</html>
```