1人でアジャイル開発やってみる（Sprint0編）

前回はユーザーストーリーマッピングの作成からバックログの洗い出しまでを行いました。
今回はSprint0、実開発の準備を行っていきます。

## Sprint0とは
実際に開発を進めていく前に必要な準備をすることです。具体的には以下のようなことを行います。

<dl>
<dt>開発環境の準備</dt>
<dd>プロジェクトで使用する標準の開発環境を決めたり、必要なツール（静的解析ツール、自動テストツール、CI/CDツールなど）を準備します。</dd>
<dt>ルールの作成</dt>
<dd>バックログの完了条件である「完了(Done)の定義」、不具合・レビューなどの各種管理ルール、勤怠のルール、1スプリントの期間などを決めます。</dd>
<dt>チームビルディング</dt>
<dd>メンバー同士の理解（お互いのスキル/志向/趣味など）、POやメンバーに対する教育（特にアジャイルに詳しくない人がいる場合）、ロールの決定、ステークホルダーとの関係形成などを行います。</dd>
</dl>

#### それってもうやっているものもあるけど？
　おっしゃる通り計画段階でやっているものもありますし、逆に完全に未検討なものは少ないかもしれません。しかし今回もそうであるようにアジャイル開発におけるプロジェクト計画はインセプションデッキによる軽量なもので、従来のウォーターフォール開発のように重厚なプロジェクト計画書は作りません。しかも開発初期からいきなり設計・実装・テスト、すべての工程を実施する必要があるので、スタートを切るためにどうしても準備期間が必要なのです。

　しかしあくまでも進めながらプロセス改善を図っていくことを前提として開発が進められる状態にすることをゴールとすべきです。Sprint0（準備期間）に多くの時間を割くよりも、動くものを作りながらプロダクトとプロセスを改善していく方がアジャイル的だといえるでしょう。

## やること
<dl>
<dt>完了の定義作成</dt>
<dd>1人なので最低限でOK</dd>
<dt>技術調査・開発環境準備</dt>
<dd>Vue.js/Nuxt.jsを軽く触りながら環境構築する</dd>
<dd>静的解析ツールを探して使ってみる</dd>
<dd>Firebaseを使ってみる</dd>
</dl>

## 完了の定義
完了の定義は以下の通りとしました。しましたが、正直こだわりがあるのは上の2点くらいです。途中で変えるかもしれません。

+ 本番環境で利用可能な状態になっていること
+ ソースコードのセルフレビューが完了していること
+ 分岐網羅(C1)のテストが完了していること
+ レスポンスタイムが1秒以内であること
+ 静的解析を行っており必須修正事項がないこと

## 開発環境構築
Visual Studio CodeとNode.jsのインストールは完了している状態で進めます。

#### インストール/プロジェクト作成
```powershell:
npm install -g @vue/cli
mkdir my_first_nuxt
cd .\my_first_nuxt\
create-nuxt-app
```

オプションは以下の通りにしました。とりあえず現状使うことを決めているのはVuetify.jsだけです。静的解析もESLintでよいかな。あんまり選り好みするよりもとりあえず使っていこうと思います。

```powershell:
? Project name: my_first_nuxt
? Programming language: JavaScript 
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
```

サーバを起動します。

```powershell:
npm run dev
```

http://localhost:3000/ にアクセスすると以下のようなページが表示されました。OKみたいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/49ef78aa-5e41-a5aa-252e-60e3aa1b3a6e.png)

#### 中身を見てみる
index.vueを開くとこんな感じ。<template>の中身がindexを形成しているものということでしょう。v-xxxタグがVue.jsが提供しているコンポーネントでNuxtLogoやVutifyLogoはcomponentsフォルダに格納されているもののようです。
でもscriptはほぼからっぽ。ナビゲーションバーを表示・制御しているのは別の場所のようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/34c98e11-6090-e55e-5478-877b38b055aa.png)

layouts/default.vueがナビゲーションバーを表示していますね。全画面共通で表示されるレイアウトみたいです。
ざっと見た感じで、v-forでループを回して、scriptで定義しているitemsの中を取ってきてリンク付きで表示しているみたいですね。clippedは上部のナビゲーションバーを上に幅いっぱいに表示するか、左部のナビゲーションを縦いっぱいに表示するかを制御しているようです。画面には表示されていないですが、下にclippedのtrue、falseを切り替えるボタンが定義されていてそのボタンを押すと画面の表示が変わります。特に再描画を発火するわけでもなく、変数(clipped)の値を変えるとVue.jsが勝手にレンダリングしてくれているようです。素晴らしい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/49ab7da9-bb51-405e-3b20-6fd61f2b9d61.png)

