JavaScript

JavaScriptで部分文字列の存在を確認するには？ JavaScriptで「ある文字列の中に特定の部分文字列（サブストリング）が含まれているか」を確認したい場合、Stringオブジェクトのsearch()メソッドを使うのが一般的な方法の一つです。 search()メソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に現れる位置（インデックス）を返します。見つからなかった場合は -1 を返すため、この戻り値を判定条件として使うことで、部分文字列の有無を簡単にチェックできます。 search()メソッドを使ったサンプルコード 次のコードは、文字列「Tutorialspoint

Pythonを使ってJavaScriptのコードを最小化（ミニファイ）・難読化したい場合、jsminモジュールを利用するのが便利です。jsminはコメントや不要な空白文字を取り除き、コードをコンパクトにしてくれる軽量なライブラリです。jsminのインストール方法pipコマンドを使って、以下のように簡単にインストールできます。$ pip install jsminPythonコードから使う方法インストールが完了したら、Pythonスクリプト内でjsminを読み込んで使用します。例えば、hello.jsというファイルを最小化する場合は、次のように記述します。>>> from js

JavaScriptで配列から特定の要素を削除するには、splice()メソッドを使用します。splice()メソッドは、既存の要素を削除すると同時に新しい要素を追加できる、配列の内容を直接変更するメソッドです。 splice()メソッドのパラメータ index：配列の変更を開始する位置（インデックス番号）。 howMany：削除する要素の数を表す整数。0を指定した場合は、何も削除されません。 element1, ..., elementN：配列に追加する要素。要素を指定しない場合、splice()は単に該当する要素を削除するだけの動作になります。 以下のコードを実行すると、JavaS

JavaScriptで基本的なアニメーションを実装するには、DOMオブジェクトのプロパティとJavaScriptを組み合わせて使用します。ここでは、ボタンをクリックすると画像が右へ移動するシンプルなアニメーションを例に、その実装手順を解説します。実装のポイントJavaScriptのgetElementById()関数を使ってDOMオブジェクトを取得し、グローバル変数imgObjに代入します。初期化用の関数init()を定義し、その中でimgObjのposition属性とleft属性を設定します。ウィンドウの読み込み完了時に、この初期化関数を呼び出します。最後にmoveRight()関数を呼び出

変数のスコープとは変数のスコープ(scope)とは、プログラムの中でその変数が定義され、参照できる範囲のことを指します。JavaScriptの変数は、主に次の2つのスコープを持ちます。グローバル変数 − 関数の外で宣言された変数で、JavaScriptコード全体のどこからでもアクセスできます。ローカル変数 − 関数内で宣言された変数で、その関数の中でしか参照できません。また、関数の引数(パラメータ)も常にその関数のローカル変数として扱われます。ローカル変数とグローバル変数の優先順位関数の内部では、同じ名前のローカル変数がグローバル変数よりも優先されます。つまり、グローバル変数と同じ名前のローカ

JavaScriptで文字列内のテキストを検索する方法 JavaScriptで文字列に特定のテキストが含まれているかどうかを確認するには、Stringオブジェクトのsearch()メソッドを使用します。search()メソッドは、引数で指定した文字列（または正規表現）が対象の文字列内で最初に現れる位置（インデックス番号）を返します。見つからなかった場合は -1 を返すため、この戻り値を判定することで、特定のテキストが含まれているかどうかを簡単にチェックできます。 search()メソッドの基本的な使い方 以下のコードは、「Tutorialspoint: Free Video Tutorials

JavaScriptの誕生と名前の変遷JavaScriptは1995年5月、当時Netscape（ネットスケープ）に勤務していたブレンダン・アイク（Brendan Eich）によって開発され、公開されました。しかし、当初は「JavaScript」という名前ではありませんでした。最初に与えられた名前は「Mocha（モカ）」です。MochaからLiveScript、そしてJavaScriptへ「Mocha」という名前は、Netscapeの創業者であるマーク・アンドリーセン（Marc Andreessen）によって選ばれました。その後、1995年9月に言語の名称は「LiveScript」へと変更され

ECMAScriptとJavaScriptの関係JavaScriptは、ECMAScript（エクマスクリプト）という標準規格に準拠したプログラミング言語です。つまり、ECMAScriptは仕様そのものを定義し、JavaScriptはその仕様に基づいて実装された言語である、という関係にあります。JavaScriptの誕生の歴史JavaScriptは当初「LiveScript」という名前で呼ばれていました。1995年、Netscape Navigator 2.0に搭載されて初めて登場した際もLiveScriptという名称でしたが、当時大きな話題となっていたJavaの人気にあやかる形で、Netsc

1993年、NCSA（米国国立スーパーコンピューティング応用研究所）が開発した「Mosaic」が、初めて広く普及したWebブラウザとして登場しました。その翌年1994年にはNetscape社が設立され、Webブラウザ「Netscape Navigator」をリリースします。Navigatorは1990年代に大きな人気を博し、Mosaicの開発者の多くもNavigatorの開発チームに加わりました。より動的なWebへの要求ユーザーのニーズと市場の動向を踏まえ、Netscapeは「Webをもっと動的なものにすべきだ」と考えるようになりました。そこで同社は1995年、ブレンダン・アイク（Brenda

ul要素に新しいリスト項目（<li>）を追加するには、jQueryのappend()メソッドを使用します。append()は、指定した要素の末尾にHTMLコンテンツを挿入するためのメソッドです。 基本的な手順 まず、ユーザーが値を入力できるテキスト入力フィールドを用意します。 Value: <input type="text" name="task" id="input"> 次に、ボタンがクリックされたタイミングで、val()メソッドで入力値を取得し、append()メソッドを使ってリストに新しい<li&

