Branded Type ベストプラクティス 検索 - Qiita
皆さんこんにちは。これは株式会社カオナビ Advent Calendar 2024の18日目の記事です。 今回は、TypeScriptにおけるBranded Typeについて、筆者が考えるベストプラクティスを紹介します。Branded Typeという概念はTypeScriptエンジニアの間で比較的広く知られていますが、（筆者的には）ベストではないやり方が紹介されていることが多いと感じます。この記事では筆者が一番いいと思っている方法を説明しますので、そうだなと思った方はいいねや拡散をしていただけると嬉しいです。 既存の記事でも、筆者の考えるベストプラクティスに近いものが説明されているいい記事はすでにたくさんあります。なので、未だにそれ以外の説明が使われることがあるのは少し不思議なのですが、状況をさらに改善するために筆者も記事を書くことにしました。 そのため、この記事が特段新しい知識を提供する
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
import * as 構文とパフォーマンス最適化 - Qiita
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
そこのお前！ 余計なuseMemo1個に含まれるオーバーヘッドは余計なdiv 0.57個分だぜ！ - Qiita
※効果には個人差があります。 useMemoのオーバーヘッドについて ReactのuseMemoは、パフォーマンス最適化に使われるAPIです。コンポーネント内で計算やオブジェクトの生成を行う際に、以前の計算結果をキャッシュして使い回すことで再レンダリング時の計算を削減したり、新しいオブジェクトの生成を防ぐことができます。 useMemoに関しては、あくまで最適化のためのものであるから「無駄に使うべきではない」という言説がよく見られます。その理由は、useMemoのコストもゼロではなく、余計な使用はそれだけパフォーマンスの低下に繋がってしまうからです。 しかし、筆者はuseMemoのコストは微々たるものであり、本当に一目見て明らかに無駄でない限りは積極的に使うべきだと思っています。 そこで、筆者はuseMemoのオーバーヘッドがどれくらいかを調べるためのベンチマークを作成しました。この記事で
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 **※ この記事は3分の1くらい読むと「まとめ」があり、残りはおま
TypeScriptのreadonlyプロパティを使いこなす - Qiita
TypeScriptでは、オブジェクト型のプロパティをreadonlyにできる機能があります。型でreadonlyと宣言されているプロパティを書き換えようとするとコンパイルエラーとなります。 type MyObj = { readonly foo: string; }; const obj: MyObj = { foo: "Do not change me!" }; // これは MyObjのfooプロパティがreadonlyなのでコンパイルエラー obj.foo = "hi";
TypeScriptのunion型はorです 〜union型、構造的部分型、余剰プロパティチェックの話〜 - Qiita
TypeScriptのunion型はorです 〜union型、構造的部分型、余剰プロパティチェックの話〜TypeScript 先日、「TypeScriptのunion型はorではない」とする以下の記事が公開されました。 TypeScript の共用体型（Union Types）は or ではない 残念ながら筆者はこの主張に同意できないので、この記事では上記の記事に含まれる問題点を指摘しつつ、正しい結論を導きます。 この記事の目的はあくまで正しい情報を皆さまに届けることであり、上記の記事（以下では「元記事」と呼びます）の筆者を攻撃する意図は無いことをご理解ください。 では、元記事からコードを引用しながら何がまずいのかを見ていきましょう。 元記事の主張 元記事の最初のコードを引用します。
TypeScript 4.0で導入されるVariadic Tuple Typesをさっそく使いこなす - Qiita
今日、Anders HejlsbergさんによってTypeScript 4.0に導入予定の新機能のプルリクエストが出されました。この記事では、この新機能Variadic Tuple Typesを解説します。 ちなみに、現在（この記事の執筆時）のTypeScriptのバージョンは3.9であり、4.0はその次のバージョンです。一見メジャーバージョンアップに見えますが、TypeScriptはsemantic versioningを採用していないため、3.9 → 4.0は特別なリリースというわけではなく、3.8 → 3.9とかと規模は同程度です。 Variadic Tuple Typesの基本 さて、Variadic Tuple Typesは、一言でいえばタプル型の中に...Tと書ける機能です。この構文はよく知られたスプレッド構文のいわば型バージョンであり、あるタプル型の要素たちを別のタプル型に埋
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版） - Qiita
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）JavaScriptReact 10月25日、Reactの新機能であるConcurrent Modeのプレビュー版が発表されました。この中には、Concurrent Modeの恩恵を得るために必要となる新しいAPIが含まれています。 これらのAPIの中心となるのが、Suspenseと2種類の新しいフックuseTransitionとuseDeferredValueです。この記事ではこの2種類のフックに焦点を当てて、これらが何をしてくれるのか、どのようにこれらが新しいのかを解説します。 要するに、Reactの公式ドキュメントを読んでまとめましたということです。特に、ガイドを一通り読んで理解しないとこれらのフックが何をしているのか理解しにくいため、最速で理解できるよ
ワイ「アニメーションするにはこのuseTransitionってのを使えばええんか？」 - Qiita
社長「やめ太郎くん」 ワイ「なんでっか社長、ワイは今Reactのアプリを半分だけVueに書き換える作業で忙しいんでっせ」 ハスケル子「（何でそんな意味不明なことを……）」 社長「せやったな、これからはVueの時代やからVueの使用実績を増やさなあかんねん」 ワイ「とはいえReactも今年公式ドキュメントの日本語版が出たり勢いづいとるから捨てがたい」 社長「せやから半々にしてどっちも取り入れるんや！ 素晴らしい施策やろ！」 ワイ「さすが社長！」 ハリー先輩「（案件を半々にするんちゃうのかい！）」 ハスケル子「（私は何でこんな所でインターンしているんだろう）」 ※ この記事は全面無職やめ太郎さんリスペクトのワイ記法でお送りする二次創作記事です。（6ヶ月ぶり3回目） Reactでアニメーションを実装したい 社長「さて、今回はアプリにいい感じのアニメーションを追加してもらいたいんや。これからはUX
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザ
今からでも追いつける！ JavaScriptの「標準ライブラリ」を学ぶ - Qiita
標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？ 何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び
TypeScriptの型におけるJSXサポートが100%分かる記事 - Qiita
TypeScriptはJavaScriptに静的型を付けることができるAltJSです。2015年9月に登場したTypeScript 1.6ではJSXのサポートが搭載され、.tsxという拡張子を用いることでJSXを含むコードを書いたり型チェックしたりすることができます。 JSXはJavaScriptに対してHTML（あるいはXML）のタグのような構文を導入する拡張記法です。以下の例のようにJavaScriptプログラム中に式としてタグを書くことができます（https://facebook.github.io/jsx/ から引用）： // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イベントハンドラの関数名についての雑記 - Qiita
TypeScriptで最低n個の要素を持った配列の型を宣言する方法 - Qiita
