0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YutopianF(YUTO)

Vue.jsの基礎について

0
Posted at

Vue.jsは、JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptフレームワークの一つです。

これは手軽に小規模アプリケーションを作ることを目指して作られました。

本記事では、このことについて説明します。

なお、ここではHTML、CSS、JavaScriptの基礎的な内容は既知として進めます。

目次

  1. Vue.jsを使う準備
  2. Vue.jsの書き方の基礎
  3. ディレクティブについて
  4. コンポーネントについて
  5. トランジションについて
  6. 参考資料

Vue.jsを使う準備

Vue.jsを導入する方法は以下の2つがあります。

  1. ファイルを直接ダウンロードする
  2. ネットワークで公開されているファイルを読み込む

方法としては②が手軽なので、そちらの方法を用います。

まず、こちらにアクセスします。

Vue.js CDN
1665914262347-xrBXwOMaJy.png.png

ここで紹介されているscriptタグをHTML要素内のhead要素内にコピーすることで、Vue.jsを利用できます。

本記事では、以下のタグを利用します。

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

これで準備が完了です。

Vue.jsの書き方の基礎

Vue.jsは基本的にこのようにして書きます。

HTMLの役割となる部分は以下のように書きます。

<div id="ID名">
  {{ プロパティ名 }}
</div>

ここで{{ }}をマスタッシュ構文といいます。

また、このような書式でHTMLの役割となる部分を書く方法をテンプレート構文といいます。

JavaScriptは以下のように書き、これがVue.jsの本体となります。

new Vue({
  // Vueインスタンスの中身
})

Vueインスタンスの中身には、例として以下のようなオプションがあります。

  • elオプション：どのHTML要素とつなげるのかを指定する
  • dataオプション：どんなデータがあるのかを指定する
  • methodsオプション：どんな処理を行うのかを指定する

この他にもオプションがあるので、必要に応じて調べる必要があります。

例えば、elオプションとdataオプションを使う場合は、このように書きます。

new Vue({
  el: "#app",
  data: {
    プロパティ名: 値
  }
})

これは、Vue.jsでelにHTMLにあるIDを指定し、そのIDにある{{ プロパティ名 }}にデータを渡すことを意味します。

例文1

<div id="app">
  {{ myText }}
</div>

<script>
new Vue({
  el: "#app",
  data: {
    myText: "Hello Symbol!"
  }
})
</script>

この場合、myTextに設定されているHello Symbol!が画面に表示されます。

また、HTMLの要素からVue.jsに動作を指定することもできます。

その場合は、HTML要素にv-〇〇と記述します。

〇〇には、実行してほしい動作の種類を指定します。

これをディレクティブといいます。

<タグ名 v-〇〇="プロパティ名"></タグ名>

例文2

<div id="app">
  <p v-text="myText"></p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    myText: "Hello Symbol!"
  }
})
</script>

v-textとは、プロパティで指定した値を出力することができるディレクティブです。

これは、ID名がappであるdiv要素内に、

<p v-text="myText"></p>

と記述することで、Vueインスタンスにあるdata内のプロパティmyTextを指定し、その値であるHello Symbol!を表示できます。

基本的には、この仕組みを理解することがVue.jsを学ぶ上での重要なポイントになります。

これからは、この書き方の応用について考えていきます。

ディレクティブについて

ここでは、ディレクティブの種類について紹介します。

① v-bind

v-bindとは、HTMLの要素の属性をデータで指定するディレクティブです。

<タグ名 v-bind:属性="プロパティ名"></タグ名>

プロパティは画像やURL、クラスなどにも利用できます。

例文

<div id="app">
  <img v-bind:src="filename">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    filename: "symbol.png"
  }
})
</script>

この例では、filenameに設定されている値がimg要素のsrc属性に指定されます。

そのため、filenameがsymbol.pngであれば、

<img src="symbol.png">

と同じような状態になります。

② v-model

v-modelは、入力フォームとデータをつなげるディレクティブです。

<div id="app">
  <input v-model="message">
  <div>Message: {{ message }}</div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    message: "Hello! Symbol"
  }
})
</script>

これは、入力タグに入力したデータがVueインスタンス内のdataオプションにあるmessageに入り、そのデータが{{ message }}に反映されることを意味します。

結果として、以下のようになります。

Message: Hello! Symbol

初期状態ではHello! Symbolが表示されています。

