JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのcompile()メソッドとは？使い方と非推奨の理由を解説

    compile() メソッドは、JavaScriptにおいてスクリプトの実行中に正規表現オブジェクトをコンパイルし直すために使用されてきたメソッドです。一度作成した RegExp オブジェクトのパターンやフラグを後から変更し、同じオブジェクトを再利用できる点が特徴でした。 ただし、このメソッドはJavaScript 1.5 以降で非推奨（deprecated）となっており、現在の標準仕様（ECMAScript）からも削除されています。新しくコードを書く際は、new RegExp() コンストラクタを使って正規表現を生成し直す方法が推奨されます。 基本構文 regexObj.compile(pa

  2. JavaScriptのconsole.log()メソッドとは？基本の使い方と実行例をわかりやすく解説

    JavaScriptのconsole.log()メソッドは、ブラウザの開発者コンソールにメッセージや値を出力するために使用される、最も基本的かつ頻繁に使われるデバッグ用メソッドです。 文字列だけでなく、数値・オブジェクト・配列など、あらゆる型のデータを出力できるため、変数の中身を確認したり、プログラムの動作を検証したりする際に欠かせません。 基本構文 console.log(出力したい値); 引数には、出力したいメッセージや変数、オブジェクトなどを指定します。カンマ区切りで複数の値を渡すことも可能です。 コード例 以下は、console.log()メソッドを使ってオブジェクトと文字列をコンソー

  3. JavaScriptのconst宣言とは？再代入できない変数の基本と使い方を解説

    JavaScriptのconst宣言は、値を再代入することも後から再宣言することもできない変数を作成するための構文です。constはES2015（ES6）で導入されました。 const宣言の主な特徴 一度値を代入すると、別の値に再代入することはできません。 同じ名前の変数を同じスコープ内で再宣言するとエラーになります。 宣言時に必ず初期値を代入する必要があります。 ブロックスコープ（{}内でのみ有効）を持ちます。 それでは、JavaScriptにおけるconst宣言の実際のコードを見ていきましょう。 サンプルコード <!DOCTYPE html> <html>

  4. JavaScriptで文字列を真偽値（Boolean）に変換する方法

    JavaScriptでは、文字列が「true」というリテラルと一致するかどうかを比較演算子で判定することで、文字列を実質的に真偽値（Boolean）として扱うことができます。ここでは、==（緩い等価比較）と===（厳密等価比較）の2つの方法を使った具体例を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: &

  5. JavaScriptで配列をJSONに変換する方法｜JSON.stringify()の使い方を解説

    JavaScriptで配列をJSON形式の文字列に変換するには、JSON.stringify()メソッドを使います。このメソッドは、配列やオブジェクトを引数として渡すだけで、JSON形式の文字列を簡単に生成できる非常に便利な機能です。 サンプルコード 以下は、ボタンをクリックすると配列がJSONに変換されて画面に表示されるシンプルなデモです。 <!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe

  6. 【JavaScript】マウスの座標（X・Y位置）を取得する方法

    JavaScriptを使えば、マウスカーソルの現在の座標（X軸・Y軸の位置）を簡単に取得できます。この記事では、mousemoveイベントを利用して、マウスの座標をリアルタイムに画面へ表示する方法をサンプルコード付きで解説します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: "Segoe UI",

  7. JavaScriptでカスタム画像スライダーを作成する方法【初心者向け解説付き】

    Webサイトに動きを加える定番パーツのひとつが「画像スライダー（カルーセル）」です。ライブラリを使わなくても、HTML・CSS・JavaScriptの基本だけで、前後ボタンとナビゲーションドット付きのカスタムスライダーを簡単に作ることができます。この記事では、実際に動作する完全なサンプルコードを紹介しながら、それぞれの仕組みをわかりやすく解説します。完成形のサンプルコード以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くと画像スライダーが動作します。<!DOCTYPE html> <html> <head> <meta name=&qu

  8. JavaScriptのencodeURI()・decodeURI()とコンポーネント関数の違いと使い方

    JavaScriptには、URL（URI）内の文字を安全に扱うためのエンコード／デコード用の組み込み関数が4種類用意されています。それぞれの役割と違いを正しく理解することは、Web開発において非常に重要です。 encodeURI() … URI全体をエンコードします。ただし、カンマ（,）、スラッシュ（/）、疑問符（?）、コロン（:）、アットマーク（@）、アンパサンド（&）、イコール（=）、プラス（+）、ドル（$）、シャープ（#）といった特殊文字（予約文字）はエンコードされません。 encodeURIComponent() … URIの一部（クエリパラメータなど）をエンコードします。e

  9. JavaScriptのエラー処理と例外処理の実装例をわかりやすく解説

    JavaScriptにおけるエラー処理(例外処理)は、プログラムの実行中に発生する予期しない問題に対応し、アプリケーションのクラッシュを防ぐために欠かせない仕組みです。JavaScriptでは主に try...catch 構文を使ってエラーを捕捉します。 基本となる3つの要素 tryブロック: エラーが発生する可能性があるコードを記述します。 throw文: 「0での除算は不可」など、独自のカスタムエラーを意図的に発生させることができます。 catchブロック: tryブロック内でエラーが発生した際に、そのエラーを受け取って適切な処理を行います。 実装例 以下は、JavaScriptでエラ

  10. JavaScriptのmessageプロパティとは？エラーメッセージの取得方法をサンプルコードで解説

    JavaScriptのmessageプロパティは、Errorオブジェクトが持つエラーの詳細メッセージを設定または取得するためのプロパティです。try...catch文で例外を捕捉した際に、e.messageと記述することで、実際に発生したエラーの内容を文字列として確認できます。デバッグ作業やユーザーへのエラー通知など、さまざまな場面で活用できる重要なプロパティです。サンプルコード以下は、messageプロパティを使ってエラーメッセージを表示する具体的なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta

  11. CSSとJavaScriptで作る！クリックで開閉できる折りたたみセクションの実装方法

    Webサイトでよく見かける「クリックすると開閉する折りたたみセクション」。アコーディオンUIとも呼ばれるこの仕組みは、CSSと少量のJavaScriptを組み合わせるだけで簡単に実装できます。この記事では、実際に動作するサンプルコードと、その仕組みを初心者にもわかりやすく解説します。サンプルコード（コピペでそのまま使えます）以下のコードをHTMLファイルとして保存し、ブラウザで開けばすぐに動作を確認できます。<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  12. CSSとJavaScriptでToDoリスト（やることリスト）を作成する方法【サンプルコード付き】

    CSSとJavaScriptを組み合わせることで、入力したタスクを一覧表示し、クリックで削除できるシンプルなToDoリスト（やることリスト）をブラウザ上で作成できます。この記事では、実際に動くサンプルコードを交えながら、その実装方法をわかりやすく解説します。 ToDoリストの仕組み 今回作成するToDoリストは、以下の3つの要素で構成されています。 HTML … タスクを入力するテキストボックスと、リストを表示するためのul要素 CSS … 入力欄やリスト項目のデザイン・レイアウトの定義 JavaScript … Enterキーでタスクを追加し、項目クリックで削除する処理 サンプルコー

  13. JavaScriptのシンボル：@@toPrimitive（Symbol.toPrimitive）メソッドの使い方

    Symbol.toPrimitive（@@toPrimitive）とは JavaScriptのSymbol.toPrimitive（@@toPrimitive）は、オブジェクトがプリミティブ値（数値や文字列など）へ変換される場面で自動的に呼び出される組み込みシンボルです。このメソッドをあらかじめ定義しておくことで、型変換の挙動を自由にカスタマイズできます。 構文 Symbol()[Symbol.toPrimitive](hint) 引数 hint には、変換後の型を示す値（たとえば number や string など）を指定します。これは省略可能な引数です。 以下は、symbol.@@to

  14. JavaScriptのSymbol.for()関数とは？グローバルシンボルレジストリの仕組みと使い方

    Symbol.for()関数は、ランタイム全体で共有されるグローバルシンボルレジストリから、指定されたキーに対応するシンボルを検索するための関数です。 検索の結果、該当するシンボルがすでに登録されていればそれを返し、存在しない場合は新しいシンボルをレジストリに登録したうえで返します。この仕組みにより、異なるスコープやモジュール間でも同じキーを持つシンボルを共有できるようになります。 Symbol.for()とSymbol()の違い 通常のSymbol()呼び出しは、同じ引数を渡しても毎回まったく別の新しいシンボルを生成します。一方、Symbol.for(key)は同じキーを渡せば必ず同じシンボ

  15. JavaScriptのSymbol.hasInstanceプロパティとは？使い方と実行例をわかりやすく解説

    JavaScriptのSymbol.hasInstanceは、あるコンストラクターが特定のオブジェクトを「自身のインスタンス」として認識しているかどうかを判定するためによく知られたシンボル（well-known symbol）です。 実は、普段使っているinstanceof演算子も、内部ではこのSymbol.hasInstanceメソッドを呼び出しています。つまり obj instanceof Array は Array[Symbol.hasInstance](obj) とほぼ同じ意味になります。この仕組みを利用すると、instanceofの判定条件をカスタマイズすることも可能です。 Symb

  16. 【JavaScript】チェックボックス1つで別フィールドに自動入力する方法

    はじめにWebフォームを作成していると、「配送先住所は請求先住所と同じ」といったように、あるフィールドに入力した内容を別のフィールドへ自動的にコピーしたい場面がよくあります。JavaScriptを使えば、チェックボックスにチェックを入れるだけでこの処理を簡単に実装できます。本記事では、プライマリアドレス(主な住所)を入力し、チェックボックスを操作するとセカンダリアドレス(予備の住所)に同じ内容が自動入力されるサンプルコードを紹介します。サンプルコードHTMLとJavaScriptを組み合わせた実装例は以下の通りです。<!DOCTYPE html> <html> <

  17. 【初心者向け】JavaScriptのBooleanコンストラクタープロパティの使い方とサンプルコード

    Booleanコンストラクタープロパティは、Booleanプロトタイプを生成したコンストラクター関数を返すプロパティです。真偽値からこのプロパティを参照することで、その値がどの関数によって作成されたのかを簡単に確認できます。 ここでは、JavaScriptのBooleanコンストラクタープロパティを使った具体的なコード例を紹介します。ボタンをクリックすると、画面上にコンストラクター関数の内容が表示される仕組みになっています。 サンプルコード <!DOCTYPE html> <html> <head> <style>   &nb

  18. JavaScriptのコールバック関数とは？基本の仕組みと実装例をわかりやすく解説

    JavaScriptでは、関数もオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡すことが可能です。このように渡された関数は、受け取った側の関数の中で呼び出すことができ、これをコールバック関数（callback function）と呼びます。 コールバックは、非同期処理やイベントハンドリングなど、現代のJavaScript開発において欠かせない重要な概念です。ここでは、基本的なコールバックの仕組みをサンプルコードとともに解説します。 コールバック関数のサンプルコード 以下は、2つの数値を加算し、その結果をコールバック関数で処理するシンプルな例です。 <!DOCTYPE

  19. Chart.js入門：JavaScriptでアニメーション付きインタラクティブなグラフを簡単に作成する方法

    Chart.jsとは？ Chart.jsは、オープンソースとして公開されている軽量なJavaScriptのグラフ描画ライブラリです。Chart.jsを活用することで、HTML5のcanvas要素をベースとした、滑らかなアニメーション付きのインタラクティブなグラフを、ウェブサイトに手軽に組み込むことができます。 Chart.jsには棒グラフ・折れ線グラフ・円グラフ・ドーナツグラフ・レーダーチャートなど、多彩なチャートタイプが標準で用意されており、数行のコードを書くだけで視覚的に魅力的なデータ可視化を実現できます。また、レスポンシブデザインに対応しているため、デスクトップPCからスマートフォンまで

  20. JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

    JavaScriptにおけるタイマー処理では、clearTimeout()メソッドを使うことで、setTimeout()関数によって事前に設定されたタイムアウト（タイマー）を解除できます。同様に、clearInterval()メソッドは、setInterval()関数で設定されたインターバル（繰り返し処理）を停止するために使用します。 これらのメソッドは、ユーザーの操作に応じてタイマーや繰り返し処理をキャンセルしたい場合などに非常に便利です。以下に、両メソッドの動作を確認できるサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html> &l

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:149/297  20-コンピューター/Page Goto:1 143 144 145 146 147 148 149 150 151 152 153 154 155