プログラマ視点での生成AIとの付き合い方
プログラミングについて、最近考えてることについてのポエム。 基本的に、 GPT-4 と Claude-3-Opus を使った経験を念頭に置いて話をする。機械学習エンジニアではないので、あくまで利用者に徹した視点での話。仕事で生成AIを使ったパイプラインを作ったりはしている。 生成AIの進化速度を予測しておく 今大事なことは、今AIがどの程度の性能かという定点の話ではなく、その進化の速度を認識すること。 コード生成というタスクにおいて、生成AIモデルを人間に当てはめると、こんな感じの人物像を自分は持っている。 GPT-4: プログラミング経験2年目の大学2年生 Claude-3-Opus: プログラミング経験3年目の大学3年生 ここでいうn年目は、業務経験ではなく、プログラミングの単位がある大学での、教育課程としての経験年数。今のひたすら学習量を増やす方式だと、単に1年に1年分ぐらい賢くなっ
WebAssembly は次世代のコンテナ技術になれるか？
色々あって WebAssembly の component model を調べていたら、未来が見えた気がしたのでここに書いておきます。 「今の WebAssembly」 とは何か WebAssembly の Web の部分は忘れてください。これは単に JVM version 20xx です。ポータブルなバイナリ仕様です。 実行にあたっては今はホスト言語として JS が使われていますが、実際にはホストがJSである必要すらなく、なんならホストが不要なスタンドアロン環境すらあります。(wasmtime/wasmer) じゃあ WebAssembly は何かというと、サンドボックスで実行される VM の仕様です。比較的高水準なバイナリで、 V8 や Spider Monkey に付属する WebAssembly Runtime や、 Wasmtime や Wasmer といった WebAssemb
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
MoonBit が WebAssembly 時代の理想(の原型)だった
最近 moonbit という言語を知ったのですが、これが調べれば調べるほど好きになる言語だったので、紹介させてください。 文法的には GC 付きの Rust で、 WebAssembly にコンパイルされます。とくに CDN Edge Worker 上での実行を想定しているようです。もう好き。 注意: まだ若い言語なので、これから言語仕様がガンガン変わっていくと思われます。あくまで現時点での情報です。 tl;dr Pros だいたい GC あり Rust と捉えていい 文法面のキャッチアップが容易 ライフタイムの難しさを考えなくていい すでに vscode 拡張やパッケージマネージャ等のエコシステムが整っている Cons まだ安定していない / しばらくはソースコードが公開されない 現時点では学習リソースやパッケージ数が足りず、書き手の腕力が求められる はじめに: JS/TS/Rust へ
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
「理論上は最強」の Qwik/QwikCity を、フロントエンドの共通基盤にできないか
Qwik をマイクロフロントエンド基盤として使えないか検討していて思いついた色々。副産物で色々作った。 tl;dr Qwik は理論上は最強。だが難しい qwik-react を使えば選択的に Qwik/React を切り替えられるので、 Astro と同じメタフレームワークとして使えそう React 以外もその気になれば対応できるはず => qwik-svelte と qwik-vue を実装した 最終的な問題は Qwik が流行るかどうか Qwik/QwikCity とは何か Qwik は SSR First なUIライブラリで、 .tsx の React 方言からコンポーネントを生成する。 import { component$, useSignal } from '@builder.io/qwik'; export default component$(() => { return
フロントエンドの main() を合成関数として副作用を集約する
これは未実装のアイデアを含む記事です。(後述する lint rule が未実装です) 要は EffectSystem を作ろうとしました。 https://www.eff-lang.org/ void に意味を込めたい こういうフロントエンドのコードについて考えてみましょう。 function mount(): void { const div = document.createElement('div'); div.textContent = "hello"; document.body.append(div); } function print(): void { console.log("hello"); } function maybeError(): void { // 低確率で例外が起こる関数 if (Math.random() > 0.999) { throw new Err
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid
WebAssembly の GC Proposal とは何か / どこに向かおうとしてるのか
最初に これは WebAssembly に GC が導入されるから紹介、という記事ではない。どちらかというと、WebAssembly GC の採用がどれだけ遠く、また GC がのればどんな言語でも wasm のコンパイルサイズが減って軽量になる、という夢を見ている人に、現実を見てもらうための記事になる。 WebAssembly GC Proposal (Team)は、それを実現するパーツを分割して仕様策定を進めていて、実際に GC が動き出すまでには数年かかるだろうし、自分の感覚的に、将来的に GC が採用されるかは五分五分といったところ。 ただ、 GC Proposal から派生した仕様郡は GC が採用されなかったとしても有意義なものばかりなので、本記事ではそれを紹介したい。 基本的にここを参照 Excuse 自分は低レベルプログラミングの経験が浅く、WebAssembly のために関
vite と single-spa で作るマイクロフロントエンド基盤
超巨大フロントエンドを分割する基盤を作ろうとしたものの紹介します。 この記事の前提 巨大フロントエンドを分割統治したい SSR は考えない モダンブラウザのみ対応する(IE11 非対応) この記事では single-spa とマイクロフロントエンドの紹介はしません。こちらの記事を読んでください。 マイクロフロントエンド入門 single-spa でマイクロフロントエンドを検証する - mizdev single-spa はアプリケーションのライフサイクルに簡単な規約を導入するもので、おそらく一番使われてるものです。これを基本的に vite と組み合わせて各アプリケーションを構成しますが、 webpack でも同様のことは可能です。 動いてるもの デモ ここで実現したこと 共通ヘッダ 異なる環境でビルドされたコンテンツをルーティングごとに切り替える react-router のアプリと vu
webcontainer とは
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
Swdev: 真の No bundle frontend
みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか？ しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
