TS特化Clineプログラミング
Previous slideNext slideToggle fullscreenOpen presenter view TS特化Clineプログラミング mizchi / tskaigi 2025 mizchi: パフォーマンスチューニングの傭兵 一ヶ月で御社のプロダクトをコスパよく高速化します フロントエンド視点のE2Eチューニング(Lighthouse) CI/CD 高速化 (Linux, GitHub Actions) New プロンプトエンジニアリングでワークフロー自動化 主な環境 VSCode + RooCode (ほぼ常に Orchestrator モード) Claude 3.7 + Gemini 2.5 (約2~3万円/月) TypeScript / Node / Deno / Cloudflare あらすじ 2014: なぜ仮想DOMという概念が俺達の魂を震えさせるのか
生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
Prisma TypedSQL をクエリビルダとしてのみ運用する
タイトルのこともできることを検証した。（ORM で文句ない人は ORM として使えばいい） Prisma は TypeScript の優秀な ORM / QueryBuilder だが、Prisma 以外で運用されていると途中から投入するのが（一応可能ではあるが）面倒だったりする。 だが Typed SQL によって、既に存在するDBに対して、副作用なくクエリビルダとしてのみ導入することができるのでは、と思いついて試したところ、できた。 今回はリモートの Supabase の PostgreSQL に対して行ったが、たぶん他の環境にも使える。 d1 とか。 prisma の最小プロジェクトのセットアップ $ mkdir prisma-qb-only $ cd prisma-qb-only ## 初期化 $ pnpm init $ pnpm add prisma @prisma/client
TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う
TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か？ as const とは何か？ 2つを組合わせるとどのようなメリットがあるのか？ について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
TypeScript の Narrowing
はじめに この記事では、Widening(型の拡大) の対となる Narrowing(型の絞り込み) について解説します。 Narrowing は多くの記事や解説において 型ガード (type guard) と呼ばれる用語に基づいて解説されますが、Narrowing のキーワードで包括的に解説するのが公式ドキュメントでも行われているやり方です。 実際、型ガードよりも対概念である『Widening(型の拡大)』や『型の集合性』などを加えて Narrowing として考えた方がそれぞれについてよりスッキリと理解することが可能になります (特に判定可能なユニオン型などについてはそうです)。 型集合 おさらいとなりますが 前回の記事 では、型は以下の図 (fig 1) のように具体的な値の集合であると解説しました。単位型 (Unit type) である具体的な値から作られるリテラル型の集合によって
The TSConfig Cheat Sheet
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. tsconfig.json scares everyone. It's a huge file with a TON of potential options. But really, there are only a few configuration options you need to care about. Let's figure them out, and cheatsheet them. #The Package This article is so popular that I've bundled its recommendations i
TypeScript: Union to intersection type
Recently, I had to convert a union type into an intersection type. Working on a helper type UnionToIntersection<T> has taught me a ton of things on conditional types and strict function types, which I want to share with you. I really like working with non-discriminated union types when I try to model a type where at least one property needs to be set, making all other properties optional. Like in
npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog
npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作りました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な技術スタック npm TypeScript Node.js Native ESM Prettier ESLint Vitest Renovate GitHub Actions vscode 向けの各種設定ファイル (extensions.json, launch.json, settings.json) GitHub の「テンプレートリポジトリ」機能を使う GitHub にそれっぽい機能があったので使ってみました。 docs.github.com 「Use this template」というボタンが出て便利です。 「Use t
TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール
TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。 JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を使って静的解析をしています。 サポートしている機能 [ ] JavaScriptのビルトインオブジェクト [x] プロトタイプメソッド Array.prototype.find [x] 静的メソッド Array.from [ ] オブジェクト Promise [ ] DOM API 基本的にメソッド
Simplifying serverless best practices with AWS Lambda Powertools for TypeScript | Amazon Web Services
AWS Compute Blog Simplifying serverless best practices with AWS Lambda Powertools for TypeScript This blog post is written by Sara Gerion, Senior Solutions Architect. Development teams must have a shared understanding of the workloads they own and their expected behaviors to deliver business value fast and with confidence. The AWS Well-Architected Framework and its Serverless Lens provide architec
TypeScriptの型: 環境変数 (process.env) 用の型情報を定義する
Node.js で環境変数を参照するためのオブジェクト process.env の型情報は、@types/node で次のように文字列型ディクショナリ Dict<string> として定義されています。 node_modules/@types/node/process.d.ts（抜粋） declare module "process" { global { var process: NodeJS.Process; namespace NodeJS { interface ProcessEnv extends Dict<string> {} //... } } export = process; } この型定義は @types/node モジュールをインストールするだけで簡単に使用できるようになるのですが、具体的なキー名（環境変数名）が定義されていないので、Visual Studio Cod
Zodで真のTypeScript firstを手にする
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
TypeScript のエラーハンドリングを考える - Qiita
何番煎じかわかりませんが TypeScript でのエラーハンドリングについて考えてみたいと思います。 この記事で扱う TypeScript のバージョンは 4.3 です。 エラーを型安全に扱いたい TypeScript を書いていれば誰もが一度はぶつかる問題ではないでしょうか。 TypeScript では catch した例外は any として扱われます。 これは JavaScript の仕様上どんな値でも throw できてしまうため仕方のないことなのですが、せっかく型安全性を手に入れるために TypeScript を使っているのに any をハンドリングしなければならないのは苦痛です。 次のように例外を throw し得る関数 foo() のエラーハンドリングを考えてみます。 e は any なので、プロパティにアクセスしようにも危険性が伴います。 そこで型アノテーションを使用して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - javascriptdata/danfojs: Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.
GitHub - tsconfig/bases: Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment
https://twitter.com/su_mi1228/status/1563092230709313536?s=12&t=gncLEc5ARzHtB-FcP8ywQg
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
TypeScriptにおけるエラー処理をどうするか - Qiita
https://www.grandream.jp/blog/generate-appsync-graphql-schema