現在、アプリケーションをより速く、よりユーザーフレンドリーにする多くのソフトウェアテクノロジーがあります。Vue.jsはJavascript の礎に基づいて構築されるフレームワークであり、ますます人気が高まり、Webの発展に新しいソフトウェアテクノロジーの一つになっています。

Vue.jsはユーザーインターフェース（UI)を構築するテクノロジーとして知られています。Vue.jsの優れる機能はフレームワークと異なり、Vue.jsがーザーインターフェースに集中するため、既存のプロジェクトに統合するのも、とても簡単です。それからVue.jsは新しいWebの開発、既存のアプリケーションの改善など仕事に役立ちます。

1.Vue.jsの基本知識について

 Vue.js (発音は/ v j u ː/ view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック：monolithic)なフレームワークとは異なり、Vue.jsは少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに簡単に統合するものです。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

Vue.jsは2014 に Evan You によって最初にリーリスされます。Evan Youは元Google開発者であり、AngularJS を利用し、Angularフレームワークの欠点を取り除き、シンプルで使いやすいシステムを構築します。

いつか企業が Vue.jsを利用しているのはFacebook、Netflix、Adobe、Grammarly、Behance、Xiaomi、Alibaba、Codeship、Gitlab và Laracastsです。

2.Vue.jsのメリットとデメリット

2.1.Vue.jsのメリット

・小さいなサイズ

JavaScriptフレームワークの成功率はそのサイズによって異なり、サイズが小さいほど使いやすくなります。Vue.js フレームワークのサイズは18–21KB、ユーザーはダウンロードして使用するのに時間が掛かりません。

・アプリケーションを開発しやすい

Vue.jsはシンプルな構造で、大小様々な規模で利用することが可能です。それから時間が節約できます。どんな問題でも、ユーザーは障害を簡単に見つけることができます。

・簡単に統合する

Vue.jsは既存のアプリケーションと 簡単に統合することによって、一般的にWebの開発者に利用されます。Vue.jsはJavaScriptフレームワークに基づいて構築するので、JavaScriptに基づく他のアプリケーションと簡単に統合できます。そのため、Vue.jsは、新しいWebアプリケーションの開発や既存のアプリケーションの変更などのタスクに非常に役立ちます。この統合はVue.jsがすべての要素を準備しているおかげで可能です。

・柔軟性

高い柔軟性はVue.jsのメリットを考えられています。Vue.jsの柔軟性により、開発者はReact.js, Angular.jsを開発します。それでどんなJavaScriptフレームワークは理解やすくになります。Vue.jsはブラウザから直接実行できるシンプルなアプリケーションを開発において多くのメリットを表しています。

2.2.Vue.jsのデメリット

Vue.jsフレームワークはVue.jsフレームワークは、「Angular」や「React」よりもまだ使用されていません。これは急速に人気があり、同時にVue.jsを使用する場合、大規模なアプリケーション開発で問題が発生する可能性があります。

３. Vue.jsの機能

Vue.jsはシンプルな双方向データバインディングに特化しているといっても、機能が足りないといったことはありません。アニメーションを追加することもできますし、ディレクティブによる細かい動作の指定も行えます。

ここではいくつかの機能を簡単に紹介します。それぞれ詳しい解説は、次回以降で順次取り上げる予定です。

3.1ディレクティブ

Vue.jsにはディレクティブ（directive）と呼ばれる組み込みの機能があります。これはHTMLに独自の属性を付与することで、DOM操作を行う機能です。

例えば、Modelの値とHTMLの表示を同期させたり、Modelの値に応じて要素の表示と非表示を切り替えたりといったことができます。Vue.jsでは、DOMで起こるイベントのハンドリングも、ディレクティブを使って行います。

ディレクティブは機能ごとに細かく、数多く用意されているので、ディレクティブを使いこなすことができれば、直接DOM要素を操作するコードを書く必要はなくなるでしょう。

自分で独自のディレクティブを定義することもできます。ディレクティブにはv-という、Vue.jsのプリフィックスが付いたHTMLの属性を利用します。

AngularJSにもディレクティブがありますが、Vue.jsのディレクティブとは異なるものです。Vue.jsには、AngularJSのディレクティブに近いものとして、v-componentというコンポーネント化を行う機能があります。

3.2 コンポーネント指向

UIコンポーネント（部品）を組み合わせてアプリケーションを作るというのが、Vue.jsの方向性です。Vue.jsにはコンポーネント化するための機能が多く備わっています。

また、Vue.jsは部品単位でアプリケーションを設計することを基本として設計されています。これは仕様策定中であるWeb Componentsを意識した作りになっていて、先を見据えた実装がされています。将来的にWeb Componentsの機能をシームレスに利用できるようになると予想しています。

3.3 学習コスト

