0Pricing
TypeScript Academy · レッスン

FormData、URL、URLSearchParamsの操作

FormDataでフォーム入力を収集し、URLを安全に解析・構築し、URLSearchParamsでクエリパラメーターを操作します

「FormData、URL、URLSearchParamsの操作」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標: ブラウザーのデータAPIであるFormData、URL、URLSearchParamsを使います。

  • フォームの値を収集する
  • URLを作成して解析する
  • クエリパラメーターを管理する

FormDataの基本

FormDataは、nameによって入力値を収集します。entries()を反復すると、文字列またはFileオブジェクトとして[name, value]のペアが得られます。

const form = document.querySelector("form#login");
if (form) {
  const fd = new FormData(form);
  for (const [key, val] of fd.entries()) {
    console.log(key, val);
  }
}

FormDataへのappend

appendを使ってFormDataを手動で作成できます。アップロード用のBlob/Fileオブジェクトも追加できます。

const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");

for (const [k,v] of fd.entries()) {
  console.log(k, v);
}

URLの構成要素

URLは文字列を各部分（hostname、pathname、search、hash）に解析します。手作業で文字列を分割するより安全です。

const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /page

URLSearchParamsのget

URLSearchParamsを使うと、クエリパラメーターを簡単に読み書きできます。get()はstring | nullを返します。

const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // null

パラメータの更新

set でパラメータを更新し、append で追加し、delete で削除します。シリアライズには toString() を使用します。

const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescript

パラメータの取得確認

簡単な確認：見つからない場合、URLSearchParams.get("key") は何を返しますか？

振り返り

振り返り：FormData は入力の name と value を収集します。URL は安全に解析します。URLSearchParams はクエリパラメータを管理します。

よくある質問

「FormData、URL、URLSearchParamsの操作」レッスンは無料ですか？

はい。「FormData、URL、URLSearchParamsの操作」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「FormData、URL、URLSearchParamsの操作」で何を学びますか？

FormDataでフォーム入力を収集し、URLを安全に解析・構築し、URLSearchParamsでクエリパラメーターを操作します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「FormData、URL、URLSearchParamsの操作」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. libのDOM型とquerySelector（strict null checks）
  2. イベントの型、カスタムイベント、HTMLElementサブタイプの絞り込み
  3. FormData、URL、URLSearchParamsの操作
← TypeScript Academyに戻る