Help us understand the problem. What is going on with this article?

Rails6にmaterializeを導入する

はじめに

遅ればせながらRails6触り始めました。
Rails6から標準のjsコンパイラがwebpackerに変更になったので、これまで通りにmaterializeを導入してもjs関連のいろいろが機能しません。今回は少し無理やりな方法ですが、「旧バージョンでmaterialieを導入済みで、rails6にアップグレードしてみたorしてみたい」人向けにとりあえず動かす方法の一案です。

なお、これから新規にアプリケーションを作成する場合はこちらの記事が参考になると思います。
How to install materialize-css on Rails 6.0.0.beta2 using Webpack

1. 準備

検証用に新規アプリケーションを立ち上げ、適当にscaffoldします。
からのGemfileにmaterializeを追加してbundle install

Gemfile
# materialize
gem 'materialize-sass'

app/assets/stylesheets/application.scssにてmaterializeをインポート

application.scss
@import 'materialize';

適当なviewファイルにinputを設置してみます。

index.html.erb
<%# 省略 %>
<div class="input-field">
  <input type="text" id="name" name='name'>
  <label for="name">name</label>
</div>

2. 確認

Image from Gyazo

上にピュッと移動するラベルが機能しませんね。アプリケーションをrails6にアップデートしたての方は同じような状況ではないでしょうか?

3. yarnでmaterialize-cssをインストール

該当アプリケーションのディレクトリに移動して
$ yarn add materialize-css
ちょっとRails6っぽいです。

app/javascript/packs/application.jsに以下を追記

application.js
import 'materialize-css/dist/js/materialize'

4. yarnでjqueryをインストール

Introducing jQuery in Rails 6 Using Webpackerこちらを参考にインストール願います。非常によくまとまってるのでペタペタしてるだけで1分程度で完了します。

5. 再度確認

Image from Gyazo

ぴょこぴょこ動いてますね。ここでは検証しませんが、その他のjsがらみのmaterialize(dropdownとかcollapsible)も私の環境では動いていることを確認しています。

6. 備考

今回は応急処置的な方法ということでgemとyarnで2種類のmaterializeをインストールしているため、ややお行儀の悪い感じがします。冒頭に貼った参考ではcssの読み込みもwebpackにやらせる方法が示されているので、気が向いたらお引越ししていこうかなと思います。

ちなみに、旧バージョンからのアップデートの場合はconfig/webpacker.ymlでwebpackのファイル探索範囲に旧assets下のjavascriptを追加するというのもありです。

webpacker.yml
  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

以上、お困りの方の参考になれば幸いです。

7. 参考

How to install materialize-css on Rails 6.0.0.beta2 using Webpack
Introducing jQuery in Rails 6 Using Webpacker

shimoch
現在エンジニア転職を目指して、某プログラミングスクールで学習中です。 調べ物のアウトプットをしていこうと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした