1. /
  2. Ruby on Rails

Ruby on Rails

Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法

Railsでwebpackerを利用してVue.jsを取り入れた完全SPAなサイトを構築しようとして、ページのルーティングを設定するためにVueRouterを導入しました。

VueRouterでルーティングを設定すると、デフォルトで下のようなURLに「#」が追加された状態で識別されてしまいます。

 

「#」が途中に混じっているのはあまりいいとはいえないため、VueRouterに「mode: ‘history’」という設定を加えて消してあげます。

 

これで解決か・・・と思いきや、新たな問題が発生してしまいます。

ページ切り替え後のURLを直接アドレスバーに入力して読み込みをかけると、Routing Errorもしくは404エラーが発生してしまいます。

 

調べても対策方法がまちまちで結局どうすればいいか悩みましたが、自己解決（正しい直し方かは不明）したので、今回はこのエラーの原因と対策方法について紹介したいと思います。

 

前提条件

・Rails 6.0.2

・vue 2.6.11

・vue-router 3.1.3

続きを読む

【Rails】データを圧縮してデータベースに保存する方法

大きな文字列データやJSONデータなどをDBに保存しようとすると、DBへの負荷が大きくなります。

少しでもその負荷を取り除くためには、データを圧縮して容量を削減する必要があります。

Railsでは「 zstd-ruby 」というzstdによるデータ圧縮gemが用意されています。

今回はこの「 zstd-ruby 」の使い方について紹介します。

ちなみに、zstdというのはFacebookに所属しているYann Colletによって開発された可逆圧縮アルゴリズムだそうです。（Wikipediaより）

 

＜前提＞

Rails6.0.1（5.2系でも同内容で確認済み）

MySQL 5.7

続きを読む

【Rails6】vue.jsを使って部分SPAなフロント開発をする方法

前回の記事ではRails6環境でRailsの「webpacker」を使用せず、

フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事を書きました。

少し続きまして、今回は具体的にVue.jsを使ってフロント周りをどんな感じに作っていくのかを、ディレクトリ構成と役割をメインに一つの例を紹介したいと思います。

続きを読む

【Rails6】webpackerを使わずにフロントエンドをwebpackに任せる方法

前回の記事までで、既存プロジェクトのRails5からRails6へのバージョンアップの説明は終わりましたが、今回はタイトルの通り、Railsのwebpackerを使用せず、バックエンドをRails、フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事になります。

なぜwebpackerを使用しないで役割分担させる必要があるのかも含めて紹介していきます。

続きを読む

【Rails】WindowsでRails5からRails6にバージョンアップさせる②

前回の記事の続きで、既存サービスをRails5からRails6へバージョンアップについてです。

前回はこちら↓

【Rails】WindowsでRails5からRails6にバージョンアップさせる

 

この記事では、Gemfile再構成～rails serverコマンドで起動まで紹介します。

 

今回修正する既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【Rails】WindowsでRails5からRails6にバージョンアップさせる

Rails6が登場して、既存のアプリもいつかバージョン上げないとなと前から思っていたのですが、Flutterでアプリ開発を行う前にと思い、ついにバージョン上げの作業を開始しました。

私のローカル環境はWindowsでしたので、ここではWindowsでのやり方をメインに進めていきます。

少し長くなりそうなので、この記事ではRubyとRailsのバージョンアップまでを紹介して、それ以降はまたの記事で紹介します。

 

既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【Rails/vue.js】モデルデータをJavaScriptで取得してIDで検索できるようにする方法

バックエンドがRuby on Railsの場合に、vue.jsでデータベースのデータを操作したい場合の話です。

１レコード分だけ取得するのであれば、インスタンス変数「@で始まる変数」にそれぞれ値を入れて渡すだけでもいいのですが、複数レコード（もしくは全レコード）を一気にjavascript側に持ってきたい場合もあります。

今回はRailsの機能ベースで部分的にvue.jsを使うシチュエーションで進めていきます。

続きを読む