せらぴんブログ

サークル「せらぴん」のうのはな透です。やっぱり眼鏡っ娘が好き!!

SinatraとVueの黒魔術化

お前が○○んだよ?ジェネレータ

次なる実験場はこのジェネレータ。
ベースにSinatraを使っているので、そこに乗っける形でVueによるSPA化を施していく。

ぶっちゃけ、下記ページに必要なことは8割方書いてある。

qiita.com
qiita.com

以下、備忘録

index.htmlの返し方

上記ページでは「フロントエンドサーバがnpm、バックエンドサーバがsinatra」となっていたりして
そいつらの橋渡しをするようにしているようだが、
「別にSinatraあるんだから、そこで全部やっちゃえばよくね?」ということで今回はSinatraのみで対処した。
要するに、"/"にアクセスされたらSinatraで拾って"/index.html"を内部的に返せばよいわけである。
これは、Sinatraのreadmeにある「別ルーティングの誘発」を利用することで実現できる。

Sinatra: README (Japanese)

Ajaxどうするの?

axiosでやる。

qiita.com

axiosを使ってPOSTするとデータが渡ってないようだったので、下記ページを参照しながら直した。

qiita.com

プログラム内でページ遷移

this.$router.pushを使う。
ちなみに、動的ルーティングのパラメータはthis.$route.params、こいつはthis.$router
めちゃめちゃ紛らわしい💢

yarn

最近ではnpmの代わりにyarnを使うのが流儀らしい。

www.webprofessional.jp

早いらしいが体感的にそこまで違いを感じなかった。
実際に数値で比べてみないとわかんないものだししょうがないね。

感想

  • SinatraAPI(&index.htmlレスポンス)に徹し、フロントエンドはVueに集約することができた
  • npm(yarn)周りはデプロイした時点で役目を終え、herokuのwebプロセスではSinatraのみが走っている。美しい
  • nodeのモジュールとrubyのgemが両方Slugとして固められるため、容量としては若干不安要素がある(このアプリも大したことはしてないけどSlugが71MBになってる)

以上。