JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでメソッドに空の引数を渡す方法｜デフォルトパラメータの使い方

    JavaScriptでメソッドに空の引数を渡すとは？JavaScriptでは、関数（メソッド）を呼び出す際に引数を省略できます。このとき、関数側でデフォルトパラメータ（デフォルト引数）が定義されていれば、引数が空でも自動的にその初期値が適用されます。以下は、空のパラメータを渡してJavaScriptのメソッドを呼び出すサンプルコードです。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=devi

  2. JavaScriptで変数を定義する3つの方法｜let・var・constの違いを徹底解説

    JavaScriptで変数を定義する方法には、「let」「var」「const」の3種類があります。それぞれスコープ（有効範囲）や巻き上げ（ホイスティング）の挙動が異なるため、特徴を理解して適切に使い分けることが重要です。 3つのキーワードの特徴 1. let ― ブロックスコープの変数 2015年（ES2015）に導入されたキーワードで、ブロックスコープを持つ変数を宣言できます。let で宣言された変数は巻き上げの対象とならないため、宣言前にアクセスするとエラーになります。 2. var ― 関数スコープの変数 従来から使われているキーワードで、関数スコープの変数を作成します。var で宣言

  3. JavaScriptでプリミティブ型とオブジェクト型を関数に渡す方法

    JavaScriptでは、関数に引数として値を渡す際、プリミティブ型（文字列・数値・真偽値など）とオブジェクト型で挙動が異なります。 プリミティブ型とオブジェクト型の違い プリミティブ型は「値渡し」で扱われます。関数に渡すとき、元の変数のコピーが渡されるため、関数内で値を変更しても元の変数には影響しません。 一方、オブジェクト型はオブジェクトへの参照（アドレス）が渡されるため、関数内でプロパティを変更すると、元のオブジェクトにも変更が反映されます。 サンプルコード 以下のコードでは、プリミティブ型とオブジェクト型をそれぞれ関数へ渡して処理しています。 <!DOCTYPE html>

  4. JavaScriptでのモジュールのエクスポートとインポート方法を徹底解説

    はじめにJavaScriptでは、ESモジュール（ES Modules）の仕組みを使うことで、コードを複数のファイルに分割し、必要な機能だけを他のファイルから読み込んで再利用できます。この記事では、exportとimportを使ったモジュールの基本的な使い方を、実際に動作するサンプルコードとともに解説します。注意： このサンプルを実行するには、ローカルホストサーバー（localhost）が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーによりモジュールの読み込みがブロックされるためご注意ください。実装例：モジュールのエクスポートとインポート以下は、JavaScriptでエクス

  5. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し

  6. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が

  7. JavaScriptのグループ化演算子とは？優先順位の制御方法をサンプルコードで解説

    グループ化演算子とはJavaScriptのグループ化演算子は、丸括弧「()」で表され、式を評価する際の優先順位を制御するために使用されます。通常、演算子にはあらかじめ決められた優先順位があり、乗算（*）や除算（/）は加算（+）や減算（-）よりも先に評価されます。しかし、グループ化演算子で式を囲むことで、この優先順位を意図的に変更し、囲まれた部分を最優先で計算させることができます。例えば「2+2*5/22」という式の場合、標準の優先順位では乗算・除算が先に実行されますが、丸括弧を使うことで「(2+2)*5/22」のように加算を先に行わせることが可能です。サンプルコード以下は、JavaScript

  8. JavaScriptのMap（マップ）オブジェクトとは？基本的な使い方をサンプルコード付きで解説

    MapオブジェクトとはMap（マップ）オブジェクトは、ES6（ECMAScript 2015）で導入された組み込みオブジェクトの一つで、「キー」と「値」のペアで構成される要素を管理するコレクションです。通常のオブジェクトとよく似ていますが、Mapの大きな特徴は、キーにオブジェクトやプリミティブ値など、あらゆる型の値を使用できる点にあります。さらに、要素は挿入した順序で保持されるため、for...ofループなどを利用して、追加した順番どおりに反復処理を行うことも可能です。Mapオブジェクトの主なメソッドとプロパティメソッド / プロパティ説明new Map(iterable)配列などのイテラブル

  9. JavaScriptのWeakMapオブジェクトとは？基本の使い方をサンプルコード付きで解説

    WeakMapは、キーと値のペアを要素として持つオブジェクトです。通常のMapとの大きな違いは、キーに必ずオブジェクトを指定しなければならないという点です。値にはプリミティブ型（文字列や数値など）でもオブジェクトでも何でも格納できます。 さらに重要な特徴として、WeakMapのキーとして使用されたオブジェクトへの参照が他に存在しなくなると、そのオブジェクトはガベージコレクション（GC）によって自動的にメモリから解放されます。これにより、メモリリークを防ぎながら一時的なデータを安全に関連付けることができます。 WeakMapの主な特徴 キーにはオブジェクトのみ指定可能（プリミティブ値はキーにで

  10. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  11. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

  12. 【JavaScript入門】クライアントのIPアドレスを取得する方法とサンプルコード

    Webアプリケーションを開発していると、サイト訪問者のパブリックIPアドレスを取得したい場面があります。しかし、JavaScriptにはブラウザから直接IPアドレスを取得する標準APIが用意されていないため、外部のIP検索サービスを利用するのが一般的です。 実装の仕組み 本記事では、ipinfo.ioが提供するJSONP形式のAPIを使用して、クライアントのIPアドレスを取得する方法を紹介します。JSONPを利用することで、同一生成元ポリシー（クロスオリジン制約）を回避しながら、別ドメイン上のデータを受け取ることができます。 サンプルコード <!DOCTYPE html> <

  13. JavaScriptの高階アロー関数とは？基本概念と実装例をわかりやすく解説

    JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。このように、JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれており、変数やオブジェクト、配列などに自由に格納できます。高階アロー関数（Higher Order Arrow Functions）は、関数を引数として受け取る、関数を返す、あるいはその両方を行うことができる関数のことです。高階アロー関数のサンプルコード以下は、JavaScriptで高階アロー関数を実装した例です。配列の各要素を2倍にする処理を、関

  14. JavaScriptでチェックボックスのオン/オフを切り替える方法【サンプルコード付き】

    Webフォームや設定画面などでは、「ボタンをクリックするとチェックボックスの状態が反転する」という動作を実装したいケースがあります。本記事では、JavaScriptを使ってチェックボックスのオン/オフを簡単に切り替える方法を、実際に動くサンプルコードとともに解説します。 実装のポイント チェックボックスのオン/オフ状態は、DOM要素の checked プロパティで管理されています。この値が true ならチェック済み、false なら未チェックです。ボタンのクリックイベント内でこの値を読み取って反転させれば、トグル動作はわずか数行のコードで実現できます。 コード例 以下は、JavaScript

  15. JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

    JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。 setTimeout()でループに遅延を追加する仕組み setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。 そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法

  16. JavaScriptで配列をSet（セット）に変換する方法

    JavaScriptで配列をSetに変換するときの基本JavaScriptでは、Setオブジェクトを使うことで、配列から重複しない一意の値だけを持つコレクションを簡単に作成できます。SetはES6（ECMAScript 2015）で導入された組み込みオブジェクトで、同じ値が複数回追加されても自動的に1つにまとめられるのが特徴です。変換自体は非常にシンプルで、new Set(配列)と書くだけで完了します。コード例：配列からSetへの変換以下は、重複を含む配列をSetに変換して画面に表示するサンプルコードです。<!DOCTYPE html> <html lang=ja> &

  17. JavaScriptで別の関数を返す関数の作り方とクロージャの仕組み

    JavaScriptで関数を返す関数とは JavaScriptでは、関数の戻り値として別の関数を返すことができます。このテクニックは「クロージャ（closure）」と呼ばれる仕組みと密接に関係しており、返された関数は、外側の関数内で定義された変数にアクセスし続けることができるのが大きな特徴です。 以下は、JavaScriptで関数が別の関数を返すコード例です。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <

  18. JavaScriptでアップロード時のファイルサイズを検証する方法

    Webアプリケーションを開発していると、「ユーザーが大きすぎるファイルをアップロードできないようにしたい」という要件によく出会います。サーバー側でのチェックも重要ですが、JavaScriptを使えばブラウザ上（クライアント側）で即座にファイルサイズを検証でき、無駄な通信やサーバーへの負荷を軽減することができます。 ポイントは、ファイル入力要素（<input type=file>）の files プロパティです。ここには選択されたファイルの情報が File オブジェクトとして格納されており、size プロパティ（バイト単位）を参照することで、アップロード前の段階でファイルサイズを取得

  19. JavaScriptの「未宣言（undeclared）」と「未定義（undefined）」の違いとは？

    JavaScriptを学んでいると、「未宣言（undeclared）」と「未定義（undefined）」という一見似たような用語に出会うことがあります。どちらも変数に値が存在しない状態に関係していますが、意味も発生する状況もまったく異なります。本記事では、両者の違いをわかりやすく解説し、実際に動作するサンプルコードもご紹介します。 未宣言（Undeclared）とは？ 未宣言とは、var、let、constのいずれを使っても宣言されていない変数にアクセスしようとしたときに発生する状態です。この場合、JavaScriptはReferenceError（参照エラー）をスローし、プログラムが意図しな

  20. JavaScriptのinnerHTMLとinnerTextの違いとは？実例コードでわかりやすく解説

    JavaScriptでHTML要素の中身を取得・操作する際によく使われるプロパティに、innerHTMLとinnerTextがあります。どちらも要素内のテキストを取得するためのものですが、返される内容に大きな違いがあります。 innerHTMLとinnerTextの違い innerHTML — 要素内のテキストを、空白や内部に含まれるタグ（<b>や<i>など）も含めてすべて返します。元のテキストの書式やタグ構造がそのまま保持されるのが特徴です。 innerText — 要素内のテキストのみを返します。余分な空白は除去され、内部のタグも取り除かれた状態になります。 つまり

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:137/297  20-コンピューター/Page Goto:1 131 132 133 134 135 136 137 138 139 140 141 142 143