Rails と Vue.js でWebサービスの環境を作ってみた（その2）

# はじめに

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

# 参考にしたレポジトリ

プロジェクトを作る上で参考にした、サービスのレポジトリは以下です

- https://github.com/annict/annict
- https://github.com/ogontaro/musom

# 前回のおさらい

前回は主に環境構築をやりました。

- プロジェクトの作成
- DB接続を確認
- HTMLテンプレートはslimに設定
- Rubocopの導入
- webpackerの導入

前回の記事は下記です。

https://qiita.com/ryosuketter/items/445b1ffef8eac5b63415

# 今日の目次

- normalize.css の導入
- Rubocopの対応
- StyleLintの導入
- ESLintの導入

それでは、第二弾始めます。

# normalize.css の導入

仮に、CDNで読み込みを確認したかったので、読み込んで見ました。

```slim:/Users/ryosuke/Project/programming-school/app/views/layouts/application.html.slim
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`で読み込んでみたいと思います。

```bash
$ yarn add normalize.css
```

現在のcssのディレクトリ構成は

```
frontend
 └ stylesheetsapplication.scss
　　　　　 └ application.scss
```

です。ここに、`normalize.css`を読み込みました。チルダ（`~`）を入れることで、`yarn add`されたパッケージの`node_modules/`直下にインストールされているものを読み込んでます。

```scss:/app/frontend/stylesheets/application.scss
@import 'foundations/bootstrap';

@import '~normalize.css';
```

# Rubocopの対応

前回設定した、Rubocopを少し動かして見ます。

## 改めて、Rubocopとは

コーディング規約のマニュアルみたいなもので、マニュアル通り書かないと、注意してくれる開発ツールです。

では、実行して見ましょう。

```bash
$ 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`のメッセージがこれです。

```bash

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.`）を入れれば良いらしい。試しに入れてみます。

```rb:Rakefile
# 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のメッセージが消えてました。こんなかんじで、消していくそうです。

最後に、マジックコメント以外の対応もメモしておきます。

```bash

$ 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
```

この注意に対して、[この記事](https://journal.sooey.com/242)が参考になりました。

参考にしたところ、変更前

```/test/test_helper.rb
# 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`は出なくなりました。

```/test/test_helper.rb
# 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 についてあまりよく知らなかったので、歴史や背景から紹介してあったこれが参考になりました。

https://www.webprofessional.jp/taking-css-linting-next-level-stylelint/

## 参考

- https://qiita.com/ogontaro/items/61c01c5fd990c4ff58a3

## インストール方法

```bash
$ yarn add --dev stylelint stylelint-scss stylelint-config-standard
```

- stylelint-scss : SCSS独自の構文ルールを追加
- stylelint-config-standard : 最も一般的なCSSのコーディング規約集


## 設定ファイルの設置

プロジェクト直下に以下のファイルを置きます。

```.stylelintrc.json

{
  "plugins": [
    "stylelint-scss"
  ],
   "extends": "stylelint-config-standard"
}
```

## Stylelint 実行

以下の様に`packge.json`に`scripts`を記述します。

```json:package.json
...
  "scripts": {
    "lint:stylesheet": "stylelint --fix app/frontend/stylesheets/**/*.scss"
  },
...
```

実際にこのプロジェクトが、`~/app/frontend/stylesheets`以下に、scssファイルが存在すれば、`yarn run lint:stylesheet`で実行されます。

`--fix`オプションは可能なものは自動修正するオプションです。

この対応に関するコミット

https://github.com/programming-school/programming-school/commit/f3dd34275c63025aed8378470b6c7aa984bac7fe

# ESLintの導入

JSのLintは、ESLintにしました。で、導入したので、その手順をまとめました。

## 参考

- https://morizyun.github.io/javascript/node-js-npm-library-eslint.html
- https://qiita.com/ogontaro/items/3981b6a1b1f769ac78a9

## インストール方法

```bash
$ 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をトランスパイルするときに助けてくれるやつ

## 設定ファイルの設置

プロジェクト直下に以下のファイルを置きます。

```json:.eslintrc.json
{
  "env": {
    "es6": true,
    "browser": true,
    "jquery": true // if use $
  },
   "plugins": [
    "import"
  ],
  "parser": "babel-eslint", // for async/await
  "extends": "airbnb-base"
}
```

## ESLintの実行

以下の様に`packge.json`に`scripts`を記述します。

```json:package.json
...
  "scripts": {
    "lint:javascript": "eslint --fix app/frontend/javascripts/**/*"
  },
...
```

実際にこのプロジェクトが、`~/app/frontend/javascripts`以下に、JSファイルが存在すれば、`yarn run lint:javascript`で実行されます。

`--fixオプション`は可能なものは自動修正するオプションです。

この対応に関するコミット

https://github.com/programming-school/programming-school/commit/f1106e34ece1bfec1a0f2eee676c59dcd11c10bc

---

以上です！

# この記事を読んだ方に

この記事を読んで、誤っている箇所をみつけたり、追記した方がいい内容などありましたら、編集リクエストやコメント欄で指摘していただけると助かります。

# 参考
- https://qiita.com/t-vinn/items/fe57b5d6440712016742
- https://journal.sooey.com/242
- https://www.webprofessional.jp/taking-css-linting-next-level-stylelint/
- https://qiita.com/pprhr/items/b61f84944e1e869161cc
- https://qiita.com/morishitter/items/fefa1de3137036c7d9c6