- 更新日: 2022年06月02日
- 公開日: 2017年02月24日
10分で分かるVue.js！基礎から試用まで詳しく解説
プログラミング初心者を悩ませる要因の一つに、アプリ開発の手間とスピード感があります。 コツコツ1から10まで作っていくのもいいですが、アプリ開発を爆速化してくれるフレームワークもイイのではないでしょうか。
今回はViewに特化しているJavaScriptフレームワークのVue.jsをご紹介させて頂きます。専門的な用語は控えて、とにかく直感的にビビッとくるように情報をまとめてみました。
View マジックのフレームワーク Vue.js
Vue.js とは
Vue.jsは、ユーザー・インターフェースを構築するための革新的なJavaScriptフレームワークになります。他のフレームワークのように総合的な機能を取り揃えるのではなく、View（見た目）の部分に特化して開発されています。
Vue.js本体はAngularJSなどに比べると軽量ですが、足りない機能については、プラグインやライブラリを追加することで機能を補填し、アプリケーション開発を大きく後押ししてくれます。
例えば、現在開発中ではありますが、中国で急成長中*の ele.me というフード・デリバリーのアプリにVue.jsは活用されています。
開発現場 GitHub／https://github.com/ElemeFE
ベネフィット
img : twitter Jesse Schutt
View に特化しているVue.jsを使うと、比較的簡単にモダンかつ機能的なUIを構築することができます。特にマテリアル・デザインを検討しているプロジェクトには、時間と開発コストを削減してくれることに期待できます。
以下にVue.jsプラグイン＆ライブラリ**の中で人気のあるものをいくつか紹介させて頂きます。 DEMOを見れば、Vue.jsがどれだけ私達に貢献してくれるか容易に想像できると思います。
同じような UI ライブラリのプラグイン＆ライブラリ
- http://posva.net/vue-mdl/#!/installation
- http://mint-ui.github.io/#!/en
- https://github.com/airyland/vux
その他サンプル集サイト
- http://vuejsexamples.com/
- http://tutorialzine.com/2016/03/5-practical-examples-for-learning-vue-js/
- https://vuejs.org/examples/todomvc.html
現役エンジニアからデザインツールの使い方やWeb制作を学ぶならCodeCampのWebデザインマスターコースがおすすめ！
Vue.js を試してみる
Vue.jsをちょっと試す方法は 4パターンあります。
- Vue.js ファイルをダウンロードして試す
- Vue.js ファイルを読み込んで試す（https://unpkg.com/vue@2.0.3/dist/vue.js）
- オンライン・エディタで試す（WEBPACKBIN）
- 公開済みのサンプルコードから試す
今回はVue.jsファイルをダウンロードして試す方法をご紹介します。
必要なモノ／ChromeやEdgeなどの最新バージョンのブラウザ、テキストエディタ
- まず今回実験するための専用フォルダを作っておきます。
例えば、 ホームディレクトリ → CodeCamp の中に Vuejs というフォルダを制作しました。
- 次に Vue.js ファイルをダウンロードします
Vue.js 最新バージョンのダウンロードサイト https://vuejs.org/guide/installation.html
注）日本語の Vue.js サイトからは最新版はダウンロードできません。（2016.11.4）
- ダウンロードした vue.min.js ファイルを先ほど作った Vuejsフォルダに移動もしくはコピペします。
- 適当なサンプル html ファイルを Vue.js フォルダ内に保存します（ファイル名 vueJS-Hello.html）。
今回使った html コード
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./vue.min.js"></script>
</head>
入力してみてね
<div id="app">
{{ message }}
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</html>
これで準備OKです。
Vuejsフォルダ内のvueJS-Hello.htmlをダブルクリックするとブラウザが立ち上がって、入力欄の表示が確認できます。
適当な文字を入力すると同時に入力した文字が画面に表示されることが確認できると思います。
**Vue.js ファイルをダウンロード無しで利用する場合は、4行目の ./vue.min.js を https://unpkg.com/vue@2.0.3/dist/vue.js にします。
これが Vue.js を利用する上での基本的な形になります。
尚、Vue.js を使った本格的なアプリケーション開発にはNode.js（npm）の利用が必要となります。 詳しくは公式ドキュメントをご参照下さい。
最新バージョンのドキュメント
https://vuejs.org/guide/installation.html#NPM
バージョン 1 のドキュメント
https://jp.vuejs.org/guide/installation.html#NPM
リファレンス通り CLI を実行した結果
＼Webサイト担当者としてのスキルが身に付く／
まとめ
Vue.jsいかがでしたでしょうか？今回はVue.jsというすごいフレームワークを使うと、アプリ開発がこんなに楽しく、魅力的なモノになるよ、というニュアンスでご紹介させて頂きました。
中々始まらないプログラミングの学習、どの様にして楽しむかを考えれば学習も楽しくなりますよ！
- この記事を書いた人
- オシママサラ