OK。完全に理解した（何もわからない）。基本的に作りながら覚えていくとして、空き時間に本でも読んで基本は理解するようにしよう。

#### ESLintを見てみる
scriptタグの中に適当にコードを書いてみるとESLintさんに怒られました。
「ステートメントの末尾にセミコロンをつけるな！」「使っていない変数があるぞ！」と怒っているみたいです。
セミコロンはつける・つけないを設定できるようですが、デフォルトは”つけない”なんですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/152a757a-d0c1-6a5e-1a8c-d02d8ddb09c1.png)

.eslintrc.jsでルールを変更することも可能です。

```javascript:.eslintrc.js
  rules: {
    semi: ['error', 'always']
  }
```

ルールを追加するとセミコロンのエラーが消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/7e625503-1191-7527-62c3-15926073f649.png)

#### Firebaseを使ってみる
データを永続化するためにはデータベースを使用します。Google先生に聞くとFirebaseというGoogleの提供しているサービスとVue.jsを組み合わせて使っていることが多いのでFirebaseを使ってみようと思います。

とりあえずFirebaseでRealtime Databaseを作成しました。
手順としては以下の通りです。

1. https://firebase.google.com/にアクセスして、使ってみるを押します。
1. ガイダンスに従って利用登録＋プロジェクトを作成する。
1. マイページに行ってRealtime Databaseからテストモードでデータベースを作成する。
1. データを手入力で登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/dd356aa5-6f24-1412-92c8-3b9379c9ea86.png)

#### データにURLでアクセスしてみる
データを登録した画面にURLが書いてあるのでそのURL＋JSONノード名＋".JSON"にアクセスするとJSON形式のデータが取得できます。

（例）https://〇〇-default-rtdb.firebaseio.com/person.json

```json:person.json
{"hanako":{"age":24,"name":"hanako","town":"Tokyo"},"taro":{"age":32,"name":"taro","town":"Kanagawa"}}
```

（例）https://〇〇-default-rtdb.firebaseio.com/person/hanako.json

```json:hanako.json
{"age":24,"name":"hanako","town":"Tokyo"}
```

改行は入れてくれないんですね。

#### Nuxt.jsからアクセスしてみる
まずhttp通信するためにaxiosというライブラリをインストールします。

```powershell:
npm install axios --save
```

ソースは以下の通りです。勉強がてらループ処理も使ってみました。

```javascript:index.vue
<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card class="d-flex justify-center">
        <v-btn @click="getData">
          start
        </v-btn>
      </v-card>
      <v-card v-for="data in json_data" :key="data.name">
        <p>
          name : {{ data.name }}
        </p>
        <p>
          age  : {{ data.age }}
        </p>
        <p>
          town : {{ data.town }}
        </p>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
const axios = require('axios');
export default {
  name: 'IndexPage',
  data () {
    return {
      json_data: {}
    };
  },
  methods: {
    getData () {
      axios
        .get('https://〇〇〇〇〇〇-default-rtdb.firebaseio.com/person.json')
        .then((res) => {
          this.json_data = res.data;
        });
    }
  }
};
</script>
```

#### 動かしてみる
startボタンを押すと先ほどFirebaseに登録した2レコードが表示されてくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/a2cacc03-94e3-8abf-fb3f-69f891676b82.png)

## 終わりに
　ということで今回はSprint0で開発の準備を行いました。今回は利用する技術の調査がメインでしたが、通常のSprint0ではチームビルディングがメインと考えたほうが良いと思います。利用する技術の調査にしても、まずはチームのみんながどんなスキルを持っているのか、どんなスキルを伸ばしたいと思っているのか、など個人の特性を確認したうえで必要な技術調査を行う必要があります。これは知っている人に聞いた方が早いからとかではなくて、チームメンバーを知り・チームでことに当たるのを当たり前にするためです。まあウォーターフォールでも同じですかね。
　次回はようやく開発に入ろうと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/21a959c0-4b50-a6ae-e9ba-e45f04f56187.png)