ChatGPT/GPTでTypeScriptを逐次実行させる
あなたはTypeScriptシミュレータです。step by stepでコードをシミュレートし、実行結果を出力してください。 ```ts const hoge = "hoge"; const hello = (...args: string[]) => `hello, ${args.join(" ")}`; hello(hoge, "world"); ``` これだけのシンプルなプロンプトで、解説を交えて逐次実行した結果を出力してくれます。もちろんTypeScriptだけではなくて他の多くの言語も処理できます。 GPTがプログラムの処理系になれるし、自然言語の操作もめちゃくちゃ上手、ということで、このテクニックは、いろいろと応用が効くはずです。もう少ししたらスクリプト言語ガシガシ入れたプロンプトが流行りそう。
ChatGPT APIを使ってキー・バリューなど扱いやすい出力を得る方法
プロンプトエンジニアリングの記事です。 ChatGPTなどGPT-3.5系である程度安定して、加工しやすい出力を得るためのノウハウができたので書きました。土日に別の実験をしていて副産物的に得られたものです。 サンプルコードはTypeScriptですが、プログラミング言語に依存した話ではありません。簡単な正規表現による文字列置換のサンプルです。 出力を得られると何が嬉しいのか？ 自然言語を自然言語で加工して、キーと値のペアを取得する、JSONを取得するなどすることができるようになるため、テキストを処理できる汎用ミドルウェアとしてLLMを使えるようになります。おそらくLLMを本格的にソフトウェアに組み込んでいく上で、基礎テクニックとなるでしょう。 異なる複数のプロンプトをつなぐときにも大切なテクニックです。 基本的な考え方 GPT-3.5系ではフォーマットを提示するとそのフォーマットに沿ったテ
ChatGPT APIを使ってプロジェクト名を生成するCLIツールを作った
ChatGPT APIこと Chat completion APIを使って、引数に入力した内容を元に要約したプロジェクト名を生成するCLIツールを作りました。 みなさんは、ローカルで色々コードを書いて実験するときにプロジェクト名（ディレクトリ）を考えるの面倒くさくないですか？ちゃんとした名前を与えた方が良いという考え方もありますが、ちょっとした実験をするために、検索ビリティが高くてオシャレでイケてるネーミングするとかやりますか？やりたくないですよね。 そこで内容を引数に指定してそれを元に要約したプロジェクト名生成ができればハッピーだと思ってサクッと作ってみました。 最近のGPT関連の記事: TypeScriptを使ってChatGPT APIをアクセスしてみる TypeScriptでGPT-3.5を使ってChatGPTクローンを作る1 - GPTで検索エージェント TypeScriptでGP
Reactでウェブフォームを作る2021
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
大規模チームの中でフロントエンドを立ち上げて2ヶ月経ったのでまとめる
とある大規模開発プロジェクトの中で WebView 用のフロントエンドシステム開発を立ち上げて2ヶ月経ちました。Android, iOS専任のエンジニアがいないため、外部協力者の指導のもと、モバイルアプリの画面を WebView で作るためです。 ある程度その営みについて見えてきたものがあるので記事にまとめることにしました。 プロジェクト参加人数は30名以上 プロジェクト自体は4ヶ月前から動いてる このプロジェクトへのフロントエンドチームの参加は1月から 現在 WebView とモバイル・バックエンドなどの結合試験をはじめている 背景 去年12月いまの会社にテックリードとして入社し、前述とは別のプロジェクトでフロントエンドチーム立ち上げを行っていました。同タイミングで、いまの会社に誘ってくれた飲み仲間もテックリード・チームリーダーとして入社しています。フロントエンドチームはこの2名がプロパ
Reactのユニットテスト2021
React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
React Server Components はウェブ開発を変えるゲームチェンジングな技術である
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
Next.js + Electron がとても簡単になっていた
Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
