【テックアカデミー】メンタリング8回目:Turbolinks、field_with_errors

テックアカデミー第8回目メンタリング~検索可能なセレクトボックスが上手く表示されない件、投稿に失敗した際にレイアウトが崩れる件~ TechAcademy

テックアカデミーWebアプリケーションコース(8週間プラン)第8回目となるメンタリング。今回はTurbolinks、field_with_errorsについての内容です。

 

前回までのメンタリング

 

オリジナルサービスも残すはDM機能をつけるだけとなりました!しかし、検索可能なセレクトボックスが上手く表示されなかったり、投稿に失敗した際にレイアウトが崩れてしまったりと問題があったので、それらに関する質問がメインです。

 

【第8回目】メンタリング内容

8回目となるメンタリングの内容は、主にオリジナルサービス制作中に出てきた問題に対しての説明でした。

 

具体的には、

  • 検索可能なセレクトボックスにし、seed-fuで初期データを入れたもののjQueryの不具合で上手く表示されない件。
  • 投稿に失敗した時にレイアウトが崩れてしまう場合の対処法

の2つについてです。

 

jQueryの不具合

検索可能なセレクトボックスについては、Railsで検索可能なセレクトボックスのselect2を使う方法 を参考に実装し、大量の初期データ投入については、railsで初期データを入れる(seed-fuの使い方)を参考に実装しました。

 

しかし、検索可能なセレクトボックスを実装する際にjQueryでTurbolinksを指定していたので、表示が上手くいかないようになっていたのですね。

 

なのでこの問題を解決するために、投稿ページに飛ぶリンクや、ボタンにdata: { turbolinks: false }を追加することによって無駄なリクエストを事前に防げるらしいです。

 

これで、どのページから投稿ページに飛んでも検索可能なセレクトボックスを実装できるようになりました!

 

field_with_errors

またしても新規投稿画面での問題です。具体的には投稿に失敗したときに、レイアウトが崩れてしまうということです。

 

railsでは、formを簡単に作れるform_forを使った場合、エラーメッセージを含むフィールドで、<div class="field_with_errors"></div>このように表示されます。

 

このfield_with_errors自体、block要素なので横いっぱいに広がってしまうですね。要素を横にいくつか並べて書いていた場合、行が増えてしまいます。

 

なので、この崩れたレイアウトを直すためにassets/stylesheetsの下にcustom.scssファイルを新規作成し、

 

.field_with_errors {
  display: inline-block;
}

inline-blockにすることで解決しました!

 

【まとめ】テックアカデミーメンタリング8回目

今回は、JQueryに関する知識も必要となるような問題に対しての対処だったので理解するのに大変でしたね(笑)。

 

将来的には、バックエンドとフロントエンドもできるようなフルスタックエンジニアになりたいと思っているので、今のうちから躓いたところだけでも完璧に理解しておきたいものです。

 

 

次回はこちら

テックアカデミーメンタリング9回目:ダイレクトメッセージ機能
テックアカデミーWebアプリケーションコース第9回目のメンタリング内容について書いています。具体的には、Usersテーブルと中間テーブルとしてMessagesテーブルの2つを用いてダイレクトメッセージを実装するという内容です。

コメント