JavaScript

スポンサーリンク
JavaScript

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

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

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

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

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

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

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

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

JavaScript | 1 日 90 分 × 7 日アプリ学習:簡単 ToDo アプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「配列でタスクを管理して、画面を“描き直しながら”ToDoリストを動かす感覚をつかむこと」です。作るのは、ほんとにシンプルな ToDo アプリです。テキスト...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:入力チェックアプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。ただ文字を受け取るだけじゃなくて、未入力(空)のときに警告を出す。文字が長...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:強化版カウンターアプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「シンプルだけど“設計の考え方”が入ったカウンターアプリを作ること」です。ただの「+1ボタン」ではなく、複数ボタンを持つ。ボタンごとに役割を分ける(イベント...
JavaScript

JavaScript | 1 日 60 分 × 7 日アプリ学習:超初級編

1日目のゴールと全体の流れ1日目のテーマは「JavaScriptに触ってみて、“動いた!”を体で感じること」です。理解度は50%で十分。それよりも「自分の手で打ったコードが反応した」という経験を作りた...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 安全な分割

安全な分割とは何か分割代入は「欲しい値だけ」を短く取り出せますが、未定義(undefined)や欠落、深いネスト、null、宣言順の問題で簡単にエラーになります。ここが重要です:安全な分割の基本は「外...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 値の入れ替え

値の入れ替え(スワップ)とは何か分割代入を使うと、2つ以上の変数の値を“一時変数なし”で入れ替えられます。ここが重要です:左側のパターンに「新しい並び」を書き、右側に「古い並び」を配列で渡すだけ。読み...
JavaScript

JavaScript | ES6+ 文法:分割代入 – rest 要素

rest 要素とは何かrest 要素(残余要素)は、分割代入の左側で ...rest のように書き、“取りきれなかった残り全部”を配列やオブジェクトとしてまとめて受ける記法です。ここが重要です:配列な...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 一部要素のスキップ

一部要素のスキップとは何か配列の分割代入では、左側のパターンにカンマだけを書いて「その位置の要素を受け取らない」ことができます。ここが重要です:スキップは“要素の位置”で意味を表すので、読み手が「どこ...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 関数引数での使用

関数引数での分割代入とは何か関数のパラメータ部分で分割代入を使うと、渡された配列・オブジェクトから「必要な値だけ」を直接取り出して、引数の宣言に“意図(何を使うのか、欠けたらどうするのか)”を明示でき...
JavaScript

JavaScript | ES6+ 文法:分割代入 – ネスト分割

ネスト分割とは何かネスト分割(ネストした分割代入)は、オブジェクトや配列の“入れ子構造”から、必要な値だけを階層に沿って取り出す書き方です。ここが重要です:左側のパターン(構造の形)に合わせて、右側の...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 変数名変更

変数名変更(エイリアス)とは何か分割代入の「変数名変更」は、オブジェクトのプロパティ名を“別名の変数”へ取り出す書き方です。ここが重要です:{ prop: alias } の形で「右側のオブジェクトの...
JavaScript

JavaScript | ES6+ 文法:分割代入 – デフォルト値

デフォルト値(既定値)とは何か分割代入のデフォルト値は、「取り出そうとした場所に値が無い(undefined)」とき、代わりに使われる“埋め草”です。ここが重要です:デフォルト値は undefined...
JavaScript

JavaScript | ES6+ 文法:分割代入 – オブジェクトの分割代入

オブジェクトの分割代入とは何かオブジェクトの分割代入は、オブジェクトから「欲しいプロパティだけ」を取り出し、同名の変数に一気に割り当てる ES6 の書き方です。ここが重要です:左側のパターン { id...
JavaScript

JavaScript | ES6+ 文法:分割代入 – 配列の分割代入

配列の分割代入とは何か配列の分割代入は、配列の「位置」に合わせて、複数の変数へ一気に値を取り出す書き方です。ここが重要です:左側のパターン に、右側の配列の先頭から順に対応します。足りない要素は un...
JavaScript

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

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

JavaScript | ES6+ 文法:テンプレート文字列 – 従来文字列との比較

何が違うのか(テンプレート文字列 vs 従来の文字列)テンプレート文字列はバッククォートで囲み、${...} に式をそのまま埋め込めて、複数行も“書いたとおり”に保持します。従来の文字列(' や ")...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 可読性向上パターン

可読性向上パターンの考え方テンプレート文字列は“見た目をコードにそのまま表せる”のが強みです。ここが重要です:見た目(レイアウト)とロジック(計算・整形)を分離し、式の埋め込みは短く保つことで、初心者...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – XSS 対策の注意点

テンプレート文字列と XSS の基本認識テンプレート文字列はバッククォートで囲み、${...} に式を埋め込める便利な仕組みですが、ここが重要です:テンプレート文字列自体には自動エスケープ機能がありま...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – タグ付きテンプレート

タグ付きテンプレートとは何かタグ付きテンプレートは、テンプレート文字列の先頭に“関数名”を置き、文字列と式の分解結果をその関数で“加工してから”最終文字列を得る仕組みです。ここが重要です:通常のテンプ...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – HTML 生成用途

テンプレート文字列で HTML を作る意味テンプレート文字列はバッククォートで囲み、${...} に式を埋め込めるため、“見た目どおり”に HTML 断片を組み立てられます。ここが重要です:複数行とイ...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 関数呼び出し埋め込み

関数呼び出し埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } の中に“任意の式”を置けます。その式に関数呼び出しを書けば、戻り値が文字列の中にそのまま埋め込まれます。ここが重...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 条件式埋め込み

条件式埋め込みとは何かテンプレート文字列はバッククォートで囲み、${...}の中に“式”を書いて評価結果を挿入できます。ここが重要です:if/else をそのまま書くのではなく、三項演算子や論理演算子...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 改行保持

改行保持とは何かテンプレート文字列はバッククォートで囲むだけで、書いた改行や空白をそのまま保持します。ここが重要です:'\n' を手書きしなくても、テンプレート内の改行が実際の文字列に含まれるため、H...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 式の埋め込み

式の埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } に“式”を入れて、その評価結果を文字列内に埋め込めます。ここが重要です:式は変数だけでなく、計算、関数呼び出し、条件(三...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – バッククォート

テンプレート文字列とは何かテンプレート文字列は、バッククォート()で囲む新しい文字列リテラルです。ここが重要です:式の埋め込み(${...})、複数行の文字列、可読性の高い整形が“素の文法”で書けます...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:ローカル保存対応メモ帳

この7日間のゴールと全体像この 7 日間は「ローカル保存対応メモ帳」を題材に、ブラウザだけで完結する“ちゃんとした”アプリを作りながら、次の3つを体に入れることがゴールです。localStorage ...
スポンサーリンク