JavaScript

スポンサーリンク
JavaScript

JavaScript Tips | 配列ユーティリティ:順次処理

テーマの整理:「順次処理」とは何かここでいう「順次処理」は、配列の要素を「必ず 1 件ずつ、順番に」処理していくパターンのことです。特に「処理が非同期(async)」なときに、順番をきちんと守りたい場...
JavaScript

JavaScript Tips | 配列ユーティリティ:Promise 配列制御

テーマの整理:「Promise 配列制御」とは何か「Promise 配列制御」というのは、ざっくり言うと「複数の非同期処理(Promise)を、配列としてまとめて扱い、どう待つか・どう制御するかを決め...
JavaScript

JavaScript Tips | 配列ユーティリティ:非同期 reduce

そもそも reduce と「非同期 reduce」の違いArray.prototype.reduce は、配列を 1 つの値に“畳み込む”ための関数です。合計を出したり、オブジェクトに集計したり、「最...
JavaScript

JavaScript Tips | 配列ユーティリティ:非同期 filter

何をしたいユーティリティか:「非同期 filter」「非同期 filter」は、配列の各要素に対して「async な条件チェック」を行い、条件を満たした要素だけを残すユーティリティです。普通の Arr...
JavaScript

JavaScript Tips | 配列ユーティリティ:非同期 map

何をしたいユーティリティか:「非同期 map」「非同期 map」は、配列の各要素に対して「async な処理」をして、その結果を配列として集めるユーティリティです。普通の map は同期処理専用ですが...
JavaScript

JavaScript Tips | 配列ユーティリティ:map + filter 合成

何をしたいユーティリティか:「map + filter 合成」「map + filter 合成」は、「変換(map)」と「絞り込み(filter)」を、きれいに組み合わせて使うためのパターンやユーティ...
JavaScript

JavaScript Tips | 配列ユーティリティ:reduce ヘルパー

そもそも reduce って何をする関数かArray.prototype.reduce は、「配列を 1 つの値に“畳み込む”ための関数」です。合計を出したり、オブジェクトに集計したり、別の配列に変形...
JavaScript

JavaScript Tips | 配列ユーティリティ:フィルタ合成

何をしたいユーティリティか:「フィルタ合成」「フィルタ合成」は、複数の条件(フィルタ)を組み合わせて、1つのフィルタ関数として扱えるようにするテクニックです。もう少しくだいて言うと、「小さな条件関数を...
JavaScript

JavaScript Tips | 配列ユーティリティ:AND 条件検索

何をしたいユーティリティか:「AND 条件検索」「AND 条件検索」は、配列の中から「複数の条件をすべて満たす要素」だけを探す処理です。論理式でいう「A かつ B かつ C」の“AND(かつ)”です。...
JavaScript

JavaScript Tips | 配列ユーティリティ:OR 条件検索

何をしたいユーティリティか:「OR 条件検索」「OR 条件検索」は、配列の中から「いくつかの条件のうち、どれか1つでも満たしていればOK」という要素を探す処理です。論理式でいう「A または B または...
JavaScript

JavaScript Tips | 配列ユーティリティ:複数条件検索

何をしたいユーティリティか:「複数条件検索」「複数条件検索」は、「この配列の中から、いくつかの条件をすべて満たす要素だけを探したい」ときに使うユーティリティです。例えば、次のような“複数条件”が典型で...
JavaScript

JavaScript Tips | 配列ユーティリティ:インデックス検索

何をしたいユーティリティか:「インデックス検索」「インデックス検索」は、配列の中から「条件に合う要素がどこにあるか」を調べて、その位置(インデックス)を返す処理です。「この値は何番目にある?」「id ...
JavaScript

JavaScript Tips | 配列ユーティリティ:要素置換

何をしたいユーティリティか:「要素置換」「要素置換」は、配列の中の特定の要素を“別の値に差し替える”処理です。「インデックス 2 の要素を新しい値にしたい」「id が一致する要素だけ更新したい」など、...
JavaScript

JavaScript Tips | 配列ユーティリティ:要素削除

何をしたいユーティリティか:「要素削除」「要素削除」は、配列から特定の要素を取り除く処理です。「このインデックスの要素を消したい」「この値を全部消したい」「条件に合うものだけ消したい」など、業務でめち...
JavaScript

