JavaScript | コンピューター

JavaScriptにおける「null」と「0」の奇妙な関係とは？その理由を解説

JavaScriptでfalsy（偽と評価される）な値を扱うとき、特に「null」と「0」の組み合わせでは、その特殊な性質から多くの疑問が生じます。「null」と「0」を比較すると、直感に反する結果に遭遇することがあるのです。大なり（>）、小なり（<）、等しい（==）の比較ではBoolean型のfalseが返されますが、大なりイコール（>=）ではBoolean型のtrueが返されます。ここで次のような疑問が浮かびます。「ある値が0より大きくもなく、0とも等しくないのに、0以上である」とは、いったいどういうことなのでしょうか？例1：nullと0の基本的な比較次の例では、大なり・

JavaScriptで数値の末尾の桁を削除する方法｜ビットOR演算子による簡潔な実装

文字列メソッドとビット演算子の違いビット演算子が登場する以前は、数値から特定の桁を取り除く際、まず数値を文字列に変換し、その後文字列メソッドを使って目的の部分を切り出すという手順が必要でした。このアプローチでは、数値から文字列への型変換（type conversion）が不可欠です。しかし、ビットOR演算子の登場によって状況は大きく変わりました。ビットORを活用すれば、型変換も文字列メソッドも一切不要になり、コードの手間と長さを大幅に削減できます。例1：substring()を使った従来の方法次の例では、「string.substring()」という文字列メソッドを使用して、数値の最後の桁を削

JavaScriptの型変換に便利な「+」演算子の重要性とは？具体例付きで解説

JavaScriptにおける「+」演算子は、数値の加算や文字列の連結など幅広い用途を持つ一方で、実は型変換においても非常に重要な役割を果たしています。普段は足し算の計算に使うことが多いですが、単項演算子（オペランドが一つだけの形）として使うことで、文字列を驚くほど簡単に数値へ変換できるのです。文字列を数値へ変換する例 <html> <body> <script> var num = 23; int = +num;

JavaScriptにおけるNavigatorオブジェクトの重要性と主な使い方

NavigatorオブジェクトとはJavaScriptのNavigatorオブジェクトは、ブラウザや実行環境に関するさまざまな情報を取得できる、非常に便利な組み込みオブジェクトです。このオブジェクトを使うことで、以下のような情報をプログラムから確認できます。ユーザーの位置情報（位置情報APIとの連携）ブラウザがオンラインモードかオフラインモードかシステム上でJavaが有効になっているかどうか使用しているブラウザの種類やバージョンここでは、その中でも特によく使われる機能について、具体的なコード例を交えながら解説します。例1：ブラウザがオンラインかどうかを判定する次の例では、navigator.o

JavaScriptで関数コンストラクターを使って関数を呼び出す方法とは？継承の仕組みを解説

JavaScriptでは、関数を呼び出す方法は大きく分けて3つあります。1つ目は「関数として」、2つ目は「メソッドとして」、そして3つ目は「関数コンストラクターとして」呼び出す方法です。この中でも、関数コンストラクターを使った呼び出しは特に特別な存在です。なぜなら、この方法だけが「継承（インヘリタンス）」の仕組みを利用しているからです。実際にコンストラクター呼び出しを行うと、新しいオブジェクトが生成され、そのオブジェクトはコンストラクターが持つプロパティやメソッドを継承します。一方、最初の2つの呼び出し方法には、このような継承の仕組みは存在しません。サンプルコード以下の例では、まず通常の関数を

JavaScriptで文字列を浮動小数点数に変換する方法【parseFloat()の使い方と注意点】

JavaScriptには、文字列を浮動小数点数（小数）に変換するための組み込みメソッドとしてparseFloat()が用意されています。同じように文字列を数値へ変換できるparseInt()というメソッドもありますが、こちらは整数のみを返すため、小数部分は切り捨てられてしまいます。小数を扱いたい場合はparseFloat()を使うのが適切です。なお、parseFloat()に数値を表さない文字列を渡した場合、戻り値はNaN（Not a Number）になります。構文parseFloat(Value);引数には数値を表す文字列を渡します。先頭から数値として解釈できる部分を読み取り、浮動小数点数と

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

