Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
第1回vue勉強会資料

Vue-cli環境構築

vue-cliで簡単にvue.jsの環境構築ができます。

前提条件

以下がインストールされていること

  • node.js
  • npm

ver

node -v npm -vでインストールされているバージョンが確認できます。

新卒でインストールしていない方はしてください。※その他の方は大丈夫です。 nodeはnodebrewなどを使用して、バージョンを管理しておきましょう。

1.ターミナルを開きます。

spotlight(command+space)で ターミナルって入れると候補で出してくれます。
ターミナルを開くよ

vue-cliをインストールします

npm install -g vue-cli

vue-cliインストール

インストールが始まります。
ちょっと長いかも・・・

インストール

終わりました。

プロジェクトを作成します

vue init webpack my-project

init

色々聞いてきます。

projectname

EnterでOK

description

EnterでOK

author

EnterでOK

runtime

EnterでOK

install

yを入力

lint
ここはnにしておきましょう

unit

nにします

e2e
nにします

project作成終了
project作成終了です

まだ終わっていません!

cd my-projectでディレクトリを移動します。

cdするよ

これで、現在地はmy-projectです

npm installします。
ちょっと長いです。

npminstall

終わりました
終わりました。

起動します

環境構築は完了です。
立ち上げてみましょう!
npm run devでローカルのnodeサーバーが起動します。

npmrundev

npmrundev
URLを教えてくれるので、アクセスしてみましょう。
この場合はhttp://localhost:8080です

vue

開きました!

起動したサーバーはctrl+cで終了することができます。

便利ツールを導入しておきましょう!

vue.js devtoolsというchromeのアドオンがあります。

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

vue

先ほど立ち上げたhttp://localhost:8080で、このように使うことができます。

導入後

環境構築は以上です!!

Vue.js勉強会 vol.1

Hello Worldから始めるVue.js

対象者

Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやってみます。

JavaScriptってなに

ざっくり図

PHP と JavaScript の ちがい

項目 JavaScript PHP
実行環境 ブラウザで動くので、ファイルを作成するだけでOK。 サーバーが必要。ファイルだけでは動かない。
実行 タイミング 必ずイベントを指定する。ページロード時・クリック時、などページ表示のタイミングのみ。 ページ表示のタイミングのみ。
HTMLの 変更部分 ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK(非同期) 1箇所を書き換えるだけでも、1ページ丸々再度描画しないといけない。(同期)

ページ全部を変えたい時はPHP。 ちょっとだけ変えたい時はJavaScript。


何が違うんですか?

  • JavaScript
  • jQuery
  • Vue.js

3つ並び

[ 参考 ] http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9


ライブラリとフレームワークのちがい

jQueryっていうライブラリ

よく使うものを集めたものがライブラリ。パーツ集です。

jQureyは、JavaScriptをより扱いやすく、簡単に書けるようにしたもの。

そのライブラリの決まった記述で呼び出して扱う。

[参考コード] https://jsfiddle.net/pocchi/udhacmdo/8/ 簡単なhoverの処理ですが、 jQueryで4行、JavaScriptで8行になってます。すっきり。

[引用] https://webkikaku.co.jp/blog/webdesign/jquery_start/ [参考] http://semooh.jp/jquery/


ライブラリとフレームワークのちがい

Vue.jsというかフレームワーク

すでに決まっている設計に基づき、開発者は基本的には、そのひな形に沿ってコードを書いて行く。

[参考コード] https://jsfiddle.net/chrisvfritz/50wL7mdz/

ライブラリが部品なら、フレームワークはひな形 なので、一緒に使うことも可能。

[参考・引用] http://itpro.nikkeibp.co.jp/article/lecture/20070205/260697/?rt=nocnt http://pikurusux.hatenablog.com/entry/2015/05/28/123326

Vue.jsと他のJSフレームワーク

他にももちろんいっぱいJSフレームワークはあります。 フレームワーク群 などなどなど・・・いっぱいあるので、 開発に合わせて選択すること、 流行り廃れをなんとなく知っておくが必要。

Vue.jsの良きところ

  • 学習コストが比較的低めで、自分の習熟度に合わせて取り入れられる
  • 小中規模のシステムに向いている
  • 他フレームワークの良いところをあわせもっている
  • 日本語リファレンスが充実していてわかりやすい。

・・・なので、JSフレームワークこと初めには良いんじゃないでしょうか。

では、はじめてみましょう!

Vue.jsの始め方(初心者用)

