More than 5 years have passed since last update.

dotinstall で勉強している初心者がVue.jsの公式ガイドを勉強するメモ　環境編

Last updated at 2018-03-31Posted at 2018-01-24

環境編

対象は、dotinstallさんでjavascriptを勉強している、同レベルの方向けです。

Vue.js のガイドは、https://jp.vuejs.org/v2/guide です。

この環境編は、実際にVue.jsを学ぶところまでいきませんので、ご自分の環境がある人は、このページは飛ばしていただいたらいいかと思います。

趣旨

webの勉強をしようと色々学んでいる過程で、学んだことをちょっとずつ活用しながら、さらに新しい事を学ぶのが趣旨です。

環境

環境は、MacですがWindowsの方は導入部分は異なると思いますが、導入が済めば一緒かと思いますので、適宜読み替えてください。

前振り

初心者にとって、大変ありがたいdotinstallですが、そこでjavascriptを勉強していると、web上ではなにやらjavascriptが便利に書けるツールがあるよ。ナマのjavascriptを書く事は少ないよなど色々と情報が舞っています。
確かに、DOM操作などをjavascriptで書くのに、divを一つ書くのにもcreateElementで生成しないといけないとか、原始的だと思ってしまいます。
jQueryも便利だなぁと思っていたのですが、昨今の流行りはReactやVue.jsらしいので、手を出していこうと思い立ちました。
Vue.jsは、有志の方々が日本語のドキュメントを作成してくださっています。
しかし、内容的に中級者以上が簡潔にわかる記載スタイルなので、初心者が読むにはいささか、簡便な説明になっています。
そのあたりを素人目線で適当に解釈していますので、決して鵜呑みにしないようにお願いします。
間違って解釈しているところを、教えてもらえると大変ありがたく思います。
うまくいかないところは、そのままうまくいかない現状をお伝いします（笑).
そのあたりを教えてもらえると、メモを晒す意味がグーンとupします。

では、環境を作ります。

htmlのみ　と　webpack + pugの二種類の環境を作っていきます。
最初は、両方の環境での結果を見比べるため、掲載していきますが、慣れてくる頃会いには楽な方どちらかになります。（笑）

少し長いですが、おつきあいぐださい。

Vue.jsを試すには webで書ける JSFiddle Hello World example を使えとありますが、 htmlファイルのみとnode環境の勉強も兼ねて, vue-cliを使いたいと思います。　　初心者は使うなと書いてありますが、ブラウザーの自動書き換えなど便利なので使って行きたいと思います。
node.jsはすでにはいっている前提です。
- node.js mac インストール　で検索してみてください。
現時点でのversionです。　(違っていても、練習では影響は少ないと思います)
node --version
- v9.10.1
webpack と vue-cliを入れます
- npm install -g vue-cli webpack
- vue --version
- 2.9.3
vue-cliですが、公式に使えるテンプレートが入っているみたいです。
- vue list

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping

この中で、simple は、html ファイルのみ見たいなので、これを使います。
もう一つ、node環境ということで、今回は webpack-simple を使います。
適当な練習用ディレクトリをターミナルで作ります. 作業環境はMacですのでWindowsの方は適宜変換してください。
- mkdir vue-practise
- cd vue-practise
htmlファイルのみの方を先に作ります
- vue init simple simplehtml
- enterキーで進みます
- simplehtmlディレクトリに、index.htmlが一個作られます.
- tree コマンドで確認してみます。　便利なので入れていますが、無くても支障ありません。

.
└── simplehtml
    └── index.html

中身を確認してみます
- cat simplehtml/index.html
  - index.htmlは全部打たずに、tabキーで補完してください。打ち間違いが減らせます
index.html

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>{{ greeting }}</h1>
    <ul>
      <li>
        To learn more about Vue, visit
        <a :href="docsURL" target="_blank">
          {{ humanizeURL(docsURL) }}
        </a>
      </li>
      <li>
        For live help with simple questions, check out
        <a :href="discordURL" target="_blank">
          the Discord chat
        </a>
      </li>
      <li>
        For more complex questions, post to
        <a :href="forumURL" target="_blank">
          the forum
        </a>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
        docsURL: 'http://vuejs.org/guide/',
        discordURL: 'https://chat.vuejs.org',
        forumURL: 'http://forum.vuejs.org/'
      },
      methods: {
        humanizeURL: function (url) {
          return url
            .replace(/^https?:\/\//, '')
            .replace(/\/$/, '')
        }
      }
    })
  </script>
</body>
</html>

ブラウザーで開いてみます　Google Chromeを使っています
open index.html
- Welcome画面がでれば、OKです。

次にnode環境も作ってしまいます。

ターミナルに戻り,ディレクトリがvue-practiseか確認します

pwd
vue init webpack-simple webpack
enter で進めます。
tree で確認してみます

.
├── simplehtml
│   └── index.html
└── webpack
    ├── README.md
    ├── index.html
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   └── main.js
    └── webpack.config.js

node環境は、simple環境でも色々出来ているのがわかりますが使うのは, 主にApp.vueとmain.jsぐらいかと思います.
to get startedに従います

     cd webpack
     npm install
     npm run dev

npm run devしたら、自動的にブラウザーが開きますので、こちらもwelcome画面がでればOKです。

これで、ほぼ環境が整いました。

simpleHtmlのindex.htmlから見ていきます。
- simpleHtmlディレクトリに戻ります
- pwd
  - simpleHtml
  - エディターは,atomを使っていますので、立ち上げます
  - atom .
  - いらないところを削除して、ベースにします。
index.html

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
  </div>

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

さて、ここからやっと学習です。（笑）

宣言的レンダリング

コピペせずに書いて覚えます。
index.html

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
      }
    })
  </script>
</body>
</html>

