LoginSignup
1
2

More than 3 years have passed since last update.

@yuki4839

【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】

Posted at


はじめに

最近Vue.jsを学習し初めて、ある程度知識のインプットができたので、アウトプットがてらVue.jsのコードについて、解説していこうと思います。

主にDirectiveのについての解説になります。

では早速いきます。



Vue.jsとは

簡単に言うと、開発効率を良くする為に作られた、JavaScriptのフレームワークになります。オープンソースなので、誰でも気軽に使い始める事ができます。

使用方法

Vue.jsを始めるには、主に3つの方法があります。

  • CDN
  • ファイル直接読み込み
  • NPM

オススメは簡単に使用する事ができる、CDN になります。公式サイトに scriptタグ で囲まれた CDN が記載されているので、それをコピーして HTMLファイル の bodyタグ 直前にペーストします。

Vue.js - 公式サイト
https://jp.vuejs.org/v2/guide/installation.html

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

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

</html>

これでVue.jsを使用する準備が整いました。



記述場所

記述できる場所は主に２箇所あります。

  • HTMLにscriptタグで直書き
  • JavaScriptファイルで書く

HTMLファイル に直書きしてしまうと、見通しが悪くなったりするので、基本的には JavaScriptファイル に書いていく方法がオススメです。

CDNで読み込んでいる場合、JavaScriptファイルは必ずその後に読み込ませてください。


今回使用するディレクトリ階層は以下の通りです。

ディレクトリ階層
─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js
index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

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

</html>

また今回の説明でCSSの解説はしませんが、実際に開発を行う際は、このような形がオーソドックスかと思われます。




Vue.js - Directive

それでは Vue.js を使用する環境が整ったので、実際のコードを見ていきましょう。

今回解説していくのは、Vue.js の中でも Directive(ディレクティブ) と言うものの書き方についてです。

Vue.jsの書き方

まず Directive の書き方の前に、Vue.js の基本的な書き方を解説します。

まずはこちらのコードをご覧ください。

main.js
// Vueインスタンスを生成
const web = new Vue({

  // マウントする属性を記述(この場合 id=web と言う意味)
  el: '#web',

  // Vue.jsで使用するデータを格納
  data: {
    context: `Hello Vue.js!`
  }
})


コメントの通りですが、

①まず最初に Vue() のインスタンスを生成をします。
②次に el: でマウントする属性を記述します。
③最後の data: はVueインスタンス内で使用するデータの格納になります。

これが最も基本的な Vue.js の記述方法になります。el と data はプロパティと呼ばれます。

③に関しては、他のプロパティを使用する場合、不要な場合もあります。




Directiveについて

Directive の説明を簡単にすると、HTMLファイル の属性を記述するところに、Vue.js 側で記述したスタイル(上記のファイル階層なら、main.js で記述したスタイル)を当てる為の記述のことになります。

言葉で説明してもわかりにくいと思うので、まずは実際のコードをご覧ください。

index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p>
      <!-- 通常の書き方(Mustache構文) -->
      {{ context }}
    </p>
    <p>
      <!-- v-bind が Directive -->
      <input type="text" v-bind:value="context">
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
style.css
/* 見やすくする為にスタイルを当てています */
#web {
  margin: 20px;
}
main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})


出力結果はこちら。

スクリーンショット 2020-12-11 22.52.29.png

通常インスタンスで定義した値を利用するには、マスタッシュ構文(中括弧２つで囲う記法) を利用して出力しますが、上記のように、HTMLタグ内 に使用するのが、Directive と呼ばれるものになります。(上記の場合、v-bind)




Directiveの種類

様々な Directive の種類があるのですが、ここでは基本的な４つのDirectiveについて、解説していきます。

一覧はこちらです。

  • Directive
    • v-bind
    • v-if
      • v-else
      • v-else-if
    • v-show
    • v-for


v-bind

Vueインスタンス で定義した値を利用するには、通常はマスタッシュ構文を利用しますが、HTMLタグ の属性で利用する場合はマスタッシュ構文が使用できません。

その為に利用するのが、上記でも紹介した v-bind になります。実際のコードは下記になります。

index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p>
      <!-- v-bind: の形で属性の手前に記述 -->
      <input type="text" v-bind:value="context">
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})

これで先ほどの画像のように、inputタグ の value属性 に Vueインスタンス で定義したcontextの値を利用する事ができます。

注意点は v-bind を使用した場合、マスタッシュ構文は不要になると言う部分です。




v-if

ここからJavaScriptっぽくなっていきます。v-if とは、DOM操作で画面の表示・非表示を行う Directive になります。

まずは表示の際のコードが下記になります。

index.html
<!-- head省略 -->
<body>

  <div id="web">
    <!-- 表示・非表示を行いたいタグに、v-if を使用 -->
    <p v-if="toggle">
      表示されました。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
