JavaScriptのフレームワークがどんどん進化しています。
これまで、JavaScriptのフレームワークと言えば、jQuery一択でした。
しかし近年は、どんどん新しいフレームワークが開発されています。
結果「どれ使えばいいの？」と思う方もいらっしゃるでしょう。
そんなJavaScriptの戦国時代において、徐々に地位を築き上げているのがVue.jsです。
Vue.jsはJavaScriptで作られ、よりシンプルな書き方でJavaScriptを使う事ができます。
Vue.jsの最大の特徴は「リアクティブ」だということです。
でも、リアクティブなんて言われても、なかなかピンと来ませんよね。
簡単に言うと、JavaScriptの値が変更されたら、リアルタイムでHTMLも変更されるということです。
例えば、とある変数に1という文字が入っていたとしましょう。
画面を開くと同時に「1」が、HTMLに書き出されていたとします。
ここで、あるボタンを押したら変数を「2」に変えるとしましょう。
上記の場合、すでにHTMLに書き出された「1」は「2」になりません。
変数の中身だけが入れ替わります。
HTMLに書き出すためには、改めて変数を表示し直すコードを書く必要があります。
ところがVue.jsだと、リアルタイムで変数の中身がHTMLに反映されるのです。
その分、ソースコードを余分に書く必要がありません。
次の例は、ボタンを押すと、文字が書き換えられる仕様になっています。
HTMLへの出力的な処理は何もなく、JavaScriptで変数の中身を入れ替えただけです。
https://startout.work/mission/vue/1/
このように「リアクティブ」な機能こそ、Vue.jsの軸と言えます。
使いこなせば、よりシンプルにjavaScriptを扱うことができます。
基本的な書き方を理解しよう
まずVue.jsを使うためには、下記の一行を入れましょう。
Vue.jsを使うために必要なファイルを読み込んでいます。
実際に、自分のパソコン / mac上でやってみてくださいね。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
これだけで、Vue.jsを使う準備は完了です。
あとは、Vue.jsでJavaScriptを扱うことができます。
ひとまず、Vue.jsから文字を出力してみましょう。
下記の内容を再現してみてください。
ソースコードと説明は、下記を参考にしてみてください。
<!--#appで囲った箇所にVue.jsの処理が適応されています。-->
<!--#appはscript内で指定される#appに紐付いています。-->
<!--#appは自由に文字列を変えても構いません。-->
<div id="app">
<!--Vue.jsで指定した文字列を出力します。-->
<p>{{message1}}</p>
<p>{{message2}}</p>
<p>{{message3}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//基本的に下記の形が基本です。
//最初にnew VueでVue.jsで作るよ！と宣言し、el:で対象範囲を指定。
//それ以降は、dataなど、様々な処理を使って作っていきます。
var vm = new Vue({
el:"#app",
data:{
//messageを3つ用意しました。
//htmlで{{message1}}といった形で呼び出せます。
//message1などはjsの変数のように任意の文字列を入れられます。
//このmessageの中身を変更するとリアルタイムでHTMLの描画も変わります。
//つまり、リアクティブということ。
message1 : "おはよう",
message2 : "こんにちは",
message3 : "おやすみ"
}
})
</script>
ひとまず、上記のソースコードを実際にHTMLに書いてみてください。
messageや値を変えてみて、いろいろ試してみましょう。
文字がどう出力されているのか、ざっくりでも仕組みを把握できるはずです。
今は仕組みさえ分かれば良いので、記述を覚える必要はありません。
この形が、基本的なVue.jsの書き方ということを把握してください。
リアクティブさを確認してみましょう。
今度は「リアクティブな感じ」を確認してみましょう。
先程、お伝えした通り、Vue.jsの強みはリアクティブです。
JavaScript側の値を変更するとHTMLも変わります。
jQueryだと、例えば変数の中に数字を格納しても、表示は自動で変わりません。
jQueryの場合、表示された値を変更するためには、変数の中身をHTMLに書き出す処理を、別途書く必要があります。
でもVue.jsは、それが必要無いのです。
言葉では、なかなか難しいと思いますので、実践してみましょう。
最初に見た例を、再度確認してみてください。
ボタンを押すと文字が変わる下記の例を、実際に作ってみましょう。
ソースコードを確認してみましょう。
<div id="app">
<p>{{message}}</p>
<!--書き換えボタンを追加しています。-->
<button v-on:click="toggleLoginType">書き換えボタン</button>
<!--v-on:はクリックした時に処理を発動させます。ディレクティブと呼ばれています-->
<!--ディレクティブは何種類も存在し、個別に機能を持っています-->
<!--ディレクティブの後にclickと続き、toggleLoginTypeが指定されています-->
<!--toggleLoginTypeをクリックした時の処理はscript内のmethodに書いています-->
<!--toggleLoginTypeは任意の名前ですので好きに変更してみてください。-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message : "変数の中身"
},
//methodsを追加し、中に処理を書きます。
methods:{
//buttonに指定したtoggleLoginTypeの処理を書きます。
//他の言語やった方はおなじみの関数っぽい書き方です。
//toggleLoginTypeは任意の名前ですので好きに変更してみてください。
toggleLoginType: function(){
//thisはappを意味しまして、これが無いと書き換わりません。
this.message = "書き換え成功しました！"
}
}
})
</script>
このような流れになっています。
実際に、ご自身のパソコンで試してみてください。
値を書き換えて、色々と試してみましょう。
コピーしたり、中身を書き写したりするだけでは、成長が遅くなります。
実際に自分でいじって、カスタマイズして、ようやく理解ができます。
変数を変えてみたり、文字や値を変更してみたり。
試しに別の処理を書き込んでみたり。
そうやって、少しずつ実験してみるから、始めて中身が理解できてきます。
今回は、まずVue.jsの初歩について、色々試してみましょう。