複雑な状態遷移😭: クラスではなく関数とDiscriminated Unionで状態の定義と遷移を表現する - kosui
補足: 2025/02/25 本記事でほとんど紹介されなかった「Stateパターン」を含めて再構成した記事を公開しましたので、今後は下記の記事をご覧ください。 kosui.me 補足: 2025/02/21 クラスベースでも、Stateパターンを適用し、StateをDiscriminated Unionとして表現することで今回の問題を解決できます。つまり、クラスを利用することに問題があるわけではありません。この記事では、TypeScriptではあえてクラスを利用しなくても状態遷移を表現できることを紹介します。記事を一部修正し、Stateパターンをクラスによって実現する方法を追記しています。 背景 サーバサイド実装での状態管理の重要性 サーバサイドのビジネスロジックでは、エンティティ（注文、決済、在庫、タクシー配車リクエストなど）が複数の状態を行き来しながら進行します。 たとえば、タクシー配
TypeScript で Web 開発をする際の候補メモ
2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません
【最強】Honoフル活用事例2024年
Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip
TypeScript 5.8のerasableSyntaxOnlyフラグ。enumやnamespaceが消える日が来た
TypeScript 5.8で導入されるerasableSyntaxOnlyフラグを使うと、enumやnamespace、クラスのパラメータプロパティ、moduleキーワードなどの構文をエラーとして検出できます。これらの構文はNode.jsでTypeScriptを実行する際に非互換な構文であり、本フラグの導入によりNode.jsとTypeScriptの互換性が高まります。 本記事では、erasableSyntaxOnlyフラグの挙動と、なぜこのフラグが導入されたのかを解説します。 erasableSyntaxOnlyフラグの挙動 erasableSyntaxOnly とは、「削除可能な構文のみ」という意味です。削除可能な構文とは、Node.jsでTypeScriptを実行される際に削除される構文のことです。後ほど詳しく解説します。 erasableSyntaxOnlyフラグは、tsconf
TypeScript の interface を活用して安全性と拡張性を兼ね備えた型を作る - Techtouch Developers Blog
はじめに 型安全性と拡張性の両立 宣言マージの活用 宣言マージとは？ 宣言マージを使ってメッセージの型を拡張する 型エイリアスと Generics を使った方法との比較 宣言マージを使うことで実装と型の整合性を担保しやすくなる MUI での宣言マージの活用事例 注意点 VS Code 上の型チェックの表示が tsc の型チェックの結果と異なる場合がある ライブラリ側が空の interface のままだと困ることがある なぜ react-redux ではこのアプローチをやめたのか？ まとめ interface の宣言マージを活用することで はじめに こんにちは！Element チームでフロントエンドを担当している all-user です。 Elementチームとは、テックタッチのプロダクト開発の中でも主にDOMとのインタラクション周りの開発を担当しているチームで、Shadow DOM や i
Node.js Type Stripping Explained
In August 2024 Node.js introduced a new experimental feature, Type Stripping, aimed at addressing a longstanding challenge in the Node.js ecosystem: running TypeScript with no configuration. Enabled by default in Node.js v23.6.0, this feature is on its way to becoming stable. This article explores the motivations behind this feature, the problems it solves, and its implications for the Node.js com
TypeScriptのBranded TypeとZodの.brand - Mitsuyuki.Shiiba
Branded Typeについては、もういろんなところで触れられているから、わざわざ書かなくてもいいよなぁという気持ちがありつつ。でも、せっかく頭の整理をしたから、来月の自分用にまとめておくくらいはやっておこうか、という気持ちになったのでメモを残しておく。それとZodの.brand。 やりたいこと 次の2つの型に対する値を間違えて渡したときに、TypeScriptの型検査でエラーになってほしい。 type UserId = number; type BookId = number; TSの型システムはStructural Subtypingを採用しているので、構造が同じだったら部分型として扱われる。だから、↓こんな風にUserIdを引数で受け取る関数にBookIdの値を渡してもエラーにならない。どちらも同じnumber型だから。 const getUser = (id: UserId) =
MCPを使って160行のTypeScriptでミニコーディングエージェントを作る
TypeScriptでMCPサーバーのtool呼び出しをする MCPサーバーのtool呼び出しをLLMにトリガーしてもらう を経てMCPを使い指示に従った操作をスクリプトで行えるようになりました。 次はFilesystem MCP Serverを利用して、特定のプロジェクトのソースコードを編集してもらいます。 指示に従って特定のディレクトリのコードを変更するので、これができると次は 指示の入力をSlackやGitHub Issue経由で実行する 結果をGitHub MCP ServerでGitHubのプルリクエストを自動で作る 状況をSlack MCP Serverで通知してもらう 以上をサーバー上でヘッドレスに動かす というコーディングエージェントの構築につながります。 mini-coder.ts ##テスト create-honoで作ったプロジェクトを変更していきます。 npm cre
TypeScriptで作る自動運転UI
こんにちは！チューリングでソフトウェアエンジニアをしている太田です。 自動運転システムの開発を手がけるチューリングでは、大規模な GPU クラスタでトレーニングされたモデルが日々リリースされ、実車環境でのテストが行われています。 自動運転と聞くと、ハードウェア寄りの技術を連想するかもしれませんが、チューリングの自動運転開発においてWeb系の技術もさまざまな場面で活用されています。 近年、UI開発においてWebブラウザが利用される場面が広がっています。チューリングの自動運転システムにおいても例外でなく、Webフロントエンドの技術を用いてUI開発が進められています。この記事では、チューリングの自動運転システムのUIに焦点を当てて、その背景や構成をコードとともに解説します。 1. E2Eモデル チューリングでは「E2E(End-to-End)」と呼ばれる自動運転モデルを開発しています。カメラ画像
Node.js Now Supports TypeScript By Default
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. Node 23 will soon be able to run TypeScript files without any extra configuration. Marco Ippolito, who has been driving TypeScript support in Node for the last year, landed a PR unflagging --experimental-strip-types in Node 23. Practically, this means a few things: You can create an
GitHub CopilotでTypeScriptの コード生成するワザップ
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Branded Type ベストプラクティス 検索 - Qiita
皆さんこんにちは。これは株式会社カオナビ Advent Calendar 2024の18日目の記事です。 今回は、TypeScriptにおけるBranded Typeについて、筆者が考えるベストプラクティスを紹介します。Branded Typeという概念はTypeScriptエンジニアの間で比較的広く知られていますが、（筆者的には）ベストではないやり方が紹介されていることが多いと感じます。この記事では筆者が一番いいと思っている方法を説明しますので、そうだなと思った方はいいねや拡散をしていただけると嬉しいです。 既存の記事でも、筆者の考えるベストプラクティスに近いものが説明されているいい記事はすでにたくさんあります。なので、未だにそれ以外の説明が使われることがあるのは少し不思議なのですが、状況をさらに改善するために筆者も記事を書くことにしました。 そのため、この記事が特段新しい知識を提供する
Full-Stack TypeScriptの最終到達点、T3-Turboで新規開発した話
はじめに この記事はTSKaigi Advent Calendar 2024の記事です。(TSKaigiの運営メンバーとして最初の記事になりそうです。) みなさん、TypeScript書いてますか？最近、フロントエンドもバックエンドも（加えてインフラも）TypeScriptで統一する、Full-Stack TypeScriptを採用する事例が増えてきました。 Full-Stack TypeScriptの由来やメリットはこちらの記事から フロントもバックもTypeScriptだし、どうせならMonorepoで管理しようということで、TypeScript専用のMonorepo管理ツールであるTurborepoを導入し、T3-Turboというアーキテクチャを導入することになりました。 T3-Turboというアーキテクチャは、以前導入を考えた際に記事にしているので、こちらをご参照ください。 またT
NoInfer<T>の活用例見つけた - Qiita
こんにちは。この記事は株式会社カオナビ Advent Calendar 2024の3日目の記事です。 NoInfer<T> 皆さんは、TypeScriptの機能であるNoInfer<T>をご存知でしょうか。これはTypeScript 5.4から追加された新機能であり、おおよそ次のようなものです。 型としてはNoInfer<T>はTと同じだが、型推論に違いがある。 NoInfer<T>のT部分に型変数が含まれている場合でも、T部分は型推論に使われない。 NoInfer<T>は主にジェネリック関数の引数の型として使われる。 TypeScript 5.4のリリースノートではNoInfer<T>の例として次のようなものが紹介されていましたので、改めて解説します。 function createStreetLight<C extends string>(colors: C[], defaultCol
TypeScript でプログラマブルに動く日本語組版処理システムの提案
はじめに 年の瀬ですね。X（旧 Twitter）のタイムラインが組版の話で盛り上がっていたため、自分も軽く参画したところ思いのほかアツくなってしまい、今なお組版への熱が失われていなかったことを再確認した 12 月初旬です。 さて、春先に TypeScript 上にてプログラマブルに作動する日本語組版処理システム（以下、仮称として minitype を用います）を構想し、数週間掛けてプロトタイプの実装を行っていました。ところが、今年度に入って個人開発にリソースを割く余裕がなくなり、宙ぶらりんな状態のまま年末を迎えてしまいました。まだ開発途中ではありますが[1]、折角なので「日本語組版処理システムの夢[2]」としてアイデアを供養するとともに、具体的なプロトタイプの実装を示したいと思います[3]。 実装についてはソースコードを見ていただくとして、本記事では特に「ユーザがどのような記述をするとどの
TypeScript でバックもやるって実際どう？ 実運用で困ったこと3選
ROSCA株式会社さん主催のイベント フロントからバックエンドまで、TypeScriptでシームレスな開発エクスペリエンスを で発表させていただいた際に使用したスライドです。
ORMなんていらない？！生SQLクエリ開発を超絶楽にするVSCode拡張を作った [TS+Rust+WASM]
TL;DR これができる機能です。 TypeScript with Prisma ⇩ Rust with SQLx ⇩ SQL ファイルだけでなく、他のファイルの生 SQL クエリ(Raw SQL Query)に対しても SQL の LSP が効きます。 現在は TypeScript 上 の Prisma と Rust の SQLx をデフォルトでサポートしています。Prisma のみ、SQL のシンタックスハイライトが効きます。 なお、タイトル詐欺です。 sqlsurge の設定 名前は sqlsurge[1] です。sqlsurge では SQL の Language Server に Golang 製 の sqls を使っているので、 Golang sqls が必須となります。sqls をインストールしている人は限られていると思うのでインストールガイドを用意しました。 TypeScr
![ORMなんていらない？！生SQLクエリ開発を超絶楽にするVSCode拡張を作った [TS+Rust+WASM]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5fdd4697c14676d24ce64e1fe001d5d40bc1d2b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bqOiL8f5--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AORM%2525E3%252581%2525AA%2525E3%252582%252593%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%252589%2525E3%252581%2525AA%2525E3%252581%252584%2525EF%2525BC%25259F%2525EF%2525BC%252581%2525E7%252594%25259FSQL%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252583%2525AA%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E8%2525B6%252585%2525E7%2525B5%2525B6%2525E6%2525A5%2525BD%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258BVSCode%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%25259F%252520%25255BTS%25252BRust%25252BWASM%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASENKEN%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Q3ZTQyODM5Y2UuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
tslogで実現するセキュアなメタデータ管理とロギング
こんにちは、sugar-catです。 はじめに 皆さんはTypeScriptでバックエンド開発を行う際に、どのようにロギングをしていますか。 この記事では、TypeScript製のロギングライブラリであるtslogの紹介と、その内部の仕組み、秘匿情報を含むログを出力しないための方法について解説します。 ログの種類 この記事ではアプリケーションログを扱います。アプリケーションコンテナで出力された標準出力を収集し、任意の監視ツールに送信し表示されるようなログを指します。 アクセスログや監査ログ、システムログのようなものは扱いません。 tslogとは tslogはTypeScript製で作成された、構造化ロギングを行うためのロギングライブラリです。 主な特徴として、Node.jsとブラウザのどちらにも対応しており、他のロギングライブラリと異なり外部のライブラリへの依存が一切ない点や、コードベース
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
ブラウザで動作する地理空間データ処理ライブラリとして DuckDB-wasm を使い、 SQL を TypeScript で管理する仕組みを作る - newmo 技術ブログ
newmo では、地図データや地理情報を扱う場面が多くあります。 たとえば、タクシーやライドシェアでは、営業区域のような営業していいエリアといった地理的な定義があります。 また、乗り入れ禁止区域のようなタクシーが乗り入れてはいけないエリアといった定義も必要になります。 これらの地理に関する定義は GeoJSON のような地理情報を扱うデータ形式で管理されることが多いです。 しかし、GeoJSONなどの定義をテキストとして手書きするのは困難です。 そのため、地図上に区域を作図するエディタやその定義した区域が正しいかをチェックするような管理ツールが必要です。 管理ツールは、ウェブアプリケーションとして作った方が利用できる環境が広がります。 このような地理情報は一度に扱うデータが多かったり、空間的な計算処理が必要になるため、専用の仕組みを使うことが多いです。 このような技術を、地理情報システム（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
