2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [

Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp

Photo by Lukas Tennie from unsplash はじめにおしごとにて Prisma ORM を使った Node.js + TypeScript なバックエンドサービスを開発・運用しています。 Prisma を利用する上で、テストの書きづらさがあったため、OSS を 2 つほど作って改善しました。今回のエントリでは、この 2 つの npm パッケージを中心に、Prisma のテスト周りについて書いていきます。 https://github.com/Quramy/jest-prisma : 実 DB を使ったテストを書きやすくするためのツールhttps://github.com/Quramy/prisma-fabbrica : テストデータのセットアップを書きやすくするためのツールどちらについても、無いからと言って Prisma を利用したアプリケーションのロジックがテ

TypeScript 4.7 で “module” という名前で始まる Compiler Option がさらに追加されて、さすがに何が何やら感あるので、役割を軽く整理。 この記事では雑な紹介に留めるので、それぞれの詳細は TSConfig Reference を読みに行ってください。 対応関係ソースコードとそれぞれのオプションが何に作用しているのかを雑に図示するとこんな感じ。 重要なことどのオプションをいじっても、import 指定子 (上図の “./hoge” の部分) がコンパイル時に書き換えられることはない。 これが頭に入っていれば、.mts, .cts といった TypeScript のファイルで import "./foo.cjs" と書くことや、 --moduleSuffixes がソースコードの探索にしか影響しないことに得心できるはず。 --moduleTypeScript

Photo by Lukas Tennie from unsplashはじめにこのエントリでは、僕が趣味で作っている PicoML という自作プログラミング言語の話を書こうと思う。 作ってから半年くらい経っているのだけれど、如何せん自作言語という無用の長物であり、登壇などでコイツの話をすることもないため、ある種の供養みたいなものだと思ってもらって構わない。 PicoML の概要まずは実装した言語の紹介から。ざっくり以下の特徴を備えた言語である。 ML ベースの文法による関数型言語単純 let 多相型推論による型チェックCLI として、Node.js 上での即時評価器（REPL）と WebAssembly をターゲットにしたコンパイラの双方を提供REPL やコンパイラの実装は TypeScript で行っている。自分の勉強が主目的であったため、REPL やコンパイラの CLI を動作させるの

これは GraphQL Advent Calendar 2020 16 日目の記事です（しかも 12 日目の記事と結構内容が被ってしまって切ない…） このエントリでは、GraphQL の @defer と @stream というディレクティブについて書いていく。色々書いていたら割と長くなってしまったが、内容は下記のとおり。 このディレクティブの登場背景ディレクティブの Specgraphql-js を用いた利用サンプル@defer / @stream とは何か@defer と @stream は共にデータの取得方法を制御するためのディレクティブだ。名前が示すとおり、クエリ全体から特定の箇所の読み込みを遅延させたり、ストリーミングさせることができる。2020 年末現在、GraphQL spec としては Stage 2（草案段階）であり、参照実装である graphql-js にも実装が存在し

先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って

はじめにTypeScript 4.1 で新しく増えた --generateTrace という TypeScript Compiler の profile を取得するオプションについて。 TypeScript 4.1 beta でもすっ飛ばされていたネタなので、多分あまり注目されていないだろうし、 僕もたまたま PRs を眺めていたら見つけた程度だし、他の feature と比べるとかなりニッチなのだけど、個人的に面白かったのでエントリに残しておく。 なぜ僕が今回のオプションに惹かれたかとういうと、 3 ヶ月くらい前に、仕事でやっている TypeScript のプロジェクトについて「ローカルでの tsc が遅い！なんでだ！」って感じで憤ってた時期があって、 どこにボトルネックがあるか調べようと思ったことがあったのだけど、このときは深く調べることができずに挫折したという経緯があるため。 ちなみ

TypeScript 4.1に Template String Typesという機能を追加するPRが上がっていて、新しいおもちゃを与えられた犬となって色々遊んでしまった。 Template String Types is 何Template String Typesで何ができるか的な話については、まぁhttps://github.com/microsoft/TypeScript/pull/40336 を見るなりしてもらえばいいんだけど、端的にいうとJSのTemplate stringよろしくLiteral TypeをTemplateで合成した結果を型として扱えるようになる機能。 type GetterName<T extends string> = `get${capitalize T}`; type T10 = GetterName<'foo'>; // 'getFoo;あと、同じPRに

Provides functions to help TypeScript GraphQL client development including auto completion, query validation, type… このツールに限らずですが、開発支援系のツールは自分で使うモチベーションがあるときに作るのが一番ということもあり、重い腰を上げてこいつに大幅にアップデートを加えました。年末年始で時間もいっぱいありましたしね。 エディタ支援機能ts-graphql-plugin という名前にもある通り、こいつはTypeScriptのLanguage Service Pluginです。 Language Service Pluginというのは、TypeScriptの言語支援サーバー（tsserver）上で動作するため、エディタの種別を問わず動作するのが特徴です。 さて、例えばReac