PCNSPCNSについてCompany会社概要Contactお問い合わせ株式会社グローバルゲート公式ブログBlog2020-02-04近年人気のJavascriptフレームワーク「Vue.js」でできるインタラクティブな制作事例Web制作技術こんにちは。グローバルゲート制作部のモーリーです。2020年もあっという間に1ヶ月が終わり、2月に入りました。多くの会社様では年度末に向けて、さらにその先のGWやオリンピック期間に向けて多忙な日が続くかと思いますが、体調にはくれぐれもご留意くださいますようお願い申し上げます。本日の記事では近年人気のJavascriptフレームワーク「Vue.js」についてご紹介します。まとめVue.jsとはJavascriptのフレームワークで、近年利用事例が急激に増えている人気のフレームワークです。Vue.js(wikipedia)当社業務でも一部採用しているのですが、開発者としては実際に使ってみて・コンポーネント化による管理のしやすさ・扱うデータがJSONで管理、編集がしやすい・フルPHPに比べて表示が高速などのメリットを実感しました。一般のお客様にとっては、Vue.jsでどんなことができるのか、どんなサイトが作れるのかという点が気になることと思います。そこで実際に動作する事例を作成しましたので、ぜひご覧ください。デモちなみに作者の方が好きなのか、コードネームが全部日本のアニメや漫画です。次期バージョンの2.7はNからはじまるアニメか漫画になりますが、何が来るのでしょう?入力したデータを元に計算し、即時にページに表示する(BMI計算機)それでは、実際の事例をご紹介します。一般のサイトでVue.jsを採用する理由の一つとして、入力されたデータと表示を連動させるリアクティブシステムがあります。簡単に言うと「何かを入力したらその内容を加工して表示させる」なのですが、jQueryなど他のライブラリで同様の操作を行うと・データの入力があったかどうかを判定する・入力されたデータを取得する・取得したデータを表示する・再入力されたら一旦初期化するなど細かく条件分岐を考えていかないといけません。Vue.jsならこれらの操作を非常に簡単に実装することができます。HTMLはVue.js特有の属性や構文がありますが、ほぼ通常のHTMLそのままです。}}</strong><br>です。</div>v-modelとなっているところがユーザーの入力を受け付ける部分です。}}というところに表示させます。Javascript部分はとてもシンプル!数行でBMIが計算されました。}});マラソンの完走タイム計算機まったく同じ要領ですが、入力されたデータの計算式さえ変えれば違う結果を導き出せます。以下の例は、ランニングのペース(1kmあたりの時間)を入力したら42.195kmを走るのにどれだけ時間がかかるかを計算します。class="display-4">で完走できます。}})ちなみに1kmを4分で走っても(結構速いです)マラソンのタイムは2時間48分47秒と日本代表にもなれないタイムになってしまいます。日本記録の2時間5分や世界記録の1時間59分(非公認)がどれほど速いかがよく分かります。現在時刻を取得し、角度に置換して反映(アナログ時計)これまでは入力されたデータを元に計算を行って出力していましたが、元となるデータは入力されるものとは限りません。現在時刻をベースとすると、アナログ時計をつくることができます。}}</strong><br>です。}})setIntervalは一定時間で同じ処理を繰り返す関数です。ここでは1000ミリ秒(つまり1秒)ごとに針の角度をアップデートしていますので、クオーツ式時計の動きを模しています。この数値を1秒以下にすると自動巻ムーブメントのような秒針も再現できます。input[type=”range”]の入力値を元にCSSスタイルを生成(box-shadowのプレビュー)HTMLでの入力というと、文字を入力するテキストエリアかチェックボックスかラジオボタンでしたが、ブラウザの進化によってスライダーで数値を入力するrangeというスタイルも使えるようになりました。スライダーを操作することでその入力値(数値になります)がCSSのスタイルに反映されるため、見た目も面白くついつい遊んでしまいたくなる表現も簡単にできます。下記CSSをコピペして使えます。}})ちなみに写真やグラフィックの世界で「焦点が合っていない」「境界が明瞭でない」などのことを「ボケ」と言いますが、英語圏でもBokehといいます。゙!最後に、入力したテキストが藤原竜也になってしまう方法のご紹介です。</div>今回はVue.jsの機能の中でも、入力データを表示時のみ加工するfiltersを使ってみました。filtersで編集されたデータは再利用ができませんので、実践的には数値にカンマ区切りを入れたり「円」を末尾に追加したり、というような場面で使います。}})まとめ今回はエンジニアの間で人気のあるVue.jsの使用例をご紹介しました。私達グローバルゲートでは新しい技術を取り入れつつ、もちろん古くとも有用な技術も活用しつつ、お客様にとって最適なWebサイトづくりを目指して日々精進しています。執筆メンバーについてモーリーWebデザイナー。当サイトのデザインと管理も担当しています。ナミーWebディレクター。お客様に寄り添った提案を心かげています。タカサーバーエンジニア。Webサイトにとってサーバーは命、ネットワークは血液です。Webサイトの安定稼働のために日夜注力しています。たっくんITアドバイザーWebサイトの活用方法からオフィスのネットワーク整備まで、多角的にITの活用方法をご案内させていただきます。ノーさん制作部ディレクター。業種を問わず多くのお客様を担当させていただきました。Webサイトのお悩み、活用方法などぜひご相談ください。カン制作部デザイナー。制作部最年少の若手ですが、だからこそ生まれるアイデア・発想にご期待ください。ご相談・お問い合わせ当社サービスについてのお問い合わせは下記までご連絡下さい。サイトからのお問い合わせはJPRSによるSSLにより保護されております。