入門

スポンサーリンク
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – オブジェクト操作設計

オブジェクト操作設計とは何か「オブジェクト操作設計」というのは、単に user.name = "Alice" といった「その場しのぎの代入」を書くのではなく、どんな形のオブジェクトにするか(構造・型)...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.getPrototypeOf

Object.getPrototypeOf とは何かObject.getPrototypeOf は、あるオブジェクトの「プロトタイプ(親オブジェクト)」を取り出すためのメソッドです。プロトタイプとは、...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.getOwnPropertyNames

Object.getOwnPropertyNames とは何かObject.getOwnPropertyNames は、オブジェクトが「自分で持っている」すべてのプロパティ名を配列で返すメソッドです。...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.fromEntries

Object.fromEntries とは何かObject.fromEntries は、「配列(や Map)の一覧」からオブジェクトを作り直すためのメソッドです。一言でいうと、Object.entri...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.entries

Object.entries とは何かObject.entries は、オブジェクトの中身を「配列の配列」に変換する ES2017(ES8)のメソッドです。「キーと値のペア」を という2要素配列にし、...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.assign

Object.assign とは何かObject.assign は、複数のオブジェクトを「左から右へ」順番にコピーして、1つのオブジェクトにまとめるための ES6 のメソッドです。一言でいうと、「プロ...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.is

Object.is とは何かObject.is は、「2つの値が“本当に”同じ値かどうか」を判定するための ES6 の比較関数です。見た目は ===(厳密等価演算子)に似ていますが、NaN と +0 ...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – メソッド定義省略

