More than 1 year has passed since last update.

コンポーネントとレイアウトの違いとは？Turbo Rails Tutorial をやってみた（2章）

Last updated at 2023-02-11Posted at 2023-02-03

本記事は、🔽「Turbo Rails Tutorial」の学習を進めていく際の個人メモです！

🔽 前章の記事はこちら

2章 Organizing CSS files in Ruby on Rails

この章ではCSSについてのみ、触れていきます。このチュートリアルではCSSフレームワークは使用しませんが、「BEM」の規則に沿って厳格にCSSを1から作成していきます。

app/assets/stylesheets/フォルダー下に4つのフォルダーを作成します。

`mixins`フォルダー

mixinsフォルダー下に_media.scssファイルを作成し、このアプリケーション内で使える共通のメディアクエリを作成します。

app/assets/stylesheets/mixins/_media.scss

@mixin media($query) {
  @if $query == tabletAndUp {
    @media (min-width: 50rem) { @content; }
  }
}

mediaの引数がtabletAndUpの時はmin-width: 50remが適用されます。以下のように使えます。

.my-component {
  @include media(tabletAndUp) {
    // タブレットサイズより大きい時のCSSを記述する
  }
}

ブレークポイントはこうして1か所にまとめておくと、何箇所も同じ変更をする手間がなくなる、という訳ですね！

`config`フォルダー

このフォルダーは、汎用的に使える「変数」や「グローバルな設定」を置く場所です。ここで様々な変数を設定しておくことで、CSSの値を変数でシンプルに書くことができます。

フォントサイズだったらこんな感じに変数を設定しておくことで、

app/assets/stylesheets/config/_variables.scss

:root {
  --font-size-xs: 0.75rem;   // 12px
  --font-size-s: 0.875rem;   // 14px
  --font-size-m: 1rem;       // 16px
  --font-size-l: 1.125rem;   // 18px
  --font-size-xl: 1.25rem;   // 20px
  --font-size-xxl: 1.5rem;   // 24px
  --font-size-xxxl: 2rem;    // 32px
  --font-size-xxxxl: 2.5rem; // 40px
}

以下のように使えます。

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-l);
}

この他にも、空白スペースや、色、ブラウザごとのデフォルトCSSを打ち消すリセット用CSSなどもここで設定します。

`components`フォルダー

componentsフォルダーには、よく使うCSS（例えば「ボタン」など）を部品化して、分けて置いておきます。CSSの値には先ほどconfigフォルダーで設定した変数を使えます。

app/assets/stylesheets/components/_btn.scss


.btn {
  display: inline-block;
  padding: var(--space-xxs) var(--space-m);
  border-radius: var(--border-radius);
  background-origin: border-box; // Invisible borders with linear gradients
  background-color: transparent;
  border: solid 2px transparent;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms;

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    transition: filter 250ms, color 200ms;
  }

これで、クラス名を与えるだけで統一されたボタンのデザインになりますね！チュートリアル内では.btn--primary、.btn--secondary、.btn--light、.btn--darkの4種類のボタンデザインを追加しました。

ボタン同様に、「フォーム」や「エラーメッセージ」などもこのcomponents以下に部品化して設置しました。

🔽 エラーメッセージ用の設定

app/assets/stylesheets/components/_error_message.scss

.error-message {
  width: 100%;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  padding: var(--space-xs);
  border-radius: var(--border-radius);
}

`layouts`フォルダー

layoutsフォルダーには、すべてのページで使用される.containerや、.headerなどの設定を置きます。

`application.sass.scss`ファイル

これまで設置してきたフォルダー下にあるすべてのファイルをapplication.sass.scssにimportさせます。（これにより、1つのコンパイル済みCSSファイルになるのです！）

app/assets/stylesheets/application.sass.scss

// Mixins
@import "mixins/media";

// Configuration
@import "config/variables";
@import "config/reset";

// Components
@import "components/btn";
@import "components/error_message";
@import "components/form";
@import "components/visually_hidden";
@import "components/quote";

// Layouts
@import "layouts/container";
@import "layouts/header";

これで、2章が終わりです。がっつりCSSを書きました！
デザインって偉大ですね。