JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのsymbol.descriptionプロパティとは？使い方と実行例を解説

    symbol.description プロパティは、Symbolオブジェクトの生成時に引数として渡した任意の説明（ディスクリプション）を返す、読み取り専用のプロパティです。このプロパティは ECMAScript 2019（ES10）で追加されました。説明を指定せずに生成したシンボルに対しては undefined を返し、Symbol.iterator のような組み込みシンボルからも同様に説明を取得できます。デバッグやログ出力時にシンボルを識別しやすくなるため、実務でも非常に便利な機能です。主なポイントシンボル作成時に指定した説明文字列を取得できる読み取り専用のため、後から値を変更することはでき

  2. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  3. JavaScriptでフルスクリーン（全画面）表示を実装する方法をわかりやすく解説

    Webページ上の動画や画像などの要素を、ボタン操作ひとつで全画面表示に切り替えられたら便利ですよね。JavaScriptでは、Fullscreen APIを使うことで、このようなフルスクリーン機能を簡単に実装できます。 本記事では、動画を全画面モードで再生するサンプルコードをもとに、実装方法をわかりやすく解説します。 サンプルコード 以下は、ボタンをクリックすると動画がフルスクリーンで表示されるHTMLとJavaScriptのコード例です。 <!DOCTYPE html> <html> <head> <meta name=viewport conten

  4. JavaScriptとSVGを使ってスクロールに合わせて線を描画する方法

    ページをスクロールすると、それに連動してSVGのパスが少しずつ描かれていく演出は、JavaScriptのgetTotalLength()メソッドと、stroke-dasharray・stroke-dashoffsetプロパティを組み合わせることで実現できます。 基本的な仕組みは以下の通りです。 getTotalLength()でパスの全長を取得する stroke-dasharrayとstroke-dashoffsetを同じ長さに設定し、初期状態では線を見えなくする スクロール量を取得し、その割合に応じてstroke-dashoffsetの値を減らしていくことで、線が徐々に描画される 実装コ

  5. CSSとJavaScriptでスクロール時に固定されるスティッキーヘッダーを実装する方法

    CSSとJavaScriptを組み合わせることで、ページをスクロールした際にヘッダーが画面上部に固定される「スティッキーヘッダー」を簡単に実装できます。基本的な仕組みはシンプルです。JavaScriptでスクロール位置を監視し、ヘッダーの初期位置を超えたらposition: fixedのクラスを付与します。逆にスクロールが戻ったらクラスを削除して、元の位置に戻します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device

  6. CSSとJavaScriptで「いいね／よくないね」ボタンを切り替える方法

    CSSとJavaScriptを組み合わせれば、クリックするたびに「いいね（サムズアップ）」と「よくないね（サムズダウン）」のアイコンが切り替わるボタンを簡単に実装できます。ここでは、Font AwesomeのアイコンとclassList.toggle()メソッドを使った具体的な実装例を紹介します。サンプルコード<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-aweso

  7. JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

    Webページの開発では、ボタンのクリックに応じて特定の要素を表示したり非表示にしたりする「トグル（切り替え）処理」は非常によく使われるテクニックです。JavaScriptを使えば、style.displayプロパティの値を動的に変更することで、簡単にこの機能を実装できます。 本記事では、ボタンをクリックするたびにdiv要素の表示と非表示が切り替わるサンプルコードを紹介します。 実装のポイント 要素の表示・非表示の切り替えは、以下の手順で行います。 document.querySelector()で対象の要素を取得する addEventListener(click, ...)でボタンのクリック

  8. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  9. JavaScriptでクラス名の追加と削除を切り替える方法【classList.toggleの使い方】

    JavaScriptで要素のクラス名の追加と削除を切り替えたい場合は、classList.toggle() メソッドを使うのが最も簡単です。このメソッドは、指定したクラスが要素に存在しなければ追加し、すでに存在していれば削除します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .newStyle {

  10. JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

    JavaScriptを使ってHTML要素にクラス名を追加するには、classList.add()メソッドを使用するのが最も簡単で推奨される方法です。この記事では、ボタンをクリックしたときにdiv要素へ新しいスタイル（クラス）を動的に適用する具体例を、コードと実行結果つきで解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <sty

  11. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  12. JavaScriptのArray.join()メソッドで配列を文字列に変換する方法

    JavaScriptのArray.join()メソッドは、配列内の個々の要素をすべて連結し、ひとつの文字列へと変換するために使用されるメソッドです。引数として区切り文字（セパレータ）を指定でき、指定しない場合はデフォルトでカンマ「,」が使われます。 構文は次のとおりです。 arr.join(separator) separatorには、連結時に各要素の間に挿入したい文字列を渡します。空文字列「」を指定すれば、要素間に何も挟まずにそのまま連結されます。 コード例 以下は、Array.join()メソッドを使用して、バラバラのアルファベットを「HELLO WORLD」という文字列に連結するサンプル

  13. JavaScriptのSymbol.isConcatSpreadableシンボルとは？使い方を実例付きで解説

    Symbol.isConcatSpreadable は、Array.prototype.concat() メソッドで配列を連結する際に、ネストされた配列や配列状のオブジェクトを「個々の要素に展開するかどうか」を指定できる、ウェルノウンシンボルのひとつです。通常、concat() は引数として渡された配列を自動的に展開し、各要素を連結先の配列へ追加します。しかし、対象のオブジェクトに対して Symbol.isConcatSpreadable を false に設定すると展開が無効になり、配列全体がひとつの要素として連結されます。逆に、arguments オブジェクトのような配列状オブジェクトはデ

  14. JavaScriptのSymbol.keyFor()関数とは？グローバルシンボルレジストリからキーを取得する方法

    Symbol.keyFor()関数とは JavaScriptのSymbol.keyFor()は、指定したシンボルに関連付けられたキー（文字列）を取得するための関数です。このキーは、グローバルシンボルレジストリと呼ばれる共有の登録簿から検索されます。 重要なポイントとして、Symbol.keyFor()がキーを返すのは、対象のシンボルがSymbol.for()によって作成され、グローバルシンボルレジストリに登録されている場合だけです。 一方、Symbol()で直接生成したシンボルはレジストリに登録されないため、Symbol.keyFor()に渡してもundefinedが返されます。 基本構文 S

  15. JavaScriptのSymbol.toString()メソッドとは？シンボルを文字列に変換する方法を解説

    JavaScriptのSymbol.toString()メソッドは、指定したシンボル（Symbol）オブジェクトの文字列表現を返すメソッドです。デバッグ時やログ出力の際に、シンボルの内容を確認したい場合に非常に便利です。 基本構文 symbol.toString() このメソッドは引数を受け取らず、「Symbol(説明)」という形式の文字列を返します。ここでの「説明」とは、シンボルを生成する際に渡した説明文（description）のことです。 サンプルコード 以下は、Symbol.toString()メソッドを使って、複数のシンボルの文字列表現を取得して表示する具体例です。 <!DOC

  16. JavaScriptのshift()メソッドとは？配列の先頭要素を削除する方法を解説

    JavaScriptのshift()メソッドとはJavaScriptのshift()メソッドは、配列から先頭（最初）の要素を取り除き、その要素を返すメソッドです。この操作により配列の長さは1つ減少します。なお、末尾の要素を削除したい場合はpop()メソッドを使用し、先頭に要素を追加したい場合はunshift()メソッドを使います。shift()メソッドのコード例以下は、ボタンをクリックすると配列の先頭要素が削除されるサンプルコードです。<!DOCTYPE html> <html lang="ja"> <head> <meta cha

  17. JavaScriptのslice()メソッドとは？配列から要素を取り出す使い方を実例で解説

    JavaScriptのslice()メソッドは、大きな配列の中から選択した範囲の要素を抜き出し、新しい配列として返すメソッドです。最大の特徴は、元の配列を一切変更しない（非破壊的な操作）という点にあります。そのため、元データを保持したまま部分的なコピーを作りたい場合に非常に便利です。 slice()メソッドの基本構文 arr.slice(start, end) start：取り出しを開始するインデックス番号（省略可・デフォルトは0） end：取り出しを終了する位置の直前のインデックス番号（省略可・デフォルトは配列の末尾まで）。endで指定した要素自体は結果に含まれない点に注意してください。

  18. JavaScriptの配列some()メソッドの使い方をわかりやすく解説

    JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で

  19. JavaScriptのArray.entries()メソッドとは？使い方とサンプルコードを解説

    Array.entries()メソッドとはJavaScript の Array.entries() メソッドは、配列内の各要素を「インデックス（キー）と値」のペアとして格納した、新しい Array Iterator オブジェクトを返します。このオブジェクトは反復可能（iterable）であるため、for...of ループやスプレッド構文などを使って、要素を一つずつ取り出すことができます。基本構文arr.entries()サンプルコード以下は、Array.entries() メソッドを使用して、配列の要素をキー／値ペアとして表示するコード例です。<!DOCTYPE html> <

  20. JavaScriptのArray.flatMap()メソッドとは？ネスト配列をフラット化する使い方を実例で解説

    JavaScriptのflatMap()メソッドは、ネストされた配列の各要素にコールバック関数を適用し、その結果を1階層だけ平坦化（フラット化）して、新しい配列として返します。「map()」と「flat()」を組み合わせた処理を1つのメソッドで実現できるため、入れ子構造の配列をシンプルに変換したい場合にとても便利です。元の配列は変更されず、常に新しい配列が生成される点も覚えておきましょう。以下は、array.flatMap()メソッドを使った具体的なサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="ja"> &

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