2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません
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
はじめに 簡単なサンプルプロジェクトを作ったのでこちらに置いておきます: 本記事ではnode環境でもともと tsc コマンドでビルドを行なっていた環境から esbuild を使った環境への移行をしたい場合のガイドを書きます。 インストール npm install -D esbuild 注意点など TypeScript の項を読んでみるといくつか注意点。 TSサポート(.ts .tsx)はデフォルトで入っているので、特別必要なことはない ただし、babelと同じくトランスパイルはしてくれるが、型チェックはしてくれない tsc --noEmit を別で走らせてチェックはした方がよい TSにしか存在しないシンタックスもちゃんと動作する tsconfig.jsonでisolatedModules を有効にする必要がある ファイルごとに並列でビルドするので、ビルド時にimportされたものが型なのか
TypeScriptで関数を書く際に、気をつけていることを記載しました。 BMIを計算する処理を例にして説明いたします。 引数をobject形式にする 引数をobject形式にする事で名前付き引数に近い形式になり、順不同になります。引数の順番に意味が無い関数でも、使用時にどの順番で引数を渡すか迷う事がありません。 const calculateBMI = (p: { height: number; weight: number }) => { // BMIの計算処理 }; calculateBMI({ height: 170, weight: 60 }); calculateBMI({ weight: 60, height: 170 }); 以下は、引数がobjectではありません。この関数だけ見ると特に違和感は無いと思います。しかし、上記に比べると情報量が減ります。特にheight, w
前提条件 TypeScriptを使用している package.jsonは1つのみ 今回対象とするディレクトリのルートにpackage.jsonがあり、それより子のディレクトリにはpackage.jsonがない モノレポではなくモノリスのイメージ。モノレポであれば恐らくworkspaceを切る方が何かと素直になりそう 試した環境 Visual Studio Code version 1.91(2024年7月7日頃の最新バージョン) やりたいこと ディレクトリ毎に依存方向を決めている場合等に、依存してはいけないディレクトリの関数や変数が自動補完の対象となるのを防ぎたい 今回検証するリポジトリの構成 ルートディレクトリにpackage.jsonとtsconfig.jsonがある（ここは通常通り） srcの直下にはconstants, utils, featuresというディレクトリがある fea
Node.js 本体で TypeScript ファイルを実行できるようにするプロポーザルが出されているという話が先週あたりから話題になっている。しかしそれほど嬉しいかといわれると、正直いらんなあと思っている。 TypeScriptで簡単なスクリプトを書くときは、長らくtsxを使って実行している。tsxを使い始めるより前は ts-node を使っていたが、tsxを使ってからは何の不満もなく使い続けている。 tsxは内部的にはesbuildでTypeScriptをトランスパイルしていて、型チェックは行わない。tsxのありがたい点は、すべての node コマンドのオプションを tsx コマンドでサポートしていることだ。単純にコマンドを置き換えるだけでいいので、何も新しく覚えることがない。 構造的にはNode.jsの中でswcでJavaScriptに変換されるか、外でesbuildで変換されるかの
この記事で扱うコードは全てTypeScript Playgroundにまとめていますので、 もし実際にコードを確認したい場合はそちらでご確認ください。 26以上のメンバーを持つMappedTypeで型の絞り込みができない 表題の通りですが、実際にコードを見てもらうのがわかりやすいでしょう。 const maxMap = { one: {a: 1}, two: {b: 2}, three: {c: 3}, four: {d: 4}, ... twentyThree: {w:23}, twentyFour: {x:24}, twentyFive: {y:25}, twentySix: {z:26}, } type MapKey = keyof MaxMap type MapValue<T extends MapKey> = MaxMap[T] interface ObjectImpl<Key,
TypeScriptのパフォーマンス向上についての公式ドキュメントがあります。この記事では、「TypeScriptにおける速さとは何か」を理解し、その上でコンパイルの観点でパフォーマンスを向上させるための具体的な方法をまとめます。 公式のドキュメント TypeScriptのGithubリポジトリにあるWikiを見に行くと、Debugging TypeScriptのセクションにPerformanceについてのドキュメントがあります。 Performance · microsoft/TypeScript Wiki · GitHub TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - microsoft/TypeScript 今回はこのドキュメントを参考にしてして見ていきます。 Ty
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
🌼 はじめに 皆さんは Javascript である値を boolean に変換するときどういう方法も使いますか？よく使われる方法は!!（二重否定・Double negation）か、Boolean()だと思います。 const hello = Boolean("hello"); // true const world = !!"world" // true Typescript のハンドブックでもその２つを紹介してます。 You can always coerce values to booleans by running them through the Boolean function, or by using the shorter double-Boolean negation. いちおう型の観点では、!!を使ったら型がtrueかfalseになり、Boolean()関数を使った
準備運動 たとえば「Foo型要素を持つ配列」や「Foo型でfulfillされるPromise」、「Foo型のプロパティ"abc"を持つオブジェクト」の型を定義しようとすると下記のようになる。 type FooArray = Foo[]; type FooPromise = Promise<Foo>; type FooContainer = { abc: Foo }; この記事にたどり着いた人であればここまでは理解できるはず。 inferの使いどころ では逆に、「何かの型を持つ配列」や「何かの型でfulfillされるPromise」、「何かの型のプロパティ"abc"を持つオブジェクト」の「何かの型」を得たい場合はどうするか。 ここでinferの出番となる。 // 注意: このコードは型安全ではありません。 type ArrayOf<T> = T extends (infer U)[] ? U
これまで「グローバルのisNaN()ではなくNumber.isNaN()を使え！」を教義に生きてきたのですが、揺らいできました。 JavaScriptのisNaN()は引数を数値に変換した結果がNaNであるかを判定します。 一方のNumber.isNaN()はES6で提供された関数で、引数がNaN以外の時はtrueを返しません。 console.log(isNaN('hello')); // true console.log(Number.isNaN('hello')); // false Number.isNaN()はより厳密な比較であり、キャストを行わないため余計な混乱を避けられるものとして提供されました。 文字列などを渡した場合はtrueを返さないため、Number.isNaN()に渡す時点であらかじめ数値に変換しておくなど型を意識した操作がアプリケーション側の責務として求められるよ
TypeScriptでは配列が空でないことを型レベルで表現できます。 この記事ではその型をNonEmptyArray<T>と書くことにします。 結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されているので要注意です。 それらも含めて簡単に解説します。 よくある間違いその1：T[] & { 0: T } ２つあるうち最初に紹介するのはこの型定義です。[1]
typescript-eslint v6 リリース！ 2023/07/10 に typescript-eslint の v6 がリリースされました。 メジャーバージョンアップということで多くの BreakingChange があるのですが、その中でもReworked Configuration Namesと呼ばれる変更は利用者に大きな影響を与えそうです。 Reworked Configuration Namesはざっくり言うと「config に書くrecommendedのようなルールセットの名前や枠組みが変わるよ」という変更です。 ルールセットの名前だけでなく、含まれるルールや分類自体に変更があるので、設定ファイルを v5 のままアップデートしてしまうと意図したルールセットと異なる設定になってしまいます。 ここでは上記の記事にある変更点を紹介しつつ、なるべく既存の設定のままアップデートする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
