SPA開発をしてみてよかったこと（雑感）

こんにちは。trippieceエンジニアの小沢です。

ついに我が社もエンジニアブログを始めることになりました。先日サービスをリニューアルしたので、第１回目はその時に意識したSPA開発について書こうと思います。

SPAとは

A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

- Single-page application From Wikipedia, the free encyclopedia

デスクトップアプリケーションのような流動的なUXを提供するウェブサイトやウェブアプリケーション。

ちょっと昔に隆盛を極めたJavaアプレットやFlashプラグインもSPAの仲間で、それがJavaScriptの成熟により注目されるようになってきた・・・というのが一連の流れのようです。（JavaScriptにはインストール不要などのメリットがあります）

SPAだと何がいいの？

Single Page Web Applications JavaScript end-to-end では、SPAの特徴として下記のユーザメリットが挙げられています。

デスクトップアプリケーションらしい特徴

  • 変更する必要のある部分だけを再描画することができる
  • データをできるだけブラウザに持つことで応答時間を最小限にすることができる
  • 通信処理の状態を動的に表示できる

ウェブサイトらしい特徴

  • どこからでもあらゆるブラウザからアクセスできる
  • 即座に更新・配布することができる
  • クロスプラットフォーム

デスクトップアプリケーションと従来のウェブサイトのいいとこ取りというわけですね。Ajaxを使ったサイトを構築したことのある方は多いと思いますが、実際のイメージはRESTfulなAPIをがっつり使ったサイトという感じです。

API first

How API-First Development Boosts Productivity

SPA化に至る経緯

trippieceの開発では、PHPのフレームワークCodeIgniterを利用していました。長年お世話になったフレームワークではあるのですが、既にマルチプラットフォームに展開していたこともあり、サーバサイドの同じ処理をそれぞれのプラットフォームのために書かなくてはならなかったり、プラットフォーム毎に仕様に微妙な差異が生まれたり、余計な工数が生まれたりといった弊害が発生していました。

また、ユーザ増加に伴いとあるページの読み込みが重い・・などユーザエクスペリエンス面での問題もあり、APIの下地もできていたので、今回のリニューアルはAngularJSを採用してSPA化を目指していくこととしました。

やってみてよかったこと

開発においてはプラットフォーム間の障壁をなくすこと、開発リソースの集中と高速化を特に意識していました。SPAを構築してみた雑感は下記の通りです。

APIファーストの考え方が自然に浸透した

サービスの設計ではAPIファーストを意識し、APIありきで考えることがあたり前になりました。モバイルアプリからウェブへ落とし込む際にも実装上の無理がでないような設計が自然にされるようになったと思います。

ページを部品化することができた

非同期のAPIを利用することでページとパーツに依存関係がなくなり、再利用したり変更に強くすることができました。また、BEM風なスタイルガイドを導入したのでデザイン側の作業とコンフリクトすることも少なくなり、妙なストレスから解放された感があります。

仕様を決めやすくなった

サーバサイドの仕様が全プラットフォームに関わるので、自ずとWEB/iOS/Android間の違いが仕様に吸収されるようになりました。特にバリデーションなど細かい部分での面倒くささが減ったのは良かったです。

ページのパフォーマンスが向上した

ページをレンダリングする際に毎回全体を読み込む必要が無くなり、ページの読み込み速度が向上しました。当初の課題だったページについても格段に改善され、10倍以上のパフォーマンスがでました。

開発に集中しやすくなった

クライアントとサーバがクッキリ分かれるので、開発リソースをそれぞれに集中して割り当てることが容易になりました。また、これはAngularJSを採用した効果でもあるのですが、サイトのコード量は格段に減りました。

テストがしやすくなった

これもクライアント側とサーバ側が別れたことによるメリットなんですが、テストも役割がはっきりとして書きやすくなりました。

AjaxコンテンツのSEO対策をするようになった（？）

これは通常見過ごしてしまうことをせざるを得なくなった・・・という意味で良かったことなのですが、結果的にはクローラに正しい情報を伝えることができるようになってきたのでプラスかなというところです。

AJAX クロール: ウェブマスターおよびデベロッパー向けガイド - ウェブマスター ツール ヘルプ

実装はprerenderを使ってクローラにHTMLスナップショットを返すようにしました。この辺りの話はまた別の記事で紹介しようと思います。

まとめ

SPAについて紹介してみましたがいかがでしたでしょうか。今回は技術的な負債を無くし、開発しやすくすることを目指しましたが、界隈にはYeomanのプロジェクトなんかもあり新しいアプリケーションがサクサクつくれるのも面白いですね。大した手間も掛からないので、もし興味をもった方がいましたら是非一度触ってみることをオススメします。

trippieceでは旅が好きなエンジニアを募集しています。

採用情報はコチラ。

新しい旅行体験をつくるエンジニアWANTED！！ - trippiece<トリッピース>の求人 - Wantedly

個人的には「ユーザとの距離が近いサービスである」ということがとても気に入っています。
この間も一緒に海外旅行にいったユーザとラーメン巡りをしてきたのですがめちゃくちゃ美味かったのでその写真を貼って締めたいと思います。ではまた。

四つ葉ラーメン

四つ葉 ラーメン