JavaScript Tips | 配列ユーティリティ:要素挿入

何をしたいユーティリティか:「要素挿入」「要素挿入」は、配列の好きな位置に新しい要素を差し込む処理です。 の「2 と 4 の間に 3 を入れたい」みたいなやつですね。業務だと、例えばこういう場面でよく...
JavaScript

JavaScript Tips | 配列ユーティリティ:シャローコピー

何をしたいユーティリティか:「シャローコピー」ここでの「シャローコピー」は、配列そのものだけをコピーして、“中身(要素)への参照はそのまま共有する”コピーのことです。一言でいうと、「配列の箱だけ新しく...
JavaScript

JavaScript Tips | 配列ユーティリティ:ディープコピー

ディープコピーとは何か(まずここを正しく理解する)ディープコピーは、配列やオブジェクトの“中身まで含めて完全に別物を作るコピー”のことです。浅いコピー(shallow copy)と違い、ネストされた配...
JavaScript

JavaScript Tips | 配列ユーティリティ:配列コピー

何をしたいユーティリティか:「配列コピー」「配列コピー」は、元の配列を壊さずに、同じ中身を持つ“別の配列”を作る処理です。業務ではほぼ必ずと言っていいほど使います。なぜなら、元の配列を直接いじると「い...
JavaScript

JavaScript Tips | 配列ユーティリティ:部分一致判定

何をしたいユーティリティか:「部分一致判定」「部分一致判定」は、「完全に同じかどうか」ではなく、「一部が条件を満たしているかどうか」を判定する処理です。ここでは主に、配列に対して次のような問いを投げる...
JavaScript

JavaScript Tips | 配列ユーティリティ:完全一致判定

何をしたいユーティリティか:「完全一致判定」ここでの「完全一致判定」は、「この2つの値(配列やオブジェクトを含む)が“中身まで含めてまったく同じか”を判定する処理です。単なる === ではなく、配列の...
JavaScript

JavaScript Tips | 配列ユーティリティ:配列比較

何をしたいユーティリティか:「配列比較」「配列比較」は、「この2つの配列は同じか?」を判定する処理です。ここでいう「同じか?」は、基本的に次の3つを満たすことを意味します。要素数(長さ)が同じ各インデ...
JavaScript

JavaScript Tips | 配列ユーティリティ:安定ソート

そもそも「安定ソート」とは何かまず言葉から整理します。安定ソート(stable sort)とは、「同じキー(同じ値)同士の元々の順番を壊さないソート」のことです。もう少し具体的に言うと、並び替えの基準...
JavaScript

JavaScript Tips | 配列ユーティリティ:順序反転

何をしたいユーティリティか:「順序反転」「順序反転」は、配列の要素の並びを逆向きにする処理です。 を にする、というイメージですね。業務だと、例えばこういう場面で使います。ログを「新しい順」に並べ替え...
JavaScript

JavaScript Tips | 配列ユーティリティ:Map 変換

何をしたいユーティリティか:「Map 変換」ここでの「Map 変換」は、配列から Map(キーと値のペアのコレクション)を作るユーティリティのことです。「id からユーザーを一発で引きたい」「コードか...
JavaScript

JavaScript Tips | 配列ユーティリティ:Set 変換

何をしたいユーティリティか:「Set 変換」ここでの「Set 変換」は、配列を Set に変換するユーティリティのことです。一言でいうと「重複をなくしたい」「含まれているかを高速に調べたい」ときに使う...
JavaScript

JavaScript Tips | 配列ユーティリティ:マップ生成

何をしたいユーティリティか:「マップ生成」ここでの「マップ生成」は、配列から「キー → 値」の対応表(オブジェクトや Map)を作る処理のことです。「id からユーザーを引けるようにしたい」「コードか...
JavaScript

JavaScript Tips | 配列ユーティリティ:条件変換

何をしたいユーティリティか:「条件変換」「条件変換」は、配列の中の「条件に合う要素だけ」を変換し、それ以外はそのまま残す処理です。英語で言うと mapIf、mapWhen、conditionalMap...
JavaScript

JavaScript Tips | 配列ユーティリティ:条件抽出

何をしたいユーティリティか:「条件抽出」「条件抽出」は、配列の中から「ある条件に当てはまる要素だけ」を取り出す処理です。JavaScript 標準の Array.prototype.filter を、...
JavaScript

