TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク

皆さんこんにちは。早速ですが、TypeScriptのmoduleオプションはご存じでしょうか。moduleオプションは、例えば次のような値をサポートしています。 commonjs umd es2015 esnext node16 nodenext 皆さんは、moduleオプションが何を設定するオプションなのか一言で説明できますか？ 実は、TypeScriptの熟練者であってもmoduleオプションを一言で説明することは難しいはずです。なぜなら、そもそもこのmoduleオプションが複数の異なる意味で使われており、もはや一言で説明できるようなものではなくなってしまったからです。 この記事では、TypeScriptのメンテナーが書いた次のGitHub issueをベースに、moduleオプションを取り巻く状況を説明します。 moduleオプションの意味とは 昔はmoduleオプションの意味は明確

この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？　という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理

皆さんこんにちは。これは、筆者が最近公開したnitrogqlを宣伝する記事です。nitrogqlの概要や、開発にあたっての裏話などを紹介します。 nitrogqlとは nitrogqlは、TypeScriptコードからGraphQLを使用するためのツールです。有体にいえば、graphql-code-generatorを置き換えることを目指して開発しています。具体的には、.graphqlファイルからTypeScriptの型定義を生成する機能を備えています。 例えば、次のようなクエリがあったとします。 query ($unfinishedOnly: Boolean) { todos(filter: { unfinishedOnly: $unfinishedOnly }) { id body createdAt finishedAt tags { id label color } } } imp

皆さんこんにちは。今回はTypeScriptの更新先取りシリーズです。TypeScriptの次のバージョンでは、以下のPRの更新が入ると思われます。もちろんPRの著者はAndersさんです。このPRではTypeScriptの根幹を成す機能の一つである「型の絞り込み」が改善されます。特に、unknown型と{}型の取り扱いが修正されている点が注目に値します。 型引数に対する推論が抱えていた既存の問題 {}型は、「nullとundefined以外の任意の値」という意味を持つ型です。この型は形としては空のオブジェクト型ですが、JavaScriptではnullとundefined以外のプリミティブ（文字列や数値など）に対してもプロパティアクセスをしてもエラーにならないという仕様を考慮して、{}型には文字列や数値などのプリミティブも含まれています。 従来型引数に対する推論が抱えていた問題とは、任意の

この記事の公開時点ではTypeScript 4.5のBetaが出たばかりといったところですが、TypeScriptのリポジトリでは早くもTypeScript 4.6をターゲットにした改善が考えられています。おそらく、大きめの新機能であるためすでにBetaが出ている4.5は避けたのでしょう。この記事ではそのうちの一つである、タグ付きユニオンに対するさらなる進化をご紹介します。PRでいうと次のものです。 また、この変更によって、TypeScript 4.4, 4.5, 4.6と3連続でタグ付きユニオンが進化することになります。これらについてこの記事で紹介します。 TypeScriptにおけるタグ付きユニオン せっかくなので、この記事ではTypeScriptでのタグ付きユニオンについて基本的なことも解説します。タグ付きユニオンは、他にも「直和型」など色々な呼び名がありますが、英語圏のTypeSc

今日リリースされた TypeScript 4.5 Beta の新機能として、標準ライブラリの差し替えが従来よりも簡単になるというものがあります。 筆者は TypeScript の標準ライブラリからanyを排除してより安全にしたbetter-typescript-libを開発していましたが、このたび TypeScript 4.5 に対応した v2.0.0 のベータ版を用意しました（2.0.0-beta）。 この記事では better-typescript-lib の簡単な紹介に加えて、TypeScript 4.5 の機能の解説やそれによって better-typescript-lib に起こった変化を紹介します。 better-typescript-lib について better-typescript-lib は、TypeScript の標準ライブラリをより型安全にしたものです。better

学習ノートが全て×となっていますが、これはそもそも学習ノートは読み手に価値を与えるものではないと定義しているので当たり前のことです。×と書くと学習ノートが悪いものであるような印象を受けるかもしれませんが、そのような主張をしているわけではないのでご安心ください。 ただし、初心者同士が「ノートを見せ合う」かのように、他の初心者の学習ノートを参考にできる場合もあるかもしれません。この場合はそれが「学習ノートである」と認識していることが前提です。学習ノートとして書かれたものを教科書だと思って参考にすると痛い目に遭うでしょう。 教科書は知識を提供するものなので、初心者や中級者に対して有効です。上級者の場合、知識はすでに知っているので教科書から新たに得られる価値はあまり多くないでしょう。ただし、上級者が教科書類型の記事をSNSでシェアしている様子は結構見られます。これは、その記事を利用してその上級者自

こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select

先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。 本記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。 アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18

TypeScript 4.3 の RC が先日登場し、正式リリースが近づいてきていますね。そこで、この記事では TypeScript 4.2 から 4.3 にかけて発生した“最弱の更新”とも言える出来事、そしてそれによって起こったベストプラクティスの変化を紹介します。 TypeScript 4.2 でコンストラクトシグネチャの abstract 修飾子の追加 コンストラクトシグネチャ (construct signature) とは、コンストラクタ、すなわち「newできる関数」を表す型システム上の概念です。TypeScript 4.2 からは、コンストラクトシグネチャにabstract修飾子を付けることができるようになりました。 // 普通のコンストラクトシグネチャを持つ関数オブジェクト declare const foo: new (arg: number) => unknown; co

TypeScript でプログラミングをしていると、existential type （存在型）が欲しくなることがあります。そのような課題が発生した際は anyやasを使って何とかしてしまいがちですが、実はある種のカプセル化を行うことでこれらの危険な機能を使わずに解決することができます。 Existential Type が欲しくなる例 簡単な例として、こんなプログラムを書きたい場合を考えてみましょう。ここではまだ型は書いていません。 function useNumber(num: number) { console.log(num); } function useString(str: string) { console.log(str); } const thunks = [ [3, useNumber], ["foo", useString], [10, useNumber], ];

2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文

今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換

しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.