JavaScript | コンピューター

JavaScriptのクロージャを使ってプライベートプロパティを実装する方法

JavaScriptには、Javaなどの言語のような private 修飾子が存在しないため、オブジェクトの外部からアクセスできない「プライベートな」データを表現するにはひと工夫が必要です。その定番テクニックのひとつが、クロージャ（closure）を活用する方法です。クロージャでプライベート化が実現できる理由クロージャとは、関数が生成された際のスコープ（外側の関数内の変数）への参照を保持し続ける仕組みのことです。関数内で宣言されたローカル変数は、外部のコードから直接参照したり書き換えたりすることはできません。そこで、内部変数へアクセスできる関数だけを戻り値として返すようにすることで、

JavaScriptでボタンがクリックされたかどうかを判定する方法

JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1

JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

JavaScriptでDOM操作を行っていると、ある要素の親要素にアクセスしたい場面によく出会います。そんなときに活躍するのがparentNodeプロパティです。このプロパティは、対象ノードの直接の親ノードを返します。本記事では、クリックイベントとparentNodeプロパティを組み合わせて、クリックされた子要素の親要素を取得し、そのクラス名を画面に表示するサンプルコードを紹介します。コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&qu

JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。基本的な動作通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。オブジェクト名の繰り返し記述を省略できる同じオブジェクトの複数のプロパティへ短くアクセスできる指

JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。サンプルコード以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam

JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

JavaScriptで変数がロード済み（値が代入済み）かどうかを確認するには、その変数が undefined または null であるかを比較することで判定できます。さらに、typeof 演算子は常に文字列を返すという特性があるため、これを利用して変数の状態をチェックすることも可能です。それでは、実際にJavaScriptの変数がロードされているかどうかを確認できるサンプルコードを見ていきましょう。コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

JavaScriptで無名関数（匿名関数）に引数を渡す方法をわかりやすく解説

JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。無名関数への引数の渡し方無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。サンプルコード <!DOCTYPE html> <ht

JavaScriptで新しいブラウザウィンドウを開く最良の方法とは？window.open()の使い方を解説

JavaScriptで新しいブラウザウィンドウを開くには、windowオブジェクトのopen()メソッドを使うのが最も標準的で確実な方法です。 window.open()メソッドは、指定したURLを新しいウィンドウ（またはタブ）で開きます。第2引数でウィンドウ名、第3引数でサイズや位置などの表示特性を指定することも可能です。 window.open()の基本構文 window.open(URL, name, features); URL：開きたいページのアドレス（必須） name：ウィンドウの名前またはターゲット属性（例： _blank）（省略可） features：ウィンドウの幅・高

JavaScriptのeval()関数とは？基本的な使い方と危険性について解説

eval()関数とはJavaScriptのeval()関数は、引数として渡された文字列を評価し、それをJavaScriptコードとして実行するための関数です。文字列で記述された式や関数呼び出しを、その場で動的に処理できるのが特徴です。ただし、eval()の使用は非常に危険であることに注意が必要です。外部からの入力値をそのままeval()に渡してしまうと、悪意のあるコード（XSS攻撃など）を実行されてしまう可能性があります。そのため、実際の開発ではeval()の使用は避け、代替手段を検討することが推奨されています。eval()関数の使用例以下は、JavaScriptでeval()関数を使用するサ

HTMLオーディオプレーヤーの現在の再生時間（タイムスタンプ）をJavaScriptで取得・表示する方法

HTMLの <audio> 要素には、現在の再生位置を秒単位で返す currentTime プロパティが用意されています。このプロパティを利用すれば、オーディオプレーヤーの現在のタイムスタンプ（経過時間）を簡単に取得し、画面に表示することができます。以下は、ボタンをクリックした際に currentTime の値を「分」と「秒」に変換して表示するサンプルコードです。コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JavaScriptのアロー関数を使ってラムダ（無名関数）を実装する方法

ラムダ関数（Lambda Function）とは、単一の式のみで構成される小さな匿名関数（無名関数）のことです。1つまたは複数の引数を受け取ることができ、関数そのものを他の関数へ引数として渡すことを可能にします。JavaScriptでは関数が「オブジェクト」として扱われるため、関数を別の関数に渡したり、戻り値として返したりすることができます。この性質を利用することで、ラムダ関数を実現できます。特にES6（ECMAScript 2015）で導入されたアロー関数を使えば、簡潔で読みやすい形でラムダ式を記述できます。本記事では、アロー関数を用いて配列の各要素を2乗するラムダ処理を、具体的なサンプルコ

