ここ最近Reactを使ったSPAの開発に勤しんでいたところ

やればやるほどSPAってなんなんだとなった。
単一ページ？いやでも複数ページあるけど。
ゲシュタルト崩壊を起こした。

エスピーエー　ワカラナイ　ググル
ググッタ　メイカク　テイギ　ナイ

SPAというのはなんとなく定義されているものの明確な定義はないらしい。

というわけでどういうものが**「SPA」だと感じるのか
ひいては「SPAらしさ」**とはなにかについて考察してみた。

結論

あらかじめ結論を書いてしまうと
この記事を書いた結果以下の結論に行き着いた(あくまで個人の見解)

SPAらしさ＝ネイティブっぽいかどうか

以下はSPAらしさってなんだとか
なんかもういろいろごちゃごちゃ語っています。

SSRはどうか

SSRってそもそもサーバーでHTML作ってるし
普通に通信発生してるし

バックエンドとフロントエンドのソースコードを共通化できる
アイソモーフィックではあるものの
SPAらしくない。

結局通信してURLに対し異なるHTMLを返すというのは
先祖返りというか、それSPAで作る意味あったの。。。

という疑惑を抱いてしまうので「SPAらしくない」と判断。

(でも検索ロボットに対してのみSSRするならSPAらしいと思う)

SPAの利点？

通常のWebページではできないUXができる
高速なページ遷移
読み込みが早い

など、色々言われてはいるものの
正直そこまでメリットと言えるレベルか？という思いもあり
SPA自体にはさほどメリットはないと思っている。

SPAは副産物的なものでは？

SPAがトレンドっぽくなっているのは
SPAにメリットがあるのではなく

バックエンド側をシンプルなAPIの実装のみにすることにメリットがあった
と言う方が正しいと思っている。

JSONを返すだけのAPIは
ネイティブからもウェブからも利用できる

じゃぁ次はネイティブもフロントも同じコードで書けたらいいよね
とアイソモーフィックを目指した結果のSPA

と考えた方がしっくりくる。

SPAは早い？

SPAは読み込みが早いと言われることもあるが
JSが肥大化して実はそんな早くないということも珍しくないと思うし

パフォーマンスチューニングによって
最終的に従来のウェブサイトより早くできるとは思うものの

それがすごいメリットと言えるほどかというと微妙なラインでは？

jQueryでは限界がある？

よく複雑なDOM操作をjQueryでやるのは大変と説明されることもあるが

DOM操作だけで考えた場合、jQueryの方が優れていると感じる面もある。
従来のウェブサイトらしいサイトであればjQueryのがはるかに簡単だし
十分なケースも多いと思われる。

ただDOM生成やネイティブアプリレベルのDOM操作
という観点で考えた場合はやはりReactの方が優れていると感じる。
(あとVDOMによる差分更新もメリットか)

ネストされたDOM構造をjQueryで頑張って作っていくというのは
不可能ではないがあまり書きたいとは思えない。(好みの問題)

Reactを使う理由

個人的になぜReactを使うかという事を改めて考えた場合

①バックエンドはAPIだけにしたい
②DOM生成をjQueryでやるのはつらい
③VDOMによる差分レンダリングだから無駄が少ない

という3点からReactを採用しているようだ。
(なんとなく利点は感じていたものの、改めて自覚した)

将来的にネイティブにも横展開できるかどうかという点はさほど考えていない。
(簡単にできるなら嬉しいなー程度)

個人的な悩みの解決

従来のWebサイトのようなSPAっぽくないサイトを
Reactで作る意味はあるのかというもやもやがあったのだが

今持てる知識の中で
バックエンドはAPIのみにしたいとなった場合

フロントは以下の２択を迫られる

①静的なhtmlでサイトを作るか
②SPAで作るか

SPAで作るメリットあるのかと思っていたが
バックエンドをAPIだけにできるじゃんと考えるとスッキリできた。

主となるのがフロントなのかバックエンドなのか

これは個人的な感覚が強い部分だが
APIからデータを取得する頻度は少ない方がSPAらしく感じる。

ゲームなんかでは、基本的にプレイ中は常にオンメモリでデータが管理され
セーブ時に必要なデータをまとめてHDD等に保存する

この作りに近いほどSPAらしさを感じる。

SPAらしくないと感じる例としては
何かしらデータを更新するたびに最新のデータをAPIから取得しなおして
画面を全更新かけるような作りである。

基本的にフロント側でデータを管理し
バックエンドはデータの保管場所程度
というくらいがSPAらしいのではないかと感じる。

まとめ

上記を踏まえたまとめ

SPAのメリット

①バックエンドをAPIだけにできる
②ネイティブの作りっぽくなるほど恩恵が得られやすい

Reactのメリット

①DOM生成楽
②ある程度規模が大きくなっても管理しやすい(実力次第でもある)

SPAらしさ

ネイティブに近いほどSPAらしさが出る

SPAらしさを損なう要因

SSR
APIに頼りすぎるDOM更新

あとがき

五月雨に書きなぐった事で
今までもやもやしていた事が自分なりに整理されました。

そしてSPAは難しいと言う事も再確認できました。

SPAを開発するとなった場合、多くはReactかVueを使うことになると思いますが

そもそもjQueryだけでもそこそこ複雑なアプリケーションを作る事は可能です。

にも関わらずReactやVueという新しいフレームワークが誕生したのは
jQueryで作るのが難しいくらい複雑なものを作ろうとしているからだと思いました。

いくらReactを使えばSPAが作れるといったところで
そもそもSPAが難しいジャンルであり
(特にReactはあくまでViewライブラリ、Store管理は別途知識が必要ですし)

それなりの技術力、設計力、経験値がなければ
ReactやVueを使ったところでカオスになってしまう。

でも、だからこそ挑戦しがいがあり、面白く感じる自分がいる
そうも思いました。

終わり。