vuejsを使ってSPAを構築したので技術的なメモ書き【※コードはないよ】

スポンサーリンク
Pocket
LINEで送る

個人サービスをSPAにしてみました。

SPAは画面遷移がなくて、javascriptを使って部分的に変えるというもの。

サーバーサイドの言語だけで作ると、ページが変わる度にDOMも上から順に読み込むんで遅い、変更あるところだけ変えようぜ。ってのがSPAです。

画面の切り替わり速度が圧倒的に上がるのでWebなのにネイティブアプリの体感ができます。

slackとかgmailとかevernoteがそれです。

 

ということで実際にSPAにしたサイトはこちら

Bitpumpkin | プログラマ向けブックマークサービス

ちょっとSPAにしたばかりでスマホレイアウトが触れていないです…

 

技術的な話

さて、技術的な話をしていきます。

今回使ったフレームワークはVuejsです。

SPAにする前からちょっと動的に動く部分に使っていたのでそのまま採用しました。

あんまり、大規模開発に向かないらしいんですがとりあえず既存の機能の改修がめんどうだったのでそのまま使用することに。

 

ルーティング

SPAにはルーティングが必要です。

ページが変わったらURLが変わりますよね。

例えば、

・一覧

・詳細

というページ構成があって、SPAなのでサーバーサイドでレンダリングはしませんが、ページが変わったらURLを変更したい。

そんな時に必要です。

ルーティングがないと毎度同じページからスタートするんでSPAにするにはルーティングが必要。

残念ながらVuejs本体にはこの機能が付随していないので公式ライブラリ「vue-router」を使います。

https://github.com/vuejs/vue-router

Vuejsとvue-routerでSPAを作るときに覚えたことメモ

 

コンポーネントが肥大化、可読性が落ちる対策

普通に作っていくとコンポーネントが増えていきます。

最初は1ファイルでなんとかなるでしょで作っていたら、かなりの行数になり管理し辛くなりました。

ということでコンポーネントを分割して管理することにしました。

Vuejsは.vueというファイルに分けることができます。

スポンサーリンク

分割に関してはこちらに記事を書いています。

browserify+vuejs+vue-routerでコンポーネントを分割する

つまずく点としては、コンポーネントを分割するためにはnpmで各種ライブラリを管理する必要があるんですが

npm経由でインストールできるVuejsは「ランタイム限定ビルド」というもので、テンプレートコンパイラがないんですよね。

なのでhtmlに直書きしたテンプレートが動かない!

だからrenderを使いましょう。

※詳しくはドキュメントに書いてあります。

 

データの管理がきつい…そうだVuexを導入しよう

ある程度作っていくと、モデルの管理が大変になってきます。

こっちでもあっちでも編集したりで大変。

ということでVuexを導入。これはreactのreduxのVuejsバージョンです。

状態の変化を共通化させてデータの流れを追いやすくしましょうというもの。

コンポーネントのネストが深くなるとpropsで親から子に渡してその子がさらに子に渡してと、ものすごーくめんどくさくなるので、それの対策です。

これも公式のドキュメントが充実しています。

 

アセットのプリコンパイル

ちなみにruby on railsで書いています。

どうやらプリコンパイルのときにes5にトランスパイルしたりする方法があるみたいなんですが、めんどうだったので、

browserifyのコンパイル先をrailsのプリコンパイル対象のディレクトリに指定して、あとはRailsにお願いするという方法をとっています。

 

javascriptをスマホとPCを共通に戻す

SPAにする前は、jsをスマホとPCで分けていたんですが、作ってる最中にスマホ版も作ることを考えたらしんどくなって結局共通化に戻すことにしました。

そのうちAndroidアプリ出そうかなと考えて入るのであんまりスマホ版はいじれていません。

 

こんな感じでVuejsでSPAを作る話でした。

ついでに、ら使ってみてください。

Bitpumpkin | プログラマ向けブックマークサービス

 

Vuejsはライブラリも日本語のドキュメントが充実しているのでかなりおすすめです。