はい、JavaScriptを使えばHTMLの内容を変更することは十分に可能です。通常、HTMLのコンテンツは<p>や<span>などのタグの中に記述されています。JavaScriptにはHTMLタグへアクセスするためのDOMメソッドが用意されており、document.getElementById()やdocument.getElementsByTagName()などを利用することで、対象のタグを指定して表示内容を書き換えられます。DOMメソッドによるHTML操作の仕組みブラウザは読み込んだHTMLを「DOM（Document Object Model）」と呼ばれるツリー

【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法

addEventListener()メソッドとはJavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。

JavaScriptでイベントハンドラーを削除する方法｜removeEventListener()の使い方を解説

JavaScriptでは、addEventListener()メソッドを使って要素にイベントハンドラーを登録します。一方、登録済みのイベントハンドラーを取り外したい場合には、removeEventListener()メソッドを使用します。このメソッドは、addEventListener()によって追加されたイベントハンドラーだけを削除できる点が特徴です。イベントハンドラーを削除する際のポイントremoveEventListener()でハンドラーを確実に削除するには、addEventListener()で登録した際と同じ関数への参照を引数に渡す必要があります。そのため、イベント登録用の関数は名

JavaScriptのMath.hypot()関数とは?使い方と実行例をわかりやすく解説

Math.hypot()関数とはMath.hypot()は、引数として渡された値の2乗の合計の平方根を返すメソッドです。直角三角形の2辺の長さから斜辺(ピタゴラスの定理に基づく値)を求める際によく使われます。つまり、三角形の辺の長さを引数として渡すだけで、斜辺の長さを簡単に計算できるのです。構文Math.hypot(arg1, arg2, ...);基本的な使用例次の例では、直角三角形の2辺の長さを引数として渡し、斜辺を求めています。なお、数値に変換できない値が引数に含まれていた場合は、結果としてNaNが返されます。<html> <body> <script>

JavaScriptの_.size()メソッドとは？配列のサイズを取得する方法を解説

_.size()メソッドとは_.size()は、JavaScriptの定番ユーティリティライブラリであるunderscore.jsに用意されている関数です。主に配列の要素数（サイズ）を取得するために使われます。このメソッドを使用する前に、underscore.jsのCDNをページに読み込んでおく必要がある点に注意してください。構文_.size(array);例1：通常の配列の場合次の例では、数値を格納した通常の配列を_.size()メソッドに渡し、配列のサイズを取得しています。<html> <body> <head> <script src =

JavaScriptの_.initial()関数とは？配列の末尾要素を除外する方法を解説

_.initial()関数とは_.initial()は、JavaScriptのライブラリであるUnderscore.jsに含まれる関数の一つです。このメソッドは、配列の最後の要素とそれ以外の要素を区別し、末尾の要素を除外した結果を取得したい場合に活用されます。つまり、配列の最後の値だけを無視して、残りのすべての要素を取り出すことができる便利な関数です。基本構文_.initial( array, n );_.initial()は、最大2つのパラメータを受け取ることができます。array（必須）：対象となる配列です。このメソッドは、渡された配列から最後の要素を除いた、残りすべての要素を返します。n

JavaScriptで配列の先頭（0番目）の要素を削除して残りの要素を取得する方法

JavaScriptのライブラリunderscore.jsに含まれる_.rest()メソッドは、配列の先頭（0番目）の要素を取り除き、それ以外の残りの要素を返します。このメソッドは2つの引数を受け取ります。1つ目は対象となる配列、2つ目はインデックスです。2つ目の引数を指定すると、その位置以降の要素から抽出が開始されます。構文 _.rest( array, index ); 例：先頭の1要素だけを削除する場合次の例では、_.rest()メソッドを使って配列の0番目の要素を削除しています。このとき、2つ目の引数は指定していません。 <html> <body> &l

【JavaScript】_.intersection()で複数の配列から共通要素を簡単に抽出する方法

