ホームページ制作リスティング広告運用代行システム開発ブログお問い合わせ簡単!Vue.js導入と使い方2019年02月25日Web制作・ホームページ制作ホームページ作成に今までどおり、Jquery等のJavascriptプラグインで開発してもいいですが、もっとスマホアプリのようなリアクティブなサイトを作ってみたいと思いませんか?そんなとき簡単に導入できるVue.jsはオススメです!Vue.jsとは?Vue.jsはMVCのV(ビュー)をサポートするフレームワークで、リアクティブなユーザーインターフェイスを簡単に構築するためのJavascriptフレームワークです。Vue.jsはシングルページでの導入も可能なため、既存のプロジェクトの導入するのにも最適です。ある程度のコーディングやJavascriptの知識があれば、すぐにでも使用することが可能です。新しく作ったHTMLに以下のJSを読み込むだけです。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>上記の方法以外に、大規模アプリケーション開発向けに、npmを使用したインストール方法もあります。今回は簡単に導入ということで、npmの導入方法を省きます。Vue.jsの使い方ヘッダーにVue.jsを読み込んだら、以下のようにHTMLとJavascriptを書きます。}})これだけで、以下のような表示がされます。CodePen.Javascriptで定義した、elにはVue.jsを適用する範囲、エレメントを定義し、dataは変数を定義します。}}で囲った変数をリアルタイムに書き換えます。今回のサンプルだとリアルタイムだとは感じないと思いますので、HTMLを以下のようにしてみて下さい。v-model="message"></div>すると、ソースからして分かるかと思いますが、入力フォームが表示されました。CodePen.その入力フォームを書き換えると、その横に表示されているテキストも同じように書き換わります。これがVue.jsのリアクティブな機能になります。ちなみにinputに追加したv-modelはフォーム入力バインディングで、入力イベントで定義された変数(データ)を更新するものです。これを活用すればこんなものも簡単です。HTMLを以下のようにします。{{response}}</div>Javascriptを以下のようにします。}})するとこれだけで、簡単に電卓が作成できました。CodePen.computedは算出プロパティで、定義した中の変数が変更された場合実行されます。これだけのソースで簡易的な電卓が作成できました。まとめVue.jsは少しJavascriptをやったことある人ならすぐに導入できるかと思います。今回、ヘッダー下に作ったサブヘッダーのみをスクロールで固定する方法を簡単にご紹介します。先に以下、サンプルになります。