ざっくりVue.js 〜 【その1】テキストのバインディング 〜

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

こんにちは、サイオステクノロジー技術部 武井です。今回は、Vue.jsの概要をざっくりしてみたいと思います。

何回かに分けて、Vue.jsの概要をご説明しようと思うのですが、難しい説明は抜きにして、Vue.jsで最低限のことができるようにするというのが本記事の目的にございます。具体的には、以前、「JavaScriptフレームワーク「Angular」による掲示板システム構築 」でご紹介した掲示板アプリを作ることをゴールとします。

Screen Shot 2017-12-20 at 22.56.57Screen Shot 2017-12-20 at 23.00.01

Vue.jsとは?

いわゆるAngularやReactのようなクライアントサイドのフレームワークです。今、最も巷で熱くてなういクライアントサイドフレームワークといえるのではないでしょうか?Vue.jsは学習コストが少なくて済み、さくっと小さく簡単に始めることができるフレームワークです。AngularはVue.jsよりも大規模なアプリケーションで適用されるようなイメージと個人的には考えていますが、Vue.jsはもうちょっと規模が小さめのアプリケーションに特化したフレームワークといった表現が適切かもしれません。

まずはハロワ

細かいことは抜きにして、早速始めてみましょう。テキストバインディングでハロワ(Hello World)してみます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World!!</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>

  <div id="app">
    <h1>{{ greet }}</h1>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        greet: 'Hello World!!',
      }
    })
  </script>

</body>

</html>

なんとなくコードから想像がつくとは思いますが、上記のコードの実行結果は、ブラウザに「Hello World!!」と表示されます。

コードの解説

基本的にVue.jsのコーディングは以下の流れで進むこととなります。

  1. Vue.js本体を読み込む → Vue.js本体の読み込み
  2. <script>〜</script>タグ内にVueインスタンスを定義し、データを定義 → データの定義
  3. 2で定義したデータをHTMLで表示 → データの表示

では、コードを一つずつ説明していきたいと思います。

Vue.js本体の読み込み

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

こちらはCDNからVue.js本体をダウンロードする記述になります。Vue.jsはwebpackなど他にも色々な実行形態がありますが、上記のようにCDN(コンテンツを配信するための専用のインターネット環境のようなものです)からダウンロードして始めるのが一番お手軽です。まずは、今の時点では、上記のような記述をすれば、Vue.jsを始める準備が整ったのだという理解で問題ございません。

データの定義

  <script>
    new Vue({ // Vueインスタンス
      el: '#app', // マウントする要素
      data: { // データ
        greet: 'Hello World!!',
      }
    })
  </script>

順番は前後しますが、<script>〜</script>で囲われている部分をご説明致します。

Vueインスタンス

まずはVueインスタンスを作成します。その記述がnew Vueの部分になり、この中にVue.jsを動作させるために必要な記述を色々と書いていくこととなります。書式は以下のようになります。

new Vue({
〜ここにVue.jsを動作させるために必要な記述をしていく〜
})

マウントする要素

el: ‘#app’の部分です。後のご説明するHTMLの部分で、ここで指定した値をidとして定義した<div id=“app”>〜</div>で囲われたところだけ、Moustacheで定義したテキストのバインディングが有効になります。この説明だけでは何を言っているかはわからないかと思いますので、詳しいことは後述します。

データ

HTML内に表示させたいデータを定義します。以下のようにdataプロパティの中に様々なデータを記述していきます。

data: {
〜 ここにデータを記述していく 〜
}

このdataプロパティの中に「変数名:データ」の形式でデータを定義していきます。今回のコードでは。「greet」という変数名に「Hello World!!」といデータを定義しています。この変数をHTMLで表示させるための方法は後述します。

データの表示

定義したデータをHTML内で表示するのは下記の部分のコードになります。

  <div id="app">
    <h1>{{ greet }}</h1>
  </div>

<div id=”app”>〜</app>は、「マウントする要素」のところで定義した「app」という文字列を指定します。このdivタグで囲まれた範囲のみ、「データの定義」で定義したデータの表示が有効になります。

そして、「データの定義」で定義したデータを表示するためには、以下のように記述します。

{{ 変数名 }}

変数名とは、「データの定義」で記述した「greeting」になります。なので、{{ greeting }}の部分は「Hello World!!」に置き換わります。つまり、実際に表示されるHTMLは以下のようになります。

<div id="app">
  <h1>Hello World!!</h1>
</div>

こんな感じでハロワが完了です。

まとめ

今回はVue.jsの最も基本的な部分であるテキストのバインディングについてご説明しました。次回以降も、ざっくりVue.jsを学ぶために必要なTipsについて、ドシドシ書いていきたいと思います(^o^)

アバター画像
About 武井 宜行 267 Articles
Microsoft MVP for Azure🌟「最新の技術を楽しくわかりやすく」をモットーにブログtech-lab.sios.jp)で情報を発信🎤得意分野はAzureによるクラウドネイティブな開発(Javaなど)💻「世界一わかりみの深いクラウドネイティブ on Azure」の動画を配信中📹 https://t.co/OMaJYb3pRN
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる