Vue.js × AWS AppSyncでSPA開発

Vue.jsとは

Vue.jsとはwebアプリケーション開発用のJavaScriptのフレームワークです。
比較的小規模の開発から利用することができ、シングルアプリケーションを効率良くすることができる人気のフレームワークです。本記事では、Vue.jsとはなにか、そしてVue.js × AWS AppSyncで行うSPA開発のメリットについてご紹介いたします。

フレームワークとは

そもそもフレームワークとはプログラムの開発を行う際に使用されるひな形のようなもののことです。
例えば、ある会社Aがシステム開発を行う際に、すべてのシステムを1から開発するようなことはまずありません。
会社AがWEBアプリケーションを開発することになった際には「Webアプリケーションフレームワーク」が使用されます。
上記フレームワークはウェブサイト、WEBアプリケーション、WEBサービスの開発をサポートするために設計されたフレームワークです。
Web開発ではどの開発でも用いられる共通した作業が存在します。そうした共通した作業に伴う労力を軽減することを目的として作成されました。
例えば、どのようなアプリケーション開発でも、データベースへのアクセスや文字の制御など共通して使用される、そういったシステムのコードを再利用を促進させるためのものです。
その中でもVue.jsとはユーザーインターフェースを構築するためのプログレッシブフレームワークです。

Vue.js

Vue.jsはユーザーインターフェースを構築するためのプログレッシブフレームワークで、他のフレームワークとは異なり、少しずつほかのライブラリや既存のプロジェクトに統合することもできます。
Vue.jsはMVVMと呼ばれる設計パターンを採用しています。
MVVMフレームワークでは、Model,View,ViewModelの3つのアプリケーションで構築されています。Vue.jsは他のMVVMを採用しているフレームワーク(Knockout.jsなど)よりもわかりやすくシンプルなAPIを提供しています。
しかし、機能面でみるとほかのフレームワークに比べて機能が少なくなっています。ただ、機能が少なくなっている分、シンプルで使いやすく、学習コストも低くなっていることから、導入から使用するまでの間で、様々なコストを削減することができます。

Vue.jpは双方向データバインディング

データバインディングとはデータと対象を結び付けて、データあるいは対象の変更を暗示的にもう一方へ反映する仕組みのことです。データバインディングには「1方向」と「双方向」の仕組みがあり、Vue.jsに採用されているのが「双方向データバインディング」になります。

双方向データバインディングとは

双方向にデータが同期することをデータバインディングといいます。
例えば、通常はある画面でテキストビューに入力された値を元に別のメッセージを継続的に表示したい場合、最初に初期値を設定し、それ以降は継続的な変更を監視する必要があります。
テキストビューに変更があった際に関しリスナーを記述、そしてイベントが発生するたびに、表示個所のメッセージを現在の入力されている値でメッセージを書き換える処理を行います。
しかし、双方向データバインディングではビューとモデルの変数を自動で同期することが可能です。そのためイベントリスナーなどで監視を行わなくても表示しているメッセージが自動で変更されるようになります。
これが双方向データバインディングです。

その他フレームワークでは個人向けや中規模～大規模向けのフレームワークなどが存在しています。
しかし、Vue.jsでは個人開発から大規模開発まで行うことができます。つまりVue.jsを使用すればどのような規模の開発にも対応することができます。

Vue.jsでできるSPA開発

SPAとは

SPA(シングルページアプリケーション)とは単一のWEBページのみで構成するアプリケーションのことです。
SPAのメリットとしては、動作性の向上、開発者のコーディングを軽減、ページ遷移のストレスがないなどがあげられます。
従来のアプリケーションではユーザーが画面上でURLなどをクリックして、そこからサーバーへ情報を送信、サーバー側で情報を判断し、ページに反映するといった流れになっていました。
しかし、SPAではユーザが画面上でURLなどをクリックして、必要なデータをサーバへ送信、返却されたデータをJavascript、HTMLで処理を行います。
つまりブラウザでの処理をJavascriptで終わらせることによってサーバーとの通信を最低限にとどめることができます。

そして、JavascriptでVue.jsなどのフレームワークを使用することによって、さらに幅広い開発を行うことができるようになります。

Vue.jsはそうしたSPA開発に使用されることが多いです。
そうした開発を容易にするための機能が備わっているため、多くのアプリケーション開発で使用されています。

Vue.js × AWS AppSyncでSPA開発が行える

AWS AppSync は、リアルタイムのデータ同期機能とオフラインプログラミング機能を備えた、エンタープライズレベルの完全マネージド型の GraphQL サービスです。

シンプルになったデータアクセスとクエリ

AWS AppSync では、サーバーにあるデータのフェッチ、変更、サブスクライブをクライアントアプリケーションから実行できるデータ言語、GraphQL が使用されます。GraphQL クエリでは、サーバーから返されたデータをどのように構造化するかをクライアントが指定します。これによって、クライアントは必要なデータのみを必要なフォーマットでクエリできます。
GraphQL には “自己観察” という機能があり、バックエンドの知識がなくても、プロジェクトの新しい開発者は利用可能なデータを見つけることができます。

リアルタイムのデータアクセスと更新

クライアントとデバイス両方での即時更新

AWS AppSync では、GraphQL サブスクリプションを使用して、データのどの部分をリアルタイムで利用可能にするかを指定できます。GraphQL サブスクリプションはアプリケーションコードに含まれるシンプルなステートメントで、サービスに対してどのデータをリアルタイムで更新するかを指示します。

オフラインでのデータ同期

オフラインでも、Amplify DataStore でデータを操作し、更新
Amplify DataStore は、ウェブ、モバイル、IoT 開発者向けのクエリ可能なオンデバイス DataStore をローカルファーストの使い慣れたプログラミングモデルで提供し、オンラインでもオフラインでもデータでシームレスにやり取りします。
AWS AppSync と組み合わせると、DataStore はクラウドのアドバンストバージョン管理、競合検出、解決を活用して、さまざまなクライアントからのデータを自動的にマージするだけではなく、データの一貫性と整合性を提供できます

アプリ内でのデータのクエリ、フィルタリング、および検索

AWS データソースへの事前設定済みアクセス
AWS AppSync を使用することで、クライアントアプリケーションはデータ要件を GraphQL によって指定できるため、必要なデータのみがフェッチされ、サーバー側とクライアント側両方でのフィルタリングが可能です。AWS AppSync では AWS Lambda、Amazon DynamoDB、Amazon Elasticsearch がサポートされているため、GraphQL 操作として、簡単な検索、複雑なクエリやマッピング、テキストの全文検索、あいまい検索やキーワード検索、位置情報検索などが考えられます。