JavaScript Tips | 配列ユーティリティ:条件削除

何をしたいユーティリティか:「条件削除」「条件削除」は、配列の中から「ある条件に当てはまる要素だけ」を取り除く処理です。英語だとイメージ的には「removeIf」「reject」「filter-out...
JavaScript

JavaScript Tips | 配列ユーティリティ:undefined 削除

何をしたいユーティリティか:「undefined 削除」ここでの「undefined 削除」は、配列の中から undefined を取り除いて、扱いやすい配列に整える処理です。「null 削除」と似て...
JavaScript

JavaScript Tips | 配列ユーティリティ:null 削除

何をしたいユーティリティか:「null 削除」ここでの「null 削除」は、配列の中から null(と必要なら undefined)を取り除いて、扱いやすい配列に整える処理です。さっきの「空要素削除」...
JavaScript

JavaScript Tips | 配列ユーティリティ:空要素削除

何をしたいユーティリティか:「空要素削除」ここでの「空要素削除」は、配列の中から「いらない空っぽの値」を取り除いて、きれいな配列にする処理です。英語だと compact や clean などと呼ばれま...
JavaScript

JavaScript Tips | 配列ユーティリティ:末尾取得

何をしたいユーティリティか:「末尾取得」ここでの「末尾取得」は、配列の「一番最後の要素」や「末尾から数件」を取り出す処理のことです。英語だと last や takeRight などと呼ばれます。業務で...
JavaScript

JavaScript Tips | 配列ユーティリティ:先頭取得

何をしたいユーティリティか:「先頭取得」ここでの「先頭取得」は、配列の「一番最初の要素」や「先頭から数件」を取り出す処理のことです。英語だと head や first、take などと呼ばれます。業務...
JavaScript

JavaScript Tips | 配列ユーティリティ:件数制限

何をしたいユーティリティか:「件数制限」ここでの「件数制限」は、配列の要素数を「最大 N 件まで」に制御する処理のことです。イメージとしては「取りすぎない」「持ちすぎない」ためのブレーキです。業務では...
JavaScript

JavaScript Tips | 配列ユーティリティ:採番

何をしたいユーティリティか:「採番」ここでの「採番」は、配列の要素に「業務で使う番号(連番・管理番号)」を振る処理のことです。さっきやった「インデックス付与」とよく似ていますが、目的が少し違います。イ...
JavaScript

JavaScript Tips | 配列ユーティリティ:インデックス付与

何をしたいユーティリティか:「インデックス付与」「インデックス付与」は、配列の各要素に「何番目か」という情報をくっつける処理です。JavaScript の配列はもともと 0, 1, 2…というインデッ...
JavaScript

JavaScript Tips | 配列ユーティリティ:ネスト化

何をしたいユーティリティか:「配列のネスト化」ここでの「ネスト化」は、平らな配列を「階層構造(入れ子)」に組み立て直す処理のことです。フラット化の逆方向だと思ってください。例えば、次のようなことをした...
JavaScript

JavaScript Tips | 配列ユーティリティ:フラット化

何をしたいユーティリティか:「配列のフラット化」ここでの「フラット化」は、ネスト(入れ子)になっている配列を、浅い配列に“平らにする”処理のことです。英語だと flatten、flat と呼ばれます。...
JavaScript

JavaScript Tips | 配列ユーティリティ:結合

何をしたいユーティリティか:「配列の結合」ここでの「結合」は、複数の配列を 1 つの配列にまとめる処理のことです。英語だと「merge」「concat」と呼ばれます。例えば、こんな場面で使います。月ご...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - tdタグ

td 要素は「表の“中身のマス”を表すセル」<td> は「このマスには“実際のデータ”が入っています」ということを表すタグです。table の中で、tr(行)の中に並ぶ「ふつうのセル」が td です。...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - thタグ

th 要素は「このセルは“見出し側”ですよ」と宣言するタグ<th> は「このセルは、ただのデータじゃなくて“見出し・ラベル”です」とブラウザや機械に伝えるためのタグです。table の中で使われ、「列...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - trタグ

tr 要素は「表の“1行分”をまとめるための行コンテナ」<tr> は「table の中で、横一列のセルをひとかたまりにする“行の箱”」です。table が「表全体の箱」だとしたら、tr は「その中の ...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - tableタグ

