【体験談】テックアカデミーメンタリング8回目：Turbolinks、field_with

この記事では、テックアカデミー（Webアプリケーションコース）のメンタリング第8回目の内容について書いています。

内容としては、Turbolinks と field_with_errors についてです。

第7回目の記事

検索可能なセレクトボックスが上手く表示されなかったり、投稿に失敗した際にレイアウトが崩れてしまったりと問題があったので、それらに関する質問がメインです。

タップできる目次

テックアカデミーのメンタリング第8回目の内容

内容としては、オリジナルサービス制作中に出てきた、検索可能なセレクトボックスが上手く表示されなかったり、投稿失敗時にレイアウトが崩れてしまったりする問題に関する質問をしました。

検索可能なセレクトボックスを実装する際に jQuery で Turbolinks を指定していたのですが、上手く表示されませんでした。

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

上記を追加することにより、どのページから投稿ページに飛んでも、検索可能なセレクトボックスを使うことができるようになりました！

続いて新規投稿画面において、投稿失敗時にレイアウトが崩れてしまう問題がありました。

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

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

そのため、レイアウト崩れが起きていたんですね。

なので、この崩れたレイアウトを直すために assets/stylesheets の下に custom.scss ファイルを新規作成し、inline-block にすることで解決しました！

ここまで、テックアカデミー（Webアプリケーションコース）のメンタリング8回目の内容について書いてきました。

今回は、jQuery に関する知識も必要となるものだったので、理解に苦しみました。

次回は、第9回目です！

テックアカデミーのWebアプリケーションコースを終えての記事も書いているので、よかったら見てみてください！