【初心者歓迎！】Riot.js v4 でフロントエンドに一揆を起こす

どうも、相も変わらず流行っているものには手を出さないNな人です。 今回、v2くらいから愛用していたriot.jsがv4になっていたので、1から学び直してみようと思います！ 環境準備 好きなPCをもて！ あと、なんかlocalサーバ立てて！！ PHPがインストールされてると、プロジェクトフォルダまでcdして、 php -S localhost:8080みたいな感じで、サーバが立ち上がるよ！！！ 所管（読み飛ばし推奨） ここの項目に対する苦情は一切受け付けません。 読み飛ばし推奨。 「単一ファイルコンポーネント」を使うにはいちいちコンパイルしないといけない。 なんて面倒なのでしょうか。 riotはそんな必要ありません！ 端からコンポーネント！それがコンポーネント指向！ さあ、この暴動に、あなたも巻き込まれましょう！ こんにちは暴動の世界！ 早速始めていきましょう。 環境はめんどいのでCDN使います。 2つファイルを用意しましょう。 「index.html」と「hello-world.riot」ファイルです。 hello-world.riot まず、rito.jsといえば「カスタムタグ」機能です。 好きな機能をもたせたオリジナルのHTMLタグっぽいものが作れます。 今回は「hello-world」タグを作ってみましょう。 hello, riot world! index.html では、実際に「hello-world」タグを呼び出すベースのHTMLです。 兎にも角にも、コピペしてみましょう。 <script src="./hello-world.riot" type="riot"> <script src="//cdn.jsdelivr.net/npm/riot@4.0.0-rc.1/riot+compiler.min.js"> (async function main() { await riot.compile() riot.mount('hello-world'); }()) 実行結果 ご覧のように、タグが実行され、 中身の「hello, riot world!」が表示されていますね！ 簡単です！ ちょっと解説 index.htmlの中身でriotの特有の部分があるので、解説していきます。 JSのインポート ↑作ったカスタムタグ、「hello-w...