流行りの人工知能ChatGPTにRiot.jsの事を聞いてみた

2022.12.13 - Article

流行りの人工知能ChatGPTにRiot.jsの事を聞いてみた

Tag:riot.js

Riot.js Advent Calendar 2022 の13日目の記事なります。

ChatGPTはOpenAIが2022年11月にリリースしたチャットボット系のAIです。
このAIによる回答の精度がすごいと大変話題になっていますのでAdvent Calendarの企画としてriot.jsの事を聞いてみたいと思います。

ChatGPTの画面

Riot.jsについて聞いてみる

うまく全てのキャプチャが取れなかったので、会話の内容をテキストで記載します。
枠内がChatGPTでのやりとりです。

🙁 javascript ライブラリ riot.jsの利点は何ですか?

🤖 Riot.jsは、軽量で柔軟なJavaScriptライブラリです。その主な利点は、次のとおりです。

・単一ファイルコンポーネント (SFC) のサポートにより、コンポーネントを簡単に作成できます。
・コンポーネントベースのアプローチにより、アプリケーションのモジュール化が容易になります。
・テンプレートエンジンを使用しないため、高速なレンダリングが可能です。
・ビルトインの触り感のよいルーティング機能を備えています。
・公式のプラグインや、コミュニティによる多くの外部プラグインが利用できます。
・Riot.jsを使用することにより、軽量で高速なWebアプリケーションを構築することができます。

ライブラリのWebサイトにありそうな長所を返してくれました。
1つ目のSFCは正しいですね。
2つ目のコンポーネントベース…も正しいです。
❌ 3つ目の「テンプレートエンジンを使用しないため、高速」という言うのはVirtualDomの間違いですかね?
❌ 4つ目のルーティング機能がビルトインは誤りです。
5つ目のプラグインについては大体正しいでしょうか？
6つ目の「軽量で高速なWebアプリケーションを構築」は正しいと思います。
いい感じに返してくれますが微妙に間違いもありますね。

🙁 Riot.jsはReact.jsと比べるとどのような違いがありますか？

🤖 Riot.jsとReact.jsは、どちらもJavaScriptライブラリであり、Webアプリケーションを構築するために使用されます。ただし、そのアプローチや機能には大きな違いがあります。

Riot.jsは、単一ファイルコンポーネント (SFC) を使用してコンポーネントを構築するため、柔軟性が高く、簡単にアプリケーションを構築することができます。一方、React.jsは、JSXを使用してコンポーネントを構築します。
Riot.jsは、ビルトインの触り感のよいルーティング機能を持っています。これに対し、React.jsはルーティングを提供するために、React Routerという外部ライブラリを使用する必要があります。
Riot.jsは、フレームワークやライブラリに依存しない、軽量なライブラリであり、React.jsはFacebookが開発したフレームワークであり、より柔軟で強力な機能を備えています。
Riot.jsとReact.jsは、どちらも高い柔軟性を持ったJavaScriptライブラリですが、アプリケーションの規模やニーズに応じて、使用するライブラリを選択する必要があります。

似たようなライブラリということであまり具体的に違いを返してくれませんでした。ここでもriotは「ルーターをビルトイン」として間違えています。

🙁 riot.jsがより多くの人に使われるためにはどうするべきですか？

🤖 riot.jsは、Webフロントエンド用のJavaScriptライブラリです。そのようなライブラリをより多くの人に使用させるためには、まずそのライブラリが提供する特長や利点を明確にアピールする必要があります。また、ドキュメントやチュートリアルが充実していることも重要です。さらに、社会的支援を得ることで、自身の製品やサービスがより多くの人に知られるようにすることも有効です。例えば、技術コミュニティやオンラインフォーラムなどで自身の製品を紹介したり、イベントやカンファレンスで講演を行ったりすることで、より多くの人がそのライブラリを知ることができます。

ごもっともな意見ですが、ライブラリ全般に言えることであり、あまり具体的なアドバイスではないかもしれません。

🙁 追加すべき機能はありますか?

🤖 私は、あなたが指している「riot.js」については十分な情報を持っていません。そのため、「riot.js」に追加すべき機能をお勧めすることはできません。そのような提案は、「riot.js」の開発者やユーザーコミュニティからのフィードバックを元に検討することが適切です。また、「riot.js」が解決しようとしている問題やニーズに応じて、新しい機能を追加することも考えられます。

riot.jsの情報が足りない言われてしまいました😢　もしいろんな記事がネット上にあれば答えを出してくれていたのかな？

🙁 どのようなサイトの構築にriot.jsは向いていますか?

