Vue.js で簡単なフィードリーダーを作ってみる


## はじめに

Vue.js の知識ゼロから SPA 用のプロジェクトを作って Unit/E2E テスト環境まで用意するまでの手順をまとめてみました。

今回の実装したサンプル： [GitHub](https://github.com/tanakaoriginal/feed-reader)

## 手順

### 1. 環境構築
[VueCLIでHelloWorld の 1. 環境構築](https://qiita.com/MariMurotani/items/5fbea5942d2edf149989#1%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89) を参考にさせていただいてささっと構築させてきました。

```
npm install -g vue-cli
vue init webpack feed-reader
cd feed-reader
npm install
npm run dev
```

プロジェクトオプションは全てデフォルトを選択しました。

```
Project name feed-reader
? Project description A Vue.js project
? Author ****** ****** <******@*****.***>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
```

構築が終わったら npm コマンドでローカルサーバを起動できたら http://localhost:8080 にアクセスしてデフォルト画面が表示されることを確認します。

```
$ cd feed-reader
$ npm run dev

... 省略 ...
 DONE  Compiled successfully in 2775ms                                                                                    08:49:36

 I  Your application is running here: http://localhost:8080
```

<img width="722" alt="スクリーンショット 2018-07-04 8.53.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/13105/6a42f6e8-e222-e7ed-16f5-be9d38741337.png">

### 2. Unit/E2E テストの実行確認

この段階で Unit/E2E テスト環境も揃ったので実行して全てのケースがパスするか確認してみます。

```
$ npm test

> feed-reader@1.0.0 test /作業ディレクトリPATH/feed-reader
> npm run unit && npm run e2e


> feed-reader@1.0.0 unit /作業ディレクトリPATH/feed-reader
> jest --config test/unit/jest.conf.js --coverage

● Deprecation Warning:

  Option "mapCoverage" has been removed, as it's no longer necessary.

  Please update your configuration.

  Configuration Documentation:
  https://facebook.github.io/jest/docs/configuration.html

 PASS  test/unit/specs/HelloWorld.spec.js
  HelloWorld.vue
    ✓ should render correct contents (21ms)

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 HelloWorld.vue |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.787s
Ran all test suites.

> feed-reader@1.0.0 e2e /作業ディレクトリPATH/feed-reader
> node test/e2e/runner.js

Starting selenium server... started - PID:  24965

[Test] Test Suite
=====================

Running:  default e2e tests
 ✔ Element <#app> was visible after 37 milliseconds.
 ✔ Testing if element <.hello> is present.
 ✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".
 ✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (5.116s)
```

### 3. SASS の有効化

src ディレクトリでコマンドを実行すると `<style lang="scss">` が指定できるようになります。

```
npm install sass-loader node-sass --save-dev
```

### 3. フィードデータを取得

[Vue.jsから手軽に始めるJavaScriptフレームワーク - 2nd Step](https://qiita.com/icoxfog417/items/49f7301be502bc2ad897#2nd-step) を参考にさせていただいて Github の vuejs/vuejs.org リポジトリから Issue リストを取得して画面に描画します。

### 4. 画面を整形

CSS フレームワークの bluma を追加して画面を整形して完成です。

```
npm install bulma --save-dev
```

<img width="875" alt="スクリーンショット 2018-07-04 10.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/13105/4024f5c5-d380-d86d-1753-9bd59ac6ae13.png">


## 参考にさせていただいた記事

* [VueCLIでHelloWorld](https://qiita.com/MariMurotani/items/5fbea5942d2edf149989)
* [Vue.jsから手軽に始めるJavaScriptフレームワーク](https://qiita.com/icoxfog417/items/49f7301be502bc2ad897)
* [Vue Test Utils - はじめる](https://vue-test-utils.vuejs.org/ja/guides/getting-started.html)
* [単体テスト - Vue.js](https://jp.vuejs.org/v2/guide/unit-testing.html)
* [小さく始めるVue.jsユニットテスト環境](https://qiita.com/ryo511/items/7e85f4c352db89b7615c）)
* [Vue.js - リストレンダリング](https://jp.vuejs.org/v2/guide/list.html)
* [VueJSでAPI通信](https://qiita.com/MariMurotani/items/a8576974deeabf9daf6e)
* [vueにcssフレームワークbulmaを導入する](https://www.gakusmemo.com/?p=1094)
* [Bulma v0.5.0: a modern CSS framework based on Flexbox](https://versions.bulma.io/0.5.0/documentation/components/panel/)