Zenn
🌊

Rails6.1の初期セットアップ

2022/01/20に公開
Rails
Ruby
gem
tech

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。

Rails6.1でrails newした後に、最初にやるべきことをリストアップしました。
随時更新していきます。

.gitignoreの設定

Jetbrains社のエディターを使っている場合は、.gitignoreに以下の記述を追記します。

.gitignore
.idea/*

しかし、上記の方法ではすでにコミットされているファイルをignoreの対象にすることはできません。そのため、すでにコミットしてしまった場合には、以下のコマンドを実行して無視するようにします。

bash
git rm -r --cached .idea/*

不要なファイルを作成しないようにする

rails gなどのコマンドの際に、~~~_helper.rbや~~~_spce.rbなどの、自身では利用しないようなファイルが作成されるため、これらを作成されないように設定します。

config/application.rbの特定の箇所に以下の記述を追記します。
これによって、rails generateなどのgenerateコマンドの際に、不要なファイルが作成されなくなります。

application.rb
  class Application < Rails::Application
    ...（省略）
    config.generators do |g|
      g.stylesheets false
      g.javascripts false
      g.helper false
      g.test_framework false
    end
  end

参考サイト
https://qiita.com/yuutetu/items/135b1c8ab512208aebfe

様々なgemの導入

画面系

デバッグ系

テスト系

ユーザー管理系

コード品質管理系

Rubocop導入方法

Gemfile
group :development do
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
  gem 'rubocop-rspec', require: false
end
bash
bundle install

次にrubocopで必要な設定ファイルを作成するために、以下のコマンドを実行します。

bash
bundle exec rubocop --auto-gen-config

これにより、プロジェクト配下に.rubocop.ymlと.rubocop_todo.ymlが作成されます。
以下の.rubocop.ymlは、私がいつもプロジェクトで導入する設定ファイルになります。

.rubocop.yml
inherit_from: .rubocop_todo.yml

require:
  - rubocop-rails
  - rubocop-rspec
  - rubocop-performance

AllCops:
  TargetRubyVersion: 3.1.0
  TargetRailsVersion: 6.1.4.4
  Exclude:
    - node_modules/**/*
    - vendor/**/*
    - bin/*
    - db/migrate/*
    - db/schema.rb

Metrics/AbcSize:
  Max: 65

Metrics/ClassLength:
  Max: 160

Metrics/CyclomaticComplexity:
  Max: 10

Layout/LineLength:
  Max: 200

Metrics/MethodLength:
  Max: 50

Metrics/PerceivedComplexity:
  Max: 11

Style/ClassAndModuleChildren:
  Enabled: false

Style/Documentation:
  Enabled: false

Style/GuardClause:
  Enabled: false

# Use only ascii symbols in comments.
Style/AsciiComments:
  Enabled: false

Layout/EmptyLinesAroundAttributeAccessor:
  Enabled: true

Layout/SpaceAroundMethodCallOperator:
  Enabled: true

Lint/RaiseException:
  Enabled: true

Lint/StructNewOverride:
  Enabled: true

Style/ExponentialNotation:
  Enabled: true

Style/HashEachMethods:
  Enabled: false

Style/HashTransformKeys:
  Enabled: true

Style/HashTransformValues:
  Enabled: true

Style/SlicingWithRange:
  Enabled: true

Style/EmptyMethod:
  EnforcedStyle: expanded

Rails/UnknownEnv:
  Environments:
    - production
    - staging
    - development
    - test

Style/SymbolArray:
  Enabled: false

Rails/LexicallyScopedActionFilter:
  Enabled: false

Style/RescueStandardError:
  EnforcedStyle: implicit

RSpec/ExampleLength:
  Enabled: false

RSpec/NestedGroups:
  Enabled: false

すでにあるファイルの警告を無視するコマンドを実行。これにより.rubocop_todo.ymlがプロジェクトのルート配下に作成される。

bash
rubocop --auto-gen-config

日本語化対応

画面の文字などを日本語で表示されるように設定します。
以下の記事がわかりやすかったです。
https://qiita.com/shimadama/items/7e5c3d75c9a9f51abdd5

不要なルーティングの削除

※これはrails routesを実行した際に、不要なルーティングがある場合に行います。
config/application.rbにrequire "rails/all"があるので、それを以下の記述に変更して不要な機能をコメントアウトします。

application.rb
# 変更前
require "rails/all"

# 変更後
# 以下の中で不要な機能をコメントアウトする
require "active_record/railtie"
require "active_storage/engine"
require "action_controller/railtie"
require "action_view/railtie"
require "action_mailer/railtie"
require "active_job/railtie"
require "action_cable/engine"
require "action_mailbox/engine"
require "action_text/engine"
require "rails/test_unit/railtie"
require "sprockets/railtie"

css周りの初期設定

Webpackerを使っている前提で話を進めます。

reset.cssの導入

CSSのリセットのためのcssファイルを導入します。
おすすめはdestyle.cssです。こちらからダウンロードして使います。

app/javascript/css/の中に、reset.cssというファル名で、上記でダウンロードしたCSSをreset.cssというファイル名でダウンロードします。

app/javascript/css/application.scssの一番上に、以下の記述を追加して一番最初に読み込まれるようにします。

app/javascript/css/application.scss
@import 'reset';

上記でCSSのリセットが完了します。

諸々のCSSファイルの作成

app/javascript/cssの中に、以下のファイルを作成します。

ファイル名 ファイルに記載する内容
_variable.scss システムの各所で使われる色などの変数を格納しておくところ。色の設定などは1箇所にまとめておくと、後で探しやすく再利用しやすい。
_mixin.scss よく利用するCSSのスタイルを定義しておくところ。mixinを1箇所にまとめておくと、後で探しやすく再利用しやすい。
_main.scss h1タグやpタグなどでシステム全体で適用したいCSSを記述するところ。h1タグはシステム全体でデフォルトで24pxなどにする場合などは、ここに記載する。

これらのファイルを作成したら、app/javascript/css/application.scssで読み込んで、アプリケーションで読み込まれるようにします。

CSSフレームワークの導入

Webpakcerからimagesを読み込む設定

app/javascriptにimagesディレクトリを作成します。

次に、application.jsで以下のコードを記述し、Webpackerでimagesの読み込みをすることができます。

application.js
const images = require.context('../images', true)

画像を表示したいviewの中で、以下のコードのようにして画像を表示することができます。

application.html.erb
<%= image_pack_tag 'logo.png' %>

タイムゾーン周りの設定

以下の記事に記載しました。参考にしていただけると幸いです。
https://zenn.dev/ryouzi/articles/dda18594f2dbd3

404, 500エラーなどのエラーメッセージの作成

https://morizyun.github.io/blog/custom-error-404-500-page/index.html
https://qiita.com/ryuuuuuuuuuu/items/1a1e53d062bff774d88a

Discussion