【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ(操作可能)なページを生成する過程のことをいいます。Hydrationはクラ…
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ(操作可能)なページを生成する過程のことをいいます。Hydrationはクラ…
SSR/SGではレンダリング時にブラウザの機能を使えない 具体例は以下の通りです。 Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR(Server-side Rendering)…
Next.jsではページごと(pagesディレクトリ直下のコンポーネントごと)にレンダリングの種類を決められます。今回はレンダリング種別の決められ方と確認方法について紹介します。 検証環境のnextは11.1.2を利用し…
Next.jsの公式ドキュメントによるPre-renderingの説明は以下の通りです。1 上記のプロセスを手元のローカル環境で確認したところ、SSRとSGで初期ロードのタイミングが異なっていたので紹介します。 検証環境…
『SSR(Server-side Rendering)はサーバサイドでHTMLを生成する仕組み』『SG(Static Generation)は事前に生成した静的なHTMLを配信する仕組み』『CSR(Client-side…
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR(Server-side Rendering)もしくはSG(Static Site Generation)です。1 しかし、Nex…
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR(Server-side Rendering)もしくはSG(Static Generation)です。1 SSRとSGのどちらを採…
コンポーネントが再レンダリングされる条件について コンポーネントは以下の条件のいずれかに当てはまると再レンダリングされます。 以下では再レンダリングが発生する具体例について紹介します。 コンポーネントのStateが更新さ…
Intersection型(Intersection Types、交差型)について Intersection型(Intersection Types)は型 & 型のように&で型を連結し、型を合成した新たな…
Union型(Union Types、合併型、共用体型)について Union型(Union Types)は型 | 型のように|で型を連結し、『いずれかの型』を表現します。 Union型は日本語では合併型と呼ばれたり1 2…
typeofについて typeofはオペランド(被演算子、演算対象の変数のこと)の型を文字列として返すJavaScriptの演算子です。 オペランドと取得できる文字列の対応は以下の通りです。1 型 戻り値 Undefin…
TypeScriptのコードでたまにみかけるtype HogeType = typeof Hoge[kyof typeof Hoge]の意味について解説をします。 結論: typeof X[kyeof typeof X]…
TypeScriptではEnum型よりもUnoin型を利用したほうがよいという話をよく聞きます。1 2 3 今回はEnum型からUnion型に書き換えた具体例について紹介します。 Enum型を利用した例 以下はColor…
Mapped Types(マップ型)について Mapped Types(マップ型)とはある型をもとに新たな型を定義する際に利用される型のことをいいます。 Mapped Typesは{ [P in K]: T }のように記…
インデックスシグネチャ(Index Signatures、インデックス型)について インデックスシグネチャ(Index Signatures、インデックス型)とは、インデックス(添字)を利用してオブジェクトのプロパティ(…
extendsを利用することでジェネリクス(Generics)で引数に制約をつけられます。今回は以下の2つのケースについて紹介します。 型の制約をつける場合 ジェネリック関数(ジェネリックメソッド)の引数をstring型…
ジェネリクス(Generics)について プログラミングにおけるジェネリクス(Generics)とは、異なる型を同じコードで処理できるようにする手法のことをいいます。 ジェネリクスは型を抽象化した汎用的なロジックを実装す…
Conditional Types(条件付き型)について Conditional Typesとは条件分岐の概念がある型のことをいいます。 Conditional TypesはT extends U ? A : Bのように…
void型とnerver型の違い、の結論 void型は『なにも返さない』を表現する型、never型は『けっして起こりえないこと』を表現する型。 メソッドの戻り値においてvoid型は『正常終了時になにも値を返さないメソッド…
never型とは『けっして起こりえないこと』を表現する型です。 けっして発生しない事象に対してnever型が付与されるので、never型にはどんな値もセットできません。 今回はnever型の活用事例について紹介します。 …
any型とは anyは型が不定の時に使う型です。 any型にはどのような値もセットできますし、any型の値を参照する際の制約もありません。 any型には型に対する制約がなにもないため、TypeScriptの型推論の機能を…
おさらい: プリミティブ型の型ガードの実装方法 JavaScriptのデータ型にはプリミティブ型とオブジェクトがあります。 プリミティブ型の型ガードは、プリミティブ型を判別するtypeof演算子を利用することで実装できま…
JavaScriptの真偽値に関する基礎知識 JavaScriptにおけるif文の評価方法を説明する前に、JavaScriptの真偽値に関する基礎知識についておさらいします。 JavaScriptにおけるfalsyな値に…
『undefinedとnullの違い』の結論 undefinedは、そもそも値が設定されていないので返す値自体が存在しないときに『値が未定義』を表現する値のこと。 nullは、本来は何か値を返すべきだけど返す値がないとき…
Null合体演算子(Nullish coalescing operator)について Null合体演算子(??)とはvalue ?? defaultValueのように記述し、左辺(value)がnullishな値(nul…
Null合体代入演算子(Logical nullish assignment operator)について Null合体代入演算子(??=)とはvalue ??= defaultValueのように記述し、左辺(value)…
厳密等価演算子とは 厳密等価演算子(===)とはイコール3つで表現される比較演算子です。 2つのオペランド(被演算子, 演算対象の変数のこと)が等しければtrue、等しくなければfalseを返します。 厳密等価演算子はオ…
データ型について データ型とは文字列や数値、真偽値といった値に対する型のことをいいます。 動的型付き言語とデータ型 JavaScriptをはじめとする動的型付き言語には変数の型は存在しませんが、値自身の型であるデータ型は…
Reactではオブジェクトの配列をJSX内でループ処理するケースがよくあります。 今回はmapを利用したループ処理の実装パターンを紹介します。 今回はTodoアプリケーションを例にとり、JSXでのループ処理の方法を説明し…
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件…
xxxMapという名前のOperatorの処理フローは以下の通りです。 たとえば以下のコードでは、mergeMapを利用して『1 → 2 → 3』というストリームを『1A → 1B → 1C → 2A → 2B → 2C…
Observable(ストリーム)のOperatorでよく使われるものにmapとmergeMapがあります。 メソッド名は似ていますが役割は異なります。今回はmapとmergeMapの違いについて紹介します。 RxJSに…
Action inとAction outが1対1の場合 以下はGET_TODOS_REQUESTというAction Typeの発行をトリガーに、APIへのリクエストとsetTodosというAction Creatorを実…
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux-Saga、redux-observableがあります。 今回はAPIを利用してTodoリストを取得するTodoアプリを例に、redux-obs…
Observableについて ObaservableはRxJSにおけるストリームを表現するクラスです。 RxJSではObservableを操作することでリアクティブプログラミングを実現します。 リアクティブプログラミング…
リアクティブプログラミングについて リアクティブプログラミングとは時間経過によって変化するデータを観測し、変更が生じた際にあらかじめ宣言した操作するというプログラミングのパラダイムです。 リアクティブプログラミングでは時…
APIレスポンスやSQL結果など、JavaScriptでは要素がオブジェクトで構成された配列を操作する機会が多々あります。 そこで今回はオブジェクトの配列を操作する際によく利用されるJavaScriptのmap, fil…
型ガード(Type Guard)とはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。 型の絞り込みをすることでブロック内の変数の型が特定されるため、型のキャ…
JavaScriptのin演算子について JavaScriptのinを利用することでオブジェクトのプロパティの有無を判定できます。 const car = { make: ‘Honda’, model: ‘Accord’…
ユーザー定義型ガードとis(Type Predicate)について TypeScriptには型を絞り込む『型ガード』と呼ばれる機能があります。 前回、【TypeScript】型ガード(タイプガード)の概要。typeofと…