ごく簡単なSPA用ライブラリ

私は本格的なフロントエンド開発には関わったことがないのですが、SPAを手軽に作りたくて、実験的にライブラリ的なものを作成してみました。

https://github.com/jcytp/mspal

SPA(Single Page Application)という言葉は何を意味しているかが曖昧ですが、この記事では、URL遷移を伴う描画切替えをドキュメントのリロードをしない形で実装したWebアプリケーションのこととします。Fluxとかのアーキテクチャは問題外にしています。

SPAを作ろうと思って検索すると、ReactやらVueやらのややこしいフレームワークが出てくる現状です。しかし、SPAというのはそんなに開発環境まで強制されるフレームワークの話なのでしょうか？

有名なフレームワークを使用したSPAにはいくつか欠点があると思います。

1. 開発時に重たいプラットフォーム（Node.js）が必要
2. フレームワークが煩雑なため、開発者の学習コストが高い
3. ユーザーの初回アクセス時にロード時間が長い
4. SEOに難がある

このうち、4はLPを別に用意するというのと、検索エンジンがスクリプト対応すれば解決されます。

1～3は、シンプルな（ビルド不要で、軽量で、学習コストが低い）SPAライブラリがあれば解決します。SPAそのものの問題ではないと思いました。

1は、Node.jsを動かしてクライアントに配布するモジュールを「ビルド」するためメモリ等のサーバ負荷が高くなります。テキストエディタで書いたJSファイルをCDNにアップロードするだけで済めば問題は発生しません。

2は、単純にフレームワークの難解さで、フレームワークが何をしているか見えにくいからではないかと思います。大なり小なり慣れは必要ですが、ソースを簡単に読めるライブラリであれば敷居は下がるのではないかと思います。

3の初回アクセス時のロード時間の問題は、２つの原因が重なっていると思います。１つはライブラリが重たいという点で、いろいろな種類のライブラリを併用していたり、フレームワークの用意するモジュールが使用しない機能まで含んで肥大化していることによって重たくなります。理想的にはマイクロサービス化して必要な機能を都度ダウンロードさせたいものですが、ひとまず必要最低限の機能に絞ってライブラリ化することで軽量になると思います。

もう１つは初回アクセス時に即時では表示しないページの分までコンテンツをロードすることによるものです。これはコンテンツを一塊にパッケージングせず、URLに応じて必要なリソースをダウンロードする形にすればかなりの程度で解消される気がします。ただし、今回作成したものでは１つ１つのリクエストに対して都度レスポンスを待機しているため速くないという問題があります。

今回のSPA用ライブラリを公開する意味はあまりないかもしれませんが、個人的にはわりと要件を満たしているので、個人使用してみようかなと思っています。使ってみた結果、既存フレームワークの優秀さに気づくとしたら、それも良いのではないかと思っています。