表示内容は、Vueのガイドページを見てください。　一緒です
- https://jp.vuejs.org/v2/guide/index.html
  　
Vue.jsの特徴であるリアクティブの説明が書いてあります。　ふむふむ
ブラウザの JavaScript コンソールを開きます. cmd + option + j
- ブラウザーのコンソールは確認だけでは無く、入力も出来るみたいです。

app.message
-> "Hello Vue!"

app.message = 'change message'
-> "change message"

ブラウザーのコンソールを書き換えると、再読込をしなくても書き換わって、htmlの表示内容も変わっているのが確認出来ます。
これがリアクティブということでいいのでしょうか。

ここで、一旦この状態をバックアップして、この状態を戻せるようにしておきます。

dotinstallさんで習った、Gitを使います。
Gitが入っている前提で進めます。　入れていない人は便利なので入れて見てください。

無くても支障はあまりないですが、おかしくなったら戻せるという安心感が手に入ります.
git mac インストールで検索してみてください。
git の使い方は、ここでは説明しません。　dotinstallさんで丁寧に説明されています.
- git init
  - .git という隠しディレクトリが作成されます。　 ls -aで確認できます。
  - git add .
  - git commit -m "first init"
  - git log で確認できます。
    - これで、バックアップも完璧です。

node側も同じところまで、書き換えます。

ターミナルでwebpackディレクトリまで、戻ります pwdで確認
atom を立ち上げて、App.vueを編集していきたいのですが、私の環境ではこのままatomを立ち上げると、node_moduleのインデックスをしているためか、最初激重になりますので先に　git init　を済ませてしまいます。遅くならない方は,atom　で編集すればいいと思います。
node環境を作成した段階で .gitignoreという隠しファイルが作成されています。　　ls -a で確認
中身を確認してみます。
- cat .gitignore

.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
* git init
* git add .
* git commit -m "first init"

今回確認したかったのは、node_modules/です。　ない場合は書き足してください。
- vim .gitignore
- vim　もdotinstall さんで勉強できます。　マスターになる必要は感じませんが、ちょこっとした編集ができるとなにかと便利です。
git で現状のバックアップを先にしてしまいます。
- git init
- git add .
- git commit -m "first init"
- git log　で確認
atom エディターで立ち上げて編集します。
- atom .
- App.vueを開きます。
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

いらないところを削除してしまいます。
App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

chromeで表示させていると、翻訳するかと聞かれ表示がうるさいので、出ないように index.htmlも編集しておきます。
- lang="en" -> lang="ja" に書き換えます。
index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>webpack01</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="/dist/build.js"></script>
  </body>
</html>

宣言的レンダリング

やっと最初のところにたどり着きました。（笑）
自分なりの勉強環境を作るのに苦労を惜しみません。
App.vueを書き換えます。

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

<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

chromeで表示を確認してください。
npm run devが走っているはずですが、走っていない場合は再度実行してください。
ここでのリアクテブの確認ですが、ブラウザーのjavascriptコンソールで、app.messageとしてもundefinedとなってしまうため、node環境では現状試せていません。
勉強不足ですね、わかる方教えて下さい。
とりあえず、表示はOKなので、gitでバックアップしておきます。
- 　ターミナルでコミットしてもいいですが、atomでのコミットのほうが簡単です。
- 　atomの右端中央に、矢印がでてきますので、そこから開いてください。
- 　Stage All
- 　Commet message に入力したあと　Commitです。

ここで、環境をもう少し変更します。　Pugをいれてみます

<template> の中はhtmlで書きますが、ここをPug形式で書き換えたいと思います。

htmlの書式は、書いているといると面倒になってくるのでそんな時に出会ったのがhamlでした。
htmlを簡略化して書けて、tag抜けで表示がおかしくなるのも防げます。　Pugは、残念ながらdotinstallさんには、ありませんが、Pugのお父さん？である hamlは学べますので目を通すといいかと思います。

考え方は同じなのですが少し書き方が異なります。
- ここでは、そんな難しい事をしませんので、htmlと見比べていたらわかります。

Pugをnodeに入れます

webpackディレクトリに戻ります。
npm install --save-dev pug-loader pug
App.vueを編集します。
- <template> を書き換えます

<template lang="pug">
  #app {{ message }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'Hello VueW!'
    }
  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

好みはあると思いますが、すっきり書けるのでnode環境はPugで書きたいと思います.
これで、環境編は終了です。
最初は、自分用のメモを公開すれば、他の人にも役に立って、おかしい解釈やもっといい方法教えてもらえるかもとupしましたが、予想以上に面倒でした。（笑）
反応があるようでしたら、もう少し続けていこうかと思いますので、よろしくお願いします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

dotinstall で勉強している初心者がVue.jsの公式ガイドを勉強するメモ 環境編

環境編

対象は、dotinstallさんでjavascriptを勉強している、同レベルの方向けです。

Vue.js のガイドは、https://jp.vuejs.org/v2/guide です。

この環境編は、実際にVue.jsを学ぶところまでいきませんので、ご自分の環境がある人は、このページは飛ばしていただいたらいいかと思います。

趣旨

環境

前振り

では、環境を作ります。

少し長いですが、おつきあいぐださい。

次にnode環境も作ってしまいます。

これで、ほぼ環境が整いました。

宣言的レンダリング

ここで、一旦 この状態をバックアップして、この状態を戻せるようにしておきます。

node側も同じところまで、書き換えます。

宣言的レンダリング

ここで、環境をもう少し変更します。 Pugをいれてみます

Pugをnodeに入れます

dotinstall で勉強している初心者がVue.jsの公式ガイドを勉強するメモ　環境編

ここで、一旦この状態をバックアップして、この状態を戻せるようにしておきます。

ここで、環境をもう少し変更します。　Pugをいれてみます