プログラミング技術

本サイトはプロモーションが含まれています。

Vue.jsの基本を学ぶ。JavaScript3大フレームワーク

Vue.jsの基本

JavaScriptは長年jQueryが使われてきました。

少し前まではJavaScriptを簡単に書くために使うライブラリ、フレームワークといえばjQuery一択でしたが、近年jQueryの他にも人気のフレームワークがでてきています。

以下のフレームワークがjQueryに代わり、使用されるケースが増えています。

POINT

  • Vue.js
  • React
  • Angular

jQueryであればJavaScriptを書ける人にとっては簡単でしたが、上記のJavaScriptフレームワークは少し癖があるためjQueyより難易度は高めです。

jsのフレームワークって何？

プログラミングを始めた頃ってフレームワークって何だろうって思いますよね。プログラミングの勉強を始めた当初は、プログラムの書き方を勉強するだけでも大変です。

それなのにフレームワークまで勉強するとなると余計に大変になるだけって思い、フレームワークの良さがわからなかったりします。

フレームワークもたくさんあるし、全部使えるようになるのは大変です。けれどもフレームワークを使うと面倒なコードでもフレームワークの機能を呼び出すだけで簡単に実装できることもあります。

多くのエンジニアで作る大規模なシステムなんかだとフレームワークを使うことでコードの書き方などルールも決めやすくソースコードの管理もしやすくなります。

サーバーサイドの言語にはフレームワークがたくさんあり、今までも使われてきたのですが、フロントエンドはjQueryが長く使われてきたため、管理が難しかったのですが最近はフロントエンドもフレームワークが使われるプロジェクトが多くなりました。

Angular, React, Vue.jsあたりの人気が出てきたため、フロントのフレームワークを使えるようになるとよいかと思います。

今回はその中でも一番学びやすいと言われるVue.jsの方を学んでいきたいと思います。

Vue.jsの特徴

JavaScriptのライブラリ・フレームワークの中では難易度は低い

Angular、Reactに比べると難易度は低く使いやすいという特徴があります。Vue.jsはjQueryと同様に難易度は低めですが、jQueryは規模が大きくなるほど管理が大変になります。

jQueryはセレクタを操作してHTMLやCSSに手を加えるわけですが、多くの人で機能を開発しているとセレクタが書き換えられて動作しなくなったり問題が起こります。

Vue.jsはコンポーネントで管理されていくため、規模が大きめのプロジェクトでも管理しやすいという特徴があります。

詳しくはVue.js公式ドキュメントを見てみましょう。

Vue.jsを触ってみる

Vue.jsってどんな書き方するのだろう、ちょっと書いてみたいと思ったらjsFiddleが簡単でいいですね。

Vue.jsでHello Vue!を表示

公式にあるコードを書いてみましょう。

HTML

<div id="app">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

「Run」のボタンを押下すると結果が表示されます。

runボタン

実際に書いたソースコードは以下のようになっています。

Vue.jsで双方向バインディングを使う

テキストの場合

Vue.jsを表示する部分との違いは以下のHTMLのハイライトしてあるinput一行だけです。入力フォームを設置しました。

ハイライトしてある部分にはv-modelという記述があり、これが双方向バインディングの記述になります。jsFiddleに表示されているフォームの値を変更してみると双方向バインディングがどのようなものか確認できると思います。

HTML

<div id="app">
  <p>{{ message }}</p>
  <p><input type="text" v-model="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

テキストエリアの場合

HTML

<div id="app">
 <p style="white-space: pre-line;">{{ message }}</p>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

<div id="app">
 <p style="white-space: pre-line;">{{ message }}</p>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

単体のチェックボックスの場合

HTML

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    checked: true
  }
})

複数のチェックボックスの場合

HTML

<div id="app">
  <input type="checkbox" id="php" value="PHP" v-model="checkedPrograms">
  <label for="php">PHP</label>
  <input type="checkbox" id="javascript" value="JavaScript" v-model="checkedPrograms">
  <label for="javascript">JavaScript</label>
  <input type="checkbox" id="java" value="Java" v-model="checkedPrograms">
  <label for="java">Java</label>
  <br>
  <span>Checked SKILL: {{ checkedPrograms }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    checkedPrograms: []
  }
})

ラジオの場合

HTML

<div id="app">
  <input type="radio" id="one" value="One" v-model="selected">
  <label for="one">One</label>
  <input type="radio" id="two" value="Two" v-model="selected">
  <label for="two">Two</label>
  <p>選択: {{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    selected: "One"
  }
})

セレクトボックスの場合

HTML

<div id="app">
  <select v-model="selected">
    <option disabled value="">-</option>
    <option>PHP</option>
    <option>JavaScript</option>
    <option>Java</option>
</select>
<p>選択: {{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    selected: ""
  }
})

Vue.jsのfor文でリストを表示する

フロント側でリストを表示する場合があると思います。Vue.jsでは便利なディレクティブが準備されています。

ハイライトしている部分にはv-forというディレクティブが記述されています。itemsオブジェクトをループして{{ item.message }}の部分で表示しています。

APIから取得したデータの件数が条件により変動する場合などはフロント側で処理する場合が多いため、v-forのようなディレクティブを使用すると便利です。

HTML

<div id="app">
  <ul>
  <li v-for="item in items">{{ item.message }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Vue.jsのIf文で条件で表示を制御する

取得して値によって表示を変えたい場合があると思います。Vue.jsではそのような場合に使用するディレクティブが準備されています。

HTML

<div id="app">
 <p v-if="type === 1">type: 1</p>
 <p v-else-if="type === 2">type: 2</p>
 <p v-else>type: 1, 2以外</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    type: 1
  }
})

まとめ：JavaScript3大フレームワークVue.jsを学ぶ

JavaScriptの3大フレームワークVue.jsの基本の部分に触れてみました。ここで書いたのは基本ですが、この後、コンポーネントやイベントなどのもう少し複雑な処理の方に進んでいきましょう。

JavaScript3大フレームワークと言われるVue.jsは他に比べて学びやすいため、最初に学ぶフレームワークとしてはちょうど良いと思います。

フロントエンドエンジニアを目指す方はほぼ必須と言ってもいいかもしれません。未経験からフロントエンドエンジニア目指される方はぜひ、Vue.jsをマスターしてみてください。

関連記事
現役Webエンジニアがオンライン学習サイトUdemyを購入してみた

関連記事
Vue.jsの基本を学ぶ。JavaScript3大フレームワーク

-プログラミング技術