Reactのトランジションで世界を分岐させるハンズオンReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。この本では、手を動かすことでトランジションの機構をしっかりと理解することを目指します。
TypeScript 4.8で入る型の絞り込みの改善とは
皆さんこんにちは。今回はTypeScriptの更新先取りシリーズです。TypeScriptの次のバージョンでは、以下のPRの更新が入ると思われます。もちろんPRの著者はAndersさんです。このPRではTypeScriptの根幹を成す機能の一つである「型の絞り込み」が改善されます。特に、unknown型と{}型の取り扱いが修正されている点が注目に値します。 型引数に対する推論が抱えていた既存の問題 {}型は、「nullとundefined以外の任意の値」という意味を持つ型です。この型は形としては空のオブジェクト型ですが、JavaScriptではnullとundefined以外のプリミティブ（文字列や数値など）に対してもプロパティアクセスをしてもエラーにならないという仕様を考慮して、{}型には文字列や数値などのプリミティブも含まれています。 従来型引数に対する推論が抱えていた問題とは、任意の
CSSにそのうち導入されそうな@scopeとその関連概念
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
Native ESM時代とはなにか
最近の日本のフロントエンド界隈では「Native ESM時代」という言葉が聞こえてきます。Native ESM時代におけるビルドツールがどうなるかといったことが主な話題です。 個人的には面白い概念なので流行ってほしいと思い、Native ESM時代とは何かを解説する基礎的な資料を用意しました。 そもそもNative ESMとは Native ESMとは、ES Modulesのことです。つまり、ECMAScript仕様の一部として定義されたモジュールシステムを指します。現在、モダンな部類のフロントエンド開発において広く用いられている、import宣言でインポートしexport宣言でエクスポートするのがES Modulesです。 特に、ES Modulesはブラウザによって直接理解されるモジュールシステムです。Nativeという単語はこのことを強調しています。 Native ESM時代とは N
技術記事の3類型: 初心者による技術記事執筆のすすめ
学習ノートが全て×となっていますが、これはそもそも学習ノートは読み手に価値を与えるものではないと定義しているので当たり前のことです。×と書くと学習ノートが悪いものであるような印象を受けるかもしれませんが、そのような主張をしているわけではないのでご安心ください。 ただし、初心者同士が「ノートを見せ合う」かのように、他の初心者の学習ノートを参考にできる場合もあるかもしれません。この場合はそれが「学習ノートである」と認識していることが前提です。学習ノートとして書かれたものを教科書だと思って参考にすると痛い目に遭うでしょう。 教科書は知識を提供するものなので、初心者や中級者に対して有効です。上級者の場合、知識はすでに知っているので教科書から新たに得られる価値はあまり多くないでしょう。ただし、上級者が教科書類型の記事をSNSでシェアしている様子は結構見られます。これは、その記事を利用してその上級者自
Immutable.jsとImmer、ちゃんと使い分けていますか？
昨今のフロントエンド開発では、データをイミュータブルなオブジェクトとして扱うのが主流です。すなはち、データが変わるときはオブジェクトを書き換えるのではなく、新しいデータを持った新しいオブジェクトを作ります。最近ではオブジェクトがデータとしてプログラムのあちこちで取り回されることが増えて、一度余所に渡されたデータの中身が後から変更されるのは混乱をきたし設計が困難になるというのが主な理由です。 データを変更するたびに新しいオブジェクトを作るのは、特にデータが複雑になったりネストしたりしていると面倒だしプログラムの見通しが悪くなります。そこで使われるのが、データをイミュータブルに扱うためのライブラリであるImmutable.jsとImmerです。 データをイミュータブルなものとして扱うという目的はどちらのライブラリでも達成することができますが、現在では Immer のほうが開発が活発であり、独自
Reduxミドルウェアのユースケースを集めるスクラップ
背景 Reduxはステート管理ライブラリとして知られているが、ミドルウェアという機能で色々と拡張できる。（例えばredux-thunkでthunkをdispatchしたり） しかし、それってステート管理ライブラリじゃなくない？ と思った。ステートに書き込む以外の部分は全てむしろメッセージパッシングライブラリなのでは？ ということは、Reduxのステート管理以外のユースケースを別のいい感じのライブラリに切り出すことで、例えばRecoilなどと組み合わせられるいい感じのメッセージパッシングライブラリになるのではないか。 ということで、Reduxのステート管理以外のユースケースを集めるためにスクラップを作った。 方針 自分が気が向いたときに追記しますが、Reduxのユースケースに詳しくないのでみなさんが好き勝手に書き込むのも歓迎します。
TypeScript 4.1で密かに追加されたintrinsicキーワードとstring mapped types
TypeScript 4.1では、Mapped typesにおけるkey remappingやtemplate literal typesに付随する新機能として、標準ライブラリにUppercaseなどの型が追加されました。 上の例から分かるように、Uppercase型は一つの文字列を受け取る型関数で、文字列のリテラル型を渡すとその文字列中の小文字を全て大文字にした文字列のリテラル型が返ります。他にも、Lowercase、Capitalize, Uncapitalizeがあります。 これらの型は標準ライブラリ（lib/es5.d.ts）にその定義があります。そこで使われているのがintrinsicキーワードなのです。以下はTypeScript 4.1時点の標準ライブラリからの引用です。 /** * Convert string literal type to uppercase */ typ
React17におけるuseEffectの破壊的変更を理解する
しばらく前、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.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactのSuspense対応非同期処理を手書きするハンズオン