JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScript Web APIのFile.nameプロパティとは？使い方とサンプルコードを解説

    JavaScriptのFile Web APIに含まれるFile.nameプロパティは、ファイルオブジェクトからファイル名のみを取得するためのプロパティです。このプロパティは、ファイルが保存されているフォルダのパス（ディレクトリ情報）を除いた、ファイル名だけを文字列として返します。 ユーザーが要素を使ってファイルを選択した際、そのファイル名を画面に表示したり、アップロード処理の前に入力チェックを行ったりする場面でよく利用されます。 主な特徴 読み取り専用：File.nameは変更できないため、取得のみ可能です。 パス情報は含まれない：セキュリティ上の理由から、ブラウザはローカルのフルパスを公

  2. JavaScriptでランダムな16進数カラーコード(HEX)を生成する方法

    JavaScriptを使えば、ランダムな16進数のカラーコード(HEXコード)を簡単に生成できます。この記事では、ボタンをクリックするたびにランダムな色が表示されるシンプルなサンプルを紹介します。 実装例 以下のコードでは、「GENERATE」ボタンをクリックするとランダムなHEXカラーコードが生成され、その色がボックスの背景に適用されると同時に、コード自体も画面に表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />

  3. JavaScriptでモジュールをインポート・エクスポートする方法を解説

    JavaScriptにおけるモジュールのインポートとエクスポートの基本JavaScript（ESモジュール）では、exportとimport構文を使用することで、コードを複数のファイルに分割し、他のファイルから必要な関数や変数を読み込んで利用できます。ここでは、実際に動作するサンプルコードを通じて、モジュールのインポートおよびエクスポートの基本をわかりやすく解説します。注意： この例を実行するには、ローカルホストサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、必ずローカルサーバー経由でアクセスしてください。INDEX.htmlまずはHTMLファイルの全体像で

  4. JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

    Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。 仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。 実装のポイント Font AwesomeのCSSファイルをCDNから読み込む アイコンを表示する要素に「fa

  5. 【初心者向け】JavaScriptでカウントダウンタイマーを作成する方法を解説

    Webサイトでは、イベント開始までの残り時間やセールの締め切り表示など、カウントダウンタイマーを設置したい場面は数多くあります。JavaScriptでは、DateオブジェクトとsetInterval()メソッドを組み合わせるだけで、誰でも簡単にカウントダウンタイマーを実装できます。 ここでは、指定した日時までの残り時間を「日・時・分・秒」の形式でリアルタイムに表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content=&

  6. JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

    Webサイトに動きを加える演出のひとつとして人気が高いのが、文字が一文字ずつ打ち込まれていくような「タイピング効果（タイプライターエフェクト）」です。JavaScriptでは、setTimeout() を使った再帰処理と charAt() メソッドを組み合わせることで、この効果をシンプルに実装できます。以下に、ボタンをクリックするとテキストが一文字ずつ表示されるサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <head> <style> body{ font-family: Sego

  7. JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

    Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。 実装の仕組み この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。 CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する querySelectorAll()でページ内のすべての閉じるボタン（.clo

  8. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  9. JavaScriptでメディアクエリを使う方法｜window.matchMediaの基本と実装例

    JavaScriptでメディアクエリを扱うには、window.matchMedia()メソッドを使用します。CSSだけでは実現できない「画面幅に応じたJavaScriptの動的な処理」を行いたい場合に非常に便利です。 基本的な仕組み window.matchMedia()に、CSSと同じ書式のメディアクエリ文字列を渡すと、MediaQueryListオブジェクトが返されます。このオブジェクトのmatchesプロパティがtrueであれば、現在の画面がその条件に一致していることを意味します。 サンプルコード 次の例では、画面幅が700px以下かどうかを判定し、背景色を「赤」または「青」に切り替

  10. JavaScriptでシンタックスハイライトを作成・使用する方法をわかりやすく解説

    JavaScriptでシンタックスハイライト（構文強調表示）を作成して使用するには、正規表現とDOM操作を組み合わせるのが一般的です。ここでは、ページ内のリンク（アンカータグ）を自動的に検出し、スタイルを適用して強調表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: "Segoe

  11. JavaScriptの日付設定メソッド(set系)の使い方を徹底解説

    JavaScriptのDateオブジェクトには、日付や時刻の各要素を変更するための「set系」メソッドが多数用意されています。これらのメソッドを活用することで、既存の日付オブジェクトの年・月・日・時・分・秒などを自由に設定・変更できます。 日付を設定する主なメソッド一覧 メソッド説明setDate()日(1〜31)を数値で設定します。setFullYear()年を設定します(月・日も同時に指定可能)。setHours()時(0〜23)を設定します。setMilliseconds()ミリ秒(0〜999)を設定します。setMinutes()分(0〜59)を設定します。setMonth()月を設定

  12. JavaScriptで変数を使ってオブジェクトのキーを動的に設定する方法

    JavaScriptで変数を使ってオブジェクトのキーを設定する方法 JavaScriptでは、ブラケット記法（角括弧 []）を使用することで、変数の値をオブジェクトのキーとして動的に設定できます。ドット記法では変数をキーとして扱うことができないため、動的なキー設定にはブラケット記法が必須となります。 以下に、ユーザーが入力したプロパティ名とプロパティ値をオブジェクトに追加するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="U

  13. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO

  14. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  15. JavaScriptスプレッド演算子の使い方を徹底解説！配列の展開と結合の基本

    JavaScriptのスプレッド演算子（...）は、配列を個々の要素へと展開できる便利な構文です。使い方は非常にシンプルで、配列名の前にドット3つ（...）を記述するだけです。 スプレッド演算子の基本構文 [...配列名] この構文により、配列の中身が個別の要素として展開されます。代表的な活用場面は以下の通りです。 複数の配列を結合して、新しい配列を作成する 既存の配列のコピー（シャローコピー）を作る 関数を呼び出す際に、配列の各要素を引数として渡す 実装例：2つの配列をスプレッド演算子で結合する 次のサンプルコードでは、数値の配列 arr1 と文字列の配列 arr2 をスプレッド演算

  16. JavaScriptの「this」キーワード徹底解説！文脈別の挙動を実例付きで解説

    JavaScriptのthisキーワードとは？ JavaScriptにおけるthisキーワードは、その時々の実行コンテキストにおいて「自分が属しているオブジェクト」を参照する特別な識別子です。参照先は固定ではなく、どこで・どのように使われたかによって変化する点が重要です。 単独または通常の関数内で使用した場合：グローバルオブジェクト（ブラウザ環境ではwindowオブジェクト）を参照します。 メソッド内で使用した場合：そのメソッドを所有するオブジェクトを参照します。 イベントリスナー内で使用した場合：イベントを受け取ったHTML要素を参照します。 以下に、さまざまなコンテキストでのthisの

  17. JavaScriptでEnterキー押下時にボタンをトリガーする方法

    JavaScriptでは、テキストフィールドに入力中にEnterキーが押されたタイミングで、ボタンのクリックイベントを発火させることができます。フォーム送信や検索処理など、ユーザーの操作性を向上させたい場面でよく使われるテクニックです。 Enterキーでボタンをトリガーするには、以下のようなコードを使用します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&

  18. JavaScriptのundefinedプロパティとは？変数が未定義かどうかを判定する方法

    JavaScriptにおけるundefinedは、変数が宣言されたもののまだ値が代入されていないこと、あるいは変数自体が宣言されていないことを示す特別な値です。undefinedプロパティを活用することで、ある変数に値が設定されているかどうかをプログラム上で簡単に判定できます。undefinedの基本的な挙動変数を宣言だけして値を代入しなかった場合、その変数には自動的にundefinedが格納されます。また、存在しないオブジェクトのプロパティへアクセスした場合や、戻り値を持たない関数の実行結果などもundefinedとなります。undefinedかどうかを厳密に比較する際は、等価演算子「===

  19. JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説

    JavaScriptのunescape()関数は、escape()関数によってエンコードされた文字列をデコード（元に戻す）ための関数です。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在では代わりにdecodeURI()やdecodeURIComponent()を使用することが推奨されています。レガシーなコードの理解や保守の際に役立つ知識なので、ここで基本的な動作を確認しておきましょう。unescape()関数の基本的な使い方以下のコードは、unescape()関数を使ってエンコードされたURL文字列をデコードする例です。ボタンをクリックすると

  20. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

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