🤖 riot.jsは、Webフロントエンド用のJavaScriptライブラリです。そのため、JavaScriptを使用したWebサイトの構築に適しています。特に、riot.jsは、小さなサイズでありながら、カスタマイズ性の高いコンポーネントを作成することができるため、モダンなWebアプリケーションの構築に適しています。また、riot.jsは、ReactやVue.jsと同様に、Virtual DOMを採用しており、高いレンダリング性能を発揮することができます。そのため、高速なレスポンスを求められるWebアプリケーションの構築にも適しています。

ReactやVue.jsと同様のライブラリと認識されていますが、Virtual DOMを使うという点が誤りですね。

🙁 riot.jsはVirtual DOMを採用していませんよ

🤖 そうですね。私が言っていたのは、ReactやVue.jsと同様に、Virtual DOMを採用しているということでした。しかし、実際にはriot.jsはVirtual DOMを採用していません。代わりに、riot.jsは、自身で実装された「observable」という機能を採用しており、これを用いて、変更された要素のみを更新することで、高いレンダリング性能を実現しています。また、riot.jsは、Virtual DOMを採用しているフレームワークと比べても、高いパフォーマンスを発揮することができます。

間違いを指摘してみましたがリアクションが人間ぽくも感じますね（笑）知っている情報（微妙に間違っている）で煙に巻こうとしている感じに見えます。

Riot.jsのプログラムを書いてもらう

プログラムも書いてくれるみたいなのでお願いしてみました。

🙁 riot.jsでボタンをクリックすると現在時刻を表示するプログラムを書いてください。

🤖 Riot.jsを使用して、ボタンをクリックすると現在時刻を表示するプログラムを書くには、次のようにします。

XHTML

 <!DOCTYPE html> <html> <head> <title>Riot.js Sample</title> </head> <body> <h1>Riot.js Sample</h1>  <script src="https://unpkg.com/riot/riot.min.js"></script>  <script src="./time-display.tag" type="riot/tag"></script>  <time-display></time-display> <script> // タグを登録する riot.register('time-display', { // 初期値 time: '', // テンプレート template: ` <div> <p>現在時刻: {time}</p> <button onclick={updateTime}>更新</button> </div> `, // メソッド updateTime() { // 現在時刻を更新する this.time = new Date().toLocaleString(); this.update(); }, }); // マウントする riot.mount('time-display'); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


<!DOCTYPE html>
<html>
  <head>
    <title>Riot.js Sample</title>
  </head>
  <body>
    <h1>Riot.js Sample</h1>

    
    <script src="https://unpkg.com/riot/riot.min.js"></script>

    
    <script src="./time-display.tag" type="riot/tag"></script>

    
    <time-display></time-display>

    <script>
      // タグを登録する
      riot.register('time-display', {
        // 初期値
        time: '',

        // テンプレート
        template: `
          <div>
            <p>現在時刻: {time}</p>
            <button onclick={updateTime}>更新</button>
          </div>
        `,

        // メソッド
        updateTime() {
          // 現在時刻を更新する
          this.time = new Date().toLocaleString();
          this.update();
        },
      });

      // マウントする
      riot.mount('time-display');
    </script>
  </body>
</html>

まず、Riot.jsを読み込みます。次に、ボタンをクリックすると現在時刻を表示するコンポーネント time-display を定義します。そして、time-display コンポーネントを…(ここで停止)

すごい…　riot特有のテンプレート変数{}やthis.update()、riot.mount()が正しく使用されています。そしてコンポーネント名やメソッド名も時刻に関する命名になっています。しかしriot.register()の使い方がおかしいので実行はできません。vueのコンポーネントと混同している感じですかね？

もう一度同じ質問をしてみました。

🙁 riot.jsでボタンをクリックすると現在時刻を表示するプログラムを書いてください。

🤖 以下がriot.jsを使った、ボタンをクリックすると現在時刻が表示されるプログラムの例です。

XHTML

<!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/npm/riot@4.8/riot+compiler.min.js"></script> <script type="module" src="index.js"></script> </head> <body> <app> <h1>現在時刻</h1> <button onclick={showTime}>現在時刻を表示する</button> <p>{time}</p> </app> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/riot@4.8/riot+compiler.min.js"></script>
    <script type="module" src="index.js"></script>
  </head>
  <body>
    <app>
      <h1>現在時刻</h1>
      <button onclick={showTime}>現在時刻を表示する</button>
      <p>{time}</p>
    </app>
  </body>
</html>

JavaScript

// index.js import { component, onMounted } from 'https://cdn.jsdelivr.net/npm/riot@4.8/riot.min.js' component('app', { data: { time: null }, showTime: function() { this.time = new Date().toLocaleString() this.update() } })

1
2
3
4
5
6
7
8
9
10
11
12

// index.js
import { component, onMounted } from 'https://cdn.jsdelivr.net/npm/riot@4.8/riot.min.js'

component('app', {
  data: {
    time: null
  },
  showTime: function() {
    this.time = new Date().toLocaleString()
    this.update()
  }
})

