サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
lealog.hateblo.jp
2023年7月版ってことで。 About Service bindings · Cloudflare Workers docs これなに とあるWorkerから、別のWorkerを呼び出せる仕組み。 前にも書いてるけど、デプロイしたWorkerAから別のWorkerBを呼びたいときがあったとしても、HTTP経由でさえそれができない場合があった。 Cloudflare Workersで、Workerから別のWorkerを呼びたい - console.lealog(); 複数のWorkerでマイクロサービス的な構成をしたい場合にもれなく不便やったけど、それができるようになる。 加えて、HTTP(インターネット)経由じゃなく、Cloudflare内の特別な経路を通るため、パフォーマンスも安定するよって触れ込み。 KVや他のバインディングと同じように登録しておくと、さもそこにWorkerがあるかの
端的にいうと、 フロントエンドはSvelteKitやらモダンなやつで組んで Cloudflare Pagesにデプロイしたい そしてKVやD1やらも使いたいし ローカルでも実際の値を参照して開発したい つまり、サーバーレンダリングやAPIルートを実装するときに、既存のスタックに保存してある値を使いたいという話。 個人的にはあるあるのケースで、あらゆるものをCloudflareのエッジで完結させる未来を待つなら、なおさら。 ローカルから実際のKVやD1にアクセスするには 現状、これをやるには2通りの方法しかない。 REST API `wrangler dev --remote` まず前者。これはいわずもがな、HTTP経由でアクセスできる。 ただ、Cloudflare Pagesにデプロイするなら、Workersで動作するコードからアクセスするなら、あえて1クッションはさむ理由はなさそう。 つ
今年も祭りの季節がやってきましたね。 Developer Week 2023 | Cloudflare というわけで、今年も個人的に気になったものを。 (発表されるのがだいたいJST深夜かつ最後が金曜日なので、どうやっても公開するの週明けになるんよな・・) Introducing Constellation, bringing AI to the Cloudflare stack https://blog.cloudflare.com/introducing-constellation/ Workersで機械学習のモデルが動かせるようになったとのこと プライベートβ サポートされているランタイムで動作するモデルであれば、自作のものでも、用意されてるものでもOK 現状はONNX形式のみ対応 https://github.com/onnx/models https://github.com/d
まとめプレイリストが公開されてたので、その中から気になったやつを流し見した。 https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h What's new in Web https://www.youtube.com/watch?v=x9rh0Du4Czg ブラウザで使える最新機能のご紹介 `dialog`要素はいいぞ `showModal()`のほう フォーカスやタブ管理までブラウザがやってくれるし、スタッキングコンテキストも安心 CSS transform `transform: scale(1)`を`scale: 1`って書けるように 複数の組み合わせでもコードがごちゃつかない 新しいCSSの単位 `lv(h|w|min|max)`、`sv(h|w|min|max)`、`dv(h|w|min|m
3月くらいにもなんか発表されてた気がするけど、結局いまどういう状態やっけ?って思ったので、思い出しついでにまとめる。 Node.js compatibility for Cloudflare Workers – starting with Async Context Tracking, EventEmitter, Buffer, assert, and util 2パターンある 最初はよくわからなかったけど、どうやら、 `nodejs_compat` `node_compat` という2つのフラグが存在してる。最初はフラグ名くらい統一しろよ・・って思ってしまったけど、これらは別のやつ。 ちなみに、`node_compat`のほうはLegacy扱いらしく、これらを併用することはできなそう。 nodejs_compat Node.jsのAPIの一部を、CFWのランタイムでも動かせるようになるフ
https://platform.openai.com/docs/guides/embeddings Embeddingsとは、テキストの類似性や関連性を、画一的なベクトルで表現することらしい。 それによってテキストの種類を分類したり、検索したり、いわゆるレコメンドに使えたりする。 今回は、このブログ記事をベクトル化して、それに対する全文検索を簡単にできる範囲でやってみた。 このドキュメントのユースケースでいうところの、Text search using embeddingsってやつ。 Step1. ブログ記事のエクスポート はてなブログには記事のエクスポート機能があって、懐かしのMovable typeフォーマットで吐き出せるようになってる。 が、結局それは使わなかった。 吐き出された記事データが、はてな記法やMarkdownではなく、変換後のHTMLだった そもそもちゃんとしたものを作
Server-Sent Events・・・お前・・・生きていたのか・・・! っていう気持ちになったので、ちょっとだけまとめておく。 OpenAI API 話題のChatGPTはAPIが公開されていて、それぞれの言語のライブラリだったりREST APIだったりから利用できる。 それを使ってチャットを実装する場合に、本家GUIみたく、レスポンスを一気にまとめてではなくちょっとずつ返ってくるようにしたいとする。 そこで、あの挙動はどうやって実現するのか?ってなった人も多いはず。 あのレスポンスをちょっとずつ、ストリーミングで返してもらう挙動を実現するためには、`stream: true`というオプションを指定する。 これはREST APIをJavaScriptから利用する場合の指定。 const res = await fetch("https://api.openai.com/v1/chat/
したいよね? 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-JSやら手法はいろいろあれど、どれが今の推しかっていう。 求めるもの 個人的に、CSSつまりはブラウザで表示されるUIをスタイリングするためのツールセットに求めるもの。 0ランタイムである 最終的に`.css`ファイルとしてブラウザで読み込まれる なんでもJSにしない CSSの書き味を損なわない だいたいのCSSセレクタが問題・制約なく動作する マークアップ部と1ファイルにコロケーションできる HTMLとCSSは同居させたい 非同期にロードできる JSと同
なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・?って思ったのがきっかけ。 こういうこと たとえば、こういうディレクトリ構成でコンポーネントを書いてたとする。 - components - action-buttons - index.jsx - styles.module.css - page.jsxコンポーネントの実装はこのように。 // index.jsx import styles from "./styles.module.css"; export const ButtonA = () => <button class={styles.buttonA}>A</button> export const ButtonB = () => <button class={styles.buttonB}>B</button> expor
我ながらニッチなことをやろうとしてるなって思う・・。 普通の生活をしてる分には、活躍する出番はないはず。`eval()`はもっと使わない。 new Function() const fn = new Function("a", "b", "return a + b"); console.log(fn(2, 6)); という使い方ができる。 ユーザーからコードみたいな文字列を受け取って実行させたいが、`eval()`ほど無秩序にはしたくない時に使う。 `Function`コンストラクタはグローバルに生えてるけど、これで非同期な処理をしたい場合は? new AsyncFunction() ってしたいけど、そんなものはグローバルに生えてないのでできない。 が、自作すればよいらしい。 AsyncFunction - JavaScript | MDN こんな感じに。 const AsyncFunct
もとい、Svelte(Kit)なプロジェクトを、Qwik(City)で書き直してみての学び。 待望のやつではあるが、端切れの悪いタイトルなのは、移行途中でどうしようもなくハマってしまい、採用を見送ることにしたから・・😇 そういうわけなので、使い込んでみたわけでもまったくないし、最高!とか微妙・・・とかそういう判断というよか、ただの感想文って感じ。 QwikCityありき `npm create qwik`のスターターが、そもそもQwik単体ではなく、QwikCityがセットになってた。 今回はSSG/SPA用途だったので、できればQwikだけ使えればいいかなーと思ってたけどそんな選択肢はなかった。こういうメタフレームワークはSSRが前提になってたりすることが多くて、SSRなコンテキストを回避するコードを書きたくないし、挙動としても囚われたくなかったのに・・。 あとはコードベースもType
移行しようと思ってしたというより、なりゆきでそうなっただけではあるけど。 が、結論としてはもっと早く移行すりゃよかった!というくらいに、Neovimいいやん!ってなってる。 ことの経緯 `coc.nvim`やめるってよ もともとエディタはノーマルVimをターミナル内で使ってた みんなVSCodeな中、やや疎外感を感じながらも LSPまわりは`coc.nvim`を使ってて、特に不満はなかった が、ある日。 手元のNode.jsのバージョンを最新のLTSにあげたら、Svelteのエクステンションである`coc-svelte`が動かなくなった。 どうやら既知のIssueらしく、リポジトリにもPRが立ってた。 Fix coc-svelte not working with Node v18 by rudolfs · Pull Request #60 · coc-extensions/coc-sve
個人的なやつなので、すべての案件にハマるわけではないはず。 今回はたまたまAstroを選んでるけど、他のものを使ってSSGする場合にも、ある程度は当てはまる内容かと。 データの取得コマンドとSSGのコマンドを分ける ビルドコマンドを叩いた時に、 SSGのフローの一貫としてデータを`fetch()`し、それを使ってページ生成 というのではなく、 データを取得し、ローカルにキャッシュするコマンド そのキャッシュを使って、SSGでページ生成するコマンド という2段構えにするということ。 こうすることで、ローカルでの開発時にネットワーキングしなくて済む。 データ取得のコマンドを賢く作れば、毎回一括ダウンロードもしなくてよくなるし。 アーキテクチャにSSGを採用した場合、遅かれ早かれCMSからすべてのデータを引っこ抜くことになるので、そこだけを個別に最適化できるようにしたほうが絶対に幸せになれる。C
Cloudflare WorkersのD1といえば、APIとして立てたWorkerの内部で操作するのがまぁ一般的なはず。 ただ、D1はSQLiteなので、その裏にいるDBファイルを持ち回すこともできるんでは?っていう。 ダンプする なんとそれ用のAPIが用意されてる! https://developers.cloudflare.com/d1/platform/client-api/#await-dbdump というわけで、こういうコードをWorkerで実装すればよい。 export default { async fetch(_req, env, _ctx) { const db = env.DB; const arrayBuffer = await db.dump(); return new Response(arrayBuffer, { headers: { "Content-Type
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき!」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い!とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。(もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし) 原初の時代からReactな案件をそれ
Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・! まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか
https://www.solidjs.com ずっと調べたいものリストにはあったやつで、Astro熱がちょっと収まったのでこのタイミング。 めちゃめちゃ雑にまとめると、React + MobX feat. Svelteって感じのUIフレームワークです。(つまり好みは分かれるであろう) Solidとは 基本はReactライクな書き味 JSXでコンポーネントを書く、Propsでデータを単方向に流す もちろん細かい挙動に差異はあるし、互換性はない `Suspense`とか`Portal`とか`ErrorBoundary`とかもある MobXライクなリアクティブの仕組みがビルトインされてる Propsが自動でProxyされてるイメージ 依存配列なしに、状態を読み取ったコンポーネント・関数だけが更新できたり ストア(ちょっと大きめの状態用)関連のコードもある Svelteと同様に、コンパイルして最
初手からREPLがついてたりと、なかなか洗練されてそう・・ってのが第一印象。 What is Edge Runtime | Edge Runtime あとは`cloudflare/miniflare`のコードを読んだ身として、どういう実装になってるんやろ?ってのも気になったので。やはりNode.jsの`vm`を使ってるのか、はたまた未知のテクノロジーか・・・! 読んだのは最新の・・というか、いま時点ではまだ1コミットしかなかった。 https://github.com/vercel/edge-runtime/commit/0b11a95e2f470d278db27982e4905febc6ac9bb7 リポジトリの構成 モノレポ。 . └── packages ├── format ├── jest-environment ├── primitives ├── runtime ├── ty
HTMLファイルをパースして、 特定の文字列を抜き出したり 特定の属性を書き換えたものを書き出したり ってことをやりたい時、今までは`cheerio`を使うことが個人的には多かった。 GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of core jQuery designed specifically for the server. 懐かしい`jQuery`的な記法で操作できる・・とはいえ、もはや`jQuery`のことぜんぜん覚えてなくて、生DOMのAPIばっか使っちゃったり。 かといって、`cheerio`が内部で使ってるHTMLのASTパーサーである`parse5`や`htmlparser2`をそのまま使うのは、ローレベルすぎて乗り気じゃなかったり。 というところで、なんか代用できるものはないかな
っていうコードが公式のリポジトリにあって、なかなか読み応えのあるコードだったので記事に。 GitHub - cloudflare/workers-chat-demo はじめに Cloudflare Workersは、 CDNのエッジで動かせるWorker ServiveWorkerみたいなコードを書く Node.jsが動くわけではなく、プロトコルもHTTPしか話せない ただ、HTTPが話せるならWebSocketが使えるのでは?って気付いてコード漁ってたら、ドンピシャなコードを見つけたという。 本旨としてはDurable Objectsのデモだけれども、他にもいろいろ気になる感じだったので、ちゃんと読んでみたらいろいろと発見があった。 Durable Objectsとは 端的にいうと、Workerから参照できる共通の状態。 WorkerAからもWorkerBからも同じ参照にアクセスできるの
Platform Week - The Cloudflare Blog この中から、個人的に気になったものたちをさっくりまとめ。つまりWorkersとかPagesとかに関連するものが多く、それ以外のStreamingとかWeb3系はスルーしてる。 The next chapter for Cloudflare Workers: open source The next chapter for Cloudflare Workers: open source CFWのランタイムのソースコードをオープンソースにするっていう発表 現時点でコードが見れるわけではなさそう これで`miniflare`と実環境の境界もなくせるねって言ってた https://twitter.com/_mrbbot/status/1523652262115278848 がんばれ〜 コードとして公開されたとして、誰しもが簡単
GitHub - withastro/astro: Build fast websites, faster. 🚀🧑🚀✨ 読みはじめた時点でのコミットは`21926278ba664d8362694efe51943968dfcb4b26`で、バージョンでいうと`1.0.0-beta.9`です。(めちゃめちゃ頻繁に更新されるので、今はもう最新ではないはず) はじめに 最近のAstroですが、順調にメジャーリリースを目指して開発中です。 the official Astro v1.0.0 release will be available on June 8, 2022. https://astro.build/blog/astro-1-beta-release/ という感じなので、コードを読むのにも丁度いいかなと。 もちろんバグやら挙動不審なところは散見されるものの、Partial Hy
なんとなく察しはついてるけど、いちおう確かめておこうかと。 GitHub - leader22/workers-benchmark 詳細はこのリポジトリに。 Rustで書くには ドキュメントなどあらゆる情報は、Cloudflare公式のこのリポジトリにある内容がすべて。 GitHub - cloudflare/workers-rs: Write Cloudflare Workers in 100% Rust via WebAssembly Workerグローバルのコードがそれ用のcrateになってて、それを使ってRustでコードを書く。RequestやらKVやらだけでなく、いわゆるRouterやちょっとした便利関数まで実装されてた。 READMEにあるコード例をそのまま貼るとこんな雰囲気で。 use worker::*; #[event(fetch)] pub async fn main(
2022年現在に、Cloudflare Workersで(CDNエッジでWorkerで)SSRする方法は2つある。 Cloudflare Pages(w/ Functions) Cloudflare Workers(w/ Workers Sites) 静的サイトホスティングサービスであるPages + Functionsで動的な部分を追加するというアプローチか、動的なWorkers + 静的なアセットを配信するためのWorkers Sitesという機能を使うかの2択。 で、この記事で調べたいのは、どっちのアプローチでもいいけどこの動的な部分でいわゆるSSRができるフレームワークたち。 誰だってある日突然、エッジでSSRしたい気持ちに駆られることってあるじゃないですか。というわけで、独断と偏見で調べたものをまとめた。 SvelteKit Repo: https://github.com/sv
GitHub - BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思ってたやつ。 昨今の覇権を握ってる系のJavaScript-firstなフレームワークたちとは違い、HTML-firstを謳うユニークなアプローチをしてるのが一番の特徴。 中の人による一連のシリーズもあって、そこも読んでまとめてみた記事です。 Qwik Series' Articles - DEV Community Qwikの特徴 遅いモバイル環境だとしても、
子育てしてたら一日が終わってて、それを続けてたら一年が終わってた、そんな一年。 おかげさまで、👼🏻は1歳半の元気ざかりで何よりではある・・が、思ってたより大変すぎる!いやほんとまじで( やってたこと 脱SPA、からのMPA、からの・・・ なんでもSPAにするんじゃねぇ!という主張のその先 - console.lealog(); 「とりあえずReactでNext.jsでSPAでよろしく!」みたいにやってくる案件を、「ほんとにSPAにする必要あんのけ?😒」って切り捨てる係をやってた。 もちろん、ほとんどのケースにおいてSPAである必要はなかった。 ただし巨SPAではなくても、 いくつかのページは、SPAでやるべき多機能さ いくつかのページは、SPAでなくていいけど、ちょっとだけJSほしい いくつかのページは、完全に静的でいい みたいな複合ケースがほとんど。で、それをいい感じにまとめてやる
公私問わず`mediasoup`をここ半年くらいずっと触ってて、ドキュメントだけでなく中のコードもそれなりに読み通してる身として。 mediasoupとは mediasoup OSSで公開されてる、Node.jsから利用できるWebRTCのSFUです。 SFUを簡単に説明すると、WebRTCの接続をクライアント同士で行うのではなく、共通のサーバーでリレーさせて実現する仕組み。 サーバーにだけ送信すれば良いのでクライアント側の負荷も下がる クライアントは受け取りたいメディアだけを選択して受け取れる サーバー側で録音したりメディアの二次加工ができる などなど、トポロジとしてのP2Pが必要でないなら、WebRTCのユースケースのほとんどはSFUありきなのでは?と思ったりもする・・。 もちろん片手で数えられるくらいの人数がビデオチャットするくらいなら、SFUなしでもやれんことはないけど。 コードと
なんだかんだここ半年くらいずっとCloudflare Workersを触ってます。 で、CDNエッジでコードが動くことはわかった。制約があることも、それなりに速いこともわかった。 で、これをどう扱っていくのが人類にとって良いんかな〜?みたいなことをずっと考えてた折に、VercelやらRemixが「これからはエッジだ!」(意訳)みたいなメッセージを出してて、ふふ〜んってなった今日このごろ。 We believe the modern Web is at the Edge and embraces the open Web platform. https://vercel.com/blog/vercel-funding-series-d-and-valuation We leveraged distributed systems at the edge instead of static bu
Cloudflare社は、定期的に「なんたらWeek」って感じでまとめてアップデートを発表する取り組みをやってるっぽく、今回のテーマはフルスタック! なんでもかんでもCloudflareでできるようにするよ!という強い意志を感じる発表たちだった。 Full Stack Week - The Cloudflare Blog 今回は実験的にTwitterでもまとめて流してたけど、やっぱりブログにまとめるほうがしっくりくるなってことで、改めて。 https://twitter.com/leader22/status/1460451057109127169 https://twitter.com/leader22/status/1460772775010791430 https://twitter.com/leader22/status/1461158193631936512 https://tw
次のページ
このページを最初にブックマークしてみませんか?
『console.lealog();』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く