メソッド定義省略とは何かオブジェクトの「メソッド定義省略」は、ES6 から入った“関数っぽいプロパティ”を短く書くための記法です。従来はこう書いていました。const user = { name: "...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – 計算されたプロパティ名

計算されたプロパティ名とは何か「計算されたプロパティ名(computed property name)」は、オブジェクトリテラルのキーを、文字列リテラルではなく「式の結果」から動的に決める書き方です。...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – プロパティ短縮記法

プロパティ短縮記法とは何かオブジェクトの「プロパティ短縮記法」は、変数名とプロパティ名が同じときに、キー: 値 の 値 を省略できる ES6 の書き方です。ふつうはこう書きます。const name ...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – ラムダのスコープ

ラムダのスコープを一言でいうとラムダ式の「スコープ」は、「ラムダ式の“中から”“外のどこまで”見えるのか・アクセスできるのか」という話です。ここをちゃんと理解していないと、「ローカル変数をラムダの中で...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – コンストラクタ参照

コンストラクタ参照を一言でいうとコンストラクタ参照(ClassName::new)は、「new クラス名(...) を、そのまま“関数”として渡すための短い書き方」です。ラムダ式で書くと() -> n...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – メソッド参照

メソッド参照を一言でいうとメソッド参照(::)は、「すでに存在するメソッドやコンストラクタを、“ラムダ式の代わりに”そのまま関数として渡すための短い書き方」です。例えば、names.forEach(s...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – Supplier

Supplier を一言でいうとjava.util.function.Supplier<T> は、「引数は何も受け取らずに、T 型の値を 1 つ“供給する(用意してくれる)”関数」を表す関数型インター...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – Consumer

Consumer を一言でいうとjava.util.function.Consumer<T> は、「T 型の値を 1 つ受け取って“何かする”けれど、結果(戻り値)は返さない関数」 を表す関数型インタ...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – Function

Function を一言でいうとjava.util.function.Function<T, R> は、「T 型の値を 1 つ受け取って、R 型の値を 1 つ返す“変換処理”を表す関数型インターフェー...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – Predicate

Predicate を一言でいうとjava.util.function.Predicate<T> は、「T 型の値を 1 つ受け取って、true / false を返す“条件判定関数”を表す関数型イン...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – @FunctionalInterface

@FunctionalInterface を一言でいうと@FunctionalInterface は、「このインターフェースは“関数型インターフェース”として使うつもりですよ」とコンパイラに宣言するた...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – 関数型インターフェース

関数型インターフェースを一言でいうと関数型インターフェースは、「たった1つだけ“抽象メソッド”を持つインターフェースで、その1つのメソッドを“関数”として扱うための入れ物」です。ラムダ式は「単体では宙...
Java

Java | Java 詳細・モダン文法:ラムダ式・関数型 – ラムダ式の構文

ラムダ式とは何か(まずイメージから)ラムダ式は、Java 8 から入った「小さな“処理そのもの”を値として書くための記法」です。「このタイミングで、こういう処理を実行してほしい」という“やりたいこと”...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 旧構文との比較

スプレッド構文と「旧構文」をざっくり比較するとES6 のスプレッド構文 ... は、「配列やオブジェクトの中身をその場でバラして並べる」ための新しい書き方です。旧構文(ES5 まで)は、concat ...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 不変データ作成

「不変データ」とは何か(まずここを押さえる)不変データ(immutable data)とは、「一度作ったデータを書き換えず、変更したいときは新しいデータを作る」という考え方です。ここが重要です:配列....
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 浅いコピーの理解

「浅いコピー」とは何か(まずイメージを掴む)スプレッド構文のコピー( や { ...obj })は「浅いコピー(shallow copy)」です。ここが最重要ポイントです:外側の「箱」(配列そのもの・...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 上書き順序

スプレッド構文の「上書き順序」とは何かスプレッド構文では、... を使って配列・オブジェクトの中身を「左から右へ」順番に展開していきます。ここが最重要ポイントです:オブジェクトの { ...a, .....
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 結合処理

スプレッド構文による「結合処理」とは何かスプレッド構文での結合処理は、... を使って「配列やオブジェクトの中身をバラして並べ直し、新しい配列/オブジェクトを作る」書き方です。ここが重要です:配列なら...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 関数引数展開

関数引数展開とは何かスプレッド構文の「関数引数展開」は、fn(...array) のように書いて「配列(や配列っぽいもの)をバラして、関数の複数の引数として渡す」書き方です。ここが重要です:... が...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – オブジェクトコピー

オブジェクトコピーとスプレッド構文の関係オブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身(プロパティ)を展開して、新しいオブジェクトを作る」書き方です。ここが重...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 配列コピー

スプレッド構文で「配列コピー」とは何かスプレッド構文を使うと、 のように書いて「配列の中身だけを取り出して、新しい配列を作る」ことができます。ここが重要です:const copy = arr; は“同...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – オブジェクト展開

オブジェクトのスプレッド構文とは何かオブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身(プロパティ)をその場に展開する」書き方です。イメージとしては、「そのオブジ...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 配列展開

スプレッド構文の「配列展開」とは何かスプレッド構文の配列展開は、...array の形で「配列をバラして、その場に1個ずつ並べる」書き方です。ここが重要です: と書くと「arr の中身だけ」が新しい配...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – 「TypeScriptらしい書き方」の理解

「TypeScriptらしい書き方」って何を指しているのかまず前提をはっきりさせます。「TypeScriptらしい書き方」というのは、単に「: string とか : number をつけること」では...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – 基礎段階での型設計ルール

「型設計ルール」を決めておく意味最初に、なぜ「ルール」を意識した方がいいかから話します。TypeScript は、とりあえず書いてもそれなりに動いてくれる言語です。でも「何となく型を付ける」だけだと、...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – エラーにならないunion設計

なぜ「union型なのにすぐエラーになる」のかまず、よくあるつまずきから整理します。function printId(id: string | number) { console.log(id.toU...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – Discriminated Unionの考え方

まず「Discriminated Union」をざっくり日本語にすると難しいカタカナですが、意味はシンプルです。Discriminated Union(判別可能ユニオン)=「ある1つのプロパティの値に...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – 型の絞り込み(narrowing)

「型の絞り込み」とは何かを一言でつかむ型の絞り込み(narrowing)は、「最初はざっくりした型だったものを、条件分岐などを通して“より具体的な型”に狭めていくこと」です。TypeScript では...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – unionとintersectionの違い

まずイメージでつかむ:unionとintersectionは「または」と「かつ」最初に一番大事なことだけ頭に入れてください。A | B(union型)→ 「A または B」。どちらか一方ならOK。A ...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – intersection型の基本

intersection型は「AもBも両方持つ」型まず一言でいうと、intersection型(インターセクション型、&)は 「AかつB」=「Aの性質もBの性質も同時に持つ型」 です。対比でいうとこう...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型の共通プロパティ

「union型の共通プロパティ」とは何かまず前提から整理します。union型は「A か B かどちらか」の型でした。type User = { id: number; name: string;};t...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型とif分岐

union型とif分岐の関係をまずイメージでつかむunion型は「A か B かどちらか」という“選択肢のある型”でした。そして if 分岐は、「今この瞬間は A なのか B なのかを確かめるための問...
TypeScript

TypeScript | 基礎文法:Union・基本型操作 – union型の基本

union型は「AかBかどちらか」の型まずイメージからいきます。union型(ユニオン型)は、「この値は“これか、あれか”のどれかです」という“選択肢のある型」です。書き方はとてもシンプルで、型と型の...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数でよく出る型エラー

はじめに:型エラーは「怒られている」のではなく「守られている」関数まわりで出る型エラーは、最初かなりストレスになりますよね。でも本質的には、「その書き方だと、実行時にバグる可能性が高いよ」と Type...
TypeScript

TypeScript | 基礎文法:関数の基礎 – nullチェックの重要性

そもそも「nullチェック」って何のためにやるのかまず一番大事なところから。nullチェックは「そこに“あるはずのもの”が、本当にあるかを確認する行為」です。プログラムを書いていると、ついこう思いがち...
TypeScript

TypeScript | 基礎文法:関数の基礎 – in演算子による型ガード

「in演算子による型ガード」は何をしてくれるのかin 演算子による型ガードは、「このオブジェクトは、このプロパティを持っているか?」を調べることで、型を絞り込む仕組みです。人間の感覚だと、こうです。「...
TypeScript

TypeScript | 基礎文法:関数の基礎 – typeofによる型ガード

typeofによる型ガードとは何かtypeof による型ガードは、「値の実行時の型をチェックして、その結果をもとに TypeScript が変数の型を“狭くする”仕組みです。人間の感覚としてはこうです...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 型ガードの基礎

「型ガード」とは何かを一言でつかむまずイメージからいきます。型ガードは、「この if を通ったなら、この変数は“この型”だと安全に言えるよ」ということを、TypeScript にちゃんと分かってもらう...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 条件分岐と型推論

「条件分岐すると型も変わる」という感覚から始めるTypeScript のおいしいところは、if や switch で条件分岐すると、「そのブロックの中だけ型が狭くなる」 ことです。「条件でチェックした...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 戻り値で型が決まるケース

「戻り値で型が決まる」ってどういうことかふつうは「引数の型 → 戻り値の型」という流れで関数を考えますが、TypeScript では 「戻り値の書き方や宣言のしかたが、逆に“型”を決める・変化させる」...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数型エイリアス

関数型エイリアスってそもそも何?まず一言でいうと、関数型エイリアスは「関数の“形”に名前をつける仕組み」です。「この関数は、こういう引数を受け取って、こういう型を返す」という“関数の型”に、わかりやす...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数を変数に代入する型

「関数を変数に代入する」ときに型で何を約束しているかまず前提をそろえます。TypeScript では、「関数そのもの」も値として扱えて、変数に代入できます。function add(a: number...
TypeScript

TypeScript | 基礎文法:関数の基礎 – コールバック関数の型

「コールバック関数の型」とは何かまず、「コールバック関数」という言葉をちゃんと掴みましょう。コールバック関数は、「関数に“引数として渡される関数”」のことです。function doTwice(fn:...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数式の型

「関数式の型」とは何かまず言葉の整理からいきます。TypeScript で「関数式の型」といったとき、だいたい次のようなものを指します。const add = function (a: number,...
TypeScript

TypeScript | 基礎文法:関数の基礎 – アロー関数の型

アロー関数でも「型の考え方」は普通の関数と同じまず一番大事なところから。アロー関数でも、「引数の型」と「戻り値の型」を決める考え方は、普通の function とまったく同じです。// 通常の関数fu...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 可変長引数(rest)

可変長引数(rest)は「いくつ来るか分からない引数」を受け取る仕組みまずイメージから。可変長引数(rest 引数)は、「この関数、引数が 1 個かもしれないし、10 個かもしれない。数が決まっていな...
TypeScript

TypeScript | 基礎文法:関数の基礎 – デフォルト引数

デフォルト引数は「来なかったときの標準値」デフォルト引数は、「この引数が渡されなかったときは、代わりにこれを使ってね」という“標準値”をあらかじめ決めておく仕組みです。書き方はシンプルで、引数に = ...
TypeScript

TypeScript | 基礎文法:関数の基礎 – オプション引数

オプション引数は「渡してもいいし、渡さなくてもいい」引数まずイメージからいきます。オプション引数は、「この引数は“あってもなくてもいい”よ」ということを型で表すための仕組みです。書き方はとてもシンプル...
TypeScript

TypeScript | 基礎文法:関数の基礎 – never型の基礎

never型は「絶対に起こらない」を表す型まず一番大事なイメージからいきます。never 型は、「ここには“値が存在しないはずだ”」「ここには“絶対に到達しないはずだ”」という場所を型で表すための特別...
TypeScript

TypeScript | 基礎文法:関数の基礎 – void型

void型は「値を返さないつもり」を表す型void 型は、「この関数は“意味のある値”を返さない」という意図を型で表すための特別な型です。function print(message: string)...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 戻り値型の省略

「戻り値型の省略」って、していいの?ダメなの?まず結論から言うと、TypeScript では 「戻り値型は省略しても動く」 し、「でも省略しない方がいい場面もたくさんある」 です。function a...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 戻り値型

戻り値型って何を約束しているのか関数の「戻り値型」は、「この関数は、呼び出されたときに“最終的にどんな型の値を返すか”の約束を書く場所です。function greet(name: string): ...
TypeScript

TypeScript | 基礎文法:関数の基礎 – 関数の引数型

関数の引数型って何をしているのかまず一番シンプルに言うと、「この関数は、どんな“形”の値を受け取るのかを約束する」のが引数型です。function add(a: number, b: number):...
スポンサーリンク