簡単な使い方をするだけならば、学習コストはほとんどかからないのもVue.jsの強みでしょう。少し複雑なことをしたくなったとしても、わかりやすいAPIリファレンスや使用例が用意されているので、AngularJSほど習得に苦労することはないと思います。

Vue.jsはAngularJSやBackbone.jsやKnockout.jsといったフレームワークのよい所を元に設計されているので、元になっているフレームワークの使用経験があれば、用語の定義や機能の違いはあっても使いこなすことができるでしょう。

4.Vue.jsの学ぶ条件

今から、次にVue.jsの基本的な学ぶ条件をご紹介します。

✔️Javascript:Vue.jsは主要なJavascriptフレームワークであるので、学ぶ条件はJavascriptを開始することです。

✔️ Ｗebbase: HTML

✔️CSS 

Javascript

他のJavascriptフレームワークと同じ、学ぶ前に<script>タグベアで定義されたjavascript の構文から始めする必要があります。

export: default {

  props: {

    showModal: Boolean,

    closeAction: Function,

    containerClass: String

showModal：ダイアログ​ボックスを表示できるかどうかを示す。

closeAction：「ダイアログを閉じる」ボタンをクリックするとき、一つのFunctionが及ぶことができます。.

containerClass はboostrapの属性であり、ダイアログのタグを囲みます。

HTML

テンプレートタグ内で<div> root タグがあり、次のように書くと、エラーが発生します。

  <template>

       <div>

           abc

       </div>

       <div>

           def

       </div>

   </template>

正しくのは次のように書く

<template>

      <div>

          <div>

              abc

          </div>

        <div>

              def

          </div>

      <div>

  </template>

不可欠な要素として、すべてがテンプレートの<template>タグ内で発生します。

Vue.jsの使い方はHTMLファイルで埋め込まれます。それはVue.jsの使い方を学ぶためにキーです。Vue.jsコマンドは v- と v-if を始める傾向があります。ループとIFコマンドのように皆さんは使い方をもっと理解するためにVue.jsのホームページで学びます。

CSS 

<div :class="containerClass">

":class"は v-binの略語として理解されます。「:」の属性を始めるのはこれは動的プロパティであり、その値はコードとして評価されるという意味です。<div: class = "containerClass"> はそのdiv が「"containerClass"」のCSSクラスを持っているという意味じゃありません。「"containerClass"」はコードを評価され、これは定義されるのように<script>セクションでpropとして定義されています。

<div :class="{modal: true, in: showModal}" :style="{ display: showModal ? 'block' : 'none' }">

{modal：true、in：showModal}に対して、モーダルは常にtrueであり、prop showModalの値に依存します。だから、ShowModalがTrueであれば、それらは解決され、classの属性は"modalin"であります。styleの属性に対して、それは簡単な Javascriptであり、showModal がtrueであれば、それらはstyle ="{display: block}" に解決されます。

5.React.js とVue.jsの比較

5.1.React.jsの省略

React.js はユーザーインターフェースを構築するために豊富なJavaScriptフレームワークおよびライブラリです。時間の経過とともに、Reactは、ツールが複雑なUIプロセス、データ処理、パーソナライズなどを担当できるようにする豊富なエコシステムを獲得しました。

React.jsのコンポーネントはFacebookによって開発されました。React.jsは2013年にオープンソースJavaScriptエンジンとしてリリースされました。現在ではReact.jsは当時に最も売れる二つのJavaScriptライブラリであるAngularとBootstrapよりも人気があります。

5.2.React.js と Vue.jsの類似点

「React.js」と「 Vue.js」には多くの類似点があります。それらは両方とも：

• 仮想 DOM を活用しています。
• リアクティブで組み合わせ可能なビューのコンポーネントを提供しています。
• コアライブラリに焦点をあわせることに努めており、ルーティングやグローバルの状態管理のような関心事は関連ライブラリに担当させています。

5.3.React.js と Vue.jsの相違点

全体をイメージしやすいように表でまとめました。

 関連記事：React Nativeとネイティブアプリでの開発の違いとは？

6. 終わりに

将来にVue.js がもっと一般的に使用するになるということを信じています。また、Vue.jsによって研究および展開された最高の競合他社にも驚かされることはありません。それでVue.js を理解して、会社にVue.jsを導入するのは必要があります。そのブログに定義、メリット、学ぶ条件などVue.jsの基本知識をご紹介しました。解説した情報が皆様に役立つという希望です。

オフショア開発をご検討されている方々はぜひ一度ご相談ください。

※以下通り弊社の連絡先

アカウントマネージャー: クアン(日本語・英語対応可)

電話番号:　(+84)2462 900 388

メール:  konnichiwa@hachinet.jp

お電話でのご相談/お申し込み等、お気軽にご連絡くださいませ。

 無料見積もりはこちらから▶

Tags

ご質問がある場合、またはハチネットに協力する場合
こちらに情報を残してください。折り返しご連絡いたします。