Riot.js の開発環境構築に新たな革命が！

## 開発環境構築に自動化の流れが

感動しました深夜２時です。もうとにかく、このツイートに書いてあるコマンドをたたいてみてくれ！で終わりっちゃ終わりなんですが、感動したので書きますw

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Do you want to start a new <a href="https://twitter.com/hashtag/riotjs?src=hash&amp;ref_src=twsrc%5Etfw">#riotjs</a>?<br><br>Try with the new `npm init riot` command<a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://t.co/HzDV9sr6t3">https://t.co/HzDV9sr6t3</a></p>&mdash; Riot.js Framework (@riotjs_) <a href="https://twitter.com/riotjs_/status/1274793179263442949?ref_src=twsrc%5Etfw">June 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


今まで [Riot.js](https://riot.js.org/)（以下 `riot`）で開発するに当たって、開発環境をどうやって用意するかはずっと大きな課題の一つでした。ちなみに私の場合は [公式のサンプル集](https://github.com/riot/examples)<i class="fas fa-external-link-alt"></i> から `parcel` や `webpack`, `typescript` ディレクトリのものをコピーし、`$ git init` して使っていました。

## 実際に実行
ではやってみましょう。

```bash
# 適当なディレクトリを作成して移動
$ mkdir riot-demo && cd riot-demo

# 環境構築
$ npm init riot

（ここでいつもの npm init の手順）

package name: (riot-demo)
version: (1.0.0)
description:
git repository:
license: (ISC) MIT
About to write to /path/to/dir/riot-demo/package.json:

{
  "name": "riot-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "kkeeth <zensin0082@gmail.com>",
  "license": "MIT",
  "description": ""
}


Is this OK? (yes) y
```

ここまではいつも通りで、ここからが本題です💁

```bash
# template を選択
# 今回は SPA にする
? Please select a template …
  Webpack Project Template
  Parcel Project Template
  Rollup Project Template
  Simple Component
❯ SPA (Webpack) Project Template
  Custom Template (You will need to provide a template path to your template zip file)

✔ Please select a template · webpack-spa
✔ Downloading the template files
✔ Unzipping the file downloaded
✔ Deleting the zip file
✔ Copying the template files into your project
✔ Deleting the temporary folder
✔ Template successfully created!
```

はい、これで準備は整いました。まだ完成していませんが、ここで `riot-demo` ディレクトリ内を見ると以下のように template がダウンロードされています。

```
./
├── index.html
├── webpack.config.js
├── package.json
├── package-lock.json
├── readme.md
├── LICENSE
├── src/
│   ├── app.riot
│   ├── index.js
│   ├── pages.js
│   ├── register-global-components.js
│   ├── components/
│   └── pages/
└── test/
    └── register-riot-extension.js
```

嬉しいことに、しっかりとテストも用意してくれており、各コンポーネントの `.spec.js` ファイルもありました。これは地味に助かります。

ちなみにこれらの template はどっから来たのかな？と思っていましたが、公式の [organization](https://github.com/riot) を見たら、それぞれの template リポジトリがいつの間にか生えてましたw

<img width="1030" alt="スクリーンショット 2020-06-24 9.43.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48034/b7bbfdda-5248-60da-4261-32cf459bab18.png">

カレントディレクトリをよく見ると、`package-lock.json` 先輩がいらっしゃるじゃないですか！ということで、もし `yarn`の方がお好きな方はここで `package-lock.json` 先輩を削除してくださいw

__※2020年6月25日 現在__
本記事執筆時点では、template をダウンロードした時点での `package.json` が1行に圧縮されてしまっています。今後修正される可能性はありますが、今は [json のフォーマッターサービス](https://one-ap-engineer.com/tools/json-formatter/) などで整形されることをおすすめします。

```diff
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "nyc --require esm --require jsdom-global/register --require ./test/register-riot-extension.js mocha src/**/*.spec.js",
+   "cov": "nyc report --reporter=text-lcov | coveralls",
+   "cov-html": "nyc report --reporter=html",
+   "build": "webpack -c --mode production",
+   "prepublishOnly": "npm test",
+   "start": "webpack-dev-server --inline --watch --hot --colors -d --port 3000"
  },
```

ここまでできましたら、npm packages をインストールし、アプリを起動してみましょう。`package.json` を見ますと起動のコマンドは `start` ですね。

```bash
# npm を利用する方
$ npm i
$ npm run start

# yarn を利用する方
$ yarn
$ yarn start
```

上記コマンドを叩くと、自動的にブラウザが開き http://localhost:3000 にアクセスされると思います。

<img width="1047" alt="スクリーンショット 2020-06-24 10.06.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48034/55b1a11d-65d5-928e-76a7-46e216136d28.png">


最後に、このままですとソースコードが `Git` で管理されていませんので、`$ git init` もしちゃいましょう。`.gitignore` の中身の精査もお忘れなく〜。余談ですが、私は `.gitignore` を別途用意する場合は [gibo](https://github.com/simonwhitaker/gibo) というツールを利用しています。参考までに。

というわけで、以上で環境が作られました！ぶっちゃけやってみた感じでは、テンプレートを自分でダウンロードするのとあんま変わんないんじゃ…とか思いましたが、コマンドラインから離れなくてもよいのはなんだかんだ嬉しいので、[create-riot](https://github.com/riot/create-riot) を作っていただいのはありがたいですね😁

今後 riot で開発をしてみたい方はこちらを利用することをおすすめします！

ではでは(=ﾟωﾟ)ﾉ

## ちょっとだけ宣伝

riot 本が出ました。

<img alt="riot-book.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48034/8a64cbeb-944b-c50b-35a3-38a8460111c4.jpeg" width="300">
https://www.amazon.co.jp/dp/B08BHMLZCJ/

あまり書きすぎるとバンされたり批判されるので宣伝は以上です。