I am pleased to announce, with support from Miško Hevery and Ryan Carniato, my new open source project Valibot. Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi, and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression. This new approach enables unprecedented bundle size minimization throug
課題意識 特定の商品を数量を指定して購入できるECサービスのドメインモデルを表現とします。TypeScriptで構築する際に、「数量」を単にnumber型で扱うことは可能ですが、よりロバストな設計を目指す上で以下の2つの方法論があります。 Refinements(値の制約を表す): 「数量」は一般的に自然数です。1度の注文で指定できる上限を設けるビジネスルールがあると仮定します。この場合、number型に「自然数」「上限付き」の制約を加えた値として表現します。 Branded Types: (同じ構造の型を区別する): 「価格」などの他のnumber型と混同されないように、これらの数値を型レベルで区別したいです。JavaやC#に見られる公称型の概念をTypeScriptで模倣するBranded Typesのテクニックを用いることで、これらの誤った利用を型システムで防ぐことができます。 Br
概要 OpenAI の Chat Completions API に Function Calling と呼ばれる新しい機能が追加されました。これを使うと、JSON Schema で指定した型に従う JSON 文字列を GPT が返してくれます。（ただし 100% valid な JSON が返る保証は無い） 特にライブラリに頼らずに Function Calling を利用しようとすると、 JSON Schema を書く OpenAI API にリクエスト 返ってきた JSON 文字列をパースして検証する というステップが必要になって面倒ですが、Zod のスキーマさえ書けば 1, 3 の手間を省きつつ型安全に実装することができます。 目指す姿 import { z } from "zod"; // 手動でコードを書くのは関数の名前、説明文、Zod スキーマの部分だけ const func
こんにちは、エムスリーエンジニアリンググループ Unit5 (Consumer) チームの園田です。 今回は大きな実装ではなく、TypeScript のちょっとしたテクニックを Next の API ルートを題材に書いてみます。 想定読者は TypeScript 初心者の方です。TypeScript 強者の方はどうぞ温かい目で見てください。 はじめに モチベーション 実装のポイント 試行錯誤 関数で何度も囲む形式 引数指定 + オーバーロード 実際に辿った実装手順 最終的なコード Class 構文での実装 まとめ We are hiring はじめに まずは何を作ったのかご覧ください。 NextApiHandler の Factory できた メソッドチェーンで引数が増えてくやつ hono の zValidator を意識したけど、ハンドラの引数として Zod を渡すのではなくメソッドチェ
GitHub - electric-sql/pglite: Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Raspberry Pi 5に10GbE NICを乗せたやつを2台並べてiperf3で計測すると…… - あっきぃ日誌
明日はオープンソースカンファレンス 2024 Tokyo/Springです。この記事の物体を展示予定なのでお近くの方はぜひ。 event.ospn.jp OSCに10GbE NICのデモを持ち込みたい これの続き。 akkiesoft.hatenablog.jp 10GbE NICが動くことがわかったので、OSCでデモをしたら映えるかなと思い、会社からNICを借りてきました。適当に余っているIntel X520を連れ出そうとしたら、部長から「そんな古いんじゃ消費電力デカくね？YOUこれ持っていきなよ（意訳）」と、Mellanox ConnectX-4 Lxを授かりました。社内的にはもう箪笥の肥やしになっていたものですが、10GbEどころか25GbEもいけるNICです。はげしい。<写真> というわけで、これを持ち帰ってカーネルコンパイルを済ませ（mlx5_coreを有効にしました）、動作も確
大規模なコードベース向けの高速なASTツールとしてast-grepというものがある。これについての調査メモ。 主に以下の公式ドキュメントを読み進めて、利用方法、パターンやルールの詳細などについて理解を深める。 ast-grepとは 公式ドキュメントでは、コードの検索からLint、codemodに至るまでASTツールとして網羅的にカバーできるツールであることが以下のように表現されている。 Think ast-grep as an hybrid of grep, eslint and codemod. 結果に精度が求められる場面では、高速であるものの精密さに欠けるテキストベースではなく、ASTベースでの正確な解析の方が望ましいだろうけど、ASTでの記述は非常に面倒になりがちという側面がある。 その点においてast-grepは、テキストベースでのgrepではなく、ASTベースでのgrepというよ
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. #Quick Explanation The empty object type - {} - doesn't behave how you expect in TypeScript. Instead of representing an empty object, it represents any value except null and undefined. This is because TypeScript's type system is structural, not nominal. Everything except null and un
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
本連載の趣旨 本連載は、TypeScriptのアップデートを紹介する連載です。 TypeScriptは、その登場以来、順当にバージョンアップを重ね、現在（原稿執筆時点）5.2が最新となっています。各バージョンアップでは、性能改善に関するアップデートが主なものもあれば、大きな機能追加が施されたものもあります。 本連載では、これらのアップデートの内容のうち、バージョン3から5.2までに施されたものを整理し、テーマごとに紹介していきます。具体的には、以下のテーマを予定しています。 タプルに関するアップデート 型システムに関するアップデート 型の絞り込みに関するアップデート クラス構文に関するアップデート デコレータに関するアップデート 第1回目である今回は、上記テーマに含まれていないもので重要なアップデートを取り上げます。これらは、ひとつのテーマで連載1回分の内容にはならないものを、詰め合わせセ
TL;DR: JavaScriptで使われるネイティブパーサーは、言語間の余分な作業のために常に速いとは限りません。これらのオーバーヘッドを回避し、マルチコアを使うことが性能にとって重要です。 Rustは、そのパフォーマンスと安全性の特徴から、JavaScriptエコシステムの中で急速に選択肢の一つになっています。しかし、RustをJavaScriptツールに統合することは、特に効率的で移植性の高いプラグインシステムを設計する際に、固有の課題をもたらします。 「JavaScriptツールをRustで書き直すことは、広範な外部貢献を必要としない速度重視のプロジェクトにとって有利です。」 ESLintの作者であるNicholas C. Zakas Rustは、その急な学習曲線のために難しいものになりがちで、さらにコンパイルされたバイナリを異なるプラットフォームに配布することも簡単ではありません
TypeChat
TypeChat TypeChat helps get well-typed responses from language models to build pragmatic natural language interfaces. All powered through your types.
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
Fashionably flexible responsive web design (full day workshop)
GraphQLのスカラーとTypeScriptの考察
皆さんこんにちは。筆者は最近、TypeScriptからGraphQLを使用するためのコード生成ツールnitrogqlを開発しています（初手宣伝）。 直近は、GraphQLのスカラーに関する機能拡張を行っていました。この記事では、そこで得た知見と考察について共有します。 GraphQLのスカラーとは GraphQLにおけるスカラーとは、それ以上分解できないデータ型のことです。GraphQLのデータはスカラー・オブジェクト・enumに分類でき、データの末端はスカラーまたはenumになります。 GraphQL仕様では組み込みのスカラー型が定義されており、以下のものがあります。 Int Float String Boolean ID また、カスタムスカラーとして、追加のスカラー型をスキーマ上で定義することもできます。 スカラー値がサーバー・クライアント間でやり取りされるときはシリアライズする必要が
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
カリー化と部分適用
カリー化と部分適用 先日同僚にカリー化を説明する機会がありました．その際に，簡潔に説明に適した自分用の資料があるといいなと思いましたので，こちらの記事を書くことにしました． この記事ではカリー化と部分適用について解説します．歴史等には触れずにただその内容について述べます． 混同しやすいという情報があるのですが，割と違うレイヤの話なのでなぜなのかは不明ですが，関連性に関する私見も末尾に書いておきます． カリー化 カリー化 (Currying)[1]とは 複数の引数を取る関数を，単一の引数を取る関数に翻訳する手法 のことです． 簡単な例を見ます．以下のような2つの引数を持つ関数を考えます． const add = (a: number, b: number) => a + b; console.log(add(1, 3)); // 4 関数を値のように返す関数のことを高階関数と呼びます． カリ
TypeScript Compiler APIを活用してi18nの不整合をチェックする - Commune Engineer Blog
こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということも一読ください。 今回はグローバルチームでの開発の一部として、TypeScript Compiler APIを活用したi18nの不整合をチェックするツールを作成したお話をしようと思います。 背景 海外展開に向けた開発でまず思いつくのがi18n (多言語化) 対応ではないでしょうか。コミューンのプロダクトではi18nの対応が完了しており、すでに運用フェーズに入っています。 しかし、運用していく中で対訳データのキーやネームスペースの不整合に気づく仕組みがないことが課題点として挙がってきました。 i18nでは、ネーム
The video included in the slides can be accessed here https://web.archive.org/web/20230328125908/https://rome.tools/blog/2022/11/08/rome-10/
TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増えた分、「やりたいこと」に対して「どれを使うのが適切なのか」「将来的な拡張性があるのはどれか」などの選定が難しくなってきています。 本発表では、みんな大好きラズベリーパイから、Microsoftが出したDeviceScriptや、組み込みマイコンをどうやってTypeScriptで制御する際の選択肢など、IoT/ハードウェアにおけるTypeScriptの選択肢とそれぞれの違い、および実際に使う際に気をつけないといけない点などについてお話いたします。
{ "name": "lib-a", "version": "0.0.0", "type": "module", "main": "dist/index.js", "scripts": { "build": "rm -rf dist && tsc" } } この場合、lib-a の src/index.ts を変更だけしても lib-b には反映されません。なぜなら lib-b は lib-a の dist/index.js を参照しているため、build を実行して dist ディレクトリの中を更新する必要があるからです。 またこのときに tsserver の機能を使って lib-b から lib-a の参照にジャンプしても src/index.ts に飛ばないという問題点もあります。 解決策 問題の原因は依存元の lib-a の main に build によって生成されるファイルへの
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
JavaScriptのundefined判定にはいくつか記載方法がありますが、言語仕様を理解しないまま記述すると、ブラウザや開発環境によっては思わぬバグを生み出すことがあります。 この記事では、JavaScriptにおけるundefinedの判定方法を複数紹介し、ESLintのルールから適切な判定について検討してみようと思います。 ESLintとは ESLintは、JavaScriptやTypeScriptの静的コード解析ツールでです。 単純な構文エラーの検出やルールを設定することで一貫性のあるコーディングスタイルを維持しやすくなります。 JavaScriptにおけるundefinedの判定パターン JavaScriptでundefined判定をしたいとき、いくつかの書き方が考えられます。 パターンとしてはざっとこんなものでしょうか。 厳密等価演算子（===）を使用する
DXが進まない企業が抱える「ある問題」 企業が厳しい競争を勝ち残る上で、デジタル技術やツールの導入・活用はもはや不可欠だ。各種の業務効率化はもちろん、生産年齢人口の減少が続く中での従業員の確保と従業員満足度の向上、さらに事業継続性の確保など、その効果は多面的に発揮される。 しかしその一方、現場でのデジタル活用は、国内では思いのほか進んでいない現状があるようだ。日本企業のデジタル活用に関するガートナーの調査では、企業の7割が活用に「積極的」と回答する一方で、ビジネスへの貢献度では一転して「10～30％未満」、「30～50％」とする企業が多数を占める。 こうした現状について、ガートナー ディレクター・アナリストの針生恵理氏は、「中には『0～10％未満』の企業も存在します。そこから確実に言えるのは、デジタルを導入しながらも活用しきれていない企業が、DXの必要性が叫ばれる今になっても依然、高い割合
v5 で何が変わる？ 非同期状態管理ライブラリ TanStack Query の新機能と最適化 - Techtouch Developers Blog
はじめに 三行まとめ TanStack Query とは？ v5 アップデート内容の紹介 hooks のインターフェースの統一 Suspense の正式サポート v4 v5 Optimistic Update をシンプルに そもそも Optimistic Update とは？ デモアプリ Optimistic Update の実装例 v4 v5 まとめ 参考資料 はじめに こんにちは！テックタッチでフロントエンドエンジニアをしている tsune です。野球好きの自分は、この時期になるとプロ野球開幕が待ち遠しくなってきます⚾ 開幕戦のチケットも確保したので、当日は会社のメンバーと一緒に神宮球場に行く予定です🥳 この記事では 2023 年 10 月に正式リリースされた TanStack Query の v5 へのアップデート内容を紹介します！ また、その中でも Optimistic Upda
TSKaigi 2024 https://tskaigi.org/ Lightning Talk
この記事は ドワンゴ Advent Calendar 2023 の 13 日目の記事です。 自己紹介 こんにちは。バックエンドエンジニアのlenです。 現在私は社内で使用する教材入稿ツールを改修するプロジェクトに参画しており、そこではバックエンドの実装に加え、フロントエンドの実装も携わっています。 ここではなぜフロントエンドの実装をすることになったのか、またそこから得られたことなどを紹介していきます。 フロントエンドの開発をすることになったきっかけ 理由は2つあります。 1つはバックエンドセクション内でフルスタックな人材が求められていたことです。 2021年の時はバックエンドセクションとフロントエンドセクションというセクション分割をしており、バックエンドセクション内でサービスごとにグループが分かれているような状態でした。 外部ツールは良いのですが新しい内部ツールや内部サービスについても考え
2024/03/26 TypeScript 開発言語を統一 〜フロントからバックまで活用〜 Lunch LT 登壇資料 https://findy.connpass.com/event/312847/
Modules are published to JSR as TypeScript source code. API documentation generation, type declarations for Node-like environments, and transpilation are all handled by JSR. Module authors can focus on writing TypeScript only. Read on for more context on how and why we built JSR, how you can use it today, and how you can be involved in the project! Introducing JSR - the slightly longer versionJava
Write your own Zod
8/29/2023 Write your own Zod Write your own Zod from scratch Table of Contents Introduction Primitive types Complex types: ZodArray<T> Complex types: ZodObject<T> Building schemas Validating schemas Next steps Footnotes Introductionλ Zod is a Typescript library where defining a schema gives you both runtime validation and type safety. As an exercise in type-level gymnastics, lets make our own Zod
JSR is designed for TypeScript. You publish TypeScript source, and JSR handles generating API docs, .d.ts files, and transpiling your code for cross-runtime compatibility. JSR packages are distributed as web-standard ECMAScript modules. JSR isn't a replacement for the npm registry; it's a superset of npm. JSR modules can be used with any JavaScript package manager, and in any project with a node_m
GitHub - arktypeio/arktype: TypeScript's 1:1 validator, optimized from editor to runtime
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Today we’re excited to announce the release of TypeScript 5.2! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
npm workspacesで、TSファイルを共通モジュールとして使い回す | Memory ice cubes
ということをやりたくて、こうやったらできたという覚書。 やりたいこと こういうモノレポ構成とする。 - package.json - package-lock.json - packages - shared - app1 - app2 で、app1にあるコードベースを@myapp/app1とした場合、@myapp/sharedに置いたTSファイルを、そのままモジュールとして利用したいとする。 import { foo } from "@myapp/shared"; import { bar } from "@myapp/shared/bar"; // This is @myapp/app1 or @myapp/app2 code @myapp/app1と@myapp/app2は、それぞれ独自のコードベースになってて、それぞれtscではなくviteやesbuildなどのバンドラーを使う前提
unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。
Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog
GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し替えたい バックエンドの resolver 実装を待たずにフロントエンド側の開発を始めるために、ダミーレスポンスに差し替えたい 一般には GraphQL Client にモックするための機能が実装されてるので、そうしたものを使うことが多いと思います。 zenn.dev また最近は Client よりも外側のレイヤーでリクエストを interrupt してモックする「msw」を使うケースも増えてきてます *1。 blog.engineer.adways.n
はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダーに記述する部分のみの解説なので、そもそもフラグメントシェーダーを使ってブラウザで描画させるまでの工程も含めてWebGPUで再現してみるという感じです。自分も完全に理解できているわけではないのでおかしい部分があるかもしれませんがご容赦ください。またWebGPUはまだWorking Draft（草案）段階なので今後いろいろと変更される可能性があることにも注意が必要です。 実際に作ったもの リポジトリ codesandbox 実装について ざっくりとした全体の作りとしては四
ESLint の共有設定を Flat Config に対応させる - Object.create(null)
まえがき こんにちは, 人間 ESLint です. そんな人間 ESLint の私ですが, 私一人があらゆるコードに注意深く目を通して, さらに修正案まで提示するというのは大変です. 多くの問題は機械的に検知できるはずなので, そういった仕事を私の代わりにしてくれるメカ人間 ESLint が欲しくなってきます. そんなわけで, 4 年ほど前から ESLint の共有設定を仕込み続けています. この共有設定を作るために, 私自身も ESLint の組み込みのルールや typescript-eslint が提供するルールを何度か全て見直したりしていて, それゆえの人間 ESLint でもあります. github.com Flat Config ところで ESLint の設定ファイルは, 次のメジャーバージョンである v9 以降に新しい形式のもの (通称「Flat Config」) が標準となり
TS環境のmangle最適化ベストプラクティス
// in const longLongVar = 1; console.log(longLongVar); // out const o = 1;console.log(o); 主に terser や esbuild のポストプロセスとして行われる。 この記事では mangle のベストプラクティスについてまとめる。本当は jsconf.jp で話したかったが、時間がなかった。 例えば vscode(本体)では外にexportされないプライベートメンバを mangle することで大幅なコード量の削減に成功している。 Shrinking VS Code with name mangling ライブラリ作者やサードパーティスクリプト作者に必要な技術だが、一般的なコードにも適用できる話でもある。何度か自分の発表資料に書いてきたが、単体記事になってないのでここでまとめておく。 極限環境で最終ビル
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introducing Valibot, a < 1kb Zod Alternative
ZodでAlways-Valid Domain Modelを実現する
OpenAI Function Calling を Zod + TypeScript で型安全に扱う - Qiita
TypeScript でメソッドチェーンしたら推論される引数が増えていくやつ - エムスリーテックブログ
大規模コードベース向けASTツールのast-grepについて
The Empty Object Type in TypeScript
Build and Publish 2023
TypeScriptの変更点まとめ ──新しい演算子・トップレベルawait・usingについて
TypeScriptパーサーのベンチマーク：Rustツールの性能の謎を解く
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita
JavaScriptエンジンから見るランタイム / 2024-04-25
Vite は使ってないけど Jest を Vitest に移行する
Deep dive into Biome in JSConf 2023
ハードウェアを動かすTypeScriptの世界
monorepo で開発時にパッケージの変更を build なしで他のパッケージに反映する方法
ESLintのルールから考えるJavaScriptのundefined判定 - Qiita
デジタル化を阻む社員の「知識不足問題」、抜本改善に“役立ちすぎる”学習法とは
Powerfully Typed TypeScript
バックエンドエンジニアがフロントエンドの開発をすることになった話 - ドワンゴ教育サービス開発者ブログ
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
Introducing JSR - the JavaScript Registry
JSR: the JavaScript Registry
Announcing TypeScript 5.2 - TypeScript
WebGPUでシェーダーアートをやってみる（Vite、TypeScript）