JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. ローカルストレージとCookieの違いとは?保存期間・容量・使い分けを徹底解説

    Web開発において、クライアントとサーバーの間でデータを保存・管理する手段として、「ローカルストレージ」「セッションストレージ」「Cookie」の3つが主に利用されます。それぞれ特性が異なるため、目的に応じた使い分けが重要です。本記事では、ローカルストレージとCookieの違いを中心に、その特徴と活用方法を詳しく解説します。ローカルストレージとはローカルストレージは、複数のウィンドウやタブにまたがってデータを保持し、現在のセッションが終了してもデータが失われないように設計されたストレージです。特に、Webアプリケーションでは、パフォーマンス向上のために、ユーザーが作成したドキュメントやメールボ

  2. 【Chrome DevTools】発生したJavaScriptイベントを確認する方法

    JavaScriptイベントの発火を確認する手順 Web開発をしていると、「この要素で実際にどのJavaScriptイベントが発火しているのか知りたい」という場面に出くわすことがあります。本記事では、Google Chromeのデベロッパーツール(DevTools)を使って、発生したJavaScriptイベントを簡単に特定する方法を解説します。 手順1:DevToolsを開く まず、Google Chromeを開き、F12キーを押してDevTools(デベロッパーツール)を起動します。Windowsでは「Ctrl + Shift + I」、Macでは「Cmd + Option + I」でも開く

  3. JavaScriptでCookieの有効期限を30分に設定する方法

    Cookieに有効期限(expiration date)を設定することで、ブラウザのセッションが終了した後もCookieを保持できるようになります。JavaScriptでは、「expires」属性に具体的な日時を指定することで、Cookieの寿命を自由にコントロールできます。 Cookieを30分後に失効させる仕組み Cookieの有効期限を30分に設定するには、以下の手順で実装します。 Date オブジェクトで現在の日時を取得する 現在時刻に30分(30 × 60 × 1000ミリ秒)を加算して、有効期限の時刻を計算する toUTCString() メソッドでUTC形式の文字列に変換し、e

  4. Google ChromeのJavaScriptコンソールでデバッグメッセージを出力する方法

    Google ChromeのJavaScriptコンソールにデバッグメッセージを出力したい場合、コンソール機能が存在しない環境でもエラーが発生しないように、安全なスクリプトを記述するのがポイントです。コンソール関数の存在チェックを行うスクリプト以下のコードは、window.consoleオブジェクトが存在しない場合に空のオブジェクトを作成し、各メソッドが未定義の場合にのみ代替関数を定義しています。これにより、コンソールが利用できないブラウザでもエラーを起こさずに動作します。if (!window.console) console = {}; console.log = console.log

  5. JavaScriptのdocumentオブジェクトでCookieにアクセス・読み取りする方法を解説

    JavaScriptでは、document.cookieプロパティを使うことで、Cookieに簡単にアクセスして読み取ることができます。document.cookieオブジェクトの値そのものがCookieの内容を表すため、Cookieの読み取りは書き込みと同じくらいシンプルです。document.cookieが返す文字列には、セミコロン(;)で区切られた「name=value」形式のペアがリストとして格納されています。ここで「name」はCookieの名前、「value」はその文字列の値を意味します。実装例以下のコードを実行すると、JavaScriptのdocumentオブジェクトを使ってCo

  6. JavaScriptのデフォルトパラメータとは?基本の使い方とサンプルコードを解説

    JavaScriptのデフォルトパラメータ(デフォルト引数)は、関数の引数にあらかじめ初期値を設定できる便利な機能です。ES2015(ES6)で導入されて以来、引数の扱いが格段にシンプルになりました。 デフォルトパラメータの仕組み 通常、関数を呼び出す際に引数が渡されなかった場合、その仮引数は undefined になります。しかし、デフォルトパラメータを使えば、引数が渡されない場合、または undefined が渡された場合に限り、指定したデフォルト値で仮引数を自動的に初期化できます。 これにより、「引数が未定義かどうかを毎回チェックする」といった冗長なコードを書く必要がなくなり、関数の可読

  7. 【CSS入門】ウェブページに背景画像を設定する方法

    ウェブページに背景画像を設定するには、CSSを使用します。<style>タグ内でbackground-imageプロパティを指定することで、JPG・PNG・SVG・GIFなどの画像ファイルをページの背景として表示できます。なお、HTML5では<body>要素のbackground属性がサポートされていないため、背景画像の設定にはCSSを使うのが標準的かつ推奨される方法です。記述例以下のコードを参考にすると、HTMLページの背景画像を簡単に設定できます。実際にエディタに貼り付けて動作を確認してみてください。<!DOCTYPE html> <html>

  8. 【JavaScript】consoleオブジェクトでエラーコンソールにメッセージを出力する方法

    JavaScriptでブラウザの開発者ツール(コンソール)にメッセージを出力するには、consoleオブジェクトを使用します。用途に応じて複数の出力メソッドが用意されており、それぞれ表示スタイルが異なります。主な出力メソッドの種類1. エラーメッセージ(赤色で表示)エラーとして強調したいメッセージは、赤色で表示されるconsole.error()を使います。console.error(message);2. 通常のログ出力デフォルトの形式でメッセージを表示するには、最も一般的なconsole.log()を使用します。console.log(message);3. 警告メッセージ(黄色で表示)警

  9. JavaScriptでコンソールにUnicode文字を出力する方法

    JavaScriptでコンソールにUnicode文字を出力する方法Unicodeには13万種類以上の文字が収録されています。JavaScriptでコンソールにUnicode文字を正しく出力するには、HTMLの<head>タグ内に<meta>タグを配置し、文字コード(charset)としてUTF-8を指定します。<meta charset=UTF-8>外部スクリプトファイルを読み込む場合外部のJavaScriptファイルを使用している場合は、<script>タグにcharset属性を追加することで、そのファイル内のUnicode文字も正しく扱えるよ

  10. システムドライブの画像をHTMLのimgタグのsrcに指定する方法

    Webページに画像を表示するimgタグとはWebページ上に画像を表示するには、<img>タグを使用します。このタグでは、画像のソース(src)、代替テキスト(alt)、幅(width)、高さ(height)などを指定できます。src属性には画像のURLを設定し、alt属性には画像が読み込めなかった場合に代わりに表示されるテキストを記述します。システムドライブのパスをsrcに指定する方法HTMLでは、システムドライブ上のファイルパスをそのまま画像のソースとして指定することも可能です。その場合は、src属性に画像が保存されているドライブのパスを設定します。記述例:file:/D:/im

  11. HTMLでテキストを太字にする方法|bタグ・strongタグ・CSSの使い分けを解説

    HTMLでテキストを太字に表示するには、<b>タグまたは<strong>タグを使用します。どちらも囲んだテキストを太字にする点では同じ働きをしますが、<strong>タグはテキストに「強い重要性」という意味を持たせられる点が大きな違いです。<b>タグは見た目を変えるための物理マークアップ要素であり、意味上の重要性は付与されません。 また、CSSのfont-weightプロパティを使えば、HTMLタグに頼らずに同じ結果を得ることも可能です。 bタグとstrongタグの違い bタグ:単に視覚的に太字にするだけのタグ。重要性を示す意味はありません。

  12. JavaScriptでCookieを作成・読み取る方法【サンプルコード付きで解説】

    Cookieの作成Cookieを作成する最も簡単な方法は、document.cookieオブジェクトに文字列値を代入することです。基本的な構文は以下のとおりです。document.cookie = key1=value1;key2=value2;expires=date;ここで「expires」属性は省略可能です。有効な日付や時刻を指定すると、Cookieはその日時に失効し、以降はその値にアクセスできなくなります。サンプルコード:Cookieへの書き込み以下の例では、フォームに入力された名前をCookieに保存しています。「Cookieを設定」ボタンをクリックすると、入力値がCookieとして

  13. 文字列をJavaScriptの関数呼び出しに変換する方法

    JavaScriptでは、文字列として保持されている関数名を使って、実際に関数を呼び出すことができます。最もシンプルで安全な方法は、グローバルオブジェクトである window のブラケット記法(角括弧記法)を利用するアプローチです。 文字列から関数を呼び出す基本の方法 JavaScriptでは、グローバルスコープで宣言された関数は window オブジェクトのプロパティとして登録されます。そのため、window[関数名] の形式で、文字列から直接関数にアクセスして実行できます。 サンプルコード 以下のコードを実行すると、文字列で指定した関数名を使って関数が呼び出されます。 <html&g

  14. JavaScriptの.prototypeとは?仕組みと使い方をわかりやすく解説

    JavaScriptでは、すべてのオブジェクトがプロトタイプ(prototype)からプロパティやメソッドを継承します。これはJavaScriptのオブジェクト指向を実現する中核的な仕組みであり、.prototypeの理解は効率的なコード設計に欠かせません。 プロトタイプ継承の基本 JavaScriptでオブジェクトを作成すると、そのオブジェクトは自動的に対応するプロトタイプオブジェクトを参照するようになります。主な例は以下の通りです。 new Object() で生成したオブジェクト → Object.prototype を継承 new Date() で生成したオブジェクト → Date.

  15. JavaScriptのCookieとは?仕組みと基本をわかりやすく解説

    Cookieとは何か WebブラウザとサーバーはHTTPプロトコルを使って通信します。HTTPはステートレス(状態を保持しない)なプロトコルのため、本来はページをまたいでユーザー情報を記憶することができません。しかし、商用サイトでは異なるページ間でセッション情報を維持する必要があります。 この課題を解決するのがCookieです。Cookieを利用すれば、ユーザーの設定(プリファレンス)、購入履歴、コミッションなどの情報を効率的に記憶・追跡でき、より快適な訪問者体験の提供やサイトの統計分析に役立ちます。 Cookieの構成要素 Cookieは、5つの可変長フィールドからなるプレーンテキストのデー

  16. JavaScriptでCookieを作成・設定する方法をわかりやすく解説

    Cookie(クッキー)の活用は、ユーザーの設定情報、購入履歴、コミッションなど、より快適な訪問者体験やサイト統計のために必要なデータを記録・追跡するための最も効率的な方法です。 Cookieを作成する最も簡単な方法 Cookieを作成する最もシンプルな方法は、document.cookie オブジェクトに文字列値を代入することです。基本的な書式は以下のとおりです。 document.cookie = key1=value1;key2=value2;expires=date; expires属性による有効期限の設定 上記の expires 属性は省略可能です。有効な日付または時刻を指定す

  17. JavaScriptでCookieを削除する方法をわかりやすく解説

    Web開発をしていると、保存済みのCookieを削除して、以降の読み取りでは何も返らないようにしたい場面があります。JavaScriptでCookieを削除するのはとても簡単です。有効期限(expires)を過去の日時に設定し直すだけで、ブラウザはそのCookieを自動的に破棄します。 Cookie削除の基本の仕組み JavaScriptには、Cookieを直接削除するための専用APIは用意されていません。代わりに、同じ名前のCookieを「すでに期限切れ」の状態で上書きすることで、実質的に削除します。具体的には、expires属性に現在日時より前の日付(たとえば1か月前)を指定します。 サン

  18. JavaScriptでCookieの有効期限を設定する方法をわかりやすく解説

    Cookieの有効期限を設定し、その期限日をCookie自体に保存することで、現在のブラウザセッションが終了した後もCookieを保持し続けることができます。具体的には、expires属性に有効期限となる日時を指定します。expires属性による有効期限の設定方法Cookieに有効期限を設定するには、document.cookieに対して「expires=日時」という形式の文字列を追加します。日時はtoUTCString()メソッドで取得できるUTC形式の文字列で指定するのが一般的です。サンプルコード:有効期限を1か月後に設定する以下のサンプルでは、フォームに入力された名前をCookieに保存

  19. JavaScriptでCookieをすべて削除(クリア)する方法を解説

    JavaScriptでCookieをすべてクリアするには、有効期限(expires)を過去の日時に設定して上書きするのが基本の方法です。ブラウザは有効期限が切れたCookieを自動的に削除するため、これにより実質的にCookieを消去できます。Cookie削除の仕組みJavaScriptでは document.cookie プロパティを使ってCookieを読み書きします。既存のCookieを削除したい場合は、同じ名前・パス・ドメインでCookieを再度書き込み、その際に有効期限を現在より前の日付に指定します。サンプルコード以下のコードは、入力された名前でCookieを設定し、1か月前の日時を有

  20. JavaScriptで日付をフォーマットする方法|基本の4つの形式とサンプルコード

    JavaScriptの日付フォーマットの種類JavaScriptでは、Dateオブジェクトを扱う際に、いくつかの標準的な日付フォーマットが使用されます。主なフォーマットは以下の4種類です。日付の種類フォーマット例ISO形式(国際標準)2017-11-29短い日付形式(Short Date)11/29/2017長い日付形式(Long Date)29 Nov 2017完全な日付形式(Full Date)Wednesday November 29 2017この中でもISO形式(YYYY-MM-DD)は国際標準規格「ISO 8601」に準拠した形式で、ブラウザ間の互換性が高く、データの保存や通信にも適

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:267/297  20-コンピューター/Page Goto:1 261 262 263 264 265 266 267 268 269 270 271 272 273