ウェブログラム

実践しながらじっくり学ぶ、Webプログラム習得サイトです。自作サービスの公開までWeb開発を実践していきましょう!

Webrogram

自分のオリジナルサービスを作って運営しよう!

【Vue2 入門編】Vue.jsを超簡単に初めてみよう

フロントエンド技術として、近年注目を集めている「Vue.js」について入門していきましょう。 ここから何回かに分けて、Vue.jsを学んで習得していきます。

第1回目はVue.jsの簡単な導入をし、サンプルプログラムを実行していきます。

Vue.jsを読み込んでみる

Vue.jsはjsスクリプトを読み込むことで、簡単に使うことができます。

googleで「vuejs cdn」と検索してみてください。以下のようなページがあると思います。

jp.vuejs.org

以下のように、jsファイルのCDNが用意されていますので、htmlファイルに読み込んであげましょう。

f:id:iku8:20180624181345p:plain

<html lang="ja">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
  </body>
</html>

これで読み込みが出来ています。

Chrome等で検証ツールを使って、エラーが表示されていないことを確認しましょう。 CDNなどがなくなったり、urlが間違っている場合などは、読み込みエラーとなります。

f:id:iku8:20180624181628p:plain

上の画像の様にエラーが無ければ、読み込みに成功している証拠です。

Vue.jsを使ってみよう

超簡単なサンプルプログラムを記述しました。

<html lang="ja">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>

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

これで以下のようにブラウザに表示されていればOKです。

f:id:iku8:20180624181830p:plain

簡単に解説してみますね。

new Vueって何?

これは、Vueインスタンスを作成しています。 「Vueが使うという宣言」という風に考えておけばOKです。

Vueのいろいろな機能はこのインスタンスを作成することで使えるようになります。

elって何?

Vueが管理する範囲のことです。 elはエレメント(要素)を指しています。

今回の場合「#app」となっています。 つまり、idがappのHTML要素内すべてがVueの管理下となります。

このような指定をすることで、このdiv要素の子要素たちはVueで管理したいが、他の部分は管理しなくて良いということができます。

bodyとかにもIDをつけ、elで設定することが出来るので、 この場合はページすべてがVueの管理下ということになります。

dataって何?

このdataは文字通り、Vueで使用するデータを定義する場所です。 今回はmessageという名前で、値「Hello Vue!」を定義しています。

このmessageという部分は自由に変更可能です。自分の設定したものに変えても大丈夫です。

dataでは配列を持つことも可能ですし、連想配列だって定義できます。

data: {
  messages: [
    'Hello Vue!',
    'Hello Vue!2',
  ]
}
data: {
  user: {
    name: 'takeshi',
    age: 20,
  }
}

配列と連想配列の定義の方法は若干違うので気をつけましょう []と{}の違いですね。

連想配列を配列として複数データを持つこともできますよ。

data: {
  users: [
    {
      name: 'takeshi',
      age: 20,
    },
    {
      name: 'minamino',
      age: 40,
    },
  ]
}

データは自由に定義できますので、いろいろ試してみてください。 ちなみに上のusersというデータを表示してみると、

{{ users }}

f:id:iku8:20180624184704p:plain

このように連想配列で複数データを持っていることが分かります。

ですが、これでは単純に配列を表示しているだけなので、 データの値そのものを表示しないといけません。

そこでv-forというものを使って、配列をくるくる回し、データの値を表示していきましょう。 次回は「v-for」や「v-if」といったVue独自の記法を学んでいきましょう。

ちなみに、これらの記法は「ディレクティブ」と呼ばれれます。