シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。
しかし、Vueのメソッド内で

・axiosでdeleteリクエストを送信
・データ取得メソッドを実行

とそのまま記述しても

①axiosでdeleteリクエストを送信
②データ取得メソッドを実行
③ActiveRecordによって削除クエリが実行

という順番で進行してしまい、削除完了後のデータを再取得することができませんでした。

これをRailsで削除処理終了後にJSONを返して、VueでそのJSONを受け取った後にデータ取得メソッドを実行させることで解決しました。

2018-12-03

axios.POSTした配列オブジェクトをRailsのモデルオブジェクトとして保存する

自作webアプリ3 競走成績ジェネレータ Rails Vue.js

１つのレースオブジェクト
{ name: 桜花賞, location: 阪神, weather: 晴 }

複数のレコードオブジェクト（配列）
[ { name: 馬A, jockey: 騎手A }, { name: 馬B, jockey: 騎手B }, ...... ]

これらを同時にVue.jsから投げ、Railsで取得してそれぞれのモデルオブジェクトとして保存する方法です。

2018-11-04

Heroku上で画像の読み込みが非常に遅い

Rails 自作webアプリ2 はてな風ブログサービス

Herokuに自作アプリケーションをデプロイしたものの、どうも最初にアクセスするときに時間がかかりタイムアウトのエラー(H12)が出る。
開発環境ではスッとアクセスできる。

とりあえずHerokuのログを見てみる。

INFO -- : [3b31ed68-8e79-4c34-b04b-d2c8d08a1484]   Rendered home/_jumbotron.html.erb (0.2ms)
INFO -- : [3b31ed68-8e79-4c34-b04b-d2c8d08a1484]   Rendered home/index.html.erb within layouts/application (119.8ms)
INFO -- : [b6bb796c-5986-447c-8d9c-d6eaefc6c25c]   Rendered layouts/_header.html.erb (53436.8ms)
INFO -- : [b6bb796c-5986-447c-8d9c-d6eaefc6c25c]   Rendered layouts/_footer.html.erb (0.8ms)
INFO -- : [b6bb796c-5986-447c-8d9c-d6eaefc6c25c] Completed 200 OK in 54801ms (Views: 53683.7ms | ActiveRecord: 486.9ms)

_header.html.erbを読み込むのに時間がかかりすぎている。50秒以上も……

試しにヘッダーのロゴ部分をまるごと削除してみたら解消された

INFO -- : [e8e88dda-e163-4913-beb6-245d755baf55]   Rendered layouts/_header.html.erb (15.1ms)
INFO -- : [e8e88dda-e163-4913-beb6-245d755baf55]   Rendered layouts/_footer.html.erb (0.8ms)
INFO -- : [e8e88dda-e163-4913-beb6-245d755baf55] Completed 200 OK in 610ms (Views: 162.2ms | ActiveRecord: 181.5ms)

ただいくらなんでもヘッダーのロゴを削除するわけにはいかない。

<%= link_to root_path, :style=>"text-decoration: none; color:black; font-size:20px;" do%>
           <%= image_tag 'note_icon.jpeg' %>
           BLOG
<% end %>

原因はこの部分にあるはず。
試しにソースコードを確認してみる。

ん？

f:id:naito-coding0322:20181104204113p:plain

jpegからjpgになってるな……

調べてみるとこんな記事を見つけた。

blog.naichilab.com

プリコンパイルの時に拡張子jpegがjpgに変換されるらしい。
ファイルの拡張子をjpgに書き換えたら解決しました。

サイト上の他の画像はすべてpngで保存していたので、ヘッダーのロゴアイコンでだけこの問題が発生していたみたい。

プログラミングを始めて約半年、勘が働くようになってきた。