前提条件
・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も細かくメンテナンス・アップデートされているのかなと感じました。