2026-01-08

スポンサーリンク
Next.js

Next.jsで学ぶReact講座(完全初心者向け・30日) | 第4章:実用的React – フォーム処理

フォーム処理の全体イメージReact / Next.js で「実用的なアプリ」を作ろうとすると、必ず出てくるのがフォームです。ログインフォーム、問い合わせフォーム、検索フォーム、プロフィール編集画面…。どれも本質的には「入力値を state...
Next.js

Next.jsで学ぶReact講座(完全初心者向け・30日) | 第4章:実用的React – ローディング・エラー処理

ローディング・エラー処理がなぜ「実務で必須」なのかアプリが「ちゃんと動く」ことと、「ちゃんと使える」ことは別物です。API からデータを取ってくるような画面では、必ずこういう瞬間が生まれます。データを取りに行っている最中サーバーが落ちている...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:フォームバリデーションアプリ

この7日間のゴールと全体像この 7 日間は「ログインフォーム風のミニアプリ」を題材に、メールアドレスとパスワードの入力チェックを通して、正規表現での形式チェックエラー表示と submit 制御ユーザー体験(UX)を意識したバリデーション設計...
TypeScript

TypeScript | 基礎文法:配列・タプル – 配列操作時の型エラー対処

よくある「配列操作の型エラー」はどこから来るのかTypeScriptで配列を触り始めると、かなりの確率で型エラーにぶつかります。でも、その多くは「TypeScriptが何を守ろうとしているか」が分かると、パターンとして整理できます。ざっくり...
TypeScript

TypeScript | 基礎文法:配列・タプル – forEachと型

forEachは「配列をなめるだけ」のメソッドforEach は、配列の各要素に対して順番に処理を実行するだけのメソッドです。map や filter と違って、戻り値を使って新しい配列を作ったりはしません。const nums = [1,...
TypeScript

TypeScript | 基礎文法:配列・タプル – reduceの型指定

reduceの「型指定」とは何を決めるものかreduce は、配列を「1つの値」に畳み込むメソッドです。TypeScript的に一番大事なのは、「途中経過(累積値:acc)の型をどう扱うか」です。この「累積値の型」を、TypeScriptに...
TypeScript

TypeScript | 基礎文法:配列・タプル – findの戻り値型

findの基本的な動きと戻り値のイメージfind は、配列の中から「条件を満たす最初の要素」を1つだけ返すメソッドです。もし条件を満たす要素が1つも見つからなかった場合は、undefined を返します。const array = [5, ...
TypeScript

TypeScript | 基礎文法:配列・タプル – filterの型推論

filterの型推論は「何が残る配列か」を推理してくれる仕組みfilter は、「条件を満たす要素だけを残して新しい配列を作る」メソッドです。TypeScript はここで、「元の配列の要素の型」と「filter に渡した関数の戻り値の型」...
TypeScript

TypeScript | 基礎文法:配列・タプル – 配列mapの型推論

「配列mapの型推論」とは何をしてくれているのかmap は、「配列の各要素を変換して、新しい配列を作る」メソッドです。TypeScriptは、このときに「元の配列の要素の型」と「変換関数の戻り値の型」から、新しい配列の型を自動で推論してくれ...
TypeScript

TypeScript | 基礎文法:配列・タプル – スプレッド構文と型

スプレッド構文とは何か(型の世界でどう見えるか)スプレッド構文 ... は、配列やオブジェクトの「中身を展開する」ための記法です。配列なら「要素をバラして別の配列に入れ直す」、オブジェクトなら「プロパティをコピーする」イメージです。cons...
TypeScript

TypeScript | 基礎文法:配列・タプル – 可変長タプル

可変長タプルとは何か(「一部だけ長さが伸びるタプル」)タプルは本来「要素数が固定」の型ですが、「ここまでは固定、それ以降は同じ型がいくつでも続いていい」という形を表現できるのが「可変長タプル(可変長タプル型)」です。ざっくり言うと、先頭の何...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルとreadonly

タプルとreadonlyの関係をざっくりイメージするタプルは「要素の数・順番・型が決まっている小さなセット」でした。ここに readonly を組み合わせると、「形も中身も変えない前提のタプル」を作れます。つまり、タプル:この位置にこの型、...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルの要素アクセス

タプルの要素アクセスは「位置ごとに型が決まっている」のがキモタプルは、「何番目に何の型が入るか」まで型で決まっている配列でした。だからこそ、要素にアクセスしたときも「どの位置を取るか」で型が変わります。let user: [string, ...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルと配列の違い

まずざっくりしたイメージの違い同じ「[]」を使うのでややこしいんですが、役割はけっこう違います。配列:「同じ型の値が、いくつ並ぶか分からない入れ物」タプル:「要素の数・順番・型が決まっている、小さな“セット”」このイメージを頭に置いたまま、...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルの型固定

「タプルの型固定」とは何かタプルの一番大きな特徴は、「要素の数・順番・型がすべて固定される」ことです。普通の配列は「number が何個でも」「string が何個でも」という“長さフリー”な構造ですが、タプルは「この位置にはこの型」「要素...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルの基本構文

タプルの基本構文の全体像タプルは、「要素の数・順番・型が決まっている配列」を表すための構文です。基本形はとてもシンプルで、「配列リテラルの [] の中に、位置ごとの型をカンマ区切りで並べる」だけです。let t: [型1, 型2, 型3, ...
TypeScript

TypeScript | 基礎文法:配列・タプル – タプルとは何か

タプルとは何か(「位置に意味がある配列」)タプルは、ざっくり言うと「要素の数と順番と型が決まっている配列」です。普通の配列は「同じ型の値がズラッと並ぶもの」ですが、タプルは「1番目はこれ、2番目はこれ…と、位置ごとに型と意味が決まっているも...
TypeScript

TypeScript | 基礎文法:配列・タプル – readonly配列

readonly配列とは何か(「中身を書き換えられない配列」)readonly配列は、一言でいうと「中身を変更できない配列」です。「参照はするけど、追加・削除・書き換えはさせたくない」というときに使います。const nums: reado...
スポンサーリンク