Vue.jsとVueCLIは違う！CDN版から書き換えて理解してみる

ほげほげ

勘違いしてた

Vue.jsとVueCLIって同じじゃないのねぇ！当たり前だろと言われそう。

■ Vue.js
・Webアプリケーション開発に便利なJavaScriptフレームワーク
・CDNでサクッと使える

■ VueCLI
・VueCliはVue.jsで開発するための便利ツール群
・npm使ってインストールする必要がある
・単一ファイルコンポーネント（.vue）を使って開発できる

CDN版から.vueに書き換えてみる

使うもの
・ターミナル
・Visual Studio Code

以下に、簡単なTODOリストのWebAppのソースコードを2つ配置しました。
TODOリストのコンポネントを作成し、グローバル登録してあります。これはCDN版なので、index.htmlとindex.jsを同じフォルダ内にぶち込んで、index.htmlをブラウザで表示すれば、素直にVue.jsが動いてくれます。

<!-- index.html -->

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta http-equiv="content-type" charset="utf-8">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
       <div id="app">
           <todo todo_title="MY TODO LIST"></todo>
       </div>            
       <script src="index.js"></script>
   </body>
</html>
// index.js

Vue.component('todo', {
   props: {todo_title :String},
   data: function(){ 
       return {
           todos:[],
           title: '',
           important: false
       }
   } ,
   created: function(){
        console.log(this.todos);
   } ,
   methods:{
       addTodo(){
           if(!this.title){
               alert("TODOに何も書いてません")
           }
           else{
               var new_todo = {title: this.title, important: this.important, completed: false}
               this.todos.push(new_todo);
               this.todos = this.todos.filter(todo => !todo.completed)
           }
       }
   } ,
   template:`
       <div>
           <h3>{{todo_title}}</h3>
           <table>
               <tr>
                   <th>Index</th>
                   <th>Title</th>
                   <th>Important</th>
                   <th>Completed</th>
               </tr>
               <tr v-for="(todo, index) in todos" v-bind:key="index">
                   <td>{{index}}</td>
                   <td>{{todo.title}}</td>
                   <td>{{todo.important ? 'Yes' : 'No'}}</td>
                   <td><input type="checkbox" v-model="todo.completed"></td>
               </tr>
           </table>
           <hr/>
           TODO:<input type="text" v-model="title">{{title}}<br>
           IMPORTANT: <input type="checkbox" v-model="important"><br>
           <button @click="addTodo">Add New Todo</button>
       </div>
   `
 })

 new Vue({ el: '#app' })

※ 本来はv-bind:key="index"というように、keyにindexを使うのは推奨されません（後から気付いたけど、変えるの面倒臭かった）

■ 機能１
一番下のTODOのテキストとIMPORTANTのチェックボックスを入力して、「Add New Todo」ボタンを押すと、上のTODOリストに追加されていきます。

■ 機能2
上のTODOリストのCompleted列のチェックボックスをONにすると、次に「Add New Todo」ボタンを押した時点で画面から消えます。

スクリーンショット 2020-05-10 18.24.32



これをVueCLIで書き換えてみます。

まずはVueCLIインストールから

VueCLIをグローバルインストールします。
※ ローカルインストールできるかは、わかりませんでした！

$ npm install -g @vue/cli

終わったらVueのプロジェクトを作成します。今回はvue-cli-testというプロジェクトを作成します。

$ vue create vue-cli-test

Webpackとか必要な場合は、少し変わるらしいのですが、今回は省略。色々質問されますが、今回はエンター連打で大丈夫です。
プロジェクトが作成し終わると、プロジェクトフォルダの中に様々なファイルが作成され、さらに以下のようなメッセージが表示されています。

🎉  Successfully created project vue-cli-test.
👉  Get started with the following commands:

$ cd vue-cli-test
$ npm run serve

指示通り、プロジェクトフォルダに移動して「npm run server」します。すると、ご丁寧にどうやってアクセス方法を教えてくれます。

 DONE  Compiled successfully in 3526ms    

 App running at:
 - Local:   http://localhost:8080/ 
 - Network: http://192.168.1.102:8080/

 Note that the development build is not optimized.
 To create a production build, run npm run build.

これも指示通り、ブラウザで「http://localhost:8080/」にアクセスしましょう。

スクリーンショット 2020-05-10 19.22.02

いえ〜い、とりあえず、VueCLIを使ったWebアプリが確認できるようになりました！

Todo用の.vueファイルを作る

