Vue JS

Hello Vue.js!

最近話題のVue.jsを使ってみます。
ブラウザにHello Vue.js!と表示させるのがゴールです。

1. Vue.jsとは

Vue.jsはオープンソースのJavaScriptフレームワークです。主にUIを構築するためのフレームワークです。
誰もが自由に使えて、プログラムの基盤は作れるからあとは自由にカスタマイズしてね、ということですね。

また、Vue.jsは3つの特徴があります。

開発の柔軟性(スケーラビリティ)
低い導入コストと学習コスト
豊富な日本語ドキュメント

1. 開発の柔軟性

大規模開発や、小中規模、画面の一部、画面の全体など規模関係なしに取り入れることが可能です。
アプリケーションの規模によって、スケールアップ・スケールダウンが簡単に行えます。

2. 低い導入コストと学習コスト

jQueryなどと同様で、ファイルを読み込む or scriptタグを一つ読み込むだけでvue.jsを取り入れることが可能です。
また、開発環境を用意する必要がありませんので、手軽に導入することが可能です。

3. 豊富な日本語ドキュメント

vue.jsには日本語公式ガイダンスがあるのと、Qiita等の記事でたくさんの記事が公開されています。
Vue.js公式ドキュメント：https://jp.vuejs.org/index.html
Qiita(Vue.js検索結果)：https://qiita.com/search?q=Vue.js

2. 実装

では早速コードを書いていきます。
まずはシンプルなindex.htmlを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Vue.js!</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

次にVue.jsを利用できるよう、CDNを用いて導入します。

...編集
<body>
  <div id="app"></div>
  <script src="https://jp.vuejs.org/js/vue.js"></script>
</body>

最後にHello Vue.js!を表示させます。

<body>
  <div id="app"> {{ message }} </div>
  <script src="https://jp.vuejs.org/js/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        message: "Hello Vue.js!"
      }
    })
  </script>
</body>

ブラウザにHello Vue.js!が表示されたでしょうか？

el: でvueの対象範囲のセレクタを指定します。要は<div id=”app”></div>が対象範囲ということです。
data: はvue内で使用するデータを指定します。vue内で使用できるデータはもちろんHTMLでも使用できます。
{{ }} これはマスタッシュ(Mustache)構文と呼ばれ、{{}}で囲むとvueで定義してあるデータを表示することが可能です。
今回はmessageという名前でHello Vue.jsという値が存在するので、Hello Vue.jsがブラウザに表示されました。

どうでしたか？Vue.jsの導入は難しかったでしょうか？
引き続き学習していきましょう。
Vue.jsへようこそ。