【Rails on Docker】CSSフレームワークをBootstrapからMaterializeに移行した

# Introduction
CSSフレームワークといえば[Bootstrap](https://getbootstrap.com/)ということで利用していたのですが、[Materialize](https://materializecss.com/)というのがBootstrapライクにマテリアルUIが実装できるとあって気になっていまして、[S-BRST](https://www.toriaezu-brasto.tk/)でリリース後に切り替えてみました。

Bootstrapをアンインストールして、Materializeをインストールするだけなのですが手こずったので手順をまとめておきます。

Materialize使いやすい！きれい！

# 前提
- Rails 5.2.3
- Bootstrap -> [GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc](https://github.com/twbs/bootstrap-rubygem)を利用

```rb:Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
```

```scss:app/assets/stylesheets/application.scss
@import "bootstrap";
```

```js:app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap
```


# 1. Bootstrapをアンインストール
[GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc](https://github.com/twbs/bootstrap-rubygem)にそって設定した項目のうちMaterializeに不要な設定をきれいにします。jQueryは使いたいから残す。

```rb:Gemfile
gem 'jquery-rails'
```

```scss:app/assets/stylesheets/application.scss
```

```js:app/assets/javascripts/application.js
  //= require jquery3
```

# 2. Materializeをインストール
Materializeのインストールは[GitHub - mkhairi/materialize-sass: Materializecss rubygem for Rails Asset Pipeline / Sprockets](https://github.com/mkhairi/materialize-sass)を利用させていただきました。

```rb:Gemfile
gem 'materialize-sass', '~> 1.0.0'
gem 'jquery-rails'
```

```scss:app/assets/stylesheets/application.scss
@import "materialize";
```

```js:app/assets/javascripts/application.js
//= require jquery3
//= require materialize
```

あとは`Gemfile.lock`にBootstrapの情報が残ったままになってしまっているので一度からファイルにしてgemのインストールをし直します。

```sh
$ rm Gemfile.lock
$ touch Gemfile.lock
$ docker-compose build
```

以上でBootstrapからMaterializeへの移行完了です！

# 3. 【応用】Bootstrapのpadding/margin使いやすいですよね。
padding, marginの設定の簡単さはBootstrapの魅力でした。
Bootstrapでなくてもあの機能を使うために、mixinを自作します。（Bootstrapのソースを参考に）

```scss:app/assets/stylesheets/_spaces.scss
@each $prop, $prop_sub in (margin: m, padding: p) {
  @for $size from 0 through 5 {
    $rem: $size * 0.5;
    @each $direct, $direct_sub in (top: t, bottom: b, left: l, right: r) {
      .#{$prop_sub}#{$direct_sub}-#{$size} {
        #{$prop}-#{$direct}: #{$rem}rem!important;
      }
    }
    .#{$prop_sub}x-#{$size} {
      #{$prop}-right: #{$rem}rem!important;
      #{$prop}-left: #{$rem}rem!important;
    }
    .#{$prop_sub}y-#{$size} {
      #{$prop}-top: #{$rem}rem!important;
      #{$prop}-bottom: #{$rem}rem!important;
    }
    .#{$prop_sub}-#{$size} {
      #{$prop}: #{$rem}rem!important;
    }
  }

  @each $direct, $direct_sub in (top: t, bottom: b, left: l, right: r) {
    .#{$prop_sub}#{$direct_sub}-auto {
      #{$prop}-#{$direct}: auto!important;
    }
    .#{$prop_sub}x-auto {
      #{$prop}-left: auto!important;
      #{$prop}-right: auto!important;
    }
    .#{$prop_sub}y-auto {
      #{$prop}-top: auto;
      #{$prop}-bottom: auto;
    }
    .#{$prop_sub}-auto {
      #{$prop}-top: auto!important;
      #{$prop}-bottom: auto!important;
      #{$prop}-left: auto!important;
      #{$prop}-right: auto!important;
    }
  }
}
```

```scss:app/assets/stylesheets/application.scss
@import 'spaces';
```
これでMaterializeでもあの便利なpadding/margin設定が利用可能に！


# Trouble Shooting
## 1. Bootstrapをuninstallするとアクセスできなくなる
コンテナは起動しているのに、アクセスできない...
docker-compose.ymlのrailsアプリ用のコンテナの起動コマンドを

```yml:docker-compose.yml
command: rails s
```
から

```yml:docker-compose.yml
command: bundle exec rails s -p 3000 -b '0.0.0.0'
```
に変更したところ解決！詳しくは...わからない...