上の例では、<button>要素のクリックイベントにshowTime関数をバインドしています。showTime関数内では、現在時刻を取得し、timeというデータプロパティにセットします。次に、updateメソッドを呼び出すことで、画面に反映されます。

注意: showTime関数内では、thisがappコンポーネント自身を指します。そのため、this.timeのように、appコンポーネントのプロパティにアクセスすることができます。

また、上の例では<p>要素に{time}と書いています。これは、timeというデータプロパティの値を埋め込むための記法です。実行時に、この部分はtimeプロパティの値に置き換わり、画面上に表示されます。

詳しい使い方は、Riot.js公式ドキュメントを参照してください。

今度はモジュール形式で使用する形で考えてくれたようです。かなりRiotっぽい書き方はできているのですがcomponentという関数でコンポーネントを生成しようとしているようで実行はできません。

🙁 バージョン7の形式で書いてください

🤖 次が、Riot.js v7を使った、ボタンをクリックすると現在時刻が表示されるプログラムの例です。

XHTML

 <!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script> <script type="module" src="index.js"></script> </head> <body> <app> <h1>現在時刻</h1> <button onclick={showTime}>現在時刻を表示する</button> <p>{time}</p> </app> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script>
    <script type="module" src="index.js"></script>
  </head>
  <body>
    <app>
      <h1>現在時刻</h1>
      <button onclick={showTime}>現在時刻を表示する</button>
      <p>{time}</p>
    </app>
  </body>
</html>

JavaScript

// index.js import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js' component('app', { data: { time: null }, showTime() { this.time = new Date().toLocaleString() this.update() } })

1
2
3
4
5
6
7
8
9
10
11
12

// index.js
import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js'

component('app', {
  data: {
    time: null
  },
  showTime() {
    this.time = new Date().toLocaleString()
    this.update()
  }
})

Riot.js v7からは、コンポーネント内のデータプロパティやメソッドは、オブジェクトリテラル内に定義します。また、アロー関数を使ってメソッドを定義することができます。

また、onMountedというライフサイクルフックは、Riot.js v7では非推奨となっており、代わりにmountedというフックを使うようにします。例えば、次のように書き換えることができます。

JavaScript

// index.js import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js' component('app', { data: { time: null }, mounted() { this.showTime() }, showTime() { this.time = new Date().toLocaleString() this.update() } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// index.js
import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js'

component('app', {
  data: {
    time: null
  },
  mounted() {
    this.showTime()
  },
  showTime() {
    this.time = new Date().toLocaleString()
    this.update()
  }
})

詳しい使い方は、Riot.js公式ドキュメントを参照してください。

v4を読み込んでいたのですが、お願いすればv7を読み込んでくれています。すごい。

🙁コンポーネントファイルに書く形式にしてください

🤖 次が、Riot.js v7を使った、ボタンをクリックすると現在時刻が表示されるプログラムの例です。

XHTML

 <!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script> <script type="module" src="app.riot"></script> </head> <body> <app></app> </body> </html>

1
2
3
4
5
6
7
8
9
10
11


<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script>
    <script type="module" src="app.riot"></script>
  </head>
  <body>
    <app></app>
  </body>
</html>

XHTML

 <app> <h1>現在時刻</h1> <button onclick={showTime}>現在時刻を表示する</button> <p>{time}</p> </app> <script> import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js' component('app', { data: { time: null }, showTime() { this.time = new Date().toLocaleString() this.update() } }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


<app>
  <h1>現在時刻</h1>
  <button onclick={showTime}>現在時刻を表示する</button>
  <p>{time}</p>
</app>

<script>
  import { component } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js'

  component('app', {
    data: {
      time: null
    },
    showTime() {
      this.time = new Date().toLocaleString()
      this.update()
    }
  })
</script>

Riot.js v7では、コンポーネントをHTMLタグとJavaScriptの2つのファイルに分けることができます。上の例では、app.riotというファイルに、HTMLとJavaScriptを書いています。

Riot.js v7では、コンポーネント名は小文字で書く必要があります。そのため、HTMLタグ名も小文字にしています。また、.riotという拡張子を使っています。これにより、Riot.jsがコンポーネントを自動的に読み込むようになります。

詳しい使い方は、Riot.js公式ドキュメントを参照してください。

コンポーネントファイルっぽいもの(app.riot)に分けてくれましたが、scriptの中でriotをimportしたり、component関数を使っていたり、正しいコンポーネントの形になっていません🤔

🙁 ブラウザコンパイルの形式で書いてください

🤖 Riot.js v7では、ブラウザ内でのコンパイルが推奨されています。以下が、ブラウザ内でコンパイルした例です。