配列が2つだけであれば、論理的な手法を使って共通要素を見つけることができます。しかし、配列が3つ以上になると、共通要素の特定は一気に難しくなります。そこで、この作業をできるだけ簡単にしてくれるのが、JavaScriptのライブラリunderscore.jsに用意されている_.intersection()メソッドです。_.intersection()メソッドは、渡されたすべての配列の要素を1つずつチェックし、共通する値だけを出力します。なお、配列群の中に1つでも共通の値を持たない配列が含まれている場合、その値は結果に表示されません。構文_.intersection( array1, array2

JavaScriptの_.union()メソッドとは？配列の重複を除去して結合する使い方を解説

_.union()メソッドの基本_.union()は、JavaScriptの便利なライブラリであるunderscore.jsに用意されているメソッドです。この関数は、複数の配列を受け取り、それらすべてに含まれる要素を統合したうえで、重複のない新しい配列（いわゆる「和集合」）を返します。各配列の値をすべて精査し、ユニークな値だけを新しい配列へと取り込んでくれるため、データの整理や重複排除の処理を簡潔に記述できるのが大きな魅力です。構文_.union( array1, array2, .... );引数として渡せる配列の数に制限はなく、2つでも3つでも、必要な数だけ指定できます。使用例：数値配列の

JavaScriptのfocus()メソッドとは？基本的な使い方とサンプルコードをわかりやすく解説

focus()メソッドとは JavaScriptのfocus()メソッドは、HTMLフォーム要素などにフォーカス（入力の焦点）を当てるためのメソッドです。このメソッドを呼び出すと、対象の要素が現在のドキュメントにおける「アクティブな要素」として設定されます。フォーカスは同時に1つの要素にしか適用できない点に注意してください。新しい要素へフォーカスを移すと、それまでフォーカスされていた要素からは自動的に解除されます。focus()はテキストボックスやボタン、リンクなど、ユーザーが操作できるさまざまな要素に対して使用でき、フォームの初期入力位置の指定や、バリデーションエラー発生時に入力欄へ自動

JavaScriptでオブジェクトの長さを取得する方法を解説！Object.keys()の活用術

JavaScriptにおいて、lengthプロパティは配列や文字列にのみ適用できる仕様になっています。そのため、オブジェクトに対してlengthプロパティを呼び出すと、undefinedが返されます。オブジェクトにlengthを使った場合の挙動<html> <body> <script> var object = {prop:1, prop:2}; document.write(object.length); </script> </body&g

JavaScriptのObject.defineProperty()で重要な「enumerable（列挙可能）」属性とは？

Object.defineProperty()メソッドとはJavaScriptでは、オブジェクトのプロパティを定義する方法として、ドット記法（.）やブラケット記法（[]）が一般的に使われます。しかし、それ以外にもObject.defineProperty()メソッドを使ってプロパティを定義する方法があります。このメソッドは通常、3つの引数を受け取ります。オブジェクト名、プロパティ名、そしてプロパティディスクリプタ（プロパティ記述子）です。構文Object.defineProperty(オブジェクト名, プロパティ名, プロパティディスクリプタ)enumerable属性を指定しない場合の挙動次の

JavaScriptのスプレッド演算子を使った配列の複製方法を徹底解説

配列の複製（クローン）とは、ある配列の中身を別の配列にコピーすることを指します。従来はslice()メソッドを使って配列を複製するのが一般的でしたが、ES6（ECMAScript 2015）ではスプレッド演算子（...）が導入され、より簡潔に複製できるようになりました。この記事では、両方の方法を具体例とともに解説します。slice()メソッドを使った配列の複製サンプルコード次の例では、slice()メソッドを使って配列をコピーしています。slice()は、指定したインデックスから別のインデックスまでの範囲を抜き出すメソッドです。引数にインデックスを何も指定しない場合、配列全体がそのまま切り出さ

JavaScriptのべき乗演算子（**）とは？使い方と注意点を解説

JavaScriptには、数値のべき乗（累乗）を計算するためのべき乗演算子が用意されています。記号は ** で表され、「ある数値を別の数値で累乗した結果」を簡単に求めることができます。実は、べき乗を計算する方法としては、従来から Math.pow() メソッドが存在していました。しかし、べき乗演算子（**）はJavaScriptに限らず、PythonやRubyなど他のプログラミング言語でも共通して使われる構文であるため、可読性やコードの移植性の面で大きなメリットがあります。べき乗演算子の注意点べき乗演算子の唯一の弱点は、負の数を底（基数）として使う場合には括弧（）で囲む必要があるという点です。