はじめに
Railsを勉強し始めて、そろそろオリジナルでWEBサービス(比較サイト)を作ろうと思い、色々と調べつつ構築していったら勉強になったのでメモしていきます。今回も、Rails,Vueを使って開発したかったので、それに合わせた環境になっています。
今回はその第二弾です。
環境
この記事では以下の環境(2018年7月9日時点)で動作確認できました。
- Ruby: 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
- Rails: 5.2.0
- mysql2: (>= 0.4.4, < 0.6.0)
- mysqlはdockerに作成してあります
- Docker version 18.03.1-ce
- yarn: 1.7.0
- webpacker: (~> 3.5)
- vue: ^2.5.16
参考にしたレポジトリ
プロジェクトを作る上で参考にした、サービスのレポジトリは以下です
前回のおさらい
前回は主に環境構築をやりました。
- プロジェクトの作成
- DB接続を確認
- HTMLテンプレートはslimに設定
- Rubocopの導入
- webpackerの導入
前回の記事は下記です。
今日の目次
- normalize.css の導入
- Rubocopの対応
- StyleLintの導入
- ESLintの導入
それでは、第二弾始めます。
normalize.css の導入
仮に、CDNで読み込みを確認したかったので、読み込んで見ました。
doctype html
html
head
title
| programming-school
= csrf_meta_tags
= csp_meta_tag
meta name="viewport" content="width=device-width, initial-scale=1"
= stylesheet_pack_tag 'application', media: 'all', "data-turbolinks-track": 'reload'
= stylesheet_pack_tag 'application', media: 'all', "data-turbolinks-track": 'reload'
| <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
= javascript_pack_tag 'application', "data-turbolinks-track": 'reload'
body
/ = render 'components/navigation'
/ = render 'components/main'
/ = render 'components/footer'
= yield
読み込みを確認できたので、決して、Yarn
で読み込んでみたいと思います。
$ yarn add normalize.css
現在のcssのディレクトリ構成は
frontend
└ stylesheetsapplication.scss
└ application.scss
です。ここに、normalize.css
を読み込みました。チルダ(~
)を入れることで、yarn add
されたパッケージのnode_modules/
直下にインストールされているものを読み込んでます。
@import 'foundations/bootstrap';
@import '~normalize.css';
Rubocopの対応
前回設定した、Rubocopを少し動かして見ます。
改めて、Rubocopとは
コーディング規約のマニュアルみたいなもので、マニュアル通り書かないと、注意してくれる開発ツールです。
では、実行して見ましょう。
$ bundle exec rubocop
✘ 1 master ✖ ✱ ◼
Inspecting 16 files
CCCCCCCCCCCCCCCC
Offenses:
config.ru:2:1: C: Layout/EmptyLineAfterMagicComment: Add an empty line after magic comments.
# This file is used by Rack-based servers to start the application.
^
Rakefile:1:1: C: Style/FrozenStringLiteralComment: Missing magic comment # frozen_string_literal: true.
# Add your own tasks in files placed in lib/tasks ending in .rake,
^
# 一部省略
16 files inspected, 20 offenses detected
上記のCCCCCCCCCCCCCCCC
とある、C
はConvention
と言う意味で規約違反という意味だそうです。
C
の他に、W
(Warning
)、E
(Error
)、F
(Fatal
)があるそうで、C
< W
< E
< F
の順で深刻度が上がっていきます。それでは、試しに、C
を対応していきましょう。
1つのC
のメッセージがこれです。
Rakefile:1:1: C: Style/FrozenStringLiteralComment: Missing magic comment # frozen_string_literal: true.
# Add your own tasks in files placed in lib/tasks ending in .rake,
これは、よく見かける規約違反らしく、指定されたファイル(今回は、Rakefile
)の文頭に magic comment
(# frozen_string_literal: true.
)を入れれば良いらしい。試しに入れてみます。
# frozen_string_literal: true
# Add your own tasks in files placed in lib/tasks ending in .rake,
# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
require_relative 'config/application'
Rails.application.load_tasks
チェック(bundle exec rubocop
)して見ましょう。Cのメッセージが消えてました。こんなかんじで、消していくそうです。
最後に、マジックコメント以外の対応もメモしておきます。
$ bundle exec rubocop
master ✖ ✱ ◼
Inspecting 16 files
.............C..
Offenses:
test/test_helper.rb:7:7: C: Style/ClassAndModuleChildren: Use nested module/class definitions instead of compact style.
class ActiveSupport::TestCase
^^^^^^^^^^^^^^^^^^^^^^^
16 files inspected, 1 offense detected
この注意に対して、この記事が参考になりました。
参考にしたところ、変更前
# frozen_string_literal: true
ENV['RAILS_ENV'] ||= 'test'
require_relative '../config/environment'
require 'rails/test_help'
class ActiveSupport::TestCase
# Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
fixtures :all
# Add more helper methods to be used by all tests here...
end
変更後のように変えて、C
は出なくなりました。
# frozen_string_literal: true
ENV['RAILS_ENV'] ||= 'test'
require_relative '../config/environment'
require 'rails/test_help'
class ActiveSupport
module TestCase
# Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
fixtures :all
# Add more helper methods to be used by all tests here...
end
end
この対応に関するコミット
https://github.com/programming-school/programming-school/commit/8b741e188f204f4df7a9e2bf95892610231c7478
StyleLintの導入
CSSのLintは、stylelintにしました。で、導入したので、その手順をまとめました。
StyleLint についてあまりよく知らなかったので、歴史や背景から紹介してあったこれが参考になりました。
参考
インストール方法
$ yarn add --dev stylelint stylelint-scss stylelint-config-standard
- stylelint-scss : SCSS独自の構文ルールを追加
- stylelint-config-standard : 最も一般的なCSSのコーディング規約集
設定ファイルの設置
プロジェクト直下に以下のファイルを置きます。
{
"plugins": [
"stylelint-scss"
],
"extends": "stylelint-config-standard"
}
Stylelint 実行
以下の様にpackge.json
にscripts
を記述します。
...
"scripts": {
"lint:stylesheet": "stylelint --fix app/frontend/stylesheets/**/*.scss"
},
...
実際にこのプロジェクトが、~/app/frontend/stylesheets
以下に、scssファイルが存在すれば、yarn run lint:stylesheet
で実行されます。
--fix
オプションは可能なものは自動修正するオプションです。
この対応に関するコミット
ESLintの導入
JSのLintは、ESLintにしました。で、導入したので、その手順をまとめました。
参考
- https://morizyun.github.io/javascript/node-js-npm-library-eslint.html
- https://qiita.com/ogontaro/items/3981b6a1b1f769ac78a9
インストール方法
$ yarn add --dev eslint eslint-config-airbnb eslint-plugin-import babel-eslint
- eslint-config-airbnb : AirbnbがOSSとして公開しているESLintのルールセット
- eslint-plugin-import : ES2015 &(ES6)のインポート/エクスポート構文のlintingをサポートし、ファイルパスとインポート名のスペルミスによる問題を防いでくれます
- babel-eslint : babelでES6をトランスパイルするときに助けてくれるやつ
設定ファイルの設置
プロジェクト直下に以下のファイルを置きます。
{
"env": {
"es6": true,
"browser": true,
"jquery": true // if use $
},
"plugins": [
"import"
],
"parser": "babel-eslint", // for async/await
"extends": "airbnb-base"
}
ESLintの実行
以下の様にpackge.json
にscripts
を記述します。
...
"scripts": {
"lint:javascript": "eslint --fix app/frontend/javascripts/**/*"
},
...
実際にこのプロジェクトが、~/app/frontend/javascripts
以下に、JSファイルが存在すれば、yarn run lint:javascript
で実行されます。
--fixオプション
は可能なものは自動修正するオプションです。
この対応に関するコミット
以上です!
この記事を読んだ方に
この記事を読んで、誤っている箇所をみつけたり、追記した方がいい内容などありましたら、編集リクエストやコメント欄で指摘していただけると助かります。