main.js
const web = new Vue({
  el: '#web',
  data: {
    // toggle が true なら表示
    // toggle が false なら非表示
    toggle: true
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.54.59.png

次に非表示の際のコードが下記になります。

main.js
const app = new Vue({
  el: '#web',
  data: {
    // toggle が true なら表示
    // toggle が false なら非表示
    toggle: false
  }
})

出力結果は何も表示されません。

仕組みとしては、v-if で取得した値を参照して、true なら表示、false なら非表示になると言う、シンプルな構造です。



v-else

ifがあればelseもあります。Vue.js でelseに相当するのが、v-else です。

実際のコードはこちら。

<!-- head省略 -->
<body>

  <div id="web">
    <!-- toggle が true ならこちらが表示 -->
    <p v-if="toggle">
      表示されました。
    </p>

    <!-- toggle が false ならこちらが表示 -->
    <p v-else>
      表示されませんでした。
    </p>
  </div>

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


まずtoggleが true の場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.54.59.png


次にtoggleが false の場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: false
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.56.54.png

このように、v-else を使用する事で、falseの時の表示を設定する事ができます。

v-elseはv-ifと同じ階層で、直後のタグに指定する必要があります。




v-else-if

そしてif、elseがあれば、elseifもあります。Vue.js でelseifに相当するのが、v-else-if です。v-else-if を使用する場合は、属性値の部分に条件式を書く事で、場合分けを行う事ができます。

実際のコードはこちら。

index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p v-if="number === 1">
      number 1 が表示されました。
    </p>
    <p v-else-if="number === 2">
      number 2 が表示されました。
    </p>
    <p v-else-if="number === 3">
      number 3 が表示されました。
    </p>
    <p v-else>
      表示されませんでした。
    </p>
  </div>

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


まずは Vueインスタンス の dataプロパティ で、numberを1に定義した場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 1
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.57.45.png


次に Vueインスタンス の dataプロパティ で、numberを2に定義した場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 2
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.57.57.png


同じように Vueインスタンス の dataプロパティ で、numberを3に定義した場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 3
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.58.08.png


そして Vueインスタンス の dataプロパティ で、numberをどの条件にも当てはまらない、4に定義した場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 4
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 22.58.19.png

また上記のように、v-else-if は何度でも使用する事ができます。ページの表示形式をいくつかに分けたい場合は、重宝します。



v-show

こちらも v-if と同じく、コンテンツの表示・非表示を行える Directive になります。コードの書き方も v-if とほぼ同じです。

違いは、v-if はDOM操作を行うので、描画にかかるコストが大きいですが、v-show の場合は、単にCSSで display: none; を付けるか付けないになるので、描画コストを削減できる特徴があります。

実際のコードはこちら。

<!-- head省略 -->
<body>

  <div id="web">
    <p v-show="toggle">
      表示されました。
    </p>
  </div>

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


まず Vueインスタンス の dataプロパティ で、toggleをtrueにした場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})

出力結果はこちら。

スクリーンショット 2020-12-11 23.00.51.png


そして Vueインスタンス の dataプロパティ で、toggleをfalseにした場合。

main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})

出力結果は何も表示されません。


ここでGoogle chromeの検証を開いてみると、次のようになっています。

スクリーンショット 2020-12-11 22.14.04.png

このように、v-show を記述したpタグに display: none; が付いているのが、確認できます。

特に頻繁に切り替えを行うようなコンテンツに対しては、v-if よりも v-show の方に軍配が上がる感じです。



v-for

最後はコンテンツの描画の繰り返し処理が行える、v-for についてです。

まずはこちらのコードをご覧ください。

index.html
<!-- head省略 -->
<body>

  <div id="web">
    <ul>
      <li v-for="color in colors">{{ color }}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
main.js
const web = new Vue({
  el: '#web',
  data: {
    colors: [
      'Red',
      'Blue',
      'yellow',
      'Green'
    ]
  }
})

まず Vue.jsファイル にて、配列(もしくはオブジェクト)を用意します。そしてこれを HTMLファイル で、1つずつ取り出していくと言う流れです。

上記の場合、HTMLタグ内にVueインスタンスのcolorsから、要素をcolorとして1つずつ取り出していく感じです。

出力結果はこちら。

スクリーンショット 2020-12-11 23.02.13.png

ちなみにこの操作は、PHP や Ruby などのバックエンド系の言語でも可能です。特別な理由が無い限り、どちらを利用しても大丈夫だと思います。



まとめ

少し長くなってしまいましたので、最後にまとめておきます。

  • Vue.js
    • 使用方法
      • CDN(オススメ)
      • 直接読み込み
      • NPM
    • 記述場所
      • HTMLファイルに直書き
      • JavaScriptファイルで書く
        (オススメ)
  • Directive
    • v-bind
    • v-if
      • v-else
      • v-else-if
    • v-show
    • v-for


Vue.js は JavaScript や jQuery などよりも単純で、かつ記述量がかなり削減できます。 スピード感のある開発現場においては、使用されている場所も多いみたいなので、習得しておいて損は無いと思います。

ぜひ実際にコードを書いて試してみてください！

最後まで読んでいただき、ありがとうございました！





筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2