イベント委譲を使って行の追加・削除を実装するjQueryでは、イベント委譲（Event Delegation）を活用することで、Webページ上に「新しい行を追加する」ボタンと「テーブルの行を削除する」ボタンの両方を効率的に実装できます。イベント委譲を使えば、JavaScriptで後から動的に追加した要素に対しても、イベントハンドラが正しく機能するという大きなメリットがあります。手順1：削除ボタンを設定するまず、テーブルの各行に配置する削除ボタンを用意します。あとでjQueryから参照できるよう、class属性に「deletebtn」を指定しておきましょう。<button type=&qu

JavaScriptのオブジェクト指向の基本概念JavaScriptは、シンプルなオブジェクトベースのパラダイムに基づいて設計されています。オブジェクトとはプロパティの集合体であり、各プロパティには名前と値が関連付けられています。さらに、プロパティの値が関数である場合、そのプロパティは「メソッド」と呼ばれます。HTMLイベントとは何か一方で、HTMLイベントとは、HTML要素に対して発生する「出来事」のことです。具体的には、以下のようなアクションが該当します。ユーザーがボタンやリンクをクリックするページの読み込みが完了するマウスカーソルが要素の上に移動・離脱するフォームに入力や送信が行われるH

JavaScriptでDOMノードの子要素をすべて削除するには？ Web開発をしていると、特定の要素（例えば<div>）の中身を丸ごと空にしたい場面があります。JavaScriptでは、whileループとremoveChild()メソッドを組み合わせることで、子要素をすべて簡単に削除できます。 基本の書き方：whileループとremoveChild() idが「mList」である要素の子要素をすべて削除するには、次のように記述します。 var list = document.getElementById(mList); while (list.hasChildNodes()) {

Web開発において、現在表示しているページのURLを取得したい場面はよくあります。たとえば、ページの状態に応じて処理を分岐させたり、シェア機能を実装したりするケースです。 JavaScriptでは、window.location オブジェクトを使うことで、現在のURLを簡単に取得できます。この記事では、基本的な使い方から実用的なサンプルコードまで、わかりやすく解説します。 window.location.hrefでURLを取得する 最もよく使われるのが window.location.href プロパティです。これは、現在のページの完全なURL（href）を文字列として返します。 以下のよう

JavaScriptオブジェクトからプロパティを削除するには、delete演算子を使用します。「delete オブジェクト名.プロパティ名」という形式で記述するだけで、指定したプロパティをオブジェクトから完全に取り除くことができます。delete演算子の基本delete演算子は、オブジェクトから指定したプロパティを削除し、成功した場合はtrueを返します。なお、単にプロパティにundefinedを代入した場合、値は変わりますがプロパティ自体はオブジェクトに残ったままになるため、注意が必要です。プロパティを完全に消したい場合はdelete演算子を使いましょう。サンプルコード以下のコードは、cri

JavaScriptでは、deleteキーワード（delete演算子）を使用することで、オブジェクトから特定のプロパティとその値をまとめて削除することができます。一度削除されたプロパティは、再度追加し直さない限り使用できません。削除後にそのプロパティへアクセスすると、エラーにはならずundefinedが返される点に注意しましょう。サンプルコード以下は、cricketerオブジェクトからpointsプロパティを削除する例です。<html> <body> <p id=demo></p> <script> var cricketer = {

JavaScriptにおける等価比較演算子の違いJavaScriptには、値を比較するための2種類の等価演算子が存在します。それが「==（ダブルイコール）」と「===（トリプルイコール）」です。一見似ているように見えますが、その動作は大きく異なり、使い分けを誤ると予期しないバグの原因になります。== （抽象的等価比較演算子）ダブルイコール（==）は抽象的等価比較演算子と呼ばれ、比較を行う前にオペランド（被演算子）を同じ型に変換してから比較します。この動作は「型強制（type coercion）」とも呼ばれます。例えば、以下のような結果になります。4 == 4 // true 4 ==

JavaScriptで別のWebページにリダイレクトする基本JavaScriptで別のWebページへリダイレクトするには、window.locationオブジェクトを使用し、遷移先のURLを指定します。最もシンプルな方法は、window.locationに直接URL文字列を代入することです。基本的なコード例以下は、ページが読み込まれた時点で指定したサイトへ自動的にリダイレクトするサンプルコードです。<html>    <body>       <p>別のサイトへリダイレ

JavaScriptでイベントを処理するには、addEventListener()メソッドを使用します。たとえば、要素がマウスでクリックされたときに何らかの処理を実行したい場合は、「click」イベントを要素にバインド（紐付け）します。イベントバインドの基本的な考え方イベントバインドとは、特定の要素に対して「いつ・どんな操作が行われたら・何を実行するか」を定義することです。代表的なイベントには以下のようなものがあります。click … 要素がクリックされたときmouseover … マウスカーソルが要素に乗ったときsubmit … フォームが送信されたときkeydown … キーが押されたとき

jQueryとJavaScriptの違いとは？jQueryとJavaScriptは密接な関係にありますが、それぞれ役割や特徴が異なります。ここでは、両者の主な違いをわかりやすく解説します。jQueryとはjQueryは、2006年にJohn Resig（ジョン・レッシグ）によって開発された、高速かつ簡潔なJavaScriptライブラリです。HTMLドキュメントの要素取得（トラバーシング）、イベント処理、アニメーション、Ajax通信などを簡単に実装でき、迅速なWeb開発を支援します。JavaScriptとはJavaScriptは、軽量でインタプリタ方式のプログラミング言語です。ネットワーク中心の