JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
前回の、社内プライベートポッドキャスト実現方法で、ポッドキャストサイトを静的配信しつつBasic認証をかけるというアイデアを書いた。しかし、Basic認証などなかなか使わなくなり、ネイティブでサポートしている静的ホスティングサービスも少ない。今回はCloudflare PagesのFunctions機能でリクエストをラップするミドルウェアを書けば実現できることが分かり、その方式を採用することにした。多少実装必要になるのと、認証周りを自前で書くのはあまりやりたくはないが、廉価に比較的省力で実現できるので受け入れる。 ネット上にいくつかサンプルは見つかるが、今回実装するにあたっては以下の点を留意した。 コード内に認証情報を載せない 複数ユーザーのIDとパスワードを管理できるようにする パスワードは定数時間比較してタイミング攻撃を防ぐ これらを以下のように解決することとした。 認証情報は環境変数
目的別データベースの実践: PostgreSQL 行レベルセキュリティと DynamoDB Outboxパターン - KAKEHASHI Tech Blog
カケハシのプラットフォームチームのテックリードとして組織管理サービスと認証基盤を開発している kosui (id:kosui_me) です。今回は、目的別データベースをプラットフォームチームではどのように実践しているかご紹介します。 この記事は秋の技術特集 2024の 13 記事目です。 背景 目的 事例1: PostgreSQL の行レベルセキュリティを活用する組織管理サービス 組織管理サービスとは PostgreSQL の行レベルセキュリティ 行レベルセキュリティを用いたトランザクションマネージャー 行レベルセキュリティの運用上の注意点 事例2: DynamoDB を活用する認証基盤と Outbox パターンの活用 カケハシの認証基盤刷新 DynamoDB で実現する高稼働率の認証基盤 DynamoDB の特性を考慮する CDC と Outbox パターン まとめ 背景 医療の分野で様
Llama 3.2 の使い方｜npaka
以下の記事が面白かったので、簡単にまとめました。 ・Llama can now see and run on your device - welcome Llama 3.2 1. Llama 3.2 Vision 11B・90B1-1. Llama 3.2 Vision 11B・90B「Llama 3.2 Vision 11B・90B」は、Metaがリリースした最も強力なオープンマルチモーダルモデルです。画像+テキストのプロンプトでは英語のみ、テキストのみのプロンプトでは英語、ドイツ語、フランス語、イタリア語、ポルトガル語、ヒンディー語、スペイン語、タイ語をサポートしています。 コンテキスト長は128kトークンで、画像を含む可能性のある複数ターンの会話が可能です。ただし、モデルは単一の画像に注目する場合に最適に機能するため、transformers実装では入力で提供された最後の画像のみに注
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
プログラミング練習用のタイピングゲームを作った話。エンジニアなら4000点を超えたい！ - Qiita
はじめに 少しキャッチーなタイトルにしました。すみません。 あくまで、お遊び程度として是非タイピングゲームを楽しんで頂ければと思います。 以下のプログラミング練習用のタイピングゲームを作成しました。 結構面白いです。ハマります。是非、一度プレイしてみて下さい。 4000 点を超えると、結構凄いです。 目指すべきスコア こちらのプログラミング練習用のタイピングゲームで、目標にすべきスコアを簡単にまとめました。社内で色々遊んでみて、大体こんな感じかなー、という感じで適当に書いてます。 8000 点以上 まだ誰も到達したことが無い未踏の地。自分はたどり着ける気がしません。 7000 点以上 かなりタイピングが速い人。寿司打で 20000 点以上は軽く出せる人が到達できるスコアです。 6000 点以上 寿司打で 20000 点を稀に超える人が到達できるスコア。 5000 点以上 タイピングのかなり
以下の記事が面白かったので、簡単にまとめました。 ・Realtime API 1. Realtime API「Realtime API」は、低遅延なマルチモーダル会話エクスペリエンスを構築するためのAPIです。現在、入出力の両方でテキスト・音声がサポートされており、Function Calling を利用することもできます。 特徴は次のとおりです。 ・ネイティブな音声合成 低遅延でニュアンスに富んだ出力が得られる ・自然で操作可能な音声 自然な抑揚を持ち、笑ったり、ささやいたり、トーンの指示に従うことができる ・同時マルチモーダル出力 テキストはモデレーションに役立ち、オーディオにより安定した再生が保証される 2. クイックスタート「Realtime API」は、「WebSocket」を介して通信するステートフルなイベントベースAPIです。 機能を紹介するデモアプリ「openai-real
Wasmでお金を稼げるプロダクトは作れるのか？ こんにちは。私は技術者としてはかなりミーハーな部類に入ります。 そんなミーハーな私は盛り上がっている分野についてはとりあえず触ってみたい欲が先行します。 ここ数年で盛り上がっている分野といえば色々とありますが、例えばWasmはソフトウェアエンジニア界隈を中心に盛り上がっている分野の一つとして数えてもよいでしょう。 私自身Webフロントエンド開発なども行っているため、分野的にもWasm、そしてWasmを活用した事例などは気になるところです。 ところでこういった気になる分野の技術については、なるべくビジネス的にも機能する形で落とし込みたいと常日頃考えています。 つまり その技術を使うことでお金を得ることができる という状況で使いたいのです。 これは私の性格的な部分が大いに影響していると思いますが、趣味的な用途でしかその技術を利用しない場合、ちょっ
しかしCompressionStreamはその名の通りWeb Stream APIなのでどう頑張っても出力は非同期です。なので関数名と引数は同じですが戻り値はPromise<string>になります。 また、アルゴリズムが違うので互換はありません。今までlz-stringで圧縮・解凍していた箇所をいきなりCompressionStream版に置き換えても機能しませんのでご注意ください。 ちなみに、lz-stringの圧縮アルゴリズムはドキュメントでLZ-basedと書かれており、おそらく作者独自のアルゴリズムです。 CompressionStreamで選択できるアルゴリズム（語弊あり）は gzip, deflate, deflate-rawです。gzipはgzipですが、deflateはzlibでdeflate-rawが純粋なdeflateです。命名については歴史的経緯があるようです。 前
Moonbit を紹介したい with syumai
YouTube Live で Moonbit を紹介したので、そこで使った資料。 ソースコード Moonbit を紹介する 今日のコンテキスト 過去に書いた記事 『RustによるWebアプリケーション開発 設計からリリース・運用まで』という本を共著で書きました Rustってバックエンド開発に向いてるの？ (中略) あまり深く考えずに字面通り答えるなら、本書を書いた以上は「向いている」と言いたいところですが、私個人としては「Rustでも実装できるし運用できる」くらいの感覚を持っています。上述した通り、現代におけるJavaやPHP、Ruby on Railsなどの立ち位置になるのはちょっと難しいのではないか？と思っています。そもそもシステムプログラミング言語ですしね。 俺「Moonbitはいいぞ」 課題感がありそうな __syumai さんを捕まえて、ペアプロしつつ紹介したい。 (でもたまにキ
福田（@JunyaFff）です。本連載Python Monthly Topicsで2024年3月に公開したRust製のPythonパッケージ管理ツール「uv」を使ってみよう で紹介した「uv」が、さらなる進化を遂げました。今回は、その新機能を紹介します。 はじめに Astral社が開発するRust製の高速なpipの代替ツール「uv」がパッケージマネージャーとして8月にアップデートされました。pipの代替ツールとしてだけでなく、Pythonプロジェクト、コマンドラインツール、単一ファイルスクリプトさらにPython自体を管理できるようになりました。uvは、pipやpipx、venv、poetryやpyenvのような機能を包括していると言え、そしてそのすべてが非常に高速に動作します。 本記事では、アップデートした「uv」の新機能を中心に紹介します。 基本的な使い方は Rust製のPythonパ
Secretlint v8.3で、単体のバイナリファイルとしてsecretlintコマンドを配布するようにしました。 Release v8.3.3 · secretlint/secretlint どういうことができるようになるかというか、Node.jsをインストールしなくてもsecretlintコマンドを使えるようになります。 次のようにCurlでダウンロードして実行するだけで、機密情報の検出ができるようになります。 #!/usr/bin/env bash set -euo pipefail SECRETLINT_VERSION="8.3.3" # secretlintのバージョン ARCH=$(uname -m) OS=$(uname -s | tr '[:upper:]' '[:lower:]') # Map architecture to the expected format ca
ようわからんかったのでメモ TL;DR Array.fromAsync()は順次実行 Promise.all()は同時実行 const sleep = delay => new Promise(resolve => setTimeout(resolve, delay)) console.time() await Array.fromAsync([200, 100, 300], sleep) console.timeEnd() // elapsed: 600ms console.time() await Promise.all([200, 100, 300].map(sleep)) console.timeEnd() // elapsed: 300ms const sleep = delay => new Promise(resolve => setTimeout(() => resolve
SREの菅原です。 カンムのサービスはWebサービス・バッチ処理なども含めて基本的にはECS上で動かしているのですが、簡単なバッチ処理はLambda+EventBridge Schedulerの組み合わせで動かすこともあります。 LambdaはECSに比べてDockerイメージのビルドやECRの準備が不要で作成の手間が少ないのですが、terraformでデプロイまで含めて管理しようとすると少し問題がありました。 terraformでのLambdaのデプロイの問題点 例えば以下のような構成のNode.jsのLambdaをデプロイする場合 / ├── lambda.tf └── lambda ├── app.js ├── package-lock.json └── package.json // app.js const util = require("util"); const gis =
はじめに forEachでawaitを使おうとしたら、エラーになり、どうやったらループでawaitを使えるか調べたので、簡単に記載します。 await とは？ awaitは非同期処理が終わるまで処理を止めておいてくれる便利なもの jsはawaitやpromiseを使わないと、処理が終わる前に他の処理を実行してしまうので、直列に処理を実行したいときなどは利用すると良い // 非同期関数 async function asyncTask(name) { console.log(`Task ${name} started.`); await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒間スリープ console.log(`Task ${name} completed.`); } // メイン処理 async function m
AWS Fargate Spot が中断されにくいのはいつ？ - Hatena Developer Blog
皆さん、AWS Fargate Spot使ってますか？ 最近Arm向けもサポートされてより活用範囲が広がっているかと思います。 さて、Fargete SpotはFargateのコンピューティングリソースの状況次第でタスクが中断される代わりに、最大通常の7割引きでタスクを実行できる機能です。 とはいえ、できることなら中断はされたくないですよね。 ここに「ある1ヶ月のFargate Spotの中断回数のグラフ」があります*1。何となく中断具合に周期性がありそうですね。 グッとにらむとこうなりました。 明らかに日曜日近辺の中断回数が少ないです。 つまり？ 中断されたくないタスクをFargate Spotで動かすには土日が狙い目です*2。 この記事は id:koudenpa が書きました。 オマケ Fargate Spotの中断回数はメトリクスとしては提供されていないため、Amazon ECS タ
vercel ai で書き捨ての Deno CLI を書き直した (OpenAI, AnthropicAI, Google Gemini)
Claude or ChatGPT + Tools やモデルの組み合わせで対応パターンが膨大で面倒だったのを、 Deno + ai-sdk(Vercel) で書き直したらだいぶ楽になった。 この辺を参照した。 OpenAI と AnthropicAI の Tools の叩き方を確認したが、 Gemini はそこを省いている。 前提 まず、 AI 周りの CLI ツールは専用の面倒臭さがあることを知っておく必要がある。 ストリーミング Tools の応答 AI 周りの応答をストリーミングするのは LLM 関係なくストリーミング処理を大量に書く必要がある。 ストリーミング処理は WebSocket や WebWorker 周りのAPIハンドルと同じノウハウが必要になる。別に難しくはないが、既存の Promise 抽象に当てはまらないので、都度考えることになり、だるい。 Tools の応答は、A
4年運用した Vue2 を幾度の挫折を乗り越えて Vue3 にアップグレードした(vite に移行した)話 #GameWith #TechWith - GameWith Developer Blog
はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js の修正 tsconfig.json の修正 index.html の修正 App.vue の修正 vue.config.js の削除、vite.config.ts の追加 補足など Vue 2.7.
昨日のCloudflareからWorkersのアップデートの中にこういうものが入っていました。 Run front-end websites — static or dynamic — directly on Cloudflare’s global network. 超意訳）静的もしくは動的なサイトをCloudflare Workersで配信できるようにします。 は？って感じですよね。静的ファイルの配信といったら、今まではCloudflare PagesかR2などを使用して配信するってのが普通でしたが、Cloudflare Workersから配信する？つまり、プログラム(JS,TS,WASM)以外の静的ファイルをCloudflare Workersのデプロイに含めることが出来るようになったということらしいのです。なのでそのアップデートを受けてRemixをCloudflare Workers
Previous slideNext slideToggle fullscreenOpen presenter view Remix は RSC にどう対応するのか @mizchi Remix Tokyo 2024/09/25 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります Remix は cloudflare-pages で動くから好き そろそろ Remix で RSC したくない？ export default async function MyPage() { const data = await fetch('/api/data') return <div>{JSON.stringify(data, null, 2)}</div> } 非同期関数コンポーネントで非同期データ解
WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
Today we are announcing the availability of TypeScript 5.7 Beta. To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta Let’s take a look at what’s new in TypeScript 5.7! Checks for Never-Initialized Variables For a long time, TypeScript has been able to catch issues when a variable has not yet been initialized in all prior branches. le
フィアット「すみませんが、間違ってました。もはや500eを買う人は誰もいません」。生産を1ヶ月停止し、BEVに加え急遽ハイブリッドを投入すると発表
小型EVの価格はプレミアムクラスに比較すると（ガソリン車に比較して）割高感が強い さて、フィアットは2024年9月13日から4週間、イタリアのトリノでのフィアット500eの生産を停止すると発表していますが、その原因は「500eの需要が特にヨーロッパで低迷したため」で、「この厳しい移行期を最善の形で乗り切るために懸命に取り組んでいる」とアナウンスしています。 なお、同社はこの1か月に及ぶ生産停止の影響を受ける従業員数を明らかにしていませんが、相当な数が影響を受けると考えてよく、現地ではかなりインパクトがある出来事だと捉えられているようですね。 フィアット「いまフィアット500を購入する人はだれもいない」 ステランティスはフォルクスワーゲンとともにEVシフトを強力に進めてきた自動車メーカーのひとつであり、特に欧州ではプジョー、シトロエン、フィアットといった普及価格帯のクルマをEVへと転換。 た
LINE MessagingAPIのリッチメニュー管理ツールの開発にHonoを採用してみました。ファイルサイズが小さくFEとBEどちらも実装できてとても満足しています こんばんは、リテールアプリ共創部のmorimorikochanです🏊♂️ 最近Honoを使ってみたのですが、最高に良かったのでみなさんにも紹介させて下さい。 何がそんなに良かったのか？ FEとBEの実装が1ツールで完結する Honoを使うことで、それなりのフロントエンドとバックエンドの実装を1つのツールで完結することができます。 これによって、従来のように"FEとBEで別々のパッケージ構成にしてFEとBEで共通で利用するロジックをsharedパッケージに切り出して..." というような構成にする必要もなく、同じパッケージで自然に管理することができます。 もちろん場合によっては前述のような構成が好まれる場合もありますが、少
pagefindは静的サイトでも手軽にサイト内検索を実現できる全文検索ライブラリーです。先日、pagefindの脆弱性が修正されましたが、DOMの古い仕組みを悪用したものでした。その内容を興味深く感じたため、この記事で紹介します。なお、紹介する攻撃手法はDOM Clobberingと呼ばれています（DOM上書きという意味です）。 この記事で紹介する脆弱性はpagefind 1.1.1で修正されています。pagefind 1.1.1未満をご利用のかたは1.1.1に更新することをおすすめします。 CVE-2024-45389: DOM clobbering could escalate to XSS 概要 修正前のpagefindを利用しているサイトでは、サイトにHTMLを書き込める場合、外部のJavaScriptを読み込まれてしまう脆弱性がありました。書き込まれたHTMLにJavaScrip
Zero-latency SQLite storage in every Durable Object2024-09-26 Traditional cloud storage is inherently slow, because it is normally accessed over a network and must carefully synchronize across many clients that could be accessing the same data. But what if we could instead put your application code deep into the storage layer, such that your code runs directly on the machine where the data is stor
ユーザー（手書き入力）を認識する | Web Platform | Chrome for Developers
手書き入力認識 API とは何ですか。 Handwriting Recognition API を使用すると、ユーザーの手書き文字（インク）をテキストに変換できます。 一部のオペレーティング システムには以前からこのような API が搭載されています。この新機能により、ウェブアプリで この機能を使用しますコンバージョンはユーザーのデバイスで直接行われ、 オフライン モードで起動できます。サードパーティのライブラリやサービスを追加する必要はありません。 この API は、いわゆる「オンライン」ほぼリアルタイムの認識ですつまり、 手書き入力をキャプチャして分析することで、ユーザーが手書き入力を できます。「オフライン」とは対照的に、光学式文字認識（OCR）などの手順を用います。 最終製品のみがわかっているため オンラインアルゴリズムは 個々のインク ストロークの時間的シーケンスや圧力などの追加
Rewriting Rust
The Rust programming language feels like a first generation product. You know what I mean. Like the first iPhone - which was amazing by the way. They made an entire operating system around multitouch. A smart phone with no keyboard. And a working web browser. Within a few months, we all realised what the iPhone really wanted to be. Only, the first generation iphone wasn't quite there. It didn't ha
GitHub - leerob/next-saas-starter: Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.
This is a starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users. Demo: https://next-saas-start.vercel.app/ Why did I make this? In 2020, I made a course called "React 2025" which showed how to build a SaaS application with Next.js, Stripe, and other tools. Well, it's almost 2025 and React
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
「Google Chrome 129」安定版リリース、長時間かかるJavaScriptタスクを中断してサイトの応答性を向上させることが可能に
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン129がリリースされました。開発者がJavaScriptの長いタスクの途中に「scheduler.yield()」を適切に配置することでサイトの応答性を向上させることが可能になったほか、「auto」「min-content」「fit-content」などサイズを明示しないキーワードを使用した場合でもアニメーションを行えるようになりました。 New in Chrome 129 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-129?hl=en New in Chrome 129: Yield long tasks, animate intrinsic sized elements, and more! -
JSer.info #708 - date-fns v4.0.0がリリースされました。 Release v4.0.0 · date-fns/date-fns v4.0 is out with first-class time zones support! date-fns v4.0.0ではTimeZoneをサポート、ESMとCJSのdual packageに変更などが行われています。 TimeZoneのサポートは今まではdate-fns-tzという外部のパッケージで提供されていましたが、v4.0.0からは@date-fns/tzというIntlをベースにした新しいパッケージが提供されるようになりました。 Deno 2.0 RCがリリースされました。 Deno 2.0 Release Candidate Deno 2.0 RCではさまざまな破壊的な変更が行われているため、マイグレーションガイド
Node.js — Node v22.9.0 (Current)
2024-09-17, Version 22.9.0 (Current), @RafaelGSS New API to retrieve execution Stack Trace A new API getCallSite has been introduced to the util module. This API allows users to retrieve the stacktrace of the current execution. Example: const util = require('node:util'); function exampleFunction() { const callSites = util.getCallSite(); console.log('Call Sites:'); callSites.forEach((callSite, inde
React のダブルクリック（多重クリック）対策一覧
概要 React アプリにおけるダブルクリック（多重クリック）対策の実装とそのデモを一覧でまとめてみました。コーディングのヒントになれば幸いです。 ※本記事で紹介する実装は React SPA アプリを想定し、ボタンに対するダブルクリックに焦点を当てています。 ダブルクリックの問題点 ダブルクリックで問題となるのがクリックアクションに紐づく API 呼び出しが複数回行われてしまうことです。 API 側で問題にならないよう設計されてれば安心ですが（トークンを利用するなど）、そうでなかったりそもそも API 側で対策すること自体が難しい場合もあるかもしれません。 今回は TODO アプリのタスク追加機能を想定します。 タスク名を入力し「追加」ボタンをクリックすると、タスクの作成処理（時間のかかる API 呼び出しを想定してください）が実行されタスクが追加されます。 ユーザーが「追加」ボタンをす
Zod + React Hook Form で動的なデータでバリデーションを実装する - asoview! Tech Blog
こんにちは。 アソビューでフロントエンドエンジニアをやっています、白井です。 今回はフロントエンドをやっていく上で避けられないものの一つである、フォームバリデーションのお話です。 フォームバリデーションライブラリの React Hook Form と、バリデーションスキーマライブラリ Zod の組み合わせは扱いやすく便利なのですが、 バリデーションで使っているデータを後から動的に変化させたいようなシーンでは一手間加える必要があったため、今回はその方法を紹介したいと思います。 やりたいこと 実装方法の検討 ① Zod のスキーマとは別にバリデーションを行う ② React Hook Form にバリデーションに必要な情報を全て持たせる ③ React Hook Form では必要最低限の情報のみを持たせ、バリデーションで利用する動的なデータを zod のスキーマに渡す 実際の使用例 動的バリ
Our container platform is in production. It has GPUs. Here’s an early look
Our container platform is in production. It has GPUs. Here’s an early look2024-09-27 We’ve been working on something new — a platform for running containers across Cloudflare’s network. We already use it in production for Workers AI, Workers Builds, Remote Browsing Isolation, and the Browser Rendering API. Today, we want to share an early look at how it’s built, why we built it, and how we use it
The Watermelon Operator
The Watermelon Operator Sep 24, 2024 In these two most excellent articles, https://without.boats/blog/let-futures-be-futures and https://without.boats/blog/futures-unordered, withoutboats introduces the concepts of “multi-task” and “intra-task” concurrency. I want to revisit this distinction — while I agree that there are different classes of patterns of concurrency here, I am not quite satisfied
import asyncio import websockets import pyaudio import numpy as np import base64 import json import wave import io import os API_KEY = os.environ.get('OPENAI_API_KEY') #わからない人は、上の行をコメントアウトして、下記のように直接API KEYを書き下してもよい #API_KEY = "sk-xxxxx" # WebSocket URLとヘッダー情報 WS_URL = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01" HEADERS = { "Authorization": "Bearer "+ API_KEY, "Open
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPT (o1-preview) にテストを渡してコードを実装させるとどうなるか試した
Rails vs Node.js
Cloudflare PagesにそれなりにちゃんとBasic認証をかける | おそらくはそれさえも平凡な日々
2024年9月 俺の eslint.config.js
OpenAI の Realtime API の使い方｜npaka
SQLite Wasm + OPFSで簡単アプリ化！ビジネスに活かすWasmとWeb技術
続・URLシェアを支える技術 CompressionStream
さらなる進化を遂げた「uv」の新機能 | gihyo.jp
BunでNode.jsのツールをSingle-file executable binaryにしてバイナリを配布する
Array.fromAsync()とPromise.all()の違い【JavaScript】 - Qiita
terrraformを使ったGoのLambdaの管理 - カンムテックブログ
forEachでawaitを使おうとしたら怒られた - Qiita
静的ファイル配信を対応したCloudflare WorkersにRemixを移行してログ出力を容易にする方法
Remix は RSC にどう対応するのか
Announcing TypeScript 5.7 Beta - TypeScript
軽いツールにHonoを使ってみたら最高だった件 | DevelopersIO
DOMの古い仕組みを悪用した脆弱性 | フロントエンドBlog | ミツエーリンクス
Zero-latency SQLite storage in every Durable Object
Rails vs Node.js
2024-09-23のJS: date-fns v.4.0.0(timezone)、Deno 2.0 RC、Safari 18.0
Open AI Realtime APIのPythonサンプルコードを作成