Vue/NuxtでESLintを活用(Circle CIでESLint導入編)

# はじめに
この記事では、リモートレポジトリにpushするたびにLintテストを走らせるように設定を紹介します。


> 1. [ひとまず導入編](https://qiita.com/yfujii1127/items/16f48237c401219c460b)
2. [vueスタイルガイド導入編(vue/recommendの活用)] (https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)
3. [ファイルセーブで自動化編(エディタ自動校正機能)](https://qiita.com/yfujii1127/items/65b04f6e3d17c3eb85da)
4. [コミット度にlintを走らせる編(lint-stagedとhuskey)](https://qiita.com/yfujii1127/items/bf70cf62d2800aeeff7b)
5. Circle CIでESLint導入編<font color="red">←本記事</red>

PR前のテストの一環で、この設定をしておくことで、共有リポジトリに取り込む前にLintの確認を行うことができます。基本的には前の記事で紹介した、commit度のlint確認で大丈夫なのですが、その設定が各自のローカル環境で整っていない場合などがあり、その対策として最終の防衛線になります。

プロジェクトは前回から引き続き使用したものを使って行きます。gitのリポジトリ設定や操作方法等については、ここでは詳細に話さないのでご了承ください。

こちらは、VSCode、Githubを使って解説していきます。



# 確認
## Circle CIとは

> 継続的インテグレーション(デリバリー)サービスです。コミットからデプロイまでのパイプラインを作成し、継続的な統合/配信を使用してソフトウェア開発プロセスを自動化できます。

参考:[クラウドサービス／CircleCIとは](https://www.ossnews.jp/oss_info/CircleCI)

<img src="https://qiita-image-store.s3.amazonaws.com/0/252687/08b6bd51-01d6-a31f-d8ef-27a9712d155e.png" width=30%>

ここでは深掘りしませんので、詳しくは[公式サイト](https://circleci.com/product/)や[CircleCIで始めるCI/CD導入の基本のキ](https://codezine.jp/article/detail/11208)を参照ください。この記事の最後の方にも参考記事を載せました。




# 設定
## Circle CIの設定
では、まずCircle CIの設定から行いましょう。すでにご利用の方はここのステップは飛ばしてもらって構いません。

まずは、[Circle CI](https://circleci.com/)のトップ画面に行きます。

<img width="1222" alt="circleciのトップ.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/b8100142-7647-80ee-8506-46f1668f1248.png">

すでにアカウントをお持ちの方はloginから、まだの人はsign upから入ってください。Githubアカウントで登録できるのでそのままいきましょう。

入れたら、次に左端のメニューから`setting`へ行きます。次に出てくる画面の左側にProjectsがあるので、それを選択して、Circle CIと連携させたいレポジトリを選びます。


<img width="1426" alt="circleciの設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/d39ab783-1276-593e-c431-0280d91475b2.png">

すると、プロジェクトの概要画面が出てくるので、ここで`Follow Project`を押しましょう。

<img width="1435" alt="レポジトリのfollow.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/caffca95-5122-b1fd-90c1-65a48612ab9f.png">

これで、Circle CiとGithubのレポジトリがつながりました。
しかし、もちろんまだ、`.circleci/config.yml`の設定をしていないので、buildは成功しません。

<img width="1440" alt="Buildが走っている.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/750f9529-06ac-9359-d637-70c5979bd211.png">
<img width="1423" alt="ymlファイル設定前の失敗.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/e5979db8-592e-9e2c-e7f6-b2e1e751ccfd.png">


## `.circleci/config.yml`の設定

さて、ここからコードを書いて実装していきます。

まず、ルートディレクトリに`.config`フォルダを作ります。
その次に、その中に`config.yml`ファイルを作ります。

<img width="400" alt="configyamlファイルの作成.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/649cedc6-8ee3-b104-6566-3842b60f160e.png">


このファイルをCircle CIが読んでくれて、指定した動きをしてくれるようになります。

では、次に中身の記述についてですが、以下を記述してください。
(<font color="red">これは一例であり、他にも方法はいくつもあります</font>)

```yml

version: 2.1

executors:
  default:
    working_directory: ~/repo
    docker:
      - image: circleci/node
        environment:
          TZ: Asia/Tokyo

commands:
  restore_npm:
    steps:
      - restore_cache:
          name: Restore npm dependencies
          key: npm-v1-{{ checksum "package-lock.json" }}
  save_npm:
    steps:
      - save_cache:
          name: Cache npm dependencies
          key: npm-v1-{{ checksum "package-lock.json" }}
          paths:
            - ~/repo/node_modules

jobs:
  setup:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Install npm dependencies
          command: npm ci
      - save_npm
  lint:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Run lint
          command: npm run lint

workflows:
  linting:
    jobs:
      - setup
      - lint:
          requires:
            - setup
```

ではここで、何を書いたかの説明を行います。

### 1.`executors`

実行環境の情報を定義して再利用する機能になります。

```yml

executors:
  default:
    working_directory: ~/repo
    docker:
      - image: circleci/node
        environment:
          TZ: Asia/Tokyo
```

ひとまずここでは、デフォルト設定として、
`working_directory`では、下に出てくるstepsを実行する場所を
`image`ではnode.jsを、
`environment`では、Docker Imageのタイムゾーンをそれぞれ指定しています。



### 2.`commands`

ジョブの中で再利用したいものを定義しています。

```yml

commands:
  restore_npm:
    steps:
      - restore_cache:
          name: Restore npm dependencies
          key: npm-v1-{{ checksum "package-lock.json" }}
  save_npm:
    steps:
      - save_cache:
          name: Cache npm dependencies
          key: npm-v1-{{ checksum "package-lock.json" }}
          paths:
            - ~/repo/node_modules
```

ここでは、`restore_npm`と`save_npm`を定義しています。

これは何をするステップかというと、キャッシュを利用しています。毎回bundleやnpmをインストールすると時間がかかりますので、こちらを利用することで時間の短縮ができます。


参考：[circleciを使って特定のbranchにデプロイ処理をさせる](https://qiita.com/tkmoxu/items/81ac1cbcdbdaa89df486)

### 3.`jobs`

こちらはステップの集合体です。後々に出てくる、`workflows`で指定するコマンドの中身をまとめます。

```yml
jobs:
  setup:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Install npm dependencies
          command: npm ci
      - save_npm
  lint:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run:
          name: Run lint
          command: npm run lint

```

ここには大きく分けて２つ設定してあります。
1. `setup` => npmパッケージのインストールとキャッシュを行います。
2. `lint` => lintを走らせる際の手順を書いています。

まず、上の方で書いた、`executer`を呼び出して、実行環境の指定を行っています。
次に`steps`で、先ほど準備した`commands`を使いながらジョブを走らせます。
それぞれ`checkout`が書かれていますが、そこで、最初に設定したpath（ここでいう`working_directory`）にて走る形になっています。



### 4.`workflows`

最後に、workflowsに先ほどの`jobs`の実行順序を指定していきます。

```yml

workflows:
  linting:
    jobs:
      - setup
      - lint:
          requires:
            - setup
```

ここでは、`linting`という名の下、先ほど準備した`setup`と`lint`を記述しました。こうして２つが実行される形になります。しかし、`lint`に`requires`をつけることで、`setup`が成功したら初めて`lint`が実行されるようにしています。


### 全体確認
ちょっと長いですが、こんな感じですね。

<img width="485" alt="configymlの設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/766ae047-c417-bd8a-5b52-2af2816f33cd.png">





## リモートへ変更をpush
設定は終わりましたので、一度今回の変更をリモートにpushしておきましょう。

すると、Circle CIが動き出して、ビルドが成功していることが確認できます。

<img width="1439" alt="設定後のcircleci確認.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/e2dff946-2bf7-a96e-062b-120ef9654e84.png">


これで設定が完了していることが確認できました。


# 検証
では、本当にきちんと動いているのか確認しましょう。

まず、ブランチを切って作業してみます。
ここでは、まだdevelopを切っていないので、developにしておきます。
(ブランチ名は何でもいいです)

<img width="822" alt="スクリーンショット 2019-03-17 17.55.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/7ac7d00c-a051-4d76-233b-67cc31085a4e.png">


次に、サンプルでコードを書いて、コミットそしてpushしてみます。

<img width="500" alt="サンプルコードの追記.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/2bca0fa5-2749-1237-2ff4-644307d04280.png">
<img width="500" alt="サンプル追記後のコミット名.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/87f17ea3-ecf8-c8e2-5ef5-7af8f2a362bf.png">
<img width="603" alt="リモートにpush.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/b8dd8155-8961-d76a-5093-5c01a96aeeae.png">


では、リモートに新しいdevelopブランチができたので、そこからmasterブランチにプルリクをしてみます。

<img width="1057" alt="PRの中身.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/4f6635f2-e2c3-7ac4-9bed-881c0ddfadcb.png">


すると、全てのチェックが無事に通っていることが確認できます！もし、lintで引っかかるものがある場合などは、ここが赤くなって失敗しているメッセージが出ますので、その時は`Details`から確認しましょう。

これで、Circle CIのESLint設定は完了です！DONE!!!


# 最後に

これで、レポジトリにpushするたびにlintが走るようになりました。
チーム開発の場合は、このCircle CIが通らない場合は`merge pull request`を押せないように設定しておいたりもできます。Circle Ciでは、他にも特定のブランチのみにテストを走らせたり、色々これを機に触れてみるのも面白いですね。

もしわからない部分や、そこ間違ってるんじゃない？という指摘あれば嬉しいです！

## 参考記事
* [いまさらだけどCircleCIに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/4c7e62434af455e977c2)
* [Circle CI入門 ver2.0ドキュメント](https://qiita.com/hika7719/items/20d01c4bc56bf09dec5c)
* [CircleCI2入門③ CirlceCI上でLintを実施する](https://yuu.1000quu.com/circleci2_introduction_3)
* [CircleCI 2.1 の新機能を使って冗長な config.yml をすっきりさせよう！](https://tech.recruit-mp.co.jp/dev-tools/post-14868/)
* [Circle CI 2.0の基礎的な設定まとめてみた(GAE/Goのサンプル付き)](https://qiita.com/Sekky0905/items/7f9aa94261e17e4fd040#checkout)

### yarnの場合
* [CircleCI 2.0 で Node.js のテストを試す](https://qiita.com/pinemz/items/9ddea9ca89a1b51fcba8)