vuejs Vue.jsの基本を理解しよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

Vue.jsの基本を理解しよう

Vue.js|2019年02月03日

2019年02月03日
  • このエントリーをはてなブックマークに追加

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の初歩について、色々試してみましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら