Claude or ChatGPT + Tools やモデルの組み合わせで対応パターンが膨大で面倒だったのを、 Deno + ai-sdk(Vercel) で書き直したらだいぶ楽になった。 この辺を参照した。 OpenAI と AnthropicAI の Tools の叩き方を確認したが、 Gemini はそこを省いている。 前提 まず、 AI 周りの CLI ツールは専用の面倒臭さがあることを知っておく必要がある。 ストリーミング Tools の応答 AI 周りの応答をストリーミングするのは LLM 関係なくストリーミング処理を大量に書く必要がある。 ストリーミング処理は WebSocket や WebWorker 周りのAPIハンドルと同じノウハウが必要になる。別に難しくはないが、既存の Promise 抽象に当てはまらないので、都度考えることになり、だるい。 Tools の応答は、A

アプリケーションのログ収集にあたっては、構造化ロギング (structured logging) というプラクティスが広く実践されています。構造化ロギングとは、ログの出力を単なる文字列ではなく、メッセージ以外のメタデータも含む構造化されたデータとして出力することです。構造化されたデータを出力することで、ログの解析や集計を容易にすることができます。 この記事では、JavaScriptのサーバーサイドアプリケーションにおける構造化ロギングの実装に焦点を当てて議論し、最終的に筆者が開発したasync-object-stackを宣伝します。 コンテキストをどのように共有するか 構造化ロギングの実装における主要な関心事は、複数のログでどのようにメタデータを共有するかです。ログに付与するメタデータは、1つのログだけでなく、複数のログにまたがって付与されることが多いでしょう。例えば、リクエストを送ってき

ServerlessDays Tokyo 2024 PreEvent 2024-09-21のServerlessDays Tokyo 2024にむけて、去年に引き続き、直前イベントでサーバーレス技術の今と未来について話してきました。 いよいよ明日からメインイベントですので参加お待ちしています！ Serverless Update 2024 文字起こし スライド全体はDocswellさんで公開しています。 PreEventはYouTubeでアーカイブがあります。 サーバーレスのおさらい 「サーバーレス」は、誤解を招きやすい技術用語で様々な定義がありますが、ここでは2つの視点で定義します。 運用者の視点としてのサーバーレスは、物理的なマシンや仮想マシン、EC2インスタンスのような「サーバー」を自分で管理するのではなく、その管理をクラウド事業者に任せるという考え方で、要するに完全従量課金型のフル

最初にまとめ 現在のTypeScript（2024-09-19時点のバージョン5.6.2）では Generics と Control Flow Analysis は、いい感じには連携しないということを学んだ。 どういうこと？その１ Genericsを使って型安全にやりたいなぁと思って、こんなコードを書いてみてもコンパイルエラーになる。 type Mapping = { a: boolean, b: string, } function getValue<K extends "a" | "b">(key: K): Mapping[K] { if (key === "a") { return true; } return "foo"; } このコードでやりたいのは「パラメータとして"a"を渡すとboolean型の値を、"b"を渡すとstring型の値を返す」ということ。key === "a"の

Generate your next app with Llama 3.1 405B

JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア

はじめに こんにちは！ソフトウェアエンジニアの種岡です。 皆さん、システム設計に取り組んでいますか？ 設計は、プロジェクト成功への道筋を描く、航海の羅針盤です。 目的地を見据え、それに向かって進むための確かな指針となります。 設計の質がしっかりしていれば、開発という大海原でも迷わず進むことができます。 設計はプロジェクトの土台を築く、創造的かつ重要なプロセスです。 夢を描き、それを形にする試行錯誤の楽しさ、これこそが設計の魅力だと思います。 この記事は秋の技術特集 2024の11記事目です。 この記事 is 何？ この記事では、設計図を描く際の心構えと、誰でも見やすい設計図を作成するためのテクニックについてお話しします。 なぜ設計図を書くのか？ 図は複雑な情報を視覚的に整理し直感的な理解を推進することができるため チーム内外での共通理解を促進し、コミュニケーションを円滑にするため 予測可能

Go言語で、AIモデルに対する推論をコマンドラインで実行するafaというツールを作りました。入出力としてテキストストリームを前提としており、パイプやリダイレクトを用いて他のコマンドと連携しやすいのが特徴です。 $ echo $ERROR_MESSAGE | afa new -p "What is happening?" /path/to/file1 /path/to/file2 与えるプロンプトやコンテキスト情報によってAIモデルが柔軟に振る舞いを変えてくれるので、これまでの個別ツールでは対応が難しかった用途における自動化にも有用でしょう。 また、テキストストリームを扱えるリッチなTUIのコマンドafa-tuiも別途提供しているので、ターミナル上でのチャットも快適です。 デモ リッチTUIによるチャット 快適なインタラクティブチャットのため、Markdownを装飾して描画しつつ、lessコ

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素です。 デザイントークンについて詳しく知りたい方はAdobe Blogに掲載されている以下の記事が参考になります。 デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 今回は、Figmaのプラグイン「Tokens Studio for Figma」（デザイントークン管理ツール）の基本編について書いてみたいと思います。本記事は、2024年8月時点の無料版に基づいたレビューです。 tokens studio公式サイト トークンの作成・定義 Primiti

