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

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

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

Do you want to start a new #riotjs?

Try with the new `npm init riot` command#javascript https://t.co/HzDV9sr6t3

— Riot.js Framework (@riotjs_) June 21, 2020

今まで Riot.js（以下 riot）で開発するに当たって、開発環境をどうやって用意するかはずっと大きな課題の一つでした。ちなみに私の場合は 公式のサンプル集 から parcel や webpack, typescript ディレクトリのものをコピーし、$ git init して使っていました。

実際に実行

ではやってみましょう。

# 適当なディレクトリを作成して移動
$ 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 <[e-mail]>",
  "license": "MIT",
  "description": ""
}


Is this OK? (yes) y

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

# 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 を見たら、それぞれの template リポジトリがいつの間にか生えてましたw

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

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

  "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 ですね。

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

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

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

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

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

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

ではでは(=ﾟωﾟ)ﾉ

ちょっとだけ宣伝

riot 本が出ました。

https://www.amazon.co.jp/dp/B08BHMLZCJ/

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