JavaScriptでアクセント付き文字を含む文字列を並べ替える方法

JavaScriptの標準的な sort() メソッドは、文字列をUnicodeコードポイントの順序に基づいて比較します。そのため、「é」や「ó」のようなアクセント付き文字を含む文字列を単純にソートすると、期待通りのアルファベット順にならないことがあります。この問題を解決するには、localeCompare() メソッドを使用します。このメソッドは、指定されたロケールの言語規則に従って文字列を比較できるため、アクセント付き文字も正しく並べ替えられます。localeCompare() の基本的な使い方以下は、スペイン語のアクセント付き文字を含む配列を localeCompare() を使ってソー

JavaScriptを使って複数の画像を1枚の画像に結合する方法

JavaScriptでは、<canvas>要素を活用することで、複数の画像を1枚の画像に重ね合わせて結合することができます。本記事では、2つの画像を半透明にブレンドしながら合成するサンプルコードを紹介します。サンプルコード以下は、JavaScriptを使って複数の画像を1つの画像に結合するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, ini

JavaScriptでDOMを更新する方法！ボタンクリックで要素を動的に追加するサンプルコード

JavaScriptでは、createElement()やcreateTextNode()、appendChild()といったメソッドを組み合わせることで、ページを再読み込みすることなく新しい要素を動的に生成し、DOM（Document Object Model）を更新できます。以下は、ボタンのクリックをきっかけに新しい見出し要素を追加するシンプルなサンプルコードです。サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&

【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

HTMLページ上のテキスト選択を解除するには？ Webアプリケーションを開発していると、「ユーザーが選択しているテキストをプログラム側から解除したい」という場面に出会うことがあります。たとえば、ドラッグ＆ドロップ操作の前処理や、UIの状態をリセットしたいときなどがその代表例です。 JavaScriptでは、window.getSelection()メソッドとremoveAllRanges()メソッドを組み合わせることで、ページ上のすべてのテキスト選択を簡単に解除できます。以下に具体的な実装例を紹介します。実装例次のコードは、ボタンをクリックするとページ内のテキスト選択がすべて解除されるシ

JavaScriptで要素内のテキストを選択・選択解除する方法

JavaScriptを使えば、Webページ上の特定の要素内にあるテキストをプログラムから簡単に選択（ハイライト表示）したり、その選択を解除したりできます。この記事では、window.getSelection() が提供するメソッドを活用した実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。使用する主なAPI selectAllChildren(element)：指定した要素の子ノードすべて（テキストを含む）を選択状態にします。 removeAllRanges()：現在設定されているすべての選択範囲（Range）を削除し、選択を解除します。サンプルコード <!

JavaScriptでユーザーが選択したテキストを取得・表示する方法

Webページ上でユーザーがマウスなどでドラッグして選択したテキストの内容を取得したい場合、JavaScriptのwindow.getSelection()メソッドを利用します。このメソッドは現在の選択範囲を表すSelectionオブジェクトを返し、toString()を呼び出すことで選択された文字列をそのまま取り出せます。以下は、ユーザーが選択したテキストを取得し、ボタンのクリックで画面に表示するサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charse

JavaScriptで円の座標を配列に格納する方法

JavaScriptでは、Math.cosとMath.sinといった三角関数を活用することで、円周上の任意の点の座標を簡単に計算できます。本記事では、中心座標・半径・分割数を指定して円の座標を求め、X座標とY座標をそれぞれ別の配列に格納する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。円の座標を配列に格納するサンプルコード以下は、ボタンをクリックすると円の座標を生成して画面に表示する完全なHTMLコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta cha

【JavaScript】ページ内のすべてのリンクの座標を取得する方法

JavaScriptを使えば、Webページ内にあるすべてのリンク（<a>タグ）の位置やサイズに関する情報を簡単に取得できます。この記事では、ボタンをクリックすると各リンクの座標情報を一覧で表示するサンプルコードをわかりやすく解説します。サンプルコード以下は、ページ内のすべてのリンクの座標を取得して表示するHTMLとJavaScriptのコード例です。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta

【JavaScript】フォームの未保存変更があるときにアラートを表示する方法

Webアプリケーションでは、フォームに入力中のデータが未保存のまま、ユーザーがページを離れてしまうと入力内容が失われてしまいます。こうした事態を防ぐために、JavaScriptでは onbeforeunload イベントを利用することで、ページを離れる直前に警告アラート（確認ダイアログ）を表示できます。以下は、フォームに未保存の変更がある場合にアラートを表示するサンプルコードです。実装例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"