この本の概要 GitHub CopilotやChatGPTなど生成AIによるコード生成やコードリーデイング支援が流行っています。これらは破壊的なイノベーションで，いずれはすべての開発者や企業が導入するものです。 ただ，現状では生成AI×コードを推進・導入している企業は多くはなく，さらに活用法については手探りの状況です。 本書では生成AI×コードでなにができるか，どうすればよりよく活用できるかを解説します。しっかりと活用していくための知識と，現場で活用できる実践が身に付く必携の一冊です。 本書のサンプル 本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。 1. 生成AIがエンジニアリングの常識を変える 1. 変化は「今」起こっている — さて，どうする？ 2. 生成AIへの過度な期待と現実のギャップ 3. プロンプトエンジニアリングのテクニックはあま

Michael Z Posted on Oct 3, 2019 • Updated on Jan 9, 2022 • Originally published at michaelzanggl.com Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content. There is a convention to prefix boolean variables and function names with "is" or "has". You know, something like isLoggedIn, hasAccess or things like that. But throughout my career I have seen and

GEAR.indigoとは？ 開発ドキュメント&ソースコード生成ツールである。 GEAR.indigoのポジションは完全に自動生成を目的としたものではなく、開発の各プロセスにおいて必要なドキュメントを生成し、場合によっては人が修正し、変更を管理した上で、アプリケーションの実装を実現している。 完全なブラックボックスでアプリが出来上がる系のソリューションとは少し異なり、かっちりとしたエンタープライズの開発や人によるプロセスが多く存在している企業へのフィットも狙っているポジションであると感じた。 GEAR.indigoのリンク 早速使ってみる Google loginで簡単にアカウント作成ができる。 執筆時点ではログインすると20クレジットが付与されたため、こちらで機能を確認していく。 プロジェクト作成 右上からプロジェクトを作成する。 今回はレストランのメニューを開発を支援することを目的とし

はじめに UIを設計するときにオブジェクト指向UIは大きな効果を発揮することがあります。一方で、オブジェクト指向UIの考えをそのまま適用できないけれども、タスク指向UIと呼ぶのも微妙な画面があります。 例えば、ECサイトの購入プロセスです。よくあるECサイトの購入プロセスは以下の図のような構成です。これだけだと簡単そうですが、実際のECサイトの購入プロセスはある画面をスキップしたりしなかったりという制御があり、なかなかに複雑なものです。 今回の記事は画面遷移に順序があるがタスク指向UIと呼ぶのも微妙な、複雑な画面遷移を持つ画面にオブジェクト指向UIの考えを導入することで画面遷移制御を簡単にする手法を提案します。 対象読者 画面遷移の制御の保守性を向上させたいITエンジニア この記事の概要 複雑な画面遷移を持つUIに対して、オブジェクト指向UIの考え方を導入することで、制御フローをシンプルに

書籍『関数型ドメインモデリング』や、原著者のサイト https://fsharpforfunandprofit.com/ に書いてある内容の紹介です。 2024/09/07 Learn Languages 2024 https://event.ospn.jp/odc2024/session/…

はじめに ソースコードをLLMに読んでもらうとき、単一ファイルだと楽なのですが、GitHubのリポジトリのように複数ファイルから構成されるプロジェクトだと困ってしまいますね。 リポジトリごとLLMに読んでもらえるようにいい感じにテキスト化できると良いですね。そんなソフトがありました。しかも2つ。 両方ともほとんどコンセプトは同じです。特に後者のgenerate-project-summaryは使い方も含めて、自分のやりたいことが、すでに開発者の清水れみおさんが以下の記事にまとめていました。 なので、あんまり書く必要ないのですが、せっかくなのでgpt-repository-loaderの使い方と、出力したファイルの別の活用方法について書いてみたいと思います。 gpt-repository-loaderでリポジトリをテキストに変換 使い方はREADMEに書いてあります。シンプルなソフトなので、

Docker社は、WindowsやMac、Linuxに手軽にDockerコンテナ環境を導入し利用できるソフトウェアであるDocker Desktopの最新版「Docker Desktop 4.34」正式版のリリースを発表しました。 Docker Desktop 4.34では、Docker Dekstop内のコンテナに「localhost」でアクセス可能にする設定やWSL2を利用していてオブジェクトが削除された場合、自動的にストレージ領域が解放される新機能などが追加されています。 localhostでコンテナ内のサービスに接続可能に Docker Dekstop内のコンテナに「localhost」でアクセス可能な設定があらたに追加されました。下記は「Docker Desktop 4.34: MSI Installer GA, Upgraded Host Networking, and Pow

勉強や仕事などで解決策が見つからずに行き詰まった際に「一晩寝たら解決策が思い浮かんだ」という経験をしたことがある人は多いはず。一晩眠るとアイデアが思いつく現象には睡眠中の脳の記憶整理機能が関係しているとされているのですが、新たにイェール大学の研究チームによって記憶整理機能のメカニズムの一端が解明されました。 Nested compressed co-representations of multiple sequential experiences during sleep | Nature Neuroscience https://www.nature.com/articles/s41593-024-01703-6 Sleep on it: How the brain processes many experiences — even when ‘offline’ | YaleNews

ITエンジニアがLLMベースの生成AIを使いこなせるようになることを目指した本です。 まずはLLMの仕組みの理解してメンタルモデルを構築し、次に代表的なプロンプトエンジニアリング手法を学ぶことで基礎を固めます。 最後に、ITエンジニアならではのプロンプトテクニックを紹介しますので、応用力を身につけましょう。

こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previewの内部構成 ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにする ウィンドウを表示する ウィンドウのリサイズに対応する ダイアログを自動で閉じない できなかったこと アプリ