jsFiddleを使用する

https://jsfiddle.net/chrisvfritz/50wL7mdz/ 今回はこれを使います。 Forkを押して、自由に書き換えましょう Runで実行されます。保存はUpdate。 保存しなくてもRunできます。 URLを覚えておけば、いつでもアクセスできます。

htmlの

<!-- Vue.jsの読み込み -->
<script src="https://unpkg.com/vue"></script>

で、vue.jsを読み込んでいます。

messageを変更してみよう

new Vue({
  el: '#app',
  data: {
    message: 'ここを変更してみて'
  }
})

変更後、Runをクリック!

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/1/

こんな書き方もできる

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p v-html="message">メッセージ</p>
</div>

v-htmlという属性をつければはじめに書いておいて、 置き換えることもできる。 {{生の文字列}}だが、v-htmlはHTMLとして扱える。

[参考]https://jp.vuejs.org/v2/guide/syntax.html#生の-HTML

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/2/

v-ifで出し分け

<div id="app">
  <p v-if="message">メッセージ</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: true
  }
})

[参考]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ https://jp.vuejs.org/v2/guide/#条件分岐とループ

[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/3/

message: falseに変更してみましょう

[変更後はこれ] https://jsfiddle.net/pocchi/rtec7eyh/4/

ところでv-ってなに

v- から始まる特別な属性をディレクティブと言います。

単一の JavaScript 式を期待します。 ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を ※DOM に適用すること。

さっきの例だと、 trueで挿入、falseで削除できるってこと ※DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。このDOMを操作することによって、要素の値をダイレクトに操作できます。

[参考・引用]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ http://piyo-js.com/05/dom.html

Vue.js側で値を変化させれば、 それにつられてHTMLも勝手に変わる

** つまり、状態を管理しやすい ! **

v-forでリストを表示する

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
     todos: [
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
    ]
  }
})

[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/5/

何をやっているのか

リスト表示 todosの中身をtodoの中に上から1つずつ移し替えている

TODOリストを作ってみましょう!

TODOリストのTODOリスト

  • やることを入力する
  • やることリストを見る-->すでにできている!
  • やることが終わったら消す

やることを入力できるようにしよう

<div id="app"><!-- この下から追記 -->
  <input v-model="inputText" type="text" />
  {{inputText}}<!-- この上まで追記 -->
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {/* この下から追記 */
     inputText: null,
     todos: [/* この上まで追記 */
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
//以下省略

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/1/

フォームに入力すると値が取得できることは確認できた! 次は保存ボタンをつけたい!

<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
     /* --inputTextとtodosは中略-- */
  },/* この下から追記 */
  methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    }
  }
})/* この上まで追記 */

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/6/

どうなっているのか

メソッド説明

どうなっているのか

push説明

これで、保存ができる!

後は削除するにはどうしたらいいのか!

<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo, index in todos">
      {{todo.text}}<!-- この下から変更! -->
      <input type="submit"
      value="削除" 
      v-on:click="remove(index)" />
    </li><!-- この上まで変更! -->
  </ol>
</div>
 methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    },/* <-コンマをつけて、この下から追記 */
    remove: function(index){
        this.todos.splice(index, 1);
    } /* ここまで追記 */
  }

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/16/

何が起こっている?

削除の流れ


コンポーネント化してみましょう!

こんぽーねんと

1つの部品を再利用することができる。

<div id="app">
  <!-- 中略 -->
  <ol>
      <list-component 
      v-for="todo, index in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:text="index"
      ></list-component>
  </ol>
</div>

new Vue({の上に追加

Vue.component('list-component', {
  template: '<li>{{text}}
             <input 
              type="submit" 
              value="削除" 
              v-on:click="remove(index)" />
             </li>',
  props:['text','index']
});

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/17/

削除が動かない!

削除の流れ

メソッドも渡してあげよう!

[参考]https://jp.vuejs.org/v2/guide/components.html#カスタムイベントとの-v-on-の使用

<list-component 
      v-for="todo in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:index="todo.index"
      v-on:remove="remove(todo.index)"
      ></list-component>
Vue.component('list-component', {
  template: `<li>{{text}}
             <input type="submit"
             value="削除"
             v-on:click="$emit('remove')"/></li>`,
  props:['text','index']
});

template: `` で囲まれていることに注意!
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/18/

動きましたか?

以上で、終わりです。

参考

公式(日本語)

https://jp.vuejs.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment