Panda Noir

JavaScript の限界を究めるブログです。

Vue.js + nginxでSPA構築してみた

今までサーバー側をしてこなかったせいでSPAに対する印象があまりよくなかったのですが、サーバー側の設定をうまくすると通常のサイトとほとんど同様のページを作れると気がついたので構築してみました。

なぜSPAを毛嫌いしていたのか

かなり単純な理由なのですが、URLが気持ちわるいと思っていたためです。http://example.com/#/page/1のように、ハッシュが必要なこれはイケてないと思っていました。

しかし、実はサーバー側の設定をすれば http://example.com/page/1のように普通のURLでアクセスできます。

HTML5 History モード · vue-router

どうして普通のURLでアクセスできるのか

SPAは、index.htmlに対するアクセスをルーティングで捌くという仕組みを取っています。このしくみのため、すべてのアクセスをindex.htmlに送らねばなりません。そのためサーバー側の設定をいじれない場合、URLが http://example.com/#/page/1とならざるを得なかったのです。

しかし、サーバーの設定で「http://example.com/*に対するアクセスはどれもindex.htmlを返す」とすることができます。こうするとindex.html内でURLを見てルーティングができます。

個人的に構築してみて思ったこと

今回僕が構築したページはこちらです。

calendar

このSPAは http://pandanoir.net/vue-sample/:year/:month (:year、:month部分は任意の数字。当てはまらない場合は今月)でアクセスすると、その月のカレンダーを表示するだけのものです。

SPAというと、homeやabout、articlesのように普通のサイトと全く同じように構築できます。しかし、初期コストが高く描画に時間が余計にかかってしまいます。これは個人的にはページ遷移をヌルヌルできたり、通信コストを抑えられることよりも高くつくと思ってしまいます。

ただ、今回のようにパラメータを受け取りたいだけというケースにおいては、初期コストが存在しない(大きくない)のでいいと思います。

マテリアルデザインと組み合わせるとかなりいい感じになりそうだなと今ふと思いました。Vue.jsのページ遷移と相性いいマテリアルデザインFW誰か作って