VUE JS「初めて導入する人」のための簡単導入方法
この最近、WEB制作現場で、JS（JavaScript）事情が激変し、今まで「jQueryがとりあえず実装できれば良い」なんて感じでしたが、WEBアプリに対応したスクリプトやプレーンなJS（ES6など）が注目され、「脱jQuery」といった流れがあるので、今回はWEBアプリ等でも使用されている「VUE JS」の基本設定について紹介したいと思います。
ポイント
-
VueはUIパーツを構築するのに特化したフレームワーク
-
部分的に導入できる
VUE JS
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
jp.vuejs.org
VUE.JSは従来のフレームワークと異なり、パーツやコンポーネントなど部分的に適応できるところがメリットです。
JQueryなどは、書く順番などでエラーなどで悩まされたりとても大変ですが、部分的に導入できるので、既存の公開ページの改修などが割と導入しやすいフレームワークです。
VUE JSをHTMLに実装
早速、VUE JSを実装してみたいと思います。下のように記述すればとりあえずは動きますのでコピペしても問題ないと思います。
今回はwebpackなどを使用せず、通常のコーディングで容易に実装できるCDNでの実装例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<link href="./common/css/style.css" rel="stylesheet"></head>
<body>
<h1>基本的なVUE</h1>
<div id="app">
<!-- ここにレンダリングされます -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var app = new Vue({
//option
el: '#app',//IDを指定します
//option
data:{
//ここに定義していきます
}
})
</script>
</body>
</html>
本番環境での定義
<!-- 本番バージョン、サイズと速度のために最適化されています --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
開発環境での定義
<!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
簡単な実装例
下記コードは最もシンプルに記述した例になります。指定したID（エレメント）内に対して、「message: ‘Hello Vue!’」というデータを定義しています。
実行すると「 {{ message }}」にテキストが渡されます。
<!-- html code -->
<div id="app">
{{ message }}
</div>
<!-- JS code -->
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
実行すると下記のように「Hello Vue!」というテキストが代入されます。
詳しくはVUE JS公式サイトでご確認ください。
<!-- 実行後html code --> <div id="app"> Hello Vue! </div>
まとめ
最近、今まで使われていた「jQuery」などは使われない傾向になってきたというのは本当ですか。
部分的に導入できるのも「VUE JS」の魅力と言えるでしょう。
おすすめ学習サイト
筆者は、最近Udemyで学習しております。
今まで技術本主体で学習していましたが、とても分かりやすく説明してされているのでお勧めです。
ご興味ある方はぜひ！