複雑な状態遷移😭: クラスではなく関数とDiscriminated Unionで状態の定義と遷移を表現する - kosui
補足: 2025/02/25 本記事でほとんど紹介されなかった「Stateパターン」を含めて再構成した記事を公開しましたので、今後は下記の記事をご覧ください。 kosui.me 補足: 2025/02/21 クラスベースでも、Stateパターンを適用し、StateをDiscriminated Unionとして表現することで今回の問題を解決できます。つまり、クラスを利用することに問題があるわけではありません。この記事では、TypeScriptではあえてクラスを利用しなくても状態遷移を表現できることを紹介します。記事を一部修正し、Stateパターンをクラスによって実現する方法を追記しています。 背景 サーバサイド実装での状態管理の重要性 サーバサイドのビジネスロジックでは、エンティティ（注文、決済、在庫、タクシー配車リクエストなど）が複数の状態を行き来しながら進行します。 たとえば、タクシー配
TypeScript の Discriminated Union と Haskell の代数的データ型 - 一休.com Developers Blog
この記事は 一休.com Advent Calendar 2024 の15日目の記事です。 予定より早く書き上げてしまったので、フライングですが公開してしまいます。 TypeScript の Discriminated Union (判別可能な Union 型) を使うと、いわゆる「代数的データ型」のユースケースを模倣することができます。一休のような予約システム開発においては「ありえない状態を表現しない」方針で型を宣言するためによく利用されています。 「あり得ない状態を表現しない」という型宣言の方針については以下の URL が参考になります。 Designing with types: Making illegal states unrepresentable | F# for fun and profit このユースケースで Discriminated Union を使う場合、それは文字
とりあえずTypeScriptの例外処理にはResult型を使っておけ - Qiita
社内の「強い思想を語るLT会」で使用した資料です。 筆者はHaskellやF#、RustなどResult型ネイティブな言語が好みの人間なので、だいぶ偏った見方になっている点はご了承ください。 はじめに みなさん、Result型(Either型)ってご存知ですか？ HaskellやElm、Rust、Kotlin、Swiftなどモダンと言われる言語には大体実装されている型です。 筆者は最近、理想のResult型ライブラリを求めて自作するに至りました。 どんな型？ ざっくり表現すると処理に失敗する可能性があることを示す型です。 （Monadとか細かい話は置いておく） 言語やライブラリによって命名などが微妙に異なりますが、TypeScriptで示すとこんな感じになります。 // どれもやってることは同じ type Result<T, U> = Success<T> | Failure<U> //
TypeScriptに安易にResult型を導入しない方がいい - Qiita
TypeScriptへRustのようなResult型の導入をお勧めする記事や言説が多いので導入してみましたがあまりよくなかったです。という共有になります。 Result型を導入しても try-catch からは逃れられない これに尽きます。 Result型を導入したあと、try-catch を末端に押しやってそこ以外はResult型のみの世界を実現しようと、おそらくみんな考える。でもそれは機能しない。 実際にやってみるとこんなコードが多発する。 function hoge():Result<void> { try { // fn()は綺麗な世界の実現のためResult型を返すようにしてある。この関数のようにね。 const result = fn() // ここで例外が発生する処理が必要になる return ok(result) } catch(e) { return err(e) } }
Next.jsの型を厳密に定義しなおしてロジックのミスを発見する
これは、株式会社ゆめみ Advent Calendar 2024 13日目の記事です。 Next.js (Pages Router) のAPI Routesのhandlerにおいて、ValibotやZodで値の検証をせずにリクエストボディの値を使用してしまう不具合を、型検査レベルで防ぐことを考えます。 例えば、次のようなコードで、処理の順番やロジックの誤りを型エラーを出して気づきたいといったものです。 import { NextApiHandler } from "next"; import * as v from "valibot"; const RequestBodySchema = v.object({ someValue: v.string(), }); const handler: NextApiHandler = async (req, res) => { // バリデーション
ESLintのカスタムルールで治安維持活動をする - JSConf JP 2024 ｜miidas_tech
2024年11月23日（土）に開催されたJSConf JP 2024にて、ミイダスはプレミアムスポンサーとして参加しました。当日はスポンサーワークショップスペースで、ミイダスのフロントエンドにおける取り組みについて発表を行いました。本記事では、その発表内容を詳しくご紹介いたします。 ESLintのカスタムルールで治安維持活動をするミイダスでは、開発者がコーディング規約を意識せずに効率よく作業できる環境を目指して、ESLintのカスタムルールを開発しました。今回は、組織独自のコーディング規約を浸透させるために行った「治安維持活動」についてお話しします。 私はミイダスのフロントエンドエンジニアの溝渕と申します。現在は保守チームに所属し、いくつかのプロダクトの保守を担当しています。これまでの経歴としては、SIerを経てミイダスに入社しました。本発表では、ESLintのカスタムルールに関する取り組
【前編】関数型×DDDの設計と実装は、どう進めるべきか。書籍「関数型ドメインモデリング」翻訳者が語る【Open Developers Conference 2024 レポート】 | レバテックラボ（レバテックLAB）
TOPコラムテック最前線レポート【前編】関数型×DDDの設計と実装は、どう進めるべきか。書籍「関数型ドメインモデリング」翻訳者が語る【Open Developers Conference 2024 レポート】 【前編】関数型×DDDの設計と実装は、どう進めるべきか。書籍「関数型ドメインモデリング」翻訳者が語る【Open Developers Conference 2024 レポート】 2024年11月18日 書籍「関数型ドメインモデリング」翻訳者 猪股 健太郎 システムエンジニア、ソフトウェア開発者。BIPROGY株式会社勤務。各種業務システムに関する開発支援や開発標準策定等に従事後、数年間の米国駐在を経て帰国。近年はアジャイルソフトウェア開発を含む開発スタイル変革に携わる。『速攻入門 C#プログラミング すぐに現場で使える知識』（技術評論社、共著）、『プログラミングXamarin 上・下
【後編】TypeScript×関数型×DDDで、ユニットテストが激減。実践の全貌とTips【Open Developers Conference 2024 レポート】 | レバテックラボ（レバテックLAB）
TOPコラムテック最前線レポート【後編】TypeScript×関数型×DDDで、ユニットテストが激減。実践の全貌とTips【Open Developers Conference 2024 レポート】 【後編】TypeScript×関数型×DDDで、ユニットテストが激減。実践の全貌とTips【Open Developers Conference 2024 レポート】 2024年11月18日 株式会社一休 CTO 伊藤 直也 大学院卒業後、新卒で入社したニフティ株式会社にて、ブログサービス「ココログ」を立ち上げ。2004年、株式会社はてなに入社、CTOに就任。「はてなブックマーク」などの開発を主導。2010年以降はグリー株式会社にて、ソーシャルメディア統括部長を務める。その後フリーランスを経て、2016年4月に、技術顧問を務めていた株式会社一休に入社。執行役員CTOに就任 X GitHub 2
JavaScript Best Practices | The WebStorm Blog
JavaScript is undoubtedly the most used programming language in the world and is hugely influential on one of the largest technologies we have all come to rely on – the internet. With this power comes great responsibility, and the JavaScript ecosystem has been rapidly evolving, making it incredibly hard to keep up with the latest JavaScript best practices. In this blog post, we will cover several
TypeScriptは型安全じゃないからすばらしい - まめめも
「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し
typeとinterfaceって結局どう使い分ければ良いの？
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
【REST API / gRPC / tRPC】徹底比較！どれを選ぶべきか？
はじめに API設計のアーキテクチャスタイルには、REST API、GraphQL、gRPC、tRPCなど、複数の選択肢があります。 私はこれまでに、実務や個人開発でREST API、gRPC、tRPCを使用してきました。その上で今回は、それぞれの特徴と開発の流れについて紹介します。さらに、それぞれのメリット・デメリットを挙げ、特定のケースに適した選択について考察してみました。 API設計のアーキテクチャスタイルの選択に悩んでいる方に、少しでも参考になれば幸いです。 REST API RESTとは まずRESTとはシンプルなWEB全体のアーキテクチャスタイルのことです。RESTには4つの原則があり（6つとも言われている）それらを満たすもののことをRESTfulと言います。 ※それぞれの原則の詳細は省略します。 統一インターフェース アドレス可能性 接続性 ステートレス性 REST APIは
TypeScriptの標準ライブラリで使われているdeclaration mergingのテクニック
TypeScriptの標準ライブラリとは、TypeScriptに組み込みで備わっている型定義のことです。ECMAScript仕様で定義されているJavaScriptの言語機能に対する型定義が含まれています。また、ブラウザに組み込まれているWeb標準のAPIに対する型定義も含まれています。 TypeScriptの標準ライブラリでは、declaration mergingというテクニックが使われています。皆さんが普段書くアプリケーションコードではあまり使う機会がないかもしれませんが、TypeScriptの型定義、とりわけ標準ライブラリの型定義においては重要なテクニックです。 この記事では、declaration mergingの概要と、TypeScriptの標準ライブラリでどのように使われているかについて解説します。 declaration mergingとは Declaration merg
<T, K extends keyof T> をちゃんと理解する
TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 関数型スタイルでバックエンド開発のリアル
複雑なフロントエンド（ノーコード）を堅牢に作る | ドクセル
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏
https://x.com/farstep_/status/1806880610771976643
https://x.com/farstep_/status/1805017955706798091