Sotono.dev

Babel-aiって何

React App

https://babel-ai.com/

何ができるのかっていうのを探ってHello,worldしてみようと思います。

システムを生成

適当に要件を入力して生成ボタンを押すとシステム名と概要が生成されます。

とりあえず試したいのでファイルのみ生成します。すると生物的な図が出てきます。以下、この図のことを「生物的図」と呼びます

緑色のアイコンがフォルダ、青色のアイコンがファイルになっているようです。

中身が入っているファイルはカーソルを重ねると中身が表示されます。

画面をすこしいじってみる

右上にツールバーがあるのでこれをちょっと触ってみます。左から右に向かって触ります。

ALL

生物的図が画面に収まるように拡大率をいじってくれます。ちなみにホイールで拡大縮小ができます。

三みたいなアイコン

ファイルの名前表示の設定をトグルします。表示したり表示にしたりできます。

フォルダアイコン

同じく、フォルダの名前の表示をトグルします。

投げ縄ツール

Adobeで言うところの投げ縄ツールみたいなやつ。これはファイルを複数選択してメニューを出すことができます。

下記画像では右側のフォルダとファイルをひとつずつ選択しています。フォルダがちょっと分かりづらいです。

選択するとこのようなメニューが出てきます

ハイライトを押すとファイルが光り輝きます複数同時にハイライトしたあとの戻し方がわからなかったので追々アプデで修正されるのかな？とか思ったり。

周辺を表示を押すと、その選択対象の周辺のファイルのみを表示します。

これは、ツールバーのALLを押すと本の表示に戻ります。

箱のようなアイコン

箱のようなアイコンを押すと謎のモードになります。

これ、最初は何だ？って思ったんですが、少し触ってみると、面白いことがわかります。

なにもないところを左クリックでドラッグすると、この点と点が線で結ばれている図が3Dにっていることがわかります。

何に使うかわからないですが非常にロマンがあります。

箱のアイコンを押すともとに戻りますが、このとき位置とかが通常表示に反映されています。

ダウンロードのボタン

できたシステムをダウンロードします。

ファイルの中身を見てみると、確かにこのシステムそのものがダウンロードされているようでした。

開発者視点で見ると、最node_modulesとか、pycacheとかそういうファイルは最初から用意する必要はないかなという印象がありますが、どうなんでしょう、ここも意図して作られているんでしょうか？

Babel内でエディタを使ってみる

ファイルをダブルクリックし、プレビューをどかしてあげるとコンテキストメニューが出てきます。ハイライトと周辺取得はもう使ったので、エディタを触ってみようと思います。

GUIで見る限り機能は少なめかなと思いますが、右上にvimって書いてあるのでvimが使えるのかなと思います。僕はvimが使えないのでOFFにして弄ります。

消えちゃったのでVimをオンにし直します

アプリが落ちました。通常に使えないってことで今回は諦めます。

ちなみにエラーは下記のように表示されてました。

Error: AbstractContextKeyService has been disposed
    at rK.createKey (7426.52442389cbc1eb09.js:7915:116665)
    at oO.createContextKey (7426.52442389cbc1eb09.js:7919:23438)
    at new e (7426.52442389cbc1eb09.js:8372:137902)
    at i.vM (7426.52442389cbc1eb09.js:8372:153774)
    at 770.169d53818c99fcee.js:1:33536
    at rR (fd9d1056-10468055998cf6e2.js:1:41936)
    at rA (fd9d1056-10468055998cf6e2.js:1:42784)
    at rD (fd9d1056-10468055998cf6e2.js:1:41965)
    at Object.useState (fd9d1056-10468055998cf6e2.js:1:52495)
    at t.useState (7023-35de378dbbf2c158.js:2:32039)