SPA開発 Single Page Applicationで
リッチUI&高速ページの
Webサービス開発を実現

SPA(Single Page Application)とは

再読み込み時間を減らし操作性を高める
Webアプリケーションアーキテクチャ



SPAは、ユーザがWebアプリケーションを使っている間、Webページ全体をロードしない特徴があり、結果としてレスポンスが高速でUI/UXに優れているというメリットがあります。
近年では、Angular、React、Vue.js、Nuxt.jsと言ったモダンJavaScriptライブラリが提供される事で開発者が記述するJavaScriptコード量を削減でき、効率的なWebサービス開発も実現できることから人気を博しています。

世界ではNetflix、Slack、Uber、Google、Facebookなどの大きなWebサービスで採用されており、国内でもLINE、Gunosy、Retty、noteなどにも採用されています。

SPA_modelcase_image500S.jpg

SPAの特徴

ヌルヌル動く
マルチプラットフォームWeb

SPAの特徴は、初期表示にのみHTML(Single Page)を読み込み、ユーザのクリックやタップに合わせて、 コンテンツを遷移させる体験です。
Webページ(HTML)自体を遷移させずに、JavaScriptがアプリケーションロジックを実行し、Webサーバーと通信を行いUIを表示させる事で、いわゆる「ヌルヌル動くWeb」を実現しています。

連続するページ間でユーザーエクスペリエンスが中断されなくなる事で、 ユーザー滞在時間を長くさせる効果があります。

pixta_24301066_S.jpg

高レスポンスWeb


SPAの特徴として、JavaScriptがDOM(Virtual Document Object Model)を操作しコンテンツを切り替えています。 これは、Webビューの差分だけを更新し、最低限の負荷でHTMLを変更する事ができます。
モバイル体験において、ページ表示速度が1秒遅れると、コンバージョン率は7%落ち、 2秒遅れると直帰率は32%上昇します。
現代のWebサービスはリッチUIでも低負荷、高レスポンスが求められています。

また、SPAは、初期表示時は読み込みが遅くなると言われていますが、CDN(Contents Delivery Network)の発展により、近年はその弱点が補完されています。

high_response_web500S.jpg

SEOが課題


SPAは人気のあるWebアプリケーションアーキテクチャですが、単一ページという特徴の為、検索エンジンのクローラーが読み込むHTMLが一つしか無くなってしまいます。

SSR(Server Side Rendering)やDynamic Renderingでクローラが読み込みやすいHTMLを 別に生成する回避策は挙げられるものの、ビジネス上のコストパフォーマンスを鑑みると、選択しづらいのが現状です。

そういった特徴から、「ログインを前提とする会員向けWebサービス(コミュニティサービスやSaaS)」のようなWebサービス構築に向いており、 「PVを集める為のWebメディア」のような用途としては不向きであると考えられます。

SEO_image_500S.jpg

当社のできること

ReactによるSPA開発

当社では、モダンJavaScriptライブラリ「React開発」を得意としています。
Reactは他のモダンJavaScriptライブラリと比較した時に、 システム規模が大きくなった時の拡張性や保守性を高めやすい特徴があり、 Reactを覚えるだけでReact Nativeなどスマートフォンアプリへの応用が利きます。

React開発を詳しく見る


React2_450_293.png

サーバレスSPA開発

サーバレスアーキテクチャを採用する主なメリットは、 サーバやコンテナの管理をせず、クラウド上のバックエンドコンポーネントをイベント駆動で利用する事で、SaaSアプリケーションを小さく始め、 改善サイクルのアジリティを高め、スケールさせやすい利点があります。


当社では、運用も含めた要件に合わせてサーバレスアーキテクチャ設計を提案し、 運用自動化、ゼロダウンタイムデプロイ、マイクロサービス化も含めたWebスタートアップの継続的デリバリ支援を行っています。

Serverless_image500S.jpg

SPAコンテンツ管理


当社では、ReactとLaravelをベースとしたWebサービス向けの開発コアフレームワークGaudiを保有しており、 管理画面に必要な機能はコンポーネントで保有しています。 CMS、会員管理、サブスクリプション、動画メディア、マッチングなど多彩な機能を誇ります。
SPAの価値を最大化させるために、GraphQLによるAPI Gatewayで様々な外部サービスと連携して、強力なバックエンドシステムをクラウドで提供することが可能です。

Laravel開発を詳しく見る


gaudi_CMS_500S.jpg