ts-blank-space
What is ts-blank-space? ts-blank-space is a fast type-stripping compiler that converts TypeScript to JavaScript. It supports a modern subset of TypeScript by erasing the types and replacing them with whitespace. That's it. It is not a type checker and does not perform any other code transformations. The underlying technique can improve build performance and simplify development. The implementation
2024年9月 俺の eslint.config.js
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
neverthrow で局所的に Result 型を使い、 try-catch より安全に記述する
Result 型 (類似するものとして Either Monad の方が有名かもしれません) を導入する場合、アプリケーション全体の設計を変えたり、全箇所を書き換える必要はありません。 neverthrow は部分的に使用でき影響範囲も閉じるので、局所的に使い始めることができます。 (Rust のような) Result 型 とは ざっくり言うと関数の処理の結果と成否を 1 つの型 Result<T, E> で表したものです。(T は期待する結果の型、 E はエラーを表現する型) 筆者は詳しくはないのですが、 Haskell 等にある Either<L, R> とは厳密には違うようです(Either は両方の値が使用可能であることを前提としている？) 参考: Rust ではなぜ、Either 型ではなく Result 型を採用しているのか neverthrow とは TypeScript で
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
Goのインターフェース抽象度を美しく保つ為の思考 - 好奇心に殺される。
Go Goのインターフェース抽象度を美しく保つ為の思考 Goで抽象化を適切に、そして美しく保つ為の自分の考えやTipsを紹介します。 Overview とある場面でGoのinterfaceが持つ振る舞いの抽象度について議論があり、今回はそれをアウトプットしておきます。Go初心者でinterfaceを使った設計に苦手意識を持つ人向けです。 目次 今回の目次です！下記について自分の考えをお話しします！ 振る舞いの抽象化の度合いを意識する 抽象度をどこまであげるか 引数や返り値から発生する「抽象化の漏れ」 抽象度をあげる為の統合 Getter/Setterと抽象度 それではいってみましょう！ 振る舞いの抽象化の度合いを意識する 振る舞いをinterfaceとして定義していくのがGoの抽象化ですが、そもそも 抽象化は度合いのある概念です 。この度合いを意識しないと適切なinterfaceの設計は困
なぜ Go では何百万もの Goroutine を作れるのに Java は数千のスレッドしか作れないのか?
なぜ Go では何百万もの Goroutine を作れるのに Java は数千のスレッドしか作れないのか? (この記事は Why you can have millions of Goroutines but only thousands of Java Threads の翻訳です) 経験のあるエンジニアならば JVM 言語で次のようなエラーを見たことがあるでしょう。 [error] (run-main-0) java.lang.OutOfMemoryError: unable to create native thread: [error] java.lang.OutOfMemoryError: unable to create native thread: [error] at java.base/java.lang.Thread.start0(Native Method) [erro
JavaScriptのカスタムエラーはこれでOK | Wantedly Engineer Blog
JavaScriptでは任意の値を例外としてthrowすることができますが、実際にはErrorのインスタンスをthrowするのが慣例です。 エラーの原因をより正確に説明したいときはErrorを継承するのが望ましいですが、単に継承するのではなく以下のように書くのがオススメです。 class MyError extends Error { static { this.prototype.name = "MyError"; } }その背景について以下で説明します。テーマは以下の3つです。 nameプロパティcaptureStackTracecauseプロパティnameを正しくセットするNode.jsでエラーを表示させると、クラス名が正しく表示されます。 > throw new (class C extends Error {})() Uncaught C [Error]ここで出力されている "C
Goで真面目にerror handlingと向き合ってみた - Tech Do | メディアドゥの技術ブログ
The Go gopher was designed by Renée French and has a CC BY 3.0 license. メディアドゥでエンジニアをしております、武田です。 弊社では新規サービスのプロダクトをGoで開発しているのですが、必ずと言っていいほど世のGopherたちが頭を悩ませるエラーハンドリングについて、一旦方針を考えてみたので記事にまとめてみました。 きっかけ 新規サービス開発もある程度進み、staging環境で検証を進めようと思いAPIを叩いたところ… { "code": "", "message": "Table Hoge.hoge doesn't exist" } という如何ともしがたいメッセージと出くわしてしまいました。これでは全くトラブル対応ができない… 今まで目を瞑っていたけれど、 ちゃんとエラーハンドリングやろう！ 解決課題の設定 Erro
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
ts-patternでTypeScriptにパターンマッチングを持ち込み、より型安全な世界へ
0. はじめに 現代のWebアプリケーションの開発言語として、TypeScriptはファーストチョイスの一つです。特殊なケースを除き、フロントエンドの開発言語にはTypeScriptが選ばれるため、言語を統一するメリットを優先し、バックエンドにもTypeScriptが採用されるケースはよく見られます。 またReactがClass Componentを捨てFunction Componentを採用した事件が象徴するように、現代のプログラミングパラダイムのトレンドとして関数型プログラミングがあります。そもそもJavaScriptの出自は、関数型言語をブラウザに搭載できると聞いてNetscapeへ入社したブレンダンアイク氏が、オブジェクト指向言語であるJavaのような言語を会社から要求され、開発したというものです[1]。そのためか、JavaScriptは未だ関数型言語としては未成熟で、関数型プロ
TypeScriptのError Handling - mrsekut-p
TypeScript/JavaScriptの言語思想的にはtry/catchを使ってerror handlingをするのが普通
Axios v0.25.0 で生じた breaking change の注意点 - 経験は何よりも饒舌
English version: Notes on the breaking change that occurred in Axios v0.25.0 - 経験は何よりも饒舌 2022年1月18日に Axios v0.25.0がリリースされました。 その中の breaking change の1つに Adding error handling when missing url があります。 これは、引数で指定するRequest ConfigのurlがFalsyである場合にErrorを返すという変更です。 バグやエラーの内容を明確にすることを目的に導入されましたが、Request ConfigのbaseURLを活用する際や、GraphQLにリクエストを送る際など、意図的にFalsyにしている場合があるというissueが立てられています。 Node14にアップグレードするために、同じリリース
Release v5.0.0 · facebook/create-react-app
v5.0.0 (2021-12-14) Create React App 5.0 is a major release with several new features and the latest version of all major dependencies. Thanks to all the maintainers and contributors who worked so hard on this release! 🙌 Highlights webpack 5 (#11201) Jest 27 (#11338) ESLint 8 (#11375) PostCSS 8 (#11121) Fast Refresh improvements and bug fixes (#11105) Support for Tailwind (#11717) Improved packag
Next.js の API Routes から SWR の型推論を導く
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
Goodbye CSS Modules, Hello TailwindCSS
Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat
なぜWebpackの設定はTypeScriptで書けるのか？
この記事について webpack の設定ファイルであるwebpack.config.jsは、TypeScript で書いて Node.js 上で実行できます。しかし、本来であれば TypeScript のソースコードは Node.js では実行できないはずです。 この事が気になった私は、今回その仕組みを調べてみたので、この場を借りてその調査結果を共有したいと思います 💪 参照 記事の概要 概要のみ知りたい人に向けて、以下にこの記事で解説する内容をまとめておきます 👇 webpack-cli では、 rechoir を使って TypeScript を require() できるようにしているよ rechoir は、 ts-node などを使って require.extensions を拡張しているよ ちなみに、 require.extensions は非推奨だよ webpack-cli
TypeScript 4.6で起こるタグ付きユニオンのさらなる進化
この記事の公開時点ではTypeScript 4.5のBetaが出たばかりといったところですが、TypeScriptのリポジトリでは早くもTypeScript 4.6をターゲットにした改善が考えられています。おそらく、大きめの新機能であるためすでにBetaが出ている4.5は避けたのでしょう。この記事ではそのうちの一つである、タグ付きユニオンに対するさらなる進化をご紹介します。PRでいうと次のものです。 また、この変更によって、TypeScript 4.4, 4.5, 4.6と3連続でタグ付きユニオンが進化することになります。これらについてこの記事で紹介します。 TypeScriptにおけるタグ付きユニオン せっかくなので、この記事ではTypeScriptでのタグ付きユニオンについて基本的なことも解説します。タグ付きユニオンは、他にも「直和型」など色々な呼び名がありますが、英語圏のTypeSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Auphonic