前提条件

・macOS Catalina

Riot.js

Riot.jsとは

フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたかに見えたものの、重大な弱点を残している点、それをRiotは解決します。

自動翻訳感が否めない日本語公式ドキュメントから引用
Riot.js 日本語公式ドキュメント

準備

$ npm init riot

上記コマンドを実行すると作成するパッケージの名前など、作成情報を聞かれます。
今回は動くところまでの確認なので最小限で

Press ^C at any time to quit.
package name: (riot-test) hello-riotversion: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/yutasato/dev/riot-test/package.json:

{
  "name": "hello-riot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

yesを選択すると、作成するテンプレートの選択肢が表示されます。
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!

ここからは無心で

$ npm install

準備完了！

readmeまで用意されている。
起動はnpm startでできる。

Start

npm start

すると

動く！

おわりに

先人様のおかげで、躓くことなくテンプレートページを表示するところまで凄い速さで辿り着けました。
（記事書いている時間のほうが長かったな。あとハローワールドじゃなかった。）

参考

・Riot.js の開発環境構築に新たな革命が！
事前に調べた際に見たページはほぼこの方の記事でした。リンク先で本の宣伝されてます。

今回環境構築した際にはinitで聞かれる項目がリンク先記事より増えていたので、Riot.jsも細かくメンテナンス・アップデートされているのかなと感じました。