激ヤバWeb開発革命ツール「Coffee」〜日本語で実装手順
「Coffee」というGithubで公開されているコードがヤバい!
何がどうやばいかって。
「やりたいこと」を「文章」で書くだけでそれができる。こんな世界がついうに来てしまった。
百聞は一見にしかず。その動きは以下の動画をぜひ見てほしい。
そう。見てお分かりの通り、<Coffee>タグ内に書いた言葉が、まさかのWebページに反映される。
もはや、衝撃としか言えなかった。これから起きうる変化に若干恐怖を覚えた関係で、手が震えてPostを悩んだくらい。
ただ、日々進歩する。これを機に更なる進化を遂げる。そう感じとって、多くのエンジニアや業界全体の在り方に届けという思いも込めてPost。
今回はそのCoffeeを用いた実装について分かりづらいものが多かったので説明する。
準備・環境
環境
確認できているのは、Macbook Pro M1の環境
Dockerが必要
OpenAI のAPIKeyが必要。
こんなところ。
準備
以下のGithubから、ローカルへクローンしておく。
OpenAIのAPIKeyを取得しておく。
やっていく
そんなに難しいことはない。今回は、Cursorエディタを使っているが、もちろんVSCodeでも良い。
原理は比較的に簡単で、Docker上で動くファイル監視システムが、指定してWebアプリのプロジェクトのtsxファイルなどの変更を監視し、Coffee内の情報から、Compornentを生成してくれるというもの。
実際にCursorで、クローンしたCofeeプロジェクトを開く。
開いたら、「react」というフォルダがあるので、ターミナルを開いて、そのフォルダをカレントにする。
OPEN AIのAPIKeyを環境変数に設定。
次に、コンテナイメージをビルドする。
./dev.sh build
こんな感じに成功する。
ついで、サンプルで入っている「Next.js」のプロジェクトが、Cloneしたフォルダの中の「_roastery/sample_app_nextjs」にあるので、別のターミナルを開いて、そのフォルダをカレントにする。
ついで実行できるように、以下のコマンドを順に実行する。
npm install
npm run dev
これでOK。問題がなければ3087ポートで起動するので、リンクをクリックしてlocalhostの画面を確認してみる
こんな感じの画面↓が出るはず。
ついで、左側のReactフォルダにある方のターミナルで、以下のコマンドを実行する。引数は、Coffeeが監視する対象のフォルダを指す。
./dev.sh ../_roastery/sample_app_nextjs
エラーがなければ以下のようになる。
ついで、実際のページを編集してみる。Sample_app_nextjs/app/page.tsxを開き、<InputForm>のタグの上に以下のように入れてみる。
<Coffee>
黄色い円を一つ。
</Coffee>
こんな感じになる。エラーは無視して、保存してみてほしい。そうすると、「./dev.sh」を実行している方のターミナルが動き出す。並行でブラウザも見ていてほしい。
行ったことが出来上がってしまった。。
さらにこれ、前に行ったことが記憶されている。
だから文章を削除して、前に伝えたことに付け加えることができる。
例えば。「やっぱり色は赤」というのが通じてしまう。
まさに、エンジニアがもう一人いる状態。
もちろんJavascriptも実装できる。
そして、最後に、気に入ったところまでできたら、コンポーネント化までしてくれる。
「pour="作りたいコンポーネント名.tsx"」という属性を、Coffeeタグに入れて保存すると。。
即時、そのコンポーネントがCompornentsフォルダに作られ、もともとのCoffeeタグまで置き換わる。
たったこれだけなのである。
全てを変えることはできなくとも。
「自然言語」だけでここまでいけるものが出てきたのは、インパクトが大きい。
早足で説明したが、これを自分で試した時、あまりの衝撃に、手が震えた。XへのPostも悩んだ。
しかし、進化を信じた。
これが新たな進化につながることを期待して。
この投稿を気に入ってもらえたら、ぜひ❤️のクリックとフォローをお願い致します。
この記事が気に入ったらサポートをしてみませんか?