【使って覚えるVue.js入門】第2回:基本的な記述方法を覚えて動的に文字を出力させてみよう!!

使って覚えるVue.js 第2回基本的な記述方法で動的に文字を出力しよう!

投稿日:

はじめに

こちらは、Vue.jsを使いながら覚えていく【使って覚えるVue.js入門】です。
第2回目となる今回は、Vueの「基本的な記述方法(インスタンス)」を解説してから、実際に動的に文字を出力させていきます!

Vue.jsはこれから【確実に】流行っていくフレームワークなので、ぜひ今のうちにマスターしておきましょう!!

Vue.jsを扱うことが出来れば、プロジェクトによっては重宝されると思います。
また、未経験での転職でも圧倒的に有利になれると思います!

Vueの基本的な記述方法

まず初めに、Vueの基本的な記述方法について学んでいきましょう!!
Vueの基本的な処理の流れとしては、

・「Vueコンストラクタ」のインスタンスを作成
・生成したインスタンスに対して動的な処理を施す
・(必要であれば)処理に応じてHTML側にレンダリング

という感じになります。

「コンストラクタ」やら「インスタンス」やら専門用語が出てきましたね・・・。
ただ、この辺の専門用語は、初めのうちはスルーで大丈夫です!!

こんな抽象的な紹介だとピンと来ないと思うので、これから数回にわたって解説していきます!!

インスタンスの作成

インスタンスの作成は、Vueを扱う上で、避けては通れない作業です。
インスタンスは次のように作成します。
まずは、【Vueを使うためのおまじない】と覚えておきましょう!

// Vueコンストラクタのインスタンス化
const hoge = new Vue( /* ここにオプションを定義する */ );

引数にオプションを与えることで、「文字の出力」であったり「クラスの付け替え」「要素の書き換え」などが出来るようになります。

文字の動的出力

インスタンスの作成方法が分かったところで、今度は文字を動的に出力してみましょう!
通常のサイトであれば、HTMLに文字を記述して表示させますが、Vueを使って表示させる感じですね!!

以下2つのファイルを使ってページを表示すると、ブラウザ上に

はじめてのVue.js!

と出てくると思います。
処理としては、JS側で定義している文字列を動的にHTMLで出力しています。

vue_sample.js

const out_message = new Vue({
// ここに文字を出力させたい要素のセレクタを指定
el: '#output_message',
data: {
// ここに出力させたいメッセージの「キー」と「値」を定義
first_message: "はじめてのVue.js!"
}
});

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめてのVue.js</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./script/vue_sample.js" defer></script>

</head>
<body>
<p id="output_message">{{ first_message }}</p>
</body>
</html>

それでは、コードを解説していきましょう!
まずはJS側の方になります。

const out_message = new Vue({});

1行目では、先ほど説明したVueコンストラクタのインスタンスを作成しています。
簡単に言うと、「Vueを使いますよ~」と宣言している様なものですね!

変数名は、なんでもOKです!
どのようなことをするVueコンストラクタなのか、考慮した上で名前を決めてあげましょう!

// ここに文字を出力させたい要素のセレクタを指定
el: '#output_message',

2行目では、このインスタンスでどの要素を使うのかを定義しています。
Vueでは、扱う要素ごとにインスタンスを作成します。

Vueは要素ごとに適用していくので「一部だけVueにする」「後からVueにする」ということが簡単に実現できます。
これはVueを扱うメリットのひとつですね!

ちなみに「el:」については、Vue側で決まっている名前なので、こちらは勝手に決めることはできません。

data: {
// ここに出力させたいメッセージの「キー」と「値」を定義
first_message: "はじめてのVue.js!"
}

3行目以降では、データの定義をしています。

今回は、このデータに保存されている文字列を出力するのが目的になります。
「first_message: "はじめてのVue.js!"」というデータを定義しています。

「data: {}」も「el:」同様にVue側で決まっている名前なので、こちらで変更することはできません!

処理をまとめると、

・Vueコンストラクタのインスタンスを作って(1行目)
・操作する要素のIDを定義して(2行目)
・出力するデータを定義している(3行目以降)

という感じになります。

次は、HTML側の解説になります。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="./script/vue_sample.js" defer></script>

まずは、Vue.jsの読み込みと、先ほど作成したJSファイルを読み込んでいます。
ここで注意してほしいのが2点あります。

・Vue.jsは私たちが作成したJSよりも先に読み込む
・私たちが作成したJSはDOMが読み込まれた後に読み込むようにする

まず、「Vue.jsは私たちが作成したJSよりも先に読み込む」について。
先ほど、JSで扱っていた「Vue({});」ですが、これはVue.jsで定義されている関数(クラス)になります。
なので、Vue.jsが読み込まれる前に実行すると、「Vue()なんて関数知らん!」と、ブラウザに怒られてしまいます。

次の「私たちが作成したJSはDOMが読み込まれた後に読み込むようにする」もほぼ同じ理由になります。

先ほど作成したJSでは「#output_message」に対して、操作を行っています。
しかし、DOMが読み込まれる前に実行すると、「#output_messageなんて知らん!」とブラウザに怒られてしまいます。

ちなみに、今回はDOMがすべて読み込まれてから実行させるために「defer」を付けています。


<p id="output_message">{{ first_message }}</p>

ここでは「IDの付与」と「文字列を出力させる場所の宣言」をしています。

IDについては、JS側で定義している「#output_message」を付けているだけですね。
これでVueは、この要素の子要素に対して変更を施すことが出来るようになりました。

文字列を出力させる場所の宣言について、「{{ }}」こんなものが出てきました。
これは、「この場所にあらかじめ定義しておいた文字列を出力するよ!」というおまじないのようなものです。

正確にはmustache記法と呼ばれるものになります。

今回の場合はVue側で「first_message」を定義していたので、その内容が出力されます。

これで一連の処理は完了になります!!

というわけで、今回はVueコンストラクタのインスタンス化と文字列の出力をやって行きました!
専門用語なども出てきて「(´;ω;`)ウッ…」となった方もいると思いますが、用語自体はそこまで重要じゃないので焦ることはないです!!
これから徐々に慣れていきましょう!

それでは、最後までありがとうございました!!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.