Riot.js 試してみた

Angular・React・Vue・Svelte と同様、SPA フレームワークである Riot.js を試してみた。

試してみたソースコードは以下に置いている。

Riot.js が用意する create-riot を npm init で使うと良い感じにプロジェクトが構築できる。

# 今回は GitHub で作ったリポジトリ内に作っていく
$ git clone https://github.com/Neos21/practice-riot.git
$ cd practice-riot/

# 次のコマンドで Riot.js プロジェクトが自動的に作れる
$ npm init riot
npx: 179個のパッケージを8.003秒でインストールしました。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (practice-riot)
version: (1.0.0) 0.0.0
description: Practice Riot.js
entry point: (index.js)
test command:
git repository: (https://github.com/Neos21/practice-riot.git)
keywords:
author:
license: (MIT)
About to write to /Users/Neo/practice-riot/package.json:

{
  "name": "practice-riot",
  "version": "0.0.0",
  "description": "Practice Riot.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Neos21/practice-riot.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Neos21/practice-riot/issues"
  },
  "homepage": "https://github.com/Neos21/practice-riot#readme"
}

Is this OK? (yes) y

# 次のプロンプトで 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
✔ 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!

# 以下のファイル群が勝手にできた
$ tree -a
.
├── .gitignore
├── LICENSE
├── index.html
├── package-lock.json
├── package.json
├── readme.md
├── src
│   ├── app.riot
│   ├── components
│   │   ├── global
│   │   │   ├── my-component
│   │   │   │   ├── my-component.riot
│   │   │   │   └── my-component.spec.js
│   │   │   └── sidebar
│   │   │       ├── sidebar.riot
│   │   │       └── sidebar.spec.js
│   │   └── includes
│   │       ├── loader
│   │       │   └── loader.riot
│   │       └── user
│   │           ├── user.riot
│   │           └── user.spec.js
│   ├── index.js
│   ├── pages
│   │   ├── about.riot
│   │   ├── home.riot
│   │   └── not-found.riot
│   ├── pages.js
│   └── register-global-components.js
└── webpack.config.js

# `package.json` に沿ってインストールする
$ npm install

# とりあえず動く
$ npm start

# テストもできる
$ npm test
$ npm run cov-html

# ビルドすると JS 関連が `dist/` 配下にできる
$ npm run build

…という感じで、とりあえず動くモノはできた。コレを Netlify や Vercel のような、サブドメイン形式の環境にデプロイしてホスティングすると、うまく動くはず。

自分は GitHub Pages にデプロイしてみようと思ったのだが、パスの調整がしきれず、なんだか上手く動いていない。そこが残念。

Riot.js は素の Webpack を結構ゴリゴリに使っているので、Webpack ちからがないとそういうところが直しきれない。

Riot のファイルは、Vue における .vue ファイルのように、.riot というファイルで、1コンポーネントの HTML・CSS・JS がまとめられている。記法はシンプルで、必要十分。覚えることが少なく済み、ローカルで試す限りは動作も軽量高速だったので、本気で使おうと思えばかなり優秀かも。