しかし、入力フォームに文字を入力すると、その内容がMessageにもリアルタイムで反映されます。

つまり、

入力フォーム
    ↓
  message
    ↓
{{ message }}

という形でデータが連動しています。

③ v-on

v-onは、イベントとmethodsオプションをつなげるディレクティブです。

<div id="app">
  <button v-on:click="hello">Hello</button>
</div>

<script>
new Vue({
  el: "#app",
  methods: {
    hello: function() {
      alert("Hello!");
    }
  }
})
</script>

これは、Helloと書かれたボタンをクリックすると、helloメソッドが実行され、Hello!と書かれたアラートが表示されるというものです。

④ v-if

v-ifは、条件によって表示を制御するディレクティブです。

条件によって表示要素を切り替える場合は、v-ifとv-elseを使い分けます。

条件を満たすときだけ表示するならば、以下のように書きます。

<タグ名 v-if="条件">
  条件がtrueならば表示
</タグ名>

例文

<div id="app">
  <label>
    <input type="checkbox" v-model="myVisible">
    表示する
  </label>

  <p v-if="myVisible">
    チェックボックスはON
  </p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    myVisible: false
  }
})
</script>

これは、input要素のチェックボックスに、

v-model="myVisible"

と指定することで、Vueインスタンス内のdataオプションにあるmyVisibleにチェックボックスの状態が入るようにしています。

そして、p要素に、

v-if="myVisible"

と書くことで、チェックボックスがONのときだけ表示されるようになります。

v-ifとv-else

条件分岐を行う場合は、以下のようにv-ifとv-elseを組み合わせます。

<タグ名 v-if="条件">
  条件がtrueならば表示
</タグ名>

<タグ名 v-else>
  そうでないならば表示
</タグ名>

例文

<div id="app">
  <label>
    <input type="checkbox" v-model="myVisible">
    表示する
  </label>

  <p v-if="myVisible">
    チェックボックスはON
  </p>

  <p v-else>
    チェックボックスはOFF
  </p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    myVisible: false
  }
})
</script>

チェックボックスにチェックを入れると、

チェックボックスはON

と表示されます。

チェックを外すと、

チェックボックスはOFF

と表示されます。

⑤ v-for

v-forは、HTML要素を繰り返し表示するときに使うディレクティブです。

繰り返し使うものには、配列やオブジェクトなどがあります。

基本的な書式は以下のようになります。

<タグ名 v-for="変数 in 繰り返し使うもの">
  繰り返し表示する部分
</タグ名>

例文

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

<script>
new Vue({
  el: "#app",
  data: {
    colorList: ["Red", "Green", "Blue"]
  }
})
</script>

この例では、colorListに入っているデータを1つずつ取り出して表示しています。

表示結果は以下のようになります。

Red
Green
Blue

このように、配列などのデータを利用してHTML要素を繰り返し生成できます。

以上の5つは、代表的なディレクティブとその使い方です。

ディレクティブ 用途
v-bind HTML属性とデータを結び付ける
v-model 入力フォームとデータを結び付ける
v-on イベントと処理を結び付ける
v-if 条件によって表示を切り替える
v-for データを繰り返し表示する

使い方は他にもありますし、ディレクティブにもさまざまな種類があります。

開発をする際は、必要に応じて公式ドキュメントなどを確認するとよいでしょう。

コンポーネントについて

コンポーネントとは、同じような処理やHTMLを部品としてまとめる仕組みです。

Vue.jsでは、コンポーネントを作ることで、同じような処理や表示を何度も再利用できます。

コンポーネントの登録方法としては、ローカルに登録する方法とグローバルに登録する方法があります。

そのうち、ここではローカルに登録する方法を紹介します。

その書式は以下のようになっています。

const コンポーネントのオブジェクト名 = {
  template: "HTML部分"
}

new Vue({
  el: "#app",
  components: {
    "コンポーネントのタグ名": コンポーネントのオブジェクト名
  }
})

このコンポーネントをHTMLに呼び出すときは、以下のタグを使います。

<コンポーネントのタグ名></コンポーネントのタグ名>

ここで、コンポーネントのタグ名は好きな名前を指定できます。

例文

JavaScriptは以下のようにして書きます。

const testComponent = {
  template: "<p>Hello Symbol!</p>"
}

new Vue({
  el: "#app",
  components: {
    "my-component": testComponent
  }
})

