LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nayaaaa

#34. RuboCopとTailwind CSSについて

Posted at

はじめに

こんにちはnayaaaaです。
最近、自己学習でRailsを使用してECサイトを作成してみているのですが、知らなかったツールやフレームワークがあったので備忘録としてまとめました。
※本記事は以下を参考にして作成しています。

環境

  • OS：Mac
  • 開発言語：Ruby
  • フレームワーク：Ruby on Rails
  • データベース：PostgreSQL、Redis
  • UI：Tailwind CSS
  • 決済機能：Stripe
  • 環境構築：Docker
  • コードの品質管理：RuboCop
  • テキストエディタ：Visual Studio Code

Tailwind CSS

特徴

  • CSSのフレームワーク
  • 事前にクラスが定義されており複雑なデザインを短いコードで実現できる
  • 多数のクラスが用意されておりカスタマイズの自由度が高い

トップページの作成

<div class='pt-32 pb-12 md:pt-40 md:pb-20'>
  <div class='pb-12 text-center md:pb-16'>
    <h1 class='leading-tighter mb-4 text-7xl font-extrabold tracking-tighter md:text-8xl'>
      <span class='p-2 bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent'>
        NayaNaya
      </span>
    </h1>
    <div class='mx-auto max-w-3xl'>
      <p class='mb-8 text-xl'>You will find what you are looking for.</p>
      <div class='flex justify-center mt-5'>
        <div class='mt-3'>
          <%= link_to root_path, class:'group inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 font-medium text-gray-900 hover:text-white focus:ring-4 focus:ring-blue-300 group-hover:from-purple-600 group-hover:to-blue-500' do %>
            <span class='rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0'>
              Find Products
            </span>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

各パラメータ

  • pt(padding-top) : 要素の上側に余白
  • pb(padding-bottom) : 要素の下側に余白
  • md:pt : 768px以上で上の余白をさらに広くする
  • md:pb : 768px以上で上の余白をさらに広くする
  • text-center : テキストを中央揃え

  • leading-tighter : 行間を詰める
  • text-{size} : テキストのフォントサイズを指定
  • font-{weight} : テキストのフォント幅
  • tracking-tighter : 文字感覚を詰める
  • bg-gradient-to-r : 右方向にグラデーション
  • bg-clip-text : 背景が文字に取り込まれるイメージ　
  • rounded-md : 中程度の角丸
  • transition-all : 全てのアニメーションを対象
  • flex : Flexboxレイアウトを有効にする
  • justify-center : 横方向中央揃え
  • group : 小要素のgroup:hoverを有効にする
  • overflow-hidden : はみ出し部分を隠蔽
  • focus : クリックやキーボード操作時の動作
  • duration-{ms} : アニメーション速度
  • ease-in : 徐々に加速するアニメーションの動き
  • group-hover:bg-opacity-0 : ホバーで背景を透明にする

ブラウザ上の表示

image.png

RuboCop

特徴

  • Ruby用の静的コード解析ツール（Linter）
  • 自動でコーディングスタイルに合わせて修正をしてくれる
  • 設定ファイルを用いることで柔軟に設定が可能

まず、Gemファイルに以下を追記します。

gem "rubocop", require: false
gem 'rubocop-rails-omakase', require: false

次にインストール

$ bundle install

.rubocop.ymlを以下のように編集します。
※設定ファイルがない場合は自分で作成する

# Omakase Ruby styling for Rails.
inherit_gem:
  rubocop-rails-omakase: "rubocop.yml"

AllCops:

  NewCops: enable
  Exclude:
    - "vendor/**/*"
    - "db/**/*"
    - "bin/*"
    - "node_modules/**/*"
    - "config/initializers/devise.rb"
    - "config/environments/*.rb"
    - "Gemfile"
    - "Rakefile"

Style/FrozenStringLiteralComment:
  Enabled: false

Style/ClassAndModuleChildren:
  Enabled: false

Style/Documentation:
  Enabled: false

Metrics/BlockLength:
  Exclude:
    - "config/routes.rb"

  • inherit_gem:　gemで定義されているrubocop-rails-omakaseを.rubocop.ymlに読み込んで適用する
    rubocop-rails-omakase: "rubocop.yml"

  • Style/FrozenStringLiteralComment:　警告メッセージを表示させない
    Enabled: false　

  • Style/ClassAndModuleChildren:　モジュールにネストしたクラスへの記述を許可する
    Enabled: false　

  • Style/Documentation:　クラスやモジュールに対してのコメントを強制しない
    Enabled: false

  • Metrics/BlockLength:　指定したファイルのブロックが長すぎる場合のチェックをスキップする
    Exclude:
    - "config/routes.rb"

実際に使ってみた

試しに末尾に全角スペースを入れたファイル

module ApplicationCable
  class Channel < ActionCable::Channel::Base{全角スペース}
  end
end

すると以下のように検出してくれました。

$ rubocop
Inspecting 50 files
C.................................................

Offenses:

app/channels/application_cable/channel.rb:2:44: C: [Correctable] Layout/TrailingWhitespace: Trailing whitespace detected.
 class Channel < ActionCable::Channel::Base　
                                           ^^

50 files inspected, 1 offense detected, 1 offense autocorrectable

修正するため、以下のコマンドを実行します。

$ rubocop -A
Inspecting 50 files
C.................................................

Offenses:

app/channels/application_cable/channel.rb:2:44: C: [Corrected] Layout/TrailingWhitespace: Trailing whitespace detected.
 class Channel < ActionCable::Channel::Base　
                                           ^^

50 files inspected, 1 offense detected, 1 offense corrected

すると、自動で全角スペースを削除して構文エラーを解消してくれました。

$ rubocop
Inspecting 50 files
..................................................

50 files inspected, no offenses detected
$ rubocop
Inspecting 50 files
..................................................

まとめ

TailwindCSSはクラスが豊富で、細かいところまで自分好みに設定できるのが良いと思いました。自由度がめちゃくちゃ高いのでその分覚えることも多く、使い慣れるまでは時間がかかりそうだなという感じです。
RuboCopもTailwindCSSもまだ触り始めたばかりですし、特にTailwind CSSはもう少し勉強して理解を深めていきたいと思います。
引き続きECサイトの作成は進めていこうと思います〜

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?