orizuru

つながる.見える.わかる IoTソリュ-ション

【Vue.jsでSPAへの移行】Vue.jsに触れてみよう

約 7 分
【Vue.jsでSPAへの移行】Vue.jsに触れてみよう

こんにちは、新入社員のNakataです。入社するまでは生物系の研究をしていましたが、この度Orizuru開発に携わることになりました。そんな私の初めての実務として、既存のアプリケーションをシングルページアプリケーション(SPA)に移行する作業を行いました。実装には、SPAを効率的に開発するためのフレームワークVue.jsを使いました(Vue.js公式サイト)。
今回はそもそもSPAとは、Vue.jsとはどんなものなのかを、私自身の理解のため、これからSPA開発や Vue.jsを学ぶ人たち向けに、簡単にまとめました。また、SPA移行で役に立った機能(vue-router)の紹介もしたいと思います。

SPAとは

SPA(Single Page Application)とは、名前の通り単一のページで構成されるアプリケーションになります。SPAではない webアプリケーションでは、ページ遷移を行う度サーバーからHTMLを取得し、それを表示することで画面を書き換えていました。SPAでは、サーバーからHTMLを受け取るのは最初だけで、それ以降はAjaxでデータをやり取りし、JavaScriptでDOM(HTML文書やXML文書を書き換える機能を使用するための仕組み)を操作することで画面を書き換えます。初期ページのローディングには時間がかかりますが、それ以降はAjax通信のみで画面の書き換えを行うため、ページ遷移が早くなりサーバーへの負荷も減ります。

なぜVue.js?

Vue.jsには、コンポーネント指向や双方向データバインディングのように、SPAの開発を進めやすい特徴があります。また、公式のAPIリファレンスや使用例が充実しているため、開発に必要なものを効率よく学習できます。そこで今回はVue.jsを使用しました。

Vue.jsの特徴

コンポーネント指向

コンポーネント指向
必要なUIをコンポーネント化し、それを組み合わせることでアプリケーションを作成できるというのが、Vue.jsの特徴の一つです。一度コンポーネントを作成すると、そのUIが必要になる場面で再利用することができます。Vue.jsには、コンポーネントを作成するための様々な機能が備わっています。
双方向データバインディング

双方向データバインディング
双方向データバインディングとは、データの変更があればリアルタイムでUIを更新し、UIの変更があればデータの更新を自動的に行う機能です。双方向データバインディングは他のフレームワークにも備わってる機能ですが、Vue.jsでは、その双方向データバインディングを簡潔に実装することが可能です。

画像引用元:Vue.jsの作者Evan氏によるスライド資料

実際に触ってみる

環境設定

今回はVue.jsを使ってみるため、プロジェクトのテンプレートを自動で作成してくれる、vue-cliを使用します。
vue-cliを使用するためにはNode.jsが必要です。Node.jsをインストールしておいてください。準備ができたら以下のコマンドでvue-cliをインストールします。

様々なテンプレートが用意されていますが、今回はwebpack(複数のファイルを1つにまとめて出力するツールの一種)でプロジェクトを作成します。途中、設定を確認されますがEnterで進めます。

これで設定完了です。実際にサーバを動かしてみましょう。

データバインディングを使ってみる

Vue.jsでは、v-modelディレクティブを用いることで、input要素に対して、双方向データバインディングが可能となります。ディレクティブとは、 DOM要素に対して何かを実行するコマンドの役割をもつトークンで、HTMLのタグ内に記述します。
実際に使ってみるため、今回作成したプロジェクト内に作成された、srcディレクトリ内のファイルを見ていきましょう。
まずは、src/components/HelloWorld.vueのtemplateタグ内を、以下のサンプルコードに置き換えてみてください。

サンプルコード

src/components/HelloWorld.vue内のscriptタグ内は以下のようになっています。
Vueコンポーネント内のdataはオブジェクトではなく、オブジェクトを返す関数として定義します。

コードの置き換えと確認が終わったら保存を行い、実際にフォームから値を入力してみましょう。

vue画面1
vue画面2

data.msgとinputの要素が、v-modelディレクティブで紐付けされていることで、動的にUIが更新されることが確認できたでしょうか。このようにVue.jsでは、双方向データバインディングを簡潔に実装することが可能です。

vue-routerを使ってみる

Vue.jsでは画面描画のために、URLを変える必要はありません。しかし、URLの変化と画面の書き換えを対応させておくことで以下のようなメリットもあります。

  • 対応するURLをブックマークとして保存可能
  • SPAでないアプリケーションをSPAへ移行する際、元々のURLごとに画面を対応させることが可能
  • URLごとにコンポーネント単位で開発を進めることが可能

vue-routerを使用することで、ページ間の遷移および、それに対応するURLの変更が可能となります。では、vue-router使ってURLを変化させ画面の書き換えを行ってみましょう。src/router/index.jsを、以下のサンプルコードに書き換えてみてください。

サンプルコード

importでコンポーネントの読み込み、pathでコンポーネントごとにルートを設定しています。pathで設定したURLにアクセスすることで、そのコンポーネントの画面が表示されるようになります。propsについては後ほど説明します。
次にvueファイルを作成します。src/components以下にHelloWorld.vueをコピーして、PageA.vue、PageB.vueを作成し、templateとscriptタグ内を以下のサンプルコードに置き換えてみてください。HelloWorld.vueについても同様に置き換えてください。

サンプルコード

PageA.vue

PageB.vue

HelloWorld.vue

コードの置き換えと確認が終わったら保存を行い、リンク部分をクリックして画面とURLが変化しているか確認してみましょう。

Props
PageB

router-linkタグでリンクの設定をすることが可能です。toでrouter/index.jsのpathで設定したリンク先を指定します。aタグのような感覚で使えますが、サーバーからのHTMLの取得は行われません。
次にpropsについてですが、propsとは子コンポーネントで親のデータを参照したい時に、データを子コンポーネントに渡すためのオプションです。router-linkタグ内のtoの前に:を付けバインディングされたデータの値を渡すことができます。router/index.jsのpathで’/PageB/:msg’と定義していますが、/PageB/以下の値をPageBコンポーネントでmsgの値として受け取るという設定です。PageB.vueのscriptタグ内でprops: [ ‘msg’ ]を定義することでPageBコンポーネント内で受け取ったmsgの値が利用できます。
router-link props
このようにvue-routerを利用することでURLごとに画面を書き換えることができます。

最後に

今回はVue.jsやその一部機能について簡単に紹介させていただきました。私自身もVue.jsを触り始めたばかりですので、学習やアプリケーションの開発を通して、より理解を深めていきたいです。次回以降は、SPA開発で役に立つ、コンポーネントの作成方法や、各ディレクティブの機能等について紹介できればと思います。

About The Author

エンジニアNakata
生物出身の新人エンジニア。
開発を通じて日々学習中。

Leave A Reply

*
*
* (公開されません)