技術基盤としてのVue

私たちが構築するウェブアプリケーションは、プレーンなJavaCcriptとVueのリアクティビティの恩恵を最大限に活かすことで、ユーザーフレンドリーかつ高品質なUIを実現しています。

なぜReactではないのか

私たちの手がけるプロジェクトは常にユーザーフレンドリーなUI、つまりデザイン性を重視しています。VueはJavaScript初学者でも入りやすいという点が一番大きく、極端に言えばデザイナーをJavaScriptプロダクト作成にアサインできてしまう優れたフレームワークであると考えています。（Reactが難しいというわけではありません）

Vueの使いどころは何か

最も多く活用しているのは管理画面です。例えばスマートフォン向けアプリケーションを開発したとします。仮に医学部で使う臨床研究のためにデータを収集する目的だったとします。そうしますと集計結果や被験者の状態などを管理する画面が必要となります。

このように、大抵の場合アプリケーションには必ずと言って良いほどバックオフィス業務用途の管理画面が必要となります。SEOなど不要です。管理者が情報を閲覧したり、時にはユーザーに通知を送ることができれば良いわけです。

そんな重要な管理画面ですが、クライアントさまは大抵ユーザーに提供する画面しか想定しておらず管理画面構築コストは頭にないことがほとんどです。低コストかつ短期間で構築できるフロントエンド構築はこういったシーンで相当に役に立ちます。

それ以外の用途としては見積りや着せ替えなど、大体想像のつくところかと思います。

大きく踏み出せた一歩

弊社が大きく踏み出すことができた一歩は、このNuxtに出会ったことが大きな要因となります。Vueはフロント側でNuxtはSSR（Server Side Rendaling）ちった認識が広かったのですが、実はSPA（Single Page Application）のフレームワークとしてこのNuxtが相当に使いやすいという利点を見つけたことが大きかったのです。

2019年以降にVueで完結するアプリケーションいつては基本的にこのNuxtをベースとして開発をしています。

同じNuxtでもいろいろあるようですが

はい、従来のOptions APIのほか、Nuxt Property Decorator（Vue Property Decorator）、Nuxt Composition API（Vue 3 Composition API）があります。現在の開発の主流はNuxt Composition APIで進めていますが、2年以上前のものはNuxt Property DecoratorもしくはOptions APIにて継続開発しています。それぞれ良い点、気になる点はありますが、どれも良い開発環境であると考えております。

Vue 3 対応は？

2022年秋の Nuxt 3, Vuetify 3 の正式公開を機に、秋以降のに着手するアプリは全て Nuxt 3, Vue 3, Vuetify 3 に移行しました。

プロジェクトへの貢献

上記の通り弊社はNuxtのおかげで成立しています。わずかばかりではありますが、Nuxtプロジェクトに毎月金銭的を支援することで貢献を続けております。もつと多く支援できるよう、精一杯活用したいと考えております。

マテリアルデザインUIフレームワークの優等生

Nuxtと同時期に積極活用を始めたUIフレームワークがVuetifyです。まず必要と思われるUIコンポーネントはこのフレームワーク単体でほぼ完結ており、たとえば管理画面を制作するなどと言ったシーンでは相当に重宝します。

一方でこう言ったUIフレームワークはカスタマイズ性が低く扱いづらいという声も聞かれますが、しっかりとしたドキュメントも整理されており、正しく向き合えば最適な解答に辿り着けるかと思います。

プロジェクトへの貢献

弊社はVuetifyについても、わずかばかりではありますが、Vuetifyプロジェクトに毎月金銭的を支援することで貢献を続けております。もつと多く支援できるよう、精一杯活用したいと考えております。

ウェブアプリケーションとの深い親和性

もうすでに多くの方が利用していると思われるmBaaS（mobile backend as a Service）で、スマートフォンアプリケーション作成には欠かせない存在となっています。NoSQL型データベース、アカウントサービス、関数実行環境、静的ホスティング、メッセージングサービシなど、全部入りのサービスです。

これまではバックエンド側に上記を準備してアプリケーションと連携するための仕組みを都度作成する必要がありましたが、これらがサービスとして提供されているため人的コストの抑制に加え、構築期間の大幅短縮が実現できています。またデータベースがNoSQLという柔軟なものであることも欠かせない要素です。

またGCP（Google Cloud Platform）の一部として動作しているので、Firebaseで不足しているものについてはGCP側で補うことができるというのも大きいです。

圧倒的コストパフォーマンス

Firestoreデータベース設計やFunctionsの設計に余程の不備がない限り、SPA（Single Page Application）ベースの小規模プロダクトの場合、無料枠内で、もしくは少し足が出る程度で運用できてしまいます。設計次第でコスト試算も何倍、何十倍、何百倍、何万倍にもなるかと思いますが、ポイントを見極めることで抑えられますし、何よりメンテナスフリーな環境が予めされているメリットは大きいです。

AWSやAzureは使用しないのか

現在までの構築資産が全てFirebase専用に設計しているため、現状としてはAWSで並行しての開発は予定していません。しかしながらVueを用いたウェブアプリケーション以外については引き続きAWSや Azureを活用し進めていきたいと考えております。

化粧品メーカーさま150周年催事用LINEミニアプリ

創業150種年を迎えた化粧品メーカーさまが、都内の旗艦店にて体感できるLINEミニアプリ（LIFFアプリ）を展開したいとのことで、この実装と管理画面の構築をしました。

QRコードを用いたスタンプラリーの他、来店者向けの展示説明、インスタグラムでの仮想メイク動線など様々な挑戦をさせていただいています。

大学医学部 臨床試験データ収集アプリ

臨床データを収集する目的でアプリ開発をし、その集計や患者への通知をする目的の管理画面を構築。予算が確定しているため、その範囲内で進められるようアプリ側はFlutterで、管理画面はNuxtで構築しました。

本稿を掲載した2022年現在まだ臨床試験は続いており、引き続き伴奏していきます。

LINEと密連携した顧客フォローアプリ

驚くほどフォロワーの多いクライアントさまからいただいたご相談から、LIFFアプリ制作を経て、最終的にLINE Official Account Managerから独自システムに置き換えるとことまで全て携わらせていただきました。

LINE公式アカウントや、Twitter公式アカウントなど運営経験のある方はわかるかと思いますが、とにかくメッセージへの対応が大変なのです。ある程度自動化もできるかとは思いますが、貴重な一人を取りこぼしかねませんし、機械的対応は響きません。

こうした背景から、半自動でかつ柔軟にコミュニケーションをとれる仕組みづくりを実現したいという思いがプロジェクトの始まりです。

偶然にも並行して複数のLINE関連開発案件が進行していたため、コストを抑えつつ短い期間で実用に耐えるレベルまで持っていくことができました。引き続きクライアントさまの環境を改善しつつ、商品化への模索を続けていきたいと思います。

FC加盟店がIoT機器を操作する大規模システムの管理画面

全国チェーンを運営する企業さまの提供する機材はすでにIoT化されており、このシステムリプレイスのタイミングでお声がけいただきアサインされました。当初要件としてはVueでとのことでしたが、ある程度フレームワーク化されていた方が良いとか替えNuxtを提案し構築しました。