※ Visual Studio Code に「Vetur」 を入れておくと、.vueファイルに対しシンタックスハイライトが有効化され、見やすくなります。シンタックスハイライトとは…ようはソースコードに、わかりやすく色がつくことである。

作成したプロジェクトフォルダを、Visual Studio Code で開きます。色々ありますが、触るのは主にsrcフォルダの中身です。
早速、componentsフォルダの下に、「Todo.vue」を作成します。

スクリーンショット 2020-05-10 19.33.56

ファイルが追加されたら、中に以下のタグを追加します。.vueファイルはこの構成が基本です。

<template>
</template>

<script>
</script>

<style>
</style>

1. templateタグの中身を編集
・CDN版で書いたindex.jsの、templateコンポーネントオプションの部分を抜き出して貼り付けます

2. scriptタグの中身を編集
・export default { }を追加します
・CDN版で書いたindex.jsの、templateコンポーネントオプション以外の部分を抜き出して貼り付けます

3. styleのタグの中身を編集
・CSSを記述できますが、今は特に設定する必要ありません

Todo.vueファイル完成

完成したTodo.vueファイルは以下のようになります

<!-- Todo.vue -->
<template>
   <div>
       <h3>{{todo_title}}</h3>
       <table>
           <tr>
               <th>Index</th>
               <th>Title</th>
               <th>Important</th>
               <th>Completed</th>
           </tr>
           <tr v-for="(todo, index) in todos" v-bind:key="index">
               <td>{{index}}</td>
               <td>{{todo.title}}</td>
               <td>{{todo.important ? 'Yes' : 'No'}}</td>
               <td><input type="checkbox" v-model="todo.completed"></td>
           </tr>
       </table>
       <hr/>
       TODO:<input type="text" v-model="title">{{title}}<br>
       IMPORTANT: <input type="checkbox" v-model="important"><br>
       <button @click="addTodo">Add New Todo</button>
   </div>
</template>

<script>
export default {
  props: {todo_title :String},
  data: function(){ 
      return {
          todos:[],
          title: '',
          important: false
      }
  } ,
  created: function(){
       console.log(this.todos);
  } ,
  methods:{
      addTodo(){
          if(!this.title){
              alert("TODOに何も書いてません")
          }
          else{
              var new_todo = {title: this.title, important: this.important, completed: false}
              this.todos.push(new_todo);
              this.todos = this.todos.filter(todo => !todo.completed)
          }
      }
  }
}
</script>

<style scoped>
</style>

さて、これでコンポーネントはできました。あとは呼び出して表示したいですね。

App.vueを編集

プロジェクト作った直後だと、App.vueの中でHelloWorldコンポーネントが呼ばれてます。これを参考にして、書き換えましょう。

<!-- App.vue -->

<template>
 <div id="app">
   <todo todo_title="MY TODO LIST"/>
 </div>
</template>

<script>
// モジュール名をtodoではなくTodoList
import TodoList from './components/Todo.vue'

export default {
 name: 'App',
 components: {
   'todo': TodoList // 'todo'の部分は省略できる。省略するとモジュール名がコンポーネントを使う際のタグになる
 }
}
</script>

<style>
</style>

上の記述は、コンポーネントを使う時の、タグの記述がどこで決められるかを確認する為、わざとimportのモジュール名をTodoListとしています。
見本でよく見るのは以下の記述です。

<!-- App.vue -->

<template>
 <div id="app">
   <Todo todo_title="MY TODO LIST"/>
 </div>
</template>

<script>
import Todo from './components/Todo.vue'

export default {
 name: 'App',
 components: {
   Todo
 }
}
</script>

<style>
</style>

…どっちでも動きます。Todo.vueのnameコンポーネントオプションがタグで使う時の名前に関係するもんだと思い込んでました。
「npm run serve」でサーバーが起動している状態で、再度「http://localhost:8080/」にアクセスすると、TODOリストのコンポネントが表示されています。うぇ〜い。

スクリーンショット 2020-05-10 23.36.14

main.jsは何してるのか？

App.vueを読み込んでます。詳しくは以下記事を参考にしてください！！（わかってない）

以上！

お仕事で使うのは、当然VueCLIです。が、いきなりCLIから入るとオエェッ…っとなるので、CDN版からちょっとずつ理解していくのが体に良いですね。

公式サイトのチュートリアルを読んだり、やってみたりして、ようやくVue.jsの基礎の部分が、ふわっと理解できた…。習うより慣れろ…です。

いいなと思ったら応援しよう！