株式会社グローバルゲート公式ブログ
こんにちは。グローバルゲート制作部のモーリーです。
2020年もあっという間に1ヶ月が終わり、2月に入りました。
多くの会社様では年度末に向けて、さらにその先のGWやオリンピック期間に向けて多忙な日が続くかと思いますが、体調にはくれぐれもご留意くださいますようお願い申し上げます。
さて、本日の記事では近年人気のJavascriptフレームワーク「Vue.js」についてご紹介します。
Vue.jsとは
Javascriptのフレームワークで、近年利用事例が急激に増えている人気のフレームワークです。
入力したデータを元に計算し、即時にページに表示する(BMI計算機)
それでは、実際の事例をご紹介します。
一般のサイトでVue.jsを採用する理由の一つとして、入力されたデータと表示を連動させるリアクティブシステムがあります。
簡単に言うと「何かを入力したらその内容を加工して表示させる」なのですが、jQueryなど他のライブラリで同様の操作を行うと
・データの入力があったかどうかを判定する
・入力されたデータを取得する
・取得したデータを表示する
・再入力されたら一旦初期化する
など細かく条件分岐を考えていかないといけません。
Vue.jsならこれらの操作を非常に簡単に実装することができます。
HTMLはVue.js特有の属性や構文がありますが、ほぼ通常のHTMLそのままです。
<div class="row">
<div class="col">
<div class="form-group">
<label for="bmi-height">身長</label>
<div class="input-group">
<input type="number" class="form-control" id="bmi-height" v-model.number="bmiHeight" placeholder="170">
<div class="input-group-append">
<span class="input-group-text">cm</span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="bmi-weight">体重</label>
<div class="input-group">
<input type="number" class="form-control" id="bmi-weight" v-model.number="bmiWeight" placeholder="60">
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="col">
<p>あなたのBMIは
<br><strong class="display-4">{{ bmi }}</strong>
<br>です。</p>
</div>
</div>
v-modelとなっているところがユーザーの入力を受け付ける部分です。
その内容を元に、BMIを計算して{{ bmi }}というところに表示させます。
Javascript部分はとてもシンプル!
数行でBMIが計算されました。そろそろ春の気配を感じさせる気候になってきましたので、夏に向けて6LDKの腹筋を目指しましょう!
var app = new Vue({
el: '#app',
data: {
bmiHeight: null,
bmiWeight: null,
},
computed: {
bmi() {
var bmi = Math.round(this.bmiWeight / Math.pow(this.bmiHeight / 100, 2) * 10) / 10;
return bmi ? bmi : '';
}
}
});
マラソンの完走タイム計算機
まったく同じ要領ですが、入力されたデータの計算式さえ変えれば違う結果を導き出せます。
たとえば以下の例は、ランニングのペース(1kmあたりの時間)を入力したら42.195kmを走るのにどれだけ時間がかかるかを計算します。
<div class="row align-items-center">
<div class="col-auto">
1kmを
</div>
<div class="col">
<input type="number" class="form-control" id="run-min" v-model.number="runMin" placeholder="5">
</div>
<div class="col-auto">
分
</div>
<div class="col">
<input type="number" class="form-control" id="run-sec" v-model.number="runSec" placeholder="30">
</div>
<div class="col-auto">
秒で走ると
</div>
<div class="col-12 mt-3">
<strong class="display-4">{{ totalTime }}</strong>で完走できます。
</div>
</div>
var app = new Vue({
el: '#app',
data: {
runMin: null,
runSec: null,
},
computed: {
totalTime() {
var totalSec = (this.runMin * 60 + this.runSec) * 42.195;
var h = Math.floor(totalSec / 3600);
var mTemp = totalSec % 3600;
var m = Math.floor(mTemp / 60);
var sTemp = mTemp % 60;
var s = Math.round(sTemp);
if (h && m && s) {
return h + '時間' + m + '分' + s + '秒';
} else {
return '';
}
}
}
})
ちなみに1kmを4分で走っても(結構速いです)マラソンのタイムは2時間48分47秒と日本代表にもなれないタイムになってしまいます。
日本記録の2時間5分や世界記録の1時間59分(非公認)がどれほど速いかがよく分かります。
現在時刻を取得し、角度に置換して反映(アナログ時計)
これまでは入力されたデータを元に計算を行って出力していましたが、元となるデータは入力されるものとは限りません。
たとえば、現在時刻をベースとすると、アナログ時計をつくることができます。
<div class="row">
<div class="col">
現在時刻は
<br><strong class="display-4">{{ currentTime }}</strong>
<br>です。
</div>
<div class="col">
<div class="clock">
<div class="bar-hour" :style="{transform: 'rotate(' + currentHour * 30 + 'deg)'}"></div>
<div class="bar-min" :style="{transform: 'rotate(' + currentMin * 6 + 'deg)'}"></div>
<div class="bar-sec" :style="{transform: 'rotate(' + currentSec * 6 + 'deg)'}"></div>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
currentTime: '',
currentHour: '',
currentMin: '',
currentSec: '',
},
mounted() {
var vm = this;
vm.updateTime();
setInterval(vm.updateTime, 1000);
},
methods: {
updateTime() {
var today = new Date();
this.currentTime = today.getHours() + '時' + today.getMinutes() + '分' + today.getSeconds() + '秒';
this.currentHour = today.getHours();
this.currentMin = today.getMinutes();
this.currentSec = today.getSeconds();
}
}
})
setIntervalは一定時間で同じ処理を繰り返す関数です。
ここでは1000ミリ秒(つまり1秒)ごとに針の角度をアップデートしていますので、クオーツ式時計の動きを模しています。
この数値を1秒以下にすると自動巻ムーブメントのような秒針も再現できます。
input[type=”range”]の入力値を元にCSSスタイルを生成(box-shadowのプレビュー)
HTMLでの入力というと、文字を入力するテキストエリアかチェックボックスかラジオボタンでしたが、ブラウザの進化によってスライダーで数値を入力するrangeというスタイルも使えるようになりました。
スライダーを操作することでその入力値(数値になります)がCSSのスタイルに反映されるため、見た目も面白くついつい遊んでしまいたくなる表現も簡単にできます。
<div class="row">
<div class="col">
<div class="form-group">
<label for="box-shadow-x">X方向の距離</label>
<div class="row">
<div class="col">
<input type="range" id="box-shadow-x" class="form-control" min="-50" max="50" v-model="shadowX">
</div>
<div class="col-4">
<div class="input-group">
<input type="text" class="form-control" v-model="shadowX">
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="box-shadow-y">Y方向の距離</label>
<div class="row">
<div class="col">
<input type="range" id="box-shadow-y" class="form-control" min="-50" max="50" v-model="shadowY">
</div>
<div class="col-4">
<div class="input-group">
<input type="text" class="form-control" v-model="shadowY">
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="box-shadow-range">ぼかしの距離</label>
<div class="row">
<div class="col">
<input type="range" min="0" max="50" id="box-shadow-range" class="form-control" v-model="shadowRange">
</div>
<div class="col-4">
<div class="input-group">
<input type="text" class="form-control" v-model="shadowRange">
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="box-shadow-bokeh">広がる距離</label>
<div class="row">
<div class="col">
<input type="range" min="-50" max="50" id="box-shadow-bokeh" class="form-control" v-model="shadowBokeh">
</div>
<div class="col-4">
<div class="input-group">
<input type="text" class="form-control" v-model="shadowBokeh">
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center align-items-center">
<div class="shadowEx border border-dark" :style="{'box-shadow': shadow}">
</div>
</div>
<div class="col-12">
<div class="bg-light border p-4">
<pre class="mb-0">/* 下記CSSをコピペして使えます。 */
box-shadow: {{ shadow }};</pre>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
shadowX: 0,
shadowY: 0,
shadowRange: 0,
shadowBokeh: 0,
},
computed: {
shadow() {
return this.shadowX + 'px ' + this.shadowY + 'px ' + this.shadowRange + 'px ' + this.shadowBokeh + 'px #000';
}
}
})
ちなみに写真やグラフィックの世界で「焦点が合っていない」「境界が明瞭でない」などのことを「ボケ」と言いますが、英語圏でもBokehといいます。面白いですね。
ひ゛ら゛が゛な゛に゛濁点を゛つ゛け゛る゛っ゛っ゛!
最後に、入力したテキストが藤原竜也になってしまう方法のご紹介です。
<div class="row align-items-center">
<div class="col-12">
<div class="form-group">
<textarea name="tatsuya" class="form-control" v-model="tatsuya" placeholder="キンキンに冷えてやがるっ・・・!!"></textarea>
</div>
</div>
<div class="col-12 text-center py-3">
↓ ↓ ↓
</div>
<div class="col-12 display-4">
<div class="border bg-light p-4">
<strong>{{ tatsuya | toTatsuya }}</strong>
</div>
</div>
</div>
今回はVue.jsの機能の中でも、入力データを表示時のみ加工するfiltersを使ってみました。
filtersで編集されたデータは再利用ができませんので、実践的には数値にカンマ区切りを入れたり「円」を末尾に追加したり、というような場面で使います。
var app = new Vue({
el: '#app',
data: {
tatsuya: ''
},
filters: {
toTatsuya(val) {
return val.replace(/([あ-んア-ン])/g, "$1゛");
}
}
})
まとめ
今回はエンジニアの間で人気のあるVue.jsの使用例をご紹介しました。
私達グローバルゲートでは新しい技術を取り入れつつ、もちろん古くとも有用な技術も活用しつつ、お客様にとって最適なWebサイトづくりを目指して日々精進しています。
Webサイト制作やその他IT関連のご相談は
お゛気軽に゛お゛問い゛合わ゛せ゛く゛だ゛さ゛い゛!!!!
【関連記事】
カテゴリー
月別アーカイブ
ブログ内検索
執筆メンバーについて
モーリー
Webデザイナー。
当サイトのデザインと管理も担当しています。
ナミー
Webディレクター。
本社制作部の紅一点。お客様に寄り添った提案を心かげています。
タカ
サーバーエンジニア。
Webサイトにとってサーバーは命、ネットワークは血液です。Webサイトの安定稼働のために日夜注力しています。
たっくん
ITアドバイザー
Webサイトの活用方法からオフィスのネットワーク整備まで、多角的にITの活用方法をご案内させていただきます。
ノーさん
制作部ディレクター。
業種を問わず多くのお客様を担当させていただきました。Webサイトのお悩み、活用方法などぜひご相談ください。
カン
制作部デザイナー。
制作部最年少の若手ですが、だからこそ生まれるアイデア・発想にご期待ください。
当社サービスについてのお問い合わせは下記までご連絡下さい。
06-6121-7581 / 03-6415-8161