JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのbind()関数の使い方を徹底解説！apply()との違いとは

    bind()関数とはbind()関数は、thisの参照先を固定した新しい関数を生成するメソッドです。実行結果として値を返すapply()関数とは異なり、bind()はコードを後から実行できる関数そのものを返します。以下のコードを見てみましょう。apply()関数は値（720）を出力するのに対し、bind()関数は関数そのものを出力していることがわかります。サンプルコード<html> <body> <script> var obj = {num : 10}; var mul = function(i, j, k){ return thi

  2. JavaScriptでHTML要素を表示・非表示にする方法

    JavaScriptでは、CSSスタイルを操作することで、HTML要素を簡単に表示・非表示できます。CSSには要素の表示状態を制御するdisplayプロパティが用意されており、値にnoneを指定すれば要素を隠し、blockを指定すれば再び表示させることが可能です。 要素を非表示にする方法 コード例 以下の例では、「Hideme」ボタンをクリックすると、pタグ内のテキストが画面から消えます。 <html> <body>    <p id="hide">JavaScriptを使ってHTML要素を非表示にします

  3. JavaScriptにおけるundefinedの真偽値（Boolean値）とは？falsyな値を解説

    undefinedのブール値はfalseJavaScriptにおいて、undefinedのブール値（Boolean値）はfalseになります。これはundefinedだけに限った話ではなく、null、false、NaN、そして空文字列（）も同様にfalseへと変換されます。このように、Boolean()関数や条件式の中でfalseと評価される値のことは、一般的に「falsy（偽値）」と呼ばれます。それ以外のほとんどの値（0以外の数値、空でない文字列、オブジェクトなど）は「truthy（真値）」としてtrueに変換されます。サンプルコード次の例では、undefined、false、NaN、空文字

  4. JavaScriptのtoString()メソッドで数値を2進数・16進数など他の基数表記に変換する方法

    toString()メソッドは、配列を文字列に変換するためだけのメソッドではありません。実は、数値を他の基数表記（進数）に変換する際にも活用できます。toString()メソッドでは、2進数から36進数までの範囲で数値を出力することが可能です。それでは、具体例を使って詳しく見ていきましょう。基数（引数）の指定方法toString()メソッドの引数には、変換先の基数を2～36までの整数で指定します。たとえば「2」を指定すれば2進数、「8」なら8進数、「16」なら16進数に変換されます。引数を省略した場合は、10進数の文字列が返されます。例1次の例では、数値26を2進数、8進数、10進数、16進数

  5. JavaScriptで数値をオブジェクトとして作成すべきでない理由とは？

    JavaScriptでは、数値をオブジェクトに変換することは避けるのがベストプラクティスです。その理由は、数値とオブジェクトは互いに比較できず、さらにオブジェクト同士も正しく比較できないためです。数値とオブジェクトの比較がうまくいかない理由JavaScriptの厳密等価演算子（===）は、値だけでなくデータ型も比較します。プリミティブな数値の型は「number」ですが、new Number()で生成した値の型は「object」になります。この型の違いにより、たとえ値が同じでも比較結果は「false」になってしまいます。例1：数値同士の比較次の例では、数値の500を変数「x」と変数「y」の両方に

  6. JavaScriptのAtomics.store()メソッドとは？配列の指定位置に値を格納する方法

    Atomics.store()メソッドとはAtomics.store()は、JavaScriptに標準で組み込まれているメソッドの一つで、配列（TypedArray）の指定した位置に値を格納し、格納された値を戻り値として返します。このメソッドは、整数型のTypedArray、インデックス、格納する値の3つを引数として受け取ります。また、Atomicsは複数スレッド間でデータを共有する際に競合状態（レースコンディション）を防ぐためのものであり、操作が中断されることなく一括して実行されることが保証されています。構文Atomics.store(typedArray, index, value);パラ

  7. JavaScriptでオブジェクトのプロパティにアクセスする2つの方法【ドット記法とブラケット記法】

    JavaScriptでは、オブジェクトのプロパティにアクセスする方法が2つあります。1つはドット記法（.property）、もう1つはブラケット記法（[property]）です。どちらも同じプロパティを参照できますが、書き方や使える場面が異なります。 構文1：ドット記法 Object.property; 構文2：ブラケット記法 Object[property]; それでは、具体例を見ながらそれぞれの使い方を確認していきましょう。 例1：ドット記法でプロパティにアクセスする 次の例では、「person」というオブジェクトを定義し、そのプロパティにドット記法を使ってアクセスしています。 <h

  8. 【初心者向け】JavaScriptで値が本物の配列かどうか判定する方法をわかりやすく解説

    JavaScriptにおいて、配列（array）は厳密には「本物の配列」ではなく、JavaScriptのオブジェクトの一種です。そのため、typeof() 演算子を使って型を確認すると、結果は「object」と表示されてしまい、配列かどうかを区別することができません。本記事では、なぜ typeof では判定できないのかを解説したうえで、Array.isArray() メソッドなどを使って正確に配列を判定する方法を紹介します。typeof() 演算子の基本構文typeof(operand);パラメータ： typeof() 演算子はオペランドを受け取り、そのデータ型を文字列として返します。次の例を

  9. JavaScriptのinstanceof演算子とArray.isArray()メソッドの違いとは？

    JavaScriptで「この値は配列かどうか」を判定する方法として、Array.isArray()メソッドとinstanceof演算子の2つがよく使われます。この2つは一見すると同じ役割を持っていますが、実は1つの重要な違いがあります。 Array.isArray()メソッドは普遍的（ユニバーサル）であり、どのような実行環境でも正しく機能します。一方、instanceof演算子は普遍的ではないため、新しく作られた環境（別のレルム）では正しく判定できない場合があります。 構文 Array.isArray() の場合 Array.isArray(array); instanceof の場合 ar

  10. 【初心者向け】JavaScriptでネストされたJSONオブジェクトにアクセスする方法をわかりやすく解説

    ネストされたJSONオブジェクトへのアクセスとは？ JavaScriptでネストされたJSONオブジェクトにアクセスするのは、ネストされた配列にアクセスするのとほぼ同じ要領です。ここでいう「ネストされたオブジェクト」とは、別のオブジェクトの内部に格納されているオブジェクトのことです。 ネストされたプロパティへアクセスする際によく使われるのがドット記法（dot notation）です。ドット記法では、オブジェクト名.プロパティ名.その中のプロパティ名のように、階層を順番にたどって目的の値へ到達します。 例1：1階層ネストされたオブジェクトへのアクセス 次の例では、メインオブジェクト「person

  11. JavaScriptでネストされたオブジェクトのプロパティを変更する2つの方法

    JavaScriptでネストされた（入れ子になった）オブジェクトのプロパティを変更するには、主に2つの方法があります。ひとつはドット記法、もうひとつはブラケット記法（角括弧記法）です。 どちらの方法も機能はまったく同じで、違いは記述の形式だけです。それぞれの書き方を詳しく見ていきましょう。 ドット記法を使う方法 例 次の例では、最初はcountryプロパティの値が「England」に設定されています。しかしドット記法を使って値を変更すると、「India」に書き換えられます。 <html> <body> <script>    var p

  12. JavaScriptでオブジェクトのプロパティを削除する方法【delete演算子の使い方を解説】

    JavaScriptでオブジェクトのプロパティを削除するには、delete演算子を使用します。delete演算子は、ドット記法とブラケット記法のどちらの方法とも組み合わせて使うことができます。 構文（syntax） delete object.property; ブラケット記法を使う場合は、次のように記述します。 delete object[property]; 使用例 次の例では、まずネストされたオブジェクト内のプロパティ「country」にアクセスすると、その値「England」が出力されます。しかし、delete演算子を使ってこのプロパティを削除した後にもう一度アクセスすると、「Engl

  13. JavaScriptで文字列を日付オブジェクトに変換する方法【Date()の使い方】

    JavaScriptで文字列を日付オブジェクトに変換するには、Date()メソッドを使用します。このメソッドは、特定の一瞬の時刻を表す日付インスタンスを、プラットフォームに依存しない形式で生成します。基本的な使い方new Date()に日付を表す文字列を渡すことで、その文字列を解析したDateオブジェクトを作成できます。ISO 8601形式（例：1980-11-01）などの標準的な日付文字列に対応しており、多くの場面で手軽に活用できます。サンプルコード以下の例では、まずJSON.parse()メソッドを使って文字列「str」をパースし、その後Date()メソッドを使って生年月日（DOB）を日付

  14. JavaScriptのObject.freeze()とconstの違いとは？主な相違点をサンプルコード付きで解説

    JavaScriptにおけるObject.freeze()とconstの最大の違いは、前者がオブジェクトの変更（ミュータビリティ）を防げるのに対し、後者は変更を防げないという点です。それぞれの特徴を詳しく見ていきましょう。 constの基本動作 constはletとほぼ同じ挙動を持ちます。constで宣言した変数は再代入不可となり、一度値を代入すると別の値を割り当て直すことはできません。また、varが関数スコープであるのに対し、constで宣言された変数はブロックスコープになります。 しかし、constには重要な弱点があります。それはオブジェクトの変更（ミュータビリティ）を防げないという点です

  15. JavaScriptのObject.freeze()でネストされたオブジェクトは不変にできる？その限界とdeepFreezeによる解決策

    Object.freeze()メソッドを使うと、オブジェクトを不変（イミュータブル）にすることができます。しかし、ネストされた（入れ子の）オブジェクトが含まれている場合は注意が必要です。Object.freeze()がイミュータブル性を保証できるのは、あくまで最も外側の親オブジェクトだけであり、内部の子（ネストされた）オブジェクトには一切アクセスしないため、入れ子のプロパティの変更までは防げません。例1：ネストがない場合、freezeは正常に機能する以下の例にはネストされたオブジェクトが存在しません。Object.freeze()メソッドはオブジェクト全体を凍結（フリーズ）するため、凍結後にも

  16. JavaScriptで単語以外の文字を削除するには？正規表現を使った実装方法を解説

    単語以外の文字を削除する基本の考え方JavaScriptで文字列から単語文字（英数字やアンダースコアなど）以外の記号・特殊文字を取り除くには、正規表現を利用します。考え方はシンプルで、単語以外の文字に一致するパターンを定義し、マッチした文字をすべて空文字列（）に置き換えるだけで削除が完了します。サンプルコード次の例では、文字列中に「~」や「!」「@」といった多くの記号が混在しており、その間に「Tutorix is the best e-learning platform」というテキストが存在します。関数内では、まず引数がnullまたは空文字列の場合にfalseを返すチェックを行い、そのうえで、

  17. JavaScriptでエンコードされた文字列をデコードする方法【unescape()の使い方を解説】

    デコード（Decoding）とはJavaScriptでは、escape()メソッドによってエンコードされた文字列を元の状態に戻す（デコードする）際に、unescape()メソッドを使用します。このメソッドは、エンコード済みの文字列を引数として受け取り、その中に含まれる16進数表記の文字（例：%21など）を、対応する実際の文字へと置き換えて返します。構文unescape(string)引数には、escape()でエンコードした文字列を指定します。使用例1：特殊文字（!）のデコード次の例では、まずescape()メソッドを使って2つの感嘆符「!!」を16進数表記に変換しています。続けて、unesc

  18. JavaScriptでURLを解析する方法とは？DOMを使った簡単なURLパースの実装

    JavaScriptにおけるURLの解析（パース）方法JavaScriptでURLを解析する場合、正規表現を使うよりもDOMメソッドを活用する方がはるかにシンプルです。正規表現でURLを分解しようとすると、コードは複雑になりがちですが、DOMメソッドなら関数を1回呼び出すだけで解析済みのURL（パース済みURL）を取得できます。DOMメソッドによるURL解析の仕組み以下の例では、まず関数を作成し、その内部でDOMメソッドを使ってアンカータグ「a」を生成しています。次に、引数として渡されたURLを、アンカータグのhref属性に代入します。ブラウザはhrefに設定されたURLを自動的に解析し、プロ

  19. JavaScriptで2つの文字列を連結する方法｜スペースの有無で変わる正しい書き方

    JavaScriptで2つの文字列をつなげる（連結する）には、「+」演算子を使用します。文字列と文字列の間にスペースを入れたい場合も、この演算子だけで簡単に実現できます。ポイントは、「1つ目の文字列の末尾にすでにスペースが含まれているかどうか」です。含まれている場合は余計な処理は不要で、含まれていない場合は半角スペースを明示的に挟む必要があります。それぞれのケースを見ていきましょう。ケース1：最初の文字列にすでにスペースが含まれている場合1つ目の文字列の末尾にスペースが含まれているなら、単純に連結だけで十分です。スペースを明示的に追加すると、逆に空白が二重になってしまうので注意しましょう。コー

  20. JavaScriptで文字列を途中で改行するとき、バックスラッシュはどれほど重要？

    JavaScriptで文字列を途中で改行（分割）する際、バックスラッシュ（\）は非常に重要な役割を果たします。バックスラッシュなしで文字列の途中に改行を入れると、JavaScriptはそのコードを正しく解釈できず、結果として何も出力されません。これは、JavaScriptでは1つの文字列リテラルが同じ行で完結している必要があるためです。行をまたいで文字列を記述したい場合は、行末にバックスラッシュを置くことで「次の行も同じ文字列の続きである」ということをインタプリタに伝えることができます。バックスラッシュを使わない場合：出力されない例以下の例では、文字列の途中で改行していますが、バックスラッシュ

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:171/297  20-コンピューター/Page Goto:1 165 166 167 168 169 170 171 172 173 174 175 176 177