JavaScript | コンピューター

JavaScriptでCookieの有効期限を1時間に設定する方法

Cookieの寿命を現在のブラウザセッションを超えて延長したい場合は、有効期限（失効日時）を設定し、その日時をCookie自体に保存します。これを実現するには、expires属性に具体的な日時を指定します。 JavaScriptでCookieの有効期限を1時間に設定するには、現在の時刻に1時間分のミリ秒数（3600秒 × 1000）を加算した値をDateオブジェクトにセットし、その結果をtoUTCString()メソッドでUTC形式の文字列に変換してexpires属性に渡します。サンプルコード以下の例を実行すると、1時間後に期限切れとなるCookieを設定できます。 <html>

JavaScriptオブジェクトの内容を画面に出力する方法【サンプルコード付き】

JavaScriptでオブジェクトの内容を取得して画面に表示したい場合、new キーワードを使ってオブジェクトを生成し、そのプロパティの値を innerHTML 経由でHTMLに出力する方法が基本となります。以下のコードでは、dept というオブジェクトを作成し、社員名・部署・技術スタックという3つのプロパティを設定しています。そして、その値を組み合わせた文字列をページ上の指定した要素に出力しています。サンプルコード<!DOCTYPE html> <html> <body> <p id

JavaScriptのレストパラメータ（Rest Parameters）とは？基本と使い方をわかりやすく解説

