メディアチーム【第1回】Vue.js 入門 〜Hello World編〜
メディアチームIT技術
Vue.js を始めてみよう！
宮田(株) ライトコード Webエンジニアの宮田です。
今回、 JavaScript のフレームワークの一つであるVue.js（ビュージェイエス） を触ることになったので、学習したことを書いていきたいと思います。
最終的には Vue.js に基づいたフレームワークの Nuxt.js（ナクストジェイエス） を利用した開発を目標とします。
まず今回は、入門第1回の定番である"Hello World" プログラムから始めていきたいと思います！
開発環境
| OS | MacOS Catalina 10.15.1 |
| Vue.js | 2.6.10 |
プロジェクトファイルを作成しよう
コマンドラインから下記のコマンドを実行し、プロジェクトファイルを作成します。
1$ mkdir vue-helloworld
2$ cd vue-helloworldプロジェクトファイル直下にhtmlファイルを作成
引き続き、コマンドラインよりhtmlファイルを作成します。
1$ touch index.html作成した index.html の中身を準備しましょう。
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Hello Worldを表示するプログラム</title>
6 </head>
7 <body>
8 <!--- TODO: "Hello World" を表示する --->
9 </body>
10</html>CDNを読み込もう
Vue.js を導入するには、いくつか方法があります。
例えば、NPMを利用してインストールする方法や、CLIをインストールする方法もあります。
ですが、今回は CDN を利用します。
Vue.jsのCDNをhtml内に記述
Vue.js の CDN は、下記のタグをhtml内に記述するだけで簡単に利用できます！
1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body> タグの、閉じタグ手前に記述しましょう。
1<body>
2 <!--- TODO: "Hello World" を表示する --->
3 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4</body>これで、Vue.js を使う準備ができました！
表示用htmlを書いてみよう
"Hello World" を表示するための div 要素を用意します。
今回は、 message という変数に "Hello World" の文字列を入れて表示させようと思います。
そのために、まず message という変数を {{ }} で囲ってあげましょう。
{{ }} のように、二重の波括弧で囲う記法は、マスタッシュ構文と呼ばれます。
1<div id="app">{{ message }}</div>TODO コメントがあった位置に記述します。
1<body>
2 <div id="app">{{ message }}</div>
3 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4</body>htmlは、これでOKです。
Vue関数を使ってみよう
Vue関数で、新しいVueインスタンスを作成します。
el の値を'#app' （id属性が 'app' のエレメント）とすることで、<div id="app"> ~~ </div> の範囲にVue関数が使用できるようになります。
data の値の Object には、エレメント内で使用する変数と値を key: value 形式で記述しましょう。
今回は、message という変数に "Hello World" の文字列を入れて表示するのでmessage: 'Hello World' となります。
1const app = new Vue({
2 el: '#app',
3 data: {
4 message: 'Hello World'
5 }
6})<script> タグで囲って以下のように記述します。
1<body>
2 <div id="app">{{ message }}</div>
3 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4 <script>
5 const app = new Vue({
6 el: '#app',
7 data: {
8 message: 'Hello World'
9 }
10 })
11 </script>
12</body>注意点
Vue.js 関連のスクリプトは、必ずCDNよりあとに読み込むようにしましょう！
確認
これでプログラムが完成しました。
ブラウザで確認して下記のように表示されたらOKです！
index.html 全文
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Hello Worldを表示するプログラム</title>
6 </head>
7 <body>
8 <div id="app">{{ message }}</div>
9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 <script>
11 const app = new Vue({
12 el: '#app',
13 data: {
14 message: 'Hello World'
15 }
16 })
17 </script>
18 </body>
19</html>第2回へ続く
ちなみに、ネイティブのJavaScriptで同じように"Hello World"を表示するプログラムを書くと、下記のような記述になります。
ネイティブのJavaScriptは、Vanilla JS と呼ばれたりもしますね。
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Hello Worldを表示するプログラム</title>
6 </head>
7 <body>
8 <div id="app"></div>
9 <script>
10 const app = document.getElementById("app");
11 const message = "Hello World";
12 app.innerText = message;
13 </script>
14 </body>
15</html>一見すると、「ネイティブJavaScriptの方が記述量が少なくて、わざわざ Vue.js を使わなくてもいいのではないか？」と思いますよね。
今回は、message で表示するのは "Hello World" の文字列のみ固定の仕様でした。
では、message の値がユーザからの入力などによって、何度も変更される仕様だとどうなるでしょうか？
もし、ネイティブのJavaScriptで実装するとなると、データを監視し、その変更に応じてDOMを書き換える処理などが必要になるため、複雑な実装がさらに必要になります。
Vue.js では、仮想DOMを活用したリアクティブな描画を実装しています。
そのため、特別な実装をする必要もなく、データの監視や変更を追跡し、その都度DOMに反映することが可能なんです！
次回以降は、さらに詳しく Vue.js の使い方を見ていきたいと思います！
次回の記事はこちら
2019.11.18【第2回】Vue.js 入門 〜ディレクティブ編〜ディレクティブを使ってみよう！宮田(株) ライトコードの宮田です。前回は、Vueインスタンスを作成し、data に持た...
こちらの記事もオススメ！
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
おすすめ記事
immichを知ってほしい
キムくん（エンジニア）2024.10.31