XHTML

 <!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/compiler@7.0/dist/riot-compiler.min.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script> <script type="module"> import { component, compile } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js' component('app', { data: { time: null }, showTime() { this.time = new Date().toLocaleString() this.update() } }) compile(document.querySelector('app')) </script> </head> <body> <app> <h1>現在時刻</h1> <button onclick={showTime}>現在時刻を表示する</button> <p>{time}</p> </app> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/compiler@7.0/dist/riot-compiler.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script>
    <script type="module">
      import { component, compile } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js'

      component('app', {
        data: {
          time: null
        },
        showTime() {
          this.time = new Date().toLocaleString()
          this.update()
        }
      })

      compile(document.querySelector('app'))
    </script>
  </head>
  <body>
    <app>
      <h1>現在時刻</h1>
      <button onclick={showTime}>現在時刻を表示する</button>
      <p>{time}</p>
    </app>
  </body>
</html>

上の例では、compileメソッドを使って、<app>タグをコンパイルしています。これにより、<app>タグ内に定義されたコンポーネントが有効になります。

注意: ブラウザ内でのコンパイルには、@riotjs/compilerパッケージが必要です。また、<script>タグ内でimport文を使うため、type属性にはmoduleを指定する必要があります。

詳しい使い方は、Riot.js公式ドキュメントを参照してください。

ライブラリがいろいろ読み込まれてしまい、相変わらずコンパイルの書き方がうまくいっていませんね。

🙁 時間を消すボタンも付けてください

🤖 以下が、Riot.js v7を使った、ボタンをクリックすると現在時刻が表示され、別のボタンをクリックすると消えるプログラムの例です。

XHTML

 <!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/compiler@7.0/dist/riot-compiler.min.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script> <script type="module"> import { component, compile } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js' component('app', { data: { time: null }, showTime() { this.time = new Date().toLocaleString() this.update() }, clearTime() { this.time = null this.update() } }) compile(document.querySelector('app')) </script> </head> <body> <app> <h1>現在時刻</h1> <button onclick={showTime}>現在時刻を表示する</button> <button onclick={clearTime}>時刻を消す</button> <p>{time}</p> </app> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/compiler@7.0/dist/riot-compiler.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js"></script>
    <script type="module">
      import { component, compile } from 'https://cdn.jsdelivr.net/npm/@riotjs/core@7.0/dist/riot.min.js'

      component('app', {
        data: {
          time: null
        },
        showTime() {
          this.time = new Date().toLocaleString()
          this.update()
        },
        clearTime() {
          this.time = null
          this.update()
        }
      })

      compile(document.querySelector('app'))
    </script>
  </head>
  <body>
    <app>
      <h1>現在時刻</h1>
      <button onclick={showTime}>現在時刻を表示する</button>
      <button onclick={clearTime}>時刻を消す</button>
      <p>{time}</p>
    </app>
  </body>
</html>

上の例では、<button>要素のクリックイベントにshowTime関数をバインドしています。また、別の<button>要素のクリックイベントにclearTime関数をバインドしています。

showTime関数内では、現在時刻を取得し、timeというデータプロパティにセットします。次に、updateメソッドを呼び出すことで、画面に反映されます。

clearTime関数内では、timeプロパティをnullにします。次に、updateメソッドを呼び出すことで、画面上から時刻が消えます。

詳しい使い方は、Riot.js公式ドキュメントを参照してください

機能自体の部分はちゃんとした書き方で追加されています。本当にプログラムを理解して書いているように感じますね。こんな時代が来るとは。。。

感想

自然にやりとりできている感じがChatGPTはスゴすぎますね。しかしまだまだ間違いも多く代わりに仕事をしてもらうにはほど遠いとも感じました。riotに関してはコンパイルさせるコードを書くことも難しかったです。しかしこれはネット上にriotの情報が少なかったからですかね？将来的に学習する量が増えたり、現状でもreactなどであればもっと精度が高いのでしょうか。恐ろしさも感じます。

また、現状でもアイデアを出してもらったり検索感覚で質問したり、使い方次第ですごい有効活用できそうです。上手く活用してAIに仕事を奪われないようにしたいものです。

2件のコメントがあります。

k
kkeeth より:

2022年12月15日 19:47

面白い記事をありがとうございます！ChatGPT恐ろしい子…！

釈迦に説法かとは思いますが，riot.js の v3 以前はルーター機能がビルトインだったんですよね…スリム化であったりパフォーマンス改善のため @riotjs/router として切り出された経緯がありますー．

返信
1. ウェブゴト より:
  
  2022年12月15日 20:21
  
  補足ありがとうございます！
  他のライブラリと混同しているのかと思ってましたが、同じライブラリでも新しくできるようになった事や廃止になった機能などがあるので、そのあたりを正確に出力するのは難しいですよね。しかし今後の成長が楽しみですね（今のところは）
  
  返信

BLOG