Help us understand the problem. What is going on with this article?

jQueryおにいさんと始める Vue.js その1 〜初めましてVueさん〜

More than 1 year has passed since last update.

はじめに

どうも。jQueryおじさん改めjQueryおにいさんのなべっちです!
4月1日ということで新しいことを始めようと思います。
以前からずっと気になっていたVue.jsに重い腰を上げて入門します。

今回のシリーズの目的と方針(予定)

  • Vue.js + Firebaseで何か作って公開する
  • 少しずつできる事を増やしながらやったことと感じた事を筆者目線で殴り書く←ここ重要
  • つまり、筆者と同じ体験をすることになる
  • 決して解説記事ではない
  • まあ解説になることもあるかもしれない
  • 緩くてもいいじゃないか 人間だもの なべを

筆者の前知識

  • Vue.jsナウいらしい
  • jQuery古いらしい
  • Vue.js + Firebaseとかで簡単にアプリケーションローンチできるらしい
  • なんかすげえらしい

今回のお題は公式ガイドの「はじめに」

今回はVue.js公式サイトに沿ってちょろっと動かします。
日本語のガイドがあってよかったですw
https://jp.vuejs.org/

「はじめに」を全てやってみます。
https://jp.vuejs.org/v2/guide/index.html

jsfiddleが使えるって?
https://jsfiddle.net/boilerplate/vue/
あー凄いなこれ。今回は使いません。

早速Hello Vue!や!

宣言的レンダリング

なるほどなるほど。VueではHTMLに{{message}}って感じに変数おいてJSで値作るんですね!
{{message}}みたいに{{}}で表すのをmustache構文って言うのか。
マスタッシュ!かっこええやん!(小並感)
mustacheって口ヒゲって言う意味なんだな......え?括弧がヒゲっぽいから?
深く考えるのはやめときましょう...とりあえずHTML書いて...
ってこれJSどこにかくんです?
とりあえず普通のJSっぽく書いてみようか。
ええい!ままよ!

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{message}}
    </div>
  </body>
</html>


<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

そんなわけ....

っていけるんかーい

スクリーンショット 2018-04-01 15.49.04.png

とか一人で突っ込みながらHello Vue!は完了。

この時点でjQueryおにいさんセンセーショナルを感じる。

 

ブラウザのコンソールで色々値をいじれる


これで初めての Vue アプリケーションが作成できました!一見するとただテンプレートを描画しているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM は関連付けられ、そして全てがリアクティブになっています。どのようにしてそれが分かるのでしょうか?ブラウザの JavaScript コンソールを開いて、app.message の値を変えてみましょう。描画されたサンプルが、上記に応じて更新されるのが確認できるでしょう。

このコンソールってエラーのチェックくらいにしか使った事なかったけどこんなことできるの?
て言うか結局何ができるのさ。
わからん。わからんけどデバッグに使いそう。(適当)

スクリーンショット 2018-04-01 16.07.01.png

 

要素の属性にバインディングできる


文字列の展開に加えて、以下のように要素の属性を束縛(バインディング)することもできます

いや、束縛(バインディング)ってww

テキストだけではなくて要素にもバインディングできるのね

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>
  </body>
</html>


<script type="text/javascript">
  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  })
</script>

スクリーンショット 2018-04-01 16.10.21.png

それよりtitleって属性つけたらこうなることを俺は知らんかったぞ?(無知)

色々な制御を試そう!

条件分岐とループ

1つ1つ試すのめんどくさい!と言う事で一気にできそうなことやってしまえ!

とりあえず


  • 表示/非表示

  • ループ

  • 分岐

  • 入力


ここら辺全部盛り込んでみよう。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button v-on:click="changeSeen">Change Seen</button>
      <ol>
        <li v-if="seen" v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
      <input v-model="addText">
      <button v-on:click="addTodoText">Add Todo Text</button>
    </div>
  </body>
</html>


<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      seen: true,
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    },
    methods: {
      changeSeen: function () {
        this.seen = !this.seen
      },
      addTodoText: function () {
        app.todos.push({ text: this.addText })
      }
    }
  })
</script>

ええやんけ

でもコンソール見るとエラーでてる...

スクリーンショット 2018-04-01 16.54.24.png

バインディングに使うinputの要素は一度data内で定義しないといけないみたいですねー

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      seen: true,
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ],
      addText: '' // <- ここ
    },
    methods: {
      changeSeen: function () {
      this.seen = !this.seen
      },
      addTodoText: function () {
        app.todos.push({ text: this.addText })
      }
    }
  })
</script>

コンポーネント

コンポーネントによる構成

色々なところで使うであろう機能を部品化して使い回す。
実際にサービス作る上では欠かせない機能ですよね!

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <ol>
      <todo-item></todo-item>
    </ol>
  </body>
</html>


<script type="text/javascript">
  Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
  })
</script>

こんな感じかなー...

スクリーンショット 2018-04-01 17.42.57.png
ファ!?!?真っ白だー(^q^)

どうもコンポーネントを使えるエレメントを指定しないといけない模様。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <ol>
        <todo-item></todo-item>
      </ol>
    </div>
  </body>
</html>


<script type="text/javascript">
  Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
  })
  // ここ追加
  new Vue({
    el: '#app'
  })
</script>

スクリーンショット 2018-04-01 17.46.11.png

でもこの指定のしかたはどうにも腑におちません...もう少し理解を深めたら納得できるのかな...

そしてもちろんコンポーネントの中身もバインディングできると

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ほげSP</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
  </body>
</html>


<script type="text/javascript">
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li id="li-{{ todo.id }}">{{ todo.text }}</li>'
  })

  var app = new Vue({
    el: '#app',
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  })
</script>

サンプルのgroceryListの定義にidがあるのに使ってなかったからなんとなくliのidに指定してみたんだけど...

スクリーンショット 2018-04-01 18.01.40.png

お...おう。ここには使えないんすね。よくわからんけど今後明らかになるでしょう。

終わりに

初心者なので解説だとかそう言った観点で記事を書くのもどうかなーと思って書いてみましたがどうなんでしょうか?
Vue.jsに自信ニキからの激しいツッコミと応援待ってるぜ!!

ブログで見たい方はこちら
Vue jQueryおにいさんと始める Vue.js その1

次回はこちら
jQueryおにいさんと始める Vue.js その2 〜vue-cliでプロジェクト作ってFirebaseで公開〜

ayies128
株式会社illustrious CTO。 EC業務を色々な角度から効率化できるように日々システム開発を行っています。 システム開発の話から飲みに行こうって話までなんでもどうぞ。 うどんとお酒と #UVERWorld が大好きです。 世界で売るためのECインフラサービス「lismoa」の開発運営を行なっています。 https://lismoa.com/
http://nabesys.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away