1. HOME
  2. ブログ
  3. IT技術
  4. 【第1回】Vue.js 入門 〜Hello World編〜

【第1回】Vue.js 入門 〜Hello World編〜

Vue.js を始めてみよう!

宮田宮田

(株) ライトコード Webエンジニアの宮田です。

今回、 JavaScript のフレームワークの一つであるVue.js(ビュージェイエス) を触ることになったので、学習したことを書いていきたいと思います。

最終的には Vue.js に基づいたフレームワークの Nuxt.js(ナクストジェイエス) を利用した開発を目標とします。

まず今回は、入門第1回の定番である“Hello World” プログラムから始めていきたいと思います!

開発環境

OSMacOS Catalina 10.15.1
Vue.js2.6.10

プロジェクトファイルを作成しよう

コマンドラインから下記のコマンドを実行し、プロジェクトファイルを作成します。

プロジェクトファイル直下にhtmlファイルを作成

引き続き、コマンドラインよりhtmlファイルを作成します。

作成した index.html の中身を準備しましょう。

CDNを読み込もう

Vue.js を導入するには、いくつか方法があります。

例えば、NPMを利用してインストールする方法や、CLIをインストールする方法もあります。

ですが、今回は CDN を利用します。

Vue.jsのCDNをhtml内に記述

Vue.js の CDN は、下記のタグをhtml内に記述するだけで簡単に利用できます!

<body> タグの、閉じタグ手前に記述しましょう。

これで、Vue.js を使う準備ができました!

表示用htmlを書いてみよう

“Hello World” を表示するための div 要素を用意します。

今回は、 message という変数に “Hello World” の文字列を入れて表示させようと思います。

そのために、まず message という変数を {{  }}  で囲ってあげましょう。

{{  }} のように、二重の波括弧で囲う記法は、マスタッシュ構文と呼ばれます。

TODO コメントがあった位置に記述します。

htmlは、これでOKです。

Vue関数を使ってみよう

Vue関数で、新しいVueインスタンスを作成します。

el の値を '#app' (id属性が ‘app’ のエレメント)とすることで、 <div id="app"> ~~ </div> の範囲にVue関数が使用できるようになります。

data の値の Object には、エレメント内で使用する変数と値を key: value 形式で記述しましょう。

今回は、message という変数に “Hello World” の文字列を入れて表示するので message: 'Hello World' となります。

<script> タグで囲って以下のように記述します。

注意点

Vue.js 関連のスクリプトは、必ずCDNよりあとに読み込むようにしましょう!

確認

これでプログラムが完成しました。

ブラウザで確認して下記のように表示されたらOKです!

index.html 全文

最後に

ちなみに、ネイティブのJavaScriptで同じように“Hello World”を表示するプログラムを書くと、下記のような記述になります。

ネイティブのJavaScriptは、Vanilla JS と呼ばれたりもしますね。

一見すると、「ネイティブJavaScriptの方が記述量が少なくて、わざわざ Vue.js を使わなくてもいいのではないか?」と思いますよね。

今回は、message で表示するのは “Hello World” の文字列のみ固定の仕様でした。

では、message の値がユーザからの入力などによって、何度も変更される仕様だとどうなるでしょうか?

もし、ネイティブのJavaScriptで実装するとなると、データを監視し、その変更に応じてDOMを書き換える処理などが必要になるため、複雑な実装がさらに必要になります。

Vue.js では、仮想DOMを活用したリアクティブな描画を実装しています。

そのため、特別な実装をする必要もなく、データの監視や変更を追跡し、その都度DOMに反映することが可能なんです!

次回以降は、さらに詳しく Vue.js の使い方を見ていきたいと思います!

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事