【第1回】Vue.js 入門 〜Hello World編〜
2020.08.09
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 2 | $ mkdir vue-helloworld $ cd vue-helloworld |
プロジェクトファイル直下にhtmlファイルを作成
引き続き、コマンドラインよりhtmlファイルを作成します。
1 | $ touch index.html |
作成した index.html の中身を準備しましょう。
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Worldを表示するプログラム</title> </head> <body> <!--- TODO: "Hello World" を表示する ---> </body> </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 2 3 4 | <body> <!--- TODO: "Hello World" を表示する ---> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> |
これで、Vue.js を使う準備ができました！
表示用htmlを書いてみよう
"Hello World" を表示するための div 要素を用意します。
今回は、 message という変数に "Hello World" の文字列を入れて表示させようと思います。
そのために、まず message という変数を {{ }} で囲ってあげましょう。
{{ }} のように、二重の波括弧で囲う記法は、マスタッシュ構文と呼ばれます。
1 | <div id="app">{{ message }}</div> |
TODO コメントがあった位置に記述します。
1 2 3 4 | <body> <div id="app">{{ message }}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </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' となります。
1 2 3 4 5 6 | const app = new Vue({ el: '#app', data: { message: 'Hello World' } }) |
<script> タグで囲って以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 | <body> <div id="app">{{ message }}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> </body> |
注意点
Vue.js 関連のスクリプトは、必ずCDNよりあとに読み込むようにしましょう！
確認
これでプログラムが完成しました。
ブラウザで確認して下記のように表示されたらOKです！
index.html 全文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Worldを表示するプログラム</title> </head> <body> <div id="app">{{ message }}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> </body> </html> |
第2回へ続く
ちなみに、ネイティブのJavaScriptで同じように"Hello World"を表示するプログラムを書くと、下記のような記述になります。
ネイティブのJavaScriptは、Vanilla JS と呼ばれたりもしますね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Worldを表示するプログラム</title> </head> <body> <div id="app"></div> <script> const app = document.getElementById("app"); const message = "Hello World"; app.innerText = message; </script> </body> </html> |
一見すると、「ネイティブJavaScriptの方が記述量が少なくて、わざわざ Vue.js を使わなくてもいいのではないか？」と思いますよね。
今回は、message で表示するのは "Hello World" の文字列のみ固定の仕様でした。
では、message の値がユーザからの入力などによって、何度も変更される仕様だとどうなるでしょうか？
もし、ネイティブのJavaScriptで実装するとなると、データを監視し、その変更に応じてDOMを書き換える処理などが必要になるため、複雑な実装がさらに必要になります。
Vue.js では、仮想DOMを活用したリアクティブな描画を実装しています。
そのため、特別な実装をする必要もなく、データの監視や変更を追跡し、その都度DOMに反映することが可能なんです！
次回以降は、さらに詳しく Vue.js の使い方を見ていきたいと思います！
Vue.jsでのシステム開発依頼・お見積もりはこちらまでお願いします。
また、Vue.jsが扱えるエンジニアを積極採用中です！詳しくはこちらをご覧ください。
次回の記事はこちら
こちらの記事もオススメ！
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
IT技術2021.04.23【第2回】Djangoで日記アプリを作ろう～トップ画面編～- IT技術2021.04.16【第1回】Djangoで日記アプリを作ろう～環境構築編～
- IT技術2021.03.2910月20日メジャーアップデート！「Node.js v15」の新機能とは？
- IT技術2021.03.02TypeScriptの型を問題形式で学べる「type-challenges」とは？
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