table 要素は「行と列で“表形式のデータ”を並べるための箱」<table> は、「行(よこ)と列(たて)で整理されたデータ」を表にするためのタグ です。時間割料金表成績表比較表みたいな、「表で見る...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - ddタグ

dd 要素は「ラベルに対する“中身・説明側”を表すタグ」<dd> は「これは“ラベルの中身・説明・値”ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル(dt)」「その中身(...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - dtタグ

dt 要素は「ラベル側(項目名・用語)」を表すタグ<dt> は「これは“名前・ラベル・用語”の側ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル(dt)」「その中身(dd)...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - dlタグ

dl 要素は「用語とその説明(ペアの一覧)」の箱<dl> は「用語(ラベル)と、その説明(値)」のペアを並べるための箱だと思ってください。“d” は definition(定義)、dl は defin...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - liタグ

li 要素は「リストの“1項目”を表すパーツ」まずイメージから。li 要素は、「ul や ol の中に並ぶ“1つ1つの項目”」 を表すためのタグです。ul(順不同リスト)=「箱」ol(番号付きリスト)...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - olタグ

ol 要素は「順番に意味がある“番号付きリスト”の箱」<ol> は「1 → 2 → 3 の順番に意味がある項目の並び」を表すためのタグです。“o” は ordered(順序付き)の略で、「順番が大事な...
JavaScript

JavaScript | HTML / CSS 連携:リスト・表組み - ulタグ

ul 要素は「順番を気にしない“箇条書きの箱”」まずイメージからいきます。<ul> は「順番はどうでもいいけど、いくつかの項目を並べて見せたい」ときに使う“箇条書きの箱”です。買い物リストサイトのナビ...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - 改行タグ(br)

br 要素は「ここで“行だけ”を折りたいときの改行スイッチ」<br> は「ここで行を折って、すぐ次の行から続けて書いて」とブラウザに指示するためのタグです。ポイントは、「段落を分ける」のではなく「同じ...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - 補足タグ(em)

em 要素は「言い方・ニュアンスを強めるためのタグ」<em> は「ここ、ちょっと“気持ち強め”で読んでほしい」という“ニュアンスの強調”を表すタグです。ブラウザのデフォルト表示だと斜体になりますが、目...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - 強調タグ(strong)

strong 要素は「見た目の太字」ではなく「意味として重要な部分」まずここをしっかり押さえたいです。<strong> は、「ここは文章の中で特に重要だよ」という“意味としての強調”を表すタグです。ブ...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - figcaptionタグ

figcaption 要素は「図のタイトル・説明を書くためのラベル」<figcaption> は、「この図は何なのか?」を説明するための“キャプション専用タグ” です。単体では使わず、必ず <figu...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - figureタグ

figure 要素は「画像やコードなど“ひとかたまりの図”の箱」まずイメージからいきます。<figure> は、「画像・図・コード・表など、“ひとつの図として意味を持つかたまり”を包む箱」です。単なる...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - alt属性

alt 属性は「画像が見えない人のための“言葉の代わり”」まず一番大事な本質からいきます。alt 属性は、「この画像は何なのか?」を“言葉で説明するための場所” です。画像がちゃんと表示されているとき...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - imgタグ

img タグは「ページに画像を埋め込むためのタグ」<img> タグは、「この場所に、この画像ファイルを表示して」とブラウザに伝えるためのタグです。テキストが <p> や <h1> なら、画像は <im...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - target属性

target 属性は「リンクを“どの窓で開くか”を決めるスイッチ」<a> タグの target 属性は、「このリンクをクリックしたとき、どこで開くか」 を指定するためのものです。行き先そのものを決める...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - href属性

href 属性は「このリンクの行き先はここです」という住所ラベルまず一番大事なところから。href 属性は、「このリンク(a タグ)は、どこへ飛ぶのか?」という“行き先”を指定するための属性です。hr...
JavaScript

JavaScript | HTML / CSS 連携:テキスト・リンク・画像 - aタグ

a タグは「ページとページをつなぐ“リンクのタグ”」まず一番大事なことから。<a> タグは「ここをクリックすると、どこかへ移動します」という“リンク”を作るタグです。「a」は anchor(アンカー=...
スポンサーリンク