ES6（ECMAScript 2015）で導入されたレストパラメータ（rest parameter）は、開発者の作業を大幅に楽にしてくれる便利な機能です。可変長の引数を扱う際に、従来のargumentsオブジェクトよりも直感的で柔軟な記述が可能になります。レストパラメータの基本レストパラメータは、パラメータ名の前に3つのドット（...）を付けて表します。これにより、関数に渡された不特定多数の引数を、ひとつの配列（Arrayインスタンス）として受け取ることができます。構文は以下のようになります。 function 関数名(...引数名) { // 引数名は配列として扱える } サンプル

【JavaScript入門】クロージャ関数で変数の値を保持する方法

クロージャで変数を保持するための基本原則JavaScriptのクロージャ関数内で変数の値を保持したい場合は、関数が呼び出されるたびに変数を空の状態で再初期化しないことが重要です。例えば、以下のように毎回オブジェクトを空にしてしまうと、前回保存した値がすべて失われてしまいます。webLinks = {};なぜ値が消えてしまうのか？この書き方だと、関数を実行するたびに webLinks が新しい空のオブジェクトとして作り直されます。つまり、以前格納したデータは参照できなくなります。値を永続的に保持したいなら、変数を外側の関数（クロージャ）のスコープ内で一度だけ定義し、返却される内部関数からその変数

JavaScriptの即時関数（IIFE）とは？仕組みと使い方をわかりやすく解説

即時関数（IIFE）とは即時関数とは、定義されたその瞬間に自動的に実行される関数のことです。英語では「Immediately Invoked Function Expression」の頭文字を取って「IIFE」と呼ばれることもあります。通常の関数は定義しただけでは実行されず、後から呼び出す必要があります。一方、即時関数は定義と同時に一度だけ実行されるため、初期化処理や独立したスコープを作りたい場面で活躍します。通常の関数との違いまず、即時関数の基本的な書き方を見てみましょう。 (function() { var str = display; }()); function d

JavaScriptのyieldキーワードの使い方とは？ジェネレーター関数の基本を解説

yieldキーワードとは JavaScriptのyieldキーワードは、ジェネレーター関数（generator function）の実行を一時停止・再開するために使用されます。yieldの右側に記述した式の値は、ジェネレーターを呼び出した側へ返されます。 yieldの構文基本的な構文は以下のとおりです。「exp」は評価される式で、省略可能な「val」には、ジェネレーターのnext()メソッドに渡された値が代入されます。 [val] = yield [exp]; ジェネレーター関数の定義例以下は、選択されたプレイヤーの順位を順番に生成するジェネレーター関数の例です。functionキーワ

Chromeで要素に発生したイベントを確認・表示する方法

Chrome DevToolsで要素のイベントを確認する手順Webページ上の特定の要素でどんなイベントが発生しているかを調べたいとき、Google Chromeのデベロッパーツールにある「イベントリスナーブレークポイント」機能を利用すると便利です。以下の手順に従って、要素上で発火するイベントを簡単に監視できます。1. デベロッパーツールを開くGoogle Chromeを起動し、F12キーを押してデベロッパーツール（Dev Tools）を開きます。Windowsなら「Ctrl + Shift + I」、Macなら「Cmd + Option + I」でも開けます。2. 「Sources」タブに移動

JavaScriptで関数をオーバーロードするためのベストプラクティスとは？

JavaScriptにおける関数オーバーロードのベストプラクティス関数のオーバーロードとは、関数に渡される引数の数や内容に応じて、異なる処理を実行する仕組みのことです。JavaScriptは他の言語のような厳密なオーバーロードをネイティブでサポートしていないため、引数の受け取り方を工夫する必要があります。型チェックは避けるパラメータ付きの関数オーバーロードを実装する際のベストプラクティスは、引数の型をチェックしないことです。型チェックを行うとコードの実行速度が低下するため、可能な限り避けるべきです。代わりに、メソッドの最後のパラメータをオブジェクトにする設計が推奨されます。こうすることで、呼び

【JavaScript】ユーザーが入力を終了したタイミングで関数を起動する方法

テキスト入力欄で、ユーザーが「入力を終えた」タイミングを検出してJavaScriptの関数を呼び出したいケースはよくあります。しかし、keyupイベントは1文字入力するたびに発生するため、そのままでは「入力の完了」を判定できません。そこで役立つのがデバウンス（debounce）と呼ばれる手法です。キーが押されるたびにタイマーをリセットし、一定時間入力がなければ「入力が終わった」とみなして関数を実行します。実装例 <html> <body> <script> &

JavaScriptで複数の文字列を連結する方法【Array.join()の使い方】

JavaScriptで複数の文字列を連結（結合）するには、Array.join() メソッドを使用します。このメソッドは、配列内のすべての要素を指定した区切り文字でつなげ、1つの文字列として返します。ここでは、次の3つの文字列を連結してみましょう。JohnAmitSachinArray.join() の基本的な使い方join() メソッドの引数には区切り文字（セパレーター）を指定できます。区切り文字を省略した場合はカンマ（,）が使用されます。サンプルコード以下のコードを実行すると、複数の文字列をカンマとスペースで連結した結果を確認できます。<html> <body>

【初心者向け】コマンドプロンプトでJavaScriptを実行する方法（jjsコマンドの使い方）

Java SE 8には、JSR 292に基づく新しいスクリプトエンジンNashornが搭載されました。Nashornは、ECMA標準化されたJavaScriptとの互換性を持っており、JVM上でJavaScriptを動かすことができます。Nashornを使えばコマンドラインからJavaScriptを実行できるNashornを利用すると、コマンドプロンプトから直接JavaScriptプログラムを実行できます。これを可能にするのが、jjsというコマンドラインツールです。jjsは、JDKインストールフォルダ内のbinディレクトリに、jarなどの他の開発ツールと一緒に格納されています。PATHが通って

JavaScriptのスマート／自己上書き／遅延（レイジー）ゲッターとは？仕組みと注意点を解説

ゲッターの基本：値は「アクセスされた瞬間」に計算されるJavaScriptのゲッター（getter）は、オブジェクトのプロパティを定義するための構文ですが、最大の特徴はプロパティの値が定義時には計算されないという点にあります。実際にそのプロパティへアクセスしたタイミングで初めて計算が実行されます。つまり、ゲッターを使えば値の計算コストを、本当にその値が必要になるまで後回しにできます。これがゲッターによる遅延評価（Lazy Evaluation）の基本的な考え方です。スマート／メモ化ゲッター：計算結果をキャッシュして高速化さらに一歩進んだのが、計算を遅らせるだけでなく一度計算した結果をキャッシュ

JavaScriptのデフォルト引数・レスト引数・分割代入の使い方を実例付きで解説

ES6（ECMAScript 2015）では、関数の引数をより柔軟かつ簡潔に扱うための機能として、デフォルト引数（Default Parameters）、レスト引数（Rest Parameters）、そして分割代入（Destructuring）が導入されました。本記事では、それぞれの特徴と具体的なコード例を通じて、実践的な使い方をわかりやすく解説します。デフォルト引数（Default Parameters）とはデフォルト引数を使うと、関数の仮引数に初期値をあらかじめ設定できます。呼び出し時に値が渡されなかった場合、または undefined が渡された場合にのみ、このデフォルト値が適用され

JavaScriptで関数を呼び出す方法とは？定義と呼び出しの基本をわかりやすく解説

JavaScriptにおける関数とは関数（function）とは、プログラム内のどこからでも呼び出すことができる、再利用可能なコードの集まりです。同じ処理を何度も書く必要がなくなるため、コードの重複を防ぎ、プログラマーがモジュール化された読みやすいコードを書くうえで大きな助けとなります。 JavaScriptでの関数の定義方法 JavaScriptで関数を定義する最も一般的な方法は、functionキーワードを使うことです。functionキーワードの後に、一意な関数名、パラメータのリスト（空でも可）、そして波括弧 { } で囲まれたステートメントブロックを続けて記述します。以下に基本

JavaScriptのスコープとコンテキストの違いとは？基礎からわかりやすく解説

JavaScriptにおいて、「スコープ」と「コンテキスト」はよく混同されますが、まったく別の概念です。関数を呼び出すときには、必ずこの両方が関わってきます。本記事では、それぞれの違いと仕組みをサンプルコード付きでわかりやすく解説します。スコープ（Scope）とは変数の「スコープ」とは、その変数が定義され、参照できる範囲のことを指します。JavaScriptの変数には、大きく分けて次の2種類のスコープがあります。グローバル変数：グローバルスコープを持ちます。つまり、JavaScriptコードのどこからでも定義・アクセスが可能です。ローカル変数：定義された関数の中でのみ参照できます。関

HTMLで件名付きのメール送信リンク（mailto）を作成する方法

Webページからメールを送信できるリンクを作成するには、<a>タグとhref属性を使用します。href属性の値として「mailto:」で始まるメールアドレスを指定することで、クリック時にメールソフトが起動するリンクが完成します。さらに件名（Subject）を追加したい場合は、メールアドレスの後に「?」を付け、続けてSubject=パラメータを記述します。これらすべてを<a>タグの中に含めるだけで、件名入力済みのメール作成画面を開くリンクが実現できます。作成時の注意点mailtoリンクを作成する際は、以下の2点に注意しましょう。受信先のメールアドレスを必ず指定する：「ma

JavaScriptにおける再帰関数の仕組みを徹底解説

再帰とは何か関数が自分自身を呼び出す仕組みを「再帰」と呼びます。JavaScriptでも他の多くのプログラミング言語と同様に、再帰関数を自然に記述できます。再帰は、階乗の計算や木構造・ネストされたデータの探索など、同じ処理を繰り返しながら問題を段階的に縮小していきたい場面で特に有効な手法です。再帰関数に必要な2つの要素正しく動作する再帰関数には、次の2つの要素が不可欠です。ベースケース（終了条件）：再帰呼び出しを停止するための条件。これがないと関数は無限に呼び出され続け、スタックオーバーフローが発生します。再帰ケース：自分自身を、より小さな引数で呼び出す部分。元の問題を少しず

HTMLでフォントサイズを変更する方法｜style属性とCSSのfont-sizeプロパティの使い方

HTMLでフォントサイズを変更するには、style属性を使用します。style属性は、要素に対してインラインスタイル（その場限りのスタイル）を直接指定できる属性です。HTMLの<p>タグなどの要素に、CSSのfont-sizeプロパティを組み合わせて使うことで、文字の大きさを自由にコントロールできます。なお、HTML5では以前使われていた<font>タグが廃止されたため、現在はフォントサイズの指定にはCSSスタイルを使うのが標準的な方法となっています。 style属性を使う際の注意点 style属性によるインラインスタイルは、優先度が最も高いという特徴があります。つま

JavaScriptでネストされた（入れ子の）関数を定義する方法

ネストされた関数とはJavaScriptでは、関数定義を別の関数の中に入れ子（ネスト）にして記述することができます。これにより、外部から呼び出されることのない補助的な処理を親関数の内部に閉じ込めることができ、コードの整理やカプセル化に役立ちます。また、ネストされた内部関数は親関数のスコープにある変数や引数にアクセスできるため、クロージャの基礎となる重要な仕組みでもあります。関数定義における制限ただし、関数定義にはいくつかの制限が存在します。ループ文や条件文（if文など）の中に関数定義を直接記述することはできません。なお、この制限はfunctionステートメントによる関数宣言のみに適用されるもの

JavaScriptのクロージャとネストされた関数の違いとは？具体例でわかりやすく解説

JavaScriptにおけるクロージャ（Closure）とは？ JavaScriptでは、すべての関数がクロージャとして動作します。クロージャとは、関数が呼び出された際に「その関数が宣言された場所のスコープ」を使用する仕組みのことです。呼び出された場所のスコープではなく、定義された場所のスコープを参照する点が最大の特徴です。次のサンプルコードで挙動を確認してみましょう。 <!DOCTYPE html> <html> <body> <h2>