これをHTMLに呼び出します。

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>

すると、

Hello Symbol!
Hello Symbol!

と2行に渡って表示されます。

これは、コンポーネントとして定義したtestComponent内で、

<p>Hello Symbol!</p>

という要素を定義しているためです。

そのtestComponentをVueインスタンス内のcomponentsオプションに、

"my-component": testComponent

として登録しています。

そして、HTMLの、

<my-component></my-component>

で呼び出すことで、コンポーネントに定義した内容が表示されます。

このように、コンポーネントを利用することで、同じ部品を何度も再利用できます。

トランジションについて

トランジションとは、CSSの状態変化を扱う機能です。

この機能を使うことで、要素の表示・非表示などにアニメーションを付けることができます。

表示箇所の切り替えにトランジションを適用させたい場合は、<transition>と</transition>で囲む以下のような形で記述します。

<transition name="任意の名前">
  表示内容
</transition>

ここでname属性を定義しない場合、デフォルトではvという名前が使用されます。

例文

<transition name="opacity">
  <p style="margin-top: 30px" v-if="display">
    表示箇所
  </p>
</transition>

次にCSSではクラスを指定することで、「どのようなタイミングで、どのように変化するのか」を指定します。

例えば、以下のようなクラスがあります。

クラス 役割
.name-enter 表示されるときの最初の状態
.name-enter-active 表示されている間の状態
.name-enter-to 表示されるときの最後の状態
.name-leave 消えるときの最初の状態
.name-leave-active 消えている間の状態
.name-leave-to 消えるときの最後の状態

※nameにはtransitionタグで指定したname属性の値が入ります。

例えば、

<transition name="opacity">

とした場合は、

.opacity-enter
.opacity-enter-active
.opacity-enter-to
.opacity-leave
.opacity-leave-active
.opacity-leave-to

というクラスが使用されます。

name属性を指定しない場合は、vが使用されます。

その場合は、

.v-enter
.v-enter-active
.v-enter-to
.v-leave
.v-leave-active
.v-leave-to

となります。

例文

HTML側

<div id="app">
  <label>
    <input type="checkbox" v-model="isOK">
    表示する
  </label>

  <transition>
    <p v-if="isOK">
      表示、非表示のアニメーション
    </p>
  </transition>
</div>

Vueインスタンス側

new Vue({
  el: "#app",
  data: {
    isOK: false
  }
})

CSS側

.v-enter {
  opacity: 0;
}

.v-enter-active {
  transition: 0.5s;
}

まず、HTMLの、

<input type="checkbox" v-model="isOK">

の情報がVueインスタンス内の、

isOK: false

に反映されます。

次に、isOKの情報がHTMLの、

<p v-if="isOK">

に渡されます。

isOKがtrueになると、p要素が表示されます。

最後に、transitionタグによって表示・非表示の状態変化にCSSのトランジションが適用されます。

このように、情報は、

チェックボックス
      ↓
    isOK
      ↓
    v-if
      ↓
 transition
      ↓
CSSによるアニメーション

という流れで処理されます。

Vue.jsでは、このようにデータの変化とHTMLの状態変化を結び付けることができます。

まとめ

今回は、Vue.jsの基本的な使い方について紹介しました。

Vue.jsでは、JavaScriptでデータや処理を定義し、それをHTML側と結び付けることで、動的なWebページを作ることができます。

特に重要なのは、以下のような仕組みです。

  • new Vue()：Vueインスタンスを作成する
  • el：Vue.jsとHTMLを結び付ける
  • data：Vue.jsで扱うデータを定義する
  • {{ }}：データをHTMLに表示する
  • v-bind：HTML属性とデータを結び付ける
  • v-model：入力フォームとデータを結び付ける
  • v-on：イベントと処理を結び付ける
  • v-if：条件によって表示を切り替える
  • v-for：データを繰り返し表示する
  • コンポーネント：HTMLや処理を部品化する
  • トランジション：状態変化にアニメーションを付ける

基本的な仕組みを理解した上で、公式ドキュメントなどを確認しながら実際にコードを書いていくと、Vue.jsへの理解を深めることができます。

参考資料

書籍

  • 『動かして学ぶ！Vue.js開発入門』森巧尚（翔泳社）
  • 『Vue.js&Nuxt.js超入門』掌田津耶乃（秀和システム）

Webサイト

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?