JavaScript
無料で使えるAPI（2025年版）
JavaScript
JavaScript JavaScript Tips | 配列ユーティリティ：分割
何をしたいユーティリティか：「配列の分割」ここでの「分割」は、1つの配列を「小さな配列のかたまり」に切り分ける処理のことです。英語だと「chunk（チャンク）」と呼ばれることが多いです。例えば、こんな...
JavaScript JavaScript Tips | 配列ユーティリティ：ページング
何をしたいユーティリティか：「配列のページング」ここでの「ページング」は、たくさんのデータを「ページ番号」と「1ページあたり件数」に分割して扱う処理のことです。Web の一覧画面でよく見る「1〜10件...
JavaScript JavaScript Tips | 配列ユーティリティ：多段ソート
何をしたいユーティリティか：「多段ソート」ここでの「多段ソート」は、複数のキーを優先順位付きで使って並び替える処理です。SQL でいう ORDER BY category ASC, price DES...
JavaScript JavaScript Tips | 配列ユーティリティ：キー指定ソート
何をしたいユーティリティか：「キー指定ソート」ここでの「キー指定ソート」は、オブジェクトの配列を「特定のキー（プロパティ）」を基準に並び替える処理です。SQL の ORDER BY price ASC...
JavaScript JavaScript Tips | 配列ユーティリティ：グループ化
何をしたいユーティリティか：「配列のグループ化」ここでの「グループ化」は、配列の要素を「ある条件（キー）」ごとにまとめ直す処理です。SQL の GROUP BY や、Excel の「ピボットテーブルの...
JavaScript JavaScript Tips | 配列ユーティリティ：平均算出
何をしたいユーティリティか：「配列の平均算出」ここでの「平均算出」は、配列の中の数値を全部足して、その合計を要素数で割る処理です。学校で習った「平均」と同じですが、プログラムでやるときは「空配列のとき...
JavaScript JavaScript Tips | 配列ユーティリティ：合計算出
何をしたいユーティリティか：「配列の合計算出」ここでの「合計算出」は、配列の中の値を全部足して、ひとつの数値にまとめる処理です。一番シンプルなのは「数値配列の合計」ですが、業務では「オブジェクト配列の...
JavaScript JavaScript Tips | 配列ユーティリティ：最小値取得
何をしたいユーティリティか：「配列の最小値取得」ここでの「最小値取得」は、配列の中で一番小さい値を取り出す処理です。「最大値取得」の逆ですが、業務では同じくらい頻繁に使います。例えばこんな場面がありま...
JavaScript JavaScript Tips | 配列ユーティリティ：最大値取得
何をしたいユーティリティか：「配列の最大値取得」ここでの「最大値取得」は、配列の中で一番大きい値を取り出す処理です。一番シンプルなのは「数値配列の最大値」ですが、業務では「オブジェクト配列の中で、特定...
JavaScript JavaScript Tips | 配列ユーティリティ：ランダム要素取得
何をしたいユーティリティか：「ランダム要素取得」ここでの「ランダム要素取得」は、配列の中から 1 要素（または複数要素）をランダムに取り出す処理です。「配列シャッフル」が「順番を全部ランダムにする」の...
JavaScript JavaScript | Web API：グラフィック・メディア － アニメーション処理
アニメーション処理は「毎フレーム、画面を描き直す仕組み」を作ることグラフィック系の JavaScript でいう「アニメーション処理」は、ざっくり言うと「時間の経過に合わせて、毎フレームごとに“今の状...
JavaScript JavaScript | Web API：グラフィック・メディア － WebRTC の概要
WebRTC は「ブラウザ同士を直接つないで、映像・音・データをやり取りする仕組み」まず一言でいうと、WebRTC は「ブラウザ同士を“ほぼ直接”つないで、カメラ映像・マイク音声・任意のデータをリアル...
JavaScript JavaScript | Web API：グラフィック・メディア － ストリーム処理
「ストリーム処理」は“流れてくる映像・音を、そのまま扱う”考え方グラフィック・メディアの世界でいう「ストリーム」は、ざっくり言うと「時間とともに流れてくるデータ（映像・音）の連続」です。カメラからの映...
JavaScript JavaScript | Web API：グラフィック・メディア － MediaDevices（カメラ・マイク）
MediaDevices は「ブラウザからカメラ・マイクを借りるための窓口」スマホや PC には、カメラやマイクが付いています。普段はカメラアプリやビデオ通話アプリがそれを使っていますが、実は Web...
JavaScript JavaScript | Web API：グラフィック・メディア － Audio API
Audio API は「ブラウザの中にある音のミキサー＆シンセサイザー」JavaScript で音を扱う方法は大きく分けて 2 つあります。ひとつは <audio> タグを JavaScript から...
JavaScript JavaScript | Web API：グラフィック・メディア － 動画制御
「動画制御」は“ブラウザにあるビデオプレイヤーのリモコンを自分で作る”ことHTML の <video> タグは、それだけで再生ボタンやシークバーを持っています。でも JavaScript から操作する...
JavaScript JavaScript | Web API：グラフィック・メディア － 画像読み込み
「画像読み込み」は“ファイルをブラウザに連れてきて、キャンバスに貼る”ことCanvas で画像を扱うときに必ず通るのが「画像読み込み」です。ざっくり言うと、画像ファイルをブラウザに読み込む読み込みが終...
JavaScript JavaScript | Web API：グラフィック・メディア － 描画処理
「描画処理」は“毎回、画面をどうやって作るか”を決めることCanvas API の世界でいう「描画処理」は、ざっくり言うと「キャンバスという白い紙に、どの順番で、何を、どこに、どういう見た目で描くか」...
JavaScript JavaScript | Web API：グラフィック・メディア － 2D コンテキスト
「2D コンテキスト」は“キャンバスに絵を描くためのペン箱”Canvas API を使うとき、必ず最初にやるのがこれです。const canvas = document.querySelector("...
JavaScript JavaScript | Web API：グラフィック・メディア － Canvas API
Canvas API は「ブラウザの中にあるお絵かき用の白い紙」Canvas API は、HTML の <canvas> 要素と JavaScript を使って図形・文字・画像・アニメーションなどを「...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ
1日目のゴール1日目のテーマは「JavaScript で“画面の文字を書き換える”感覚をつかむこと」 です。・ボタンを押したら文字が変わる・入力した文字を画面に出すたったこれだけでも、「ただの HTM...
C# バイブコーディングとセキュリティーについて
バイブコーディングの本質と現代開発における位置づけバイブコーディングとは、仕様や設計書に厳密に従うのではなく、直感や流れ、試行錯誤を重視してコードを書く開発スタイルである。とくにAIによるコード生成や...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：ボタンを押すアプリ
1日目のゴール1日目のテーマは「ボタンを押した“きっかけ”で JavaScript が動くんだ、という感覚をつかむこと」 です。やることはシンプルです。ボタンを押す→ JavaScript が動く→ ...
JavaScript JavaScript Tips | 配列ユーティリティ：配列シャッフル
何をしたいユーティリティか：「配列シャッフル」ここでの「配列シャッフル」は、配列の要素の順番をランダムに並べ替える処理です。例えばこうです。[1, 2, 3, 4, 5]// ↓ シャッフル[3, 1...
JavaScript JavaScript Tips | 配列ユーティリティ：共通要素抽出
何をしたいユーティリティか：「共通要素抽出」ここでの「共通要素抽出」は、複数の配列を比べて「両方（または全部）に含まれている要素だけ」を取り出す処理です。イメージとしては「集合の積（intersect...
JavaScript JavaScript Tips | 配列ユーティリティ：差分抽出
何をしたいユーティリティか：「配列の差分抽出」ここでの「差分抽出」は、「ある配列 A と配列 B を比べて、“どこが違うのか”を取り出す処理」です。業務だと、例えばこんな場面で使います。画面で「変更前...
JavaScript JavaScript Tips | 配列ユーティリティ：重複抽出
何をしたいユーティリティか：「配列の重複抽出」ここでの「重複抽出」は、配列の中で「1 回しか出てこないもの」ではなく、「2 回以上出てくるもの」を取り出す処理です。重複削除（ユニーク化）は「かぶりを消...
JavaScript JavaScript Tips | 配列ユーティリティ：重複削除
何をしたいユーティリティか：「配列の重複削除」ここでの「重複削除」は、同じ値が何度も入っている配列から、重複を取り除いて「一意な要素だけの配列」を作る処理です。業務だと、こんな場面でよく出てきます。ユ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 文字コード判定
何をしたいユーティリティか：「文字コード判定」ここでの「文字コード判定」は、外部から受け取った「バイト列」が、UTF-8 なのか Shift_JIS なのか EUC-JP なのか、といった「エンコーデ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － BOM 除去
何をしたいユーティリティか：「BOM 除去」ここでの「BOM 除去」は、テキストの先頭にこっそり付いている「BOM（Byte Order Mark）」という特殊な目に見えない文字を取り除く処理です。C...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 改行コード統一
何をしたいユーティリティか：「改行コード統一」ここでの「改行コード統一」は、バラバラな改行コード（\n, \r\n, \r）が混ざったテキストを、指定した形式にそろえる処理です。Windows 由来の...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パス正規化
何をしたいユーティリティか：「パス正規化」ここでの「パス正規化」は、"//api//v1/../v2//users/./123/" のような「ぐちゃっとしたパス文字列」を、"/api/v2/users...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パンくず生成
何をしたいユーティリティか：「パンくず生成」ここでの「パンくず生成」は、「今いるページまでの階層（ホーム > マスタ > ユーザー一覧 > ユーザー詳細）」を、決まったルールで文字列や配列として作る」...
JavaScript JavaScript | Web API：クリップボード・共有 － UX 改善パターン
クリップボード・共有の UX は「技術」より「気づかい」で差がつくコピー・ペースト・共有って、コード的にはどれも数行で書けます。でも、「使っていて気持ちいいかどうか」 はその数行の周りにある“気づかい...
JavaScript JavaScript | Web API：クリップボード・共有 － URL 共有
「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能URL 共有は、ざっくり言うと「今見ているページのリンクを、他の人や自分の別の端末に渡す」ための仕組みです。JavaScript で...
JavaScript JavaScript | Web API：クリップボード・共有 － ネイティブ共有
「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口Web アプリの中だけなら、URL をコピーしたり、画面に何か表示したりすれば完結します。でも実際のユーザーは、このページを LINE で送り...
JavaScript JavaScript | Web API：クリップボード・共有 － Share API
Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組みスマホでブラウザを見ていると、「共有」ボタンからLINE やメール、Twitter などに URL を送れますよね...
JavaScript JavaScript | Web API：クリップボード・共有 － セキュリティ制限
クリップボードのセキュリティ制限は「ユーザーを守るための強いガード」クリップボードには、ユーザーがコピーしたあらゆる情報が入ります。パスワード、クレカ番号、住所、仕事の文章、社外秘のコード——全部です...
JavaScript JavaScript | Web API：クリップボード・共有 － 読み取り権限
クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、とてもセンシティブな情報...
JavaScript JavaScript | Web API：クリップボード・共有 － 書き込み権限
「書き込み権限」は“クリップボードを勝手にいじらないためのブレーキ”Clipboard API の「書き込み権限」は、ざっくり言うと 「このサイトに、クリップボードへ書き込ませていいか？」 をブラウザ...
JavaScript JavaScript | Web API：クリップボード・共有 － ペースト処理
「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”ことコピー処理が「アプリ → クリップボード」だとしたら、ペースト処理はその逆、「クリップボード → アプリ」 です。ユーザー...
JavaScript JavaScript | Web API：クリップボード・共有 － コピー処理
「コピー処理」は“ユーザーの手を 1 回減らす”ための仕組みコピー処理は、ユーザーが本来やるはずだったテキストをドラッグで選択Ctrl+C / 右クリック → コピーという手順を、ボタン 1 回で代わ...
JavaScript JavaScript | Web API：クリップボード・共有 － Clipboard API
Clipboard API は「コピー／ペーストをコードから扱うための正式な入口」普段、コピーやペースストはキーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。Clipb...
JavaScript JavaScript | Web API：ファイル・データ操作 － 大容量ファイルの扱い
「大容量ファイルの扱い」は“全部一気にやらない”が合言葉まず前提からいきます。数 KB〜数 MB 程度のファイルなら、FileReader.readAsText や readAsArrayBuffer...
JavaScript JavaScript | Web API：ファイル・データ操作 － CSV / JSON ファイル処理
CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れCSV も JSON も、本質はただのテキストファイルです。JavaScript から扱うとき...
JavaScript JavaScript | Web API：ファイル・データ操作 － バイナリデータ処理
「バイナリデータ処理」は“0と1の生データ”を意識して触ることふだん JavaScript で扱っているのは、文字列・数値・オブジェクトなど「人間に優しい形」のデータです。でも、画像・音声・PDF・Z...
JavaScript JavaScript | Web API：ファイル・データ操作 － input type=”file”
input type="file" は「ユーザーにファイルを選んでもらうための唯一の正規ルート」まず大前提として、ブラウザの JavaScript は、勝手にユーザーのパソコンの中を覗けません。「この...
JavaScript JavaScript | Web API：ファイル・データ操作 － ドラッグ＆ドロップ
ドラッグ＆ドロップは「マウスでつかんで、そのままブラウザに渡す入力方法」ドラッグ＆ドロップ（D&D）は、「ユーザーがファイルや要素をマウスでつかんで、別の場所に“落とす”操作をイベントとして扱う仕組み...
JavaScript JavaScript | Web API：ファイル・データ操作 － ダウンロード処理
「ダウンロード処理」は“ブラウザの中のデータ”を“ユーザーのファイル”に変えることJavaScript でいう「ダウンロード処理」は、ブラウザの中にあるデータ（文字列・JSON・画像・Blob など）...
JavaScript JavaScript | Web API：ファイル・データ操作 － URL.createObjectURL
URL.createObjectURL は「Blob や File に一時的な URL を貼る魔法」URL.createObjectURL は、Blob や File に「一時的にアクセスできる UR...
JavaScript JavaScript | Web API：ファイル・データ操作 － Blob
Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」Blob は、「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。画像・テキスト・JSO...
JavaScript JavaScript | Web API：ファイル・データ操作 － FileReader
FileReader は「ファイルの中身を“いろんな形”で読み出すための専用リーダー」前回の File API で出てきた File は、「ユーザーが選んだファイルへのハンドル（取っ手）」でした。でも...
JavaScript JavaScript | Web API：ファイル・データ操作 － File API
File API は「ユーザーが選んだファイルをブラウザから触るための窓口」まず一番大事なことから。JavaScript は、勝手にユーザーのパソコンの中を覗いたり、好きなファイルを読みまくったりはで...
JavaScript JavaScript | Web API：DOM 拡張 API － shadow DOM の概要
shadow DOM は「外側から見えない、部品専用のプライベート DOM」まず一言でいうと、shadow DOM は「コンポーネントの中だけで完結する、外側から直接いじれない専用 DOM」 です。普...
JavaScript JavaScript | Web API：DOM 拡張 API － documentFragment
documentFragment は「画面にまだ挿していない一時作業用のミニ DOM」DocumentFragment（document.createDocumentFragment() で作るやつ）...
JavaScript JavaScript | Web API：DOM 拡張 API － NodeList 操作
NodeList は「querySelectorAll が返してくる“要素の集まり”」まず前提からいきます。document.querySelectorAll() を使うと、複数の要素が一度に取れます...
JavaScript JavaScript | Web API：DOM 拡張 API － dataset API
dataset は「HTML に自由にメモを書いておけるポケット」dataset は、HTML 要素に “自分で決めたデータ” を安全に持たせておくための仕組み です。HTML の data-◯◯ 属...
JavaScript JavaScript | Web API：DOM 拡張 API － classList API
classList は「要素に付いているクラス名を出し入れするための専用リモコン」HTML 要素には class 属性がありますよね。<div class="box active"></div>この ...
JavaScript JavaScript | Web API：DOM 拡張 API － Event コンストラクタ
Event コンストラクタは「既存イベントを自分の手で発火させるための素のイベント」Event コンストラクタは、「クリックや変更など、既に名前が決まっているイベントを、自分の手で“発生させたことにす...
JavaScript JavaScript | Web API：DOM 拡張 API － CustomEvent
CustomEvent は「自分で名前を付けられるオリジナルイベント」CustomEvent は、「クリックやスクロールみたいな“既存のイベント”ではなく、自分で名前を付けたイベントを作って、発火でき...