【TypeScript】インデックスシグネチャ(Index Signatures)の概要と利用方法
インデックスシグネチャ（Index Signatures、インデックス型）について インデックスシグネチャ（Index Signatures、インデックス型）とは、インデックス（添字）を利用してオブジェクトのプロパティ（…
JavaScriptJavaScriptプログラミング
JavaScriptJavaScript【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演算子を利用することで実装できま…
JavaScriptJavaScirptのif文の真偽値まとめ。if(value)やif(value == null)などについて具体例で理解する
JavaScriptの真偽値に関する基礎知識 JavaScriptにおけるif文の評価方法を説明する前に、JavaScriptの真偽値に関する基礎知識についておさらいします。 JavaScriptにおけるfalsyな値に…
JavaScript【JavaScript】undefinedとnullの違い・判別方法を具体例で理解する
『undefinedとnullの違い』の結論 undefinedは、そもそも値が設定されていないので返す値自体が存在しないときに『値が未定義』を表現する値のこと。 nullは、本来は何か値を返すべきだけど返す値がないとき…
JavaScript【JavaScript】Null合体(Nullish coalescing)とオプショナルチェーン(Optional chaining)の基本
Null合体演算子（Nullish coalescing operator）について Null合体演算子(??)とはvalue ?? defaultValueのように記述し、左辺（value）がnullishな値（nul…
JavaScript【JavaScript】Null合体代入演算子(Logical nullish assignment operator)の基本
Null合体代入演算子（Logical nullish assignment operator）について Null合体代入演算子（??=）とはvalue ??= defaultValueのように記述し、左辺（value）…
JavaScript【JavaScript】厳密等価演算子（===, イコール3つ）と等価演算子（==, イコール2つ）の違い
厳密等価演算子とは 厳密等価演算子(===)とはイコール3つで表現される比較演算子です。 2つのオペランド（被演算子, 演算対象の変数のこと）が等しければtrue、等しくなければfalseを返します。 厳密等価演算子はオ…
JavaScript【JavaScript】データ型（プリミティブ型とオブジェクト）、リテラルに関する基礎知識
データ型について データ型とは文字列や数値、真偽値といった値に対する型のことをいいます。 動的型付き言語とデータ型 JavaScriptをはじめとする動的型付き言語には変数の型は存在しませんが、値自身の型であるデータ型は…
JavaScript【React】mapによるJSXループ処理の実装方法パターン集
Reactではオブジェクトの配列をJSX内でループ処理するケースがよくあります。 今回はmapを利用したループ処理の実装パターンを紹介します。 今回はTodoアプリケーションを例にとり、JSXでのループ処理の方法を説明し…
JavaScript【React】JSXでif文を利用して要素を出し分ける（条件付きレンダー）方法
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件…
JavaScript【RxJS】concatMap, mergeMap, switchMap, exhaustMapの違い
xxxMapという名前のOperatorの処理フローは以下の通りです。 たとえば以下のコードでは、mergeMapを利用して『1 → 2 → 3』というストリームを『1A → 1B → 1C → 2A → 2B → 2C…
JavaScript【RxJS】mapとmergeMapの違い
Observable（ストリーム）のOperatorでよく使われるものにmapとmergeMapがあります。 メソッド名は似ていますが役割は異なります。今回はmapとmergeMapの違いについて紹介します。 RxJSに…
JavaScript【redux-observable】Epicで複数のActionを発行する方法
Action inとAction outが1対1の場合 以下はGET_TODOS_REQUESTというAction Typeの発行をトリガーに、APIへのリクエストとsetTodosというAction Creatorを実…
JavaScriptTodoアプリで理解するredux-observableによる非同期処理の実装方法
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux-Saga、redux-observableがあります。 今回はAPIを利用してTodoリストを取得するTodoアプリを例に、redux-obs…
JavaScript初学者のためのredux-observable・Epic入門
Observableについて ObaservableはRxJSにおけるストリームを表現するクラスです。 RxJSではObservableを操作することでリアクティブプログラミングを実現します。 リアクティブプログラミング…
git–skip-worktreeでGitの管理から除外したファイルを変更する方法
git update-index –skip-worktreeというコマンドをご存知でしょうか？ これはGitで既に管理されているファイルをローカルで無視する方法です。 例えば、『設定ファイルなど既にGitで管理されて…
gitGitで既に管理されているファイルをローカルで無視する方法
Gitでファイルを管理しない方法としては.gitignoreや.git/info/excludeに記述する方法があります。 これらの方法はGitでまだ管理されていない(Untracked)ファイルに対して行うものです。 …
JavaScript【RxJS入門】Observable、Observer、subscribe、Operatorの概要・関係性
リアクティブプログラミングについて リアクティブプログラミングとは時間経過によって変化するデータを観測し、変更が生じた際にあらかじめ宣言した操作するというプログラミングのパラダイムです。 リアクティブプログラミングでは時…
gitQiitaやGitHubのコメントで折りたたみ要素を作る方法
GitHubのissuesに長いエラーコードを載せたいときや、Qiitaで長いソースコードを参考までに載せたいときなどに折りたたみ要素を作りたい場合があります。 折りたたみ要素は<details>というHTM…
JavaScript【JavaScript】map, filter, findの使い方。オブジェクト配列における具体的な活用事例
APIレスポンスやSQL結果など、JavaScriptでは要素がオブジェクトで構成された配列を操作する機会が多々あります。 そこで今回はオブジェクトの配列を操作する際によく利用されるJavaScriptのmap, fil…
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環…
Rubyredis-objectsを使ってRailsとRedisを組み合わせる
redis-objectsについて redis-objectsとはRedisのデータ型をRubyのオブジェクトにマッピングすることでRedisにRuby的なインタフェースを提供するgemです。 Redis::Object…
RubyRails.cacheの保存先（キャッシュストア）をRedisにする方法
前回、Rails.cacheの使い方、低レベルキャッシュの利用方法でRails.cacheの紹介をしました。 Rails.cacheは低レベルキャッシュを実現するためのメソッドです。Rails.cacheのデータの保存先…
RubyRails.cacheの使い方、低レベルキャッシュの利用方法
特定の値やクエリ結果をキャッシュすることを低レベルキャッシュと呼びます。 今回は低レベルキャッシュを実装する際に利用されるRails.cacheについて紹介します。1 Rails.cacheについて RailsではAct…
RubyRuboCop導入後の設定カスタマイズ方法
前回、RuboCopのインストール手順と具体的な使い方でRuboCopのインストール手順について紹介しました。 RuboCopは導入して終わりではなく、プロジェクトのコーディングスタイルに適した形へカスタマイズする必要が…
RubyRuboCopのインストール手順と具体的な使い方
RuboCopとは RuboCopとはRuby用のLintツールです。 設定ファイルを編集することでコーディングスタイルのチェック項目をカスタマイズできたり、RuboCop用のgemを追加することで機能の拡張ができたりし…
Ruby【Rails】Proc/tap/ブロック引数を活用してバッチ処理をリファクタリングする
今回利用するサンプルコード lib/tasks/example.rake namespace :batch_example do task task_example: :environment do |task| # ロ…
Rubyblock_given?/ブロック引数でブロックの有無を判定する
Procオブジェクト（ブロック）を利用するメソッド内でブロックの有無を確認する方法には2つあります。ひとつはblock_given?を利用する方法、もうひとつはブロック引数をチェックする方法です。 メソッドにブロックを渡…
RubyProc/begin式/tapによるインスタンス生成方法の比較
独自のLoggerクラスを実装する時をはじめ、インスタンスの生成とインスタンスメソッドの実行をまとめて行いたいケースがあります。具体的には以下のようなコードです。 class MyLogger def self.logg…
