ゆめみのフロントコーディング試験のデモアプリをReactで実装しました
デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグラフにプロットするというものです。 詳細はフロントエンドコーディング試験に記載されています。 技術スタックにつ…
JavaScriptJavaScriptTypeScript
JavaScript
JavaScript【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例
Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState（以下State）』のデータは正規…
JavaScript【React】コンポジションで複数の子コンポーネントを表示する方法
おさらい: 子要素をコンポジションで出力する方法 コンポジションとはコンポーネント間のコードを再利用するためのReactの機能です。 コンポジションではchildrenという特別なPropsを利用して子コンポーネントを出…
JavaScriptReact Hook Formの基本的な使い方
React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。 今回はReact Hook Formの基本的な使い方について紹介します。 なお、今回はあくまでReact Hook F…
JavaScript【JavaScript】filterでFalsyな値(偽値)を配列から除去する方法
前提知識: JavaScriptにおけるFalsyな値について falsyな値（偽値、falseyな値）とはfalseと評価される値のことを指します。 JavaScriptにおけるfalsyな値は以下の8つです。1 なお…
JavaScriptuseContextをuseState・useReducer・関数と組み合わせる方法
前回、【React】useContexでContextを参照する手順でReact Contextの概要について紹介しました。 実際のアプリケーションでは、useContextはuseState・useReducer・関数…
JavaScriptEmotionをNext.js x TypeScriptの環境にインストールする手順
Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと評判です。 今回はNext.js with TypeScriptの環境にEmotionをインストールする手順に…
JavaScriptTypeScriptのIntersection型（交差型）の概要と具体例
Intersection型（Intersection Types、交差型）について Intersection型（Intersection Types）は型 & 型のように&で型を連結し、型を合成した新たな…
JavaScriptTypeScriptのUnion型(合併型、共用体型）の概要と具体例
Union型（Union Types、合併型、共用体型）について Union型（Union Types）は型 | 型のように|で型を連結し、『いずれかの型』を表現します。 Union型は日本語では合併型と呼ばれたり1 2…
JavaScriptTypeScriptにおけるtypeof演算子の使いどころ
typeofについて typeofはオペランド（被演算子、演算対象の変数のこと）の型を文字列として返すJavaScriptの演算子です。 オペランドと取得できる文字列の対応は以下の通りです。1 型 戻り値 Undefin…
JavaScriptTypeScriptの『typeof X[keyof typeof X]』の意味を順を追って理解する
TypeScriptのコードでたまにみかけるtype HogeType = typeof Hoge[kyof typeof Hoge]の意味について解説をします。 結論: typeof X[kyeof typeof X]…
JavaScript【TypeScript】Enum型からUnion型に書き換える方法と具体例
TypeScriptではEnum型よりもUnoin型を利用したほうがよいという話をよく聞きます。1 2 3 今回はEnum型からUnion型に書き換えた具体例について紹介します。 Enum型を利用した例 以下はColor…
JavaScriptMapped Types（マップ型）の概要と利用方法まとめ
Mapped Types（マップ型）について Mapped Types（マップ型）とはある型をもとに新たな型を定義する際に利用される型のことをいいます。 Mapped Typesは{ [P in K]: T }のように記…
JavaScript【TypeScript】インデックスシグネチャ(Index Signatures)の概要と利用方法
インデックスシグネチャ（Index Signatures、インデックス型）について インデックスシグネチャ（Index Signatures、インデックス型）とは、インデックス（添字）を利用してオブジェクトのプロパティ（…
JavaScript【TypeScript】 Genericsのextendsでジェネリック関数の引数に制約をつける
extendsを利用することでジェネリクス（Generics）で引数に制約をつけられます。今回は以下の2つのケースについて紹介します。 型の制約をつける場合 ジェネリック関数（ジェネリックメソッド）の引数をstring型…
JavaScript【TypeScript】ジェネリクス(Generics)入門。ジェネリクスの種類と利用例
ジェネリクス(Generics)について プログラミングにおけるジェネリクス(Generics)とは、異なる型を同じコードで処理できるようにする手法のことをいいます。 ジェネリクスは型を抽象化した汎用的なロジックを実装す…
JavaScriptTypeScriptのConditional Typesの概要と使い方を具体例で理解する
Conditional Types（条件付き型）について Conditional Typesとは条件分岐の概念がある型のことをいいます。 Conditional TypesはT extends U ? A : Bのように…
JavaScript【TypeScript】void型とnever型の違い
void型とnerver型の違い、の結論 void型は『なにも返さない』を表現する型、never型は『けっして起こりえないこと』を表現する型。 メソッドの戻り値においてvoid型は『正常終了時になにも値を返さないメソッド…
JavaScriptTypeScriptでのnever型の利用例（網羅性チェックとUnion型のフィルタリング）
never型とは『けっして起こりえないこと』を表現する型です。 けっして発生しない事象に対してnever型が付与されるので、never型にはどんな値もセットできません。 今回はnever型の活用事例について紹介します。 …
JavaScript【TypeScript】any型とunknown型の違いを具体例で理解する
any型とは anyは型が不定の時に使う型です。 any型にはどのような値もセットできますし、any型の値を参照する際の制約もありません。 any型には型に対する制約がなにもないため、TypeScriptの型推論の機能を…
JavaScript【TypeScript】typeof、inを利用したオブジェクトの型判定・型ガード（Type Guard）の方法
おさらい: プリミティブ型の型ガードの実装方法 JavaScriptのデータ型にはプリミティブ型とオブジェクトがあります。 プリミティブ型の型ガードは、プリミティブ型を判別するtypeof演算子を利用することで実装できま…
JavaScript【TypeScript】Union型の型ガード・型の絞り込み方法まとめ
型ガード（Type Guard）とはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。 型の絞り込みをすることでブロック内の変数の型が特定されるため、型のキャ…
JavaScript【TypeScript】inを利用して型の絞り込みを行う方法
JavaScriptのin演算子について JavaScriptのinを利用することでオブジェクトのプロパティの有無を判定できます。 const car = { make: ‘Honda’, model: ‘Accord’…
JavaScriptTypeScriptのis(Type Predicate)を使ってユーザー定義型ガードを実装する
ユーザー定義型ガードとis（Type Predicate）について TypeScriptには型を絞り込む『型ガード』と呼ばれる機能があります。 前回、【TypeScript】型ガード(タイプガード)の概要。typeofと…
JavaScript【TypeScript】型ガード(Type Guard)の概要、typeofとinstanceofの利用例
型ガード（Type Guard）について 型ガード（Type Guard）とはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。 型ガードを利用するとブロック…
JavaScriptTypeScriptのas(型アサーション)の概要と使いどころ
今回はTypeScriptの型アサーション（Type Assertion）について紹介します。利用するTypeScriptのバージョンは4.3.5です。 型アサーション（Type Assertion）とは TypeScr…
JavaScript【TypeScript】アンビエント宣言(declare)と型定義ファイル(d.ts)の概要
アンビエント宣言について アンビエント宣言(Ambient Declarations)とはJavaScriptで記述されたライブラリに型情報を付加するための機能です。 JavaScriptのコードはJavaScript環…
JavaScriptCreate React AppでTypeScriptやReduxやコードフォーマットの環境を整える
Create React Appを利用したReactアプリケーションの作成方法についてまとめます。 アプリケーションの作成方法 アプリケーションの作成は以下の通りです。1 ### npx $ npx create-rea…
JavaScriptReact Reduxのチュートリアル(Todoアプリ)をReact Redux Hooksで書き換えてみた
React Redux hooksはconnect()の代わりとなるAPIです。 React Redux hooks APIを利用することでReduxのStateやActionの実行（dispatch）がconnect(…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をTypeScriptで書き換えてみた
2020年2月現在、React ReduxのBasic Tutorialで紹介されているサンプルアプリケーション（Todoアプリ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScri…
