JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのasync/await関数とは?Promiseを活用した非同期処理の基本

    Promiseオブジェクトは、非同期処理の最終的な完了(または失敗)と、その結果得られる値を表すものです。async/await関数は、このPromiseを基盤として動作します。async/awaitを使うことで、内部では非同期タスクを実行しながら、コードの見た目は完全に同期的に記述できます。これにより、ネストが深くなりがちなコールバックスタイルを避け、可読性の高いコードを書くことが可能になります。Promiseを返す非同期関数の例たとえば、2秒後に値100で解決されるPromiseを返す非同期関数を考えてみましょう。 { resolve(100); }

  2. JavaScriptの値渡しとは?オブジェクト参照の仕組みを実例で解説

    JavaScriptは基本的に値渡し(pass by value)の言語です。しかし、オブジェクトを扱う場合には注意が必要です。オブジェクトにとっての「値」とは、そのオブジェクトへの参照(リファレンス)そのものだからです。 プリミティブ型の場合:関数内での変更は呼び出し元に影響しない 例えば、数値を関数に引数として渡し、その関数の中で値をインクリメントしても、呼び出し元の変数の値は更新されません。 コード例 let i = 0; function increment(x) { x = x + 1 console.log(x) } increment(i) console.log

  3. JavaScriptは値渡し?参照渡し?オブジェクトの挙動をわかりやすく解説

    JavaScriptは基本的に「値渡し(pass by value)」の言語です。ただし、オブジェクトの場合、その「値」とはオブジェクトへの参照(リファレンス)を指します。この仕組みを理解すると、関数に値やオブジェクトを渡したときの挙動の違いが明確になります。まずは、数値(プリミティブ型)を関数に渡した場合の例を見てみましょう。例1:数値を関数に渡した場合let i = 0; function increment(x) { x = x + 1 console.log(x) } increment(i) console.log(i)出力結果1 0この例では、関数内で変数xの値を+

  4. JavaScriptのObject.assign()メソッドとは?使い方と注意点を解説

    Object.assign()メソッドは、1つ以上のソースオブジェクトからターゲットオブジェクトへ、列挙可能な独自プロパティの値をすべてコピーするためのメソッドです。戻り値として、コピー先となったターゲットオブジェクトが返されます。 基本的な使い方 const targetObj = { a: 1, b: 2 }; const sourceObj = { b: 4, c: 5 }; const returnedTarget = Object.assign(targetObj, sourceObj); console.log(targetObj); console.log(returnedTar

  5. JavaScriptオブジェクトのプロパティを別のオブジェクトに複製・コピーする方法

    JavaScriptでオブジェクトのプロパティを別のオブジェクトにコピーしたい場合、Object.assign()メソッドを使用します。このメソッドを使うと、1つ以上のソースオブジェクトから、オブジェクト自身の列挙可能なプロパティの値をすべてターゲットオブジェクトへコピーできます。例えば、ソースオブジェクトのすべてのプロパティをターゲットオブジェクトにコピーするには、次のようにコードを記述します。サンプルコードconst targetObj = { a: 1, b: 2 }; const sourceObj = { b: 4, c: 5 }; const returnedTarget = Ob

  6. WebガーデンとWebファームの違いをわかりやすく解説|論理・物理スケーラビリティの観点から

    Webアプリケーションの利用者数やトラフィックが増加すると、それに耐えうる「スケーラビリティ(拡張性)」の確保が不可欠になります。その代表的なホスティング構成として知られているのが「Webガーデン(Web Garden)」と「Webファーム(Web Farm)」です。一見似た仕組みに思えますが、両者はまったく異なるアプローチで負荷分散と拡張性を実現しています。本記事では、それぞれの特徴と違いを詳しく解説します。 Webガーデンとは? Webガーデンとは、1台のサーバー上で複数の「プロセス」を動作させるWebホスティング構成のことです。単一のサーバーマシン内で複数のワーカープロセスが並行してリク

  7. JavaScriptでWeakMapが必要な理由とは?弱参照の仕組みと活用シーンを解説

    JavaScriptのWeakMapは、キーと値のペアを格納するコレクションの一種です。通常のMapと大きく異なる点は、「キーが弱く参照される(weakly referenced)」という特性を持つことです。キーには必ずオブジェクトを指定する必要があり、値には任意のデータを格納できます。弱参照(Weak Reference)とは何かWikipediaによれば、弱参照とは、強参照とは異なり、参照先のオブジェクトをガベージコレクタによる回収から保護しない参照のことを指します。あるオブジェクトへのすべての参照チェーンに少なくとも1つの弱参照が含まれる場合、そのオブジェクトは「弱到達(weakly r

  8. JavaScriptのWeakMapインスタンスで使える主なメソッドを解説

    WeakMapは、キーとしてオブジェクトのみを受け付けるJavaScriptの特殊なコレクションです。キーへの参照が「弱く」保持されるため、キーとなったオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。 ここでは、WeakMapインスタンスで利用できる主要な4つのメソッドを詳しく見ていきましょう。 1. WeakMap.prototype.delete(key) 指定したキーに関連付けられた値をWeakMapから削除します。削除後、has()メソッドはfalseを返します。 2. WeakMap.prototype.get(key) 指

  9. JavaScriptのWeakMapでclear()メソッドを使う方法とは?

    WeakMapのclear()メソッドとはWeakMapオブジェクトのclear()メソッドは、そのWeakMapに格納されているすべてのキーと値のペアを一括で削除するためのメソッドです。しかし、このメソッドは現在のECMAScriptの仕様からは削除されています。そのため、標準のWeakMapに対して直接clear()を呼び出すことはできません。とはいえ、WeakMapオブジェクトをラップするクラスを作成し、clear()メソッドに対応した処理を追加することで、同様の機能を簡単に実現できます。実装例:clear()メソッドを持つWeakMapラッパークラスclass ClearableWea

  10. JavaScriptの型付き配列(Typed Array)とは?バイナリデータ操作の基本を解説

    JavaScriptの型付き配列は、配列のような振る舞いをするオブジェクトで、生のバイナリデータへ効率的にアクセスするための仕組みです。画像処理、音声処理、WebGLなど、パフォーマンスが求められる場面で活躍します。 通常の配列との違い 通常のArrayオブジェクトは要素の追加・削除によって動的にサイズが変化し、任意のJavaScriptの値を格納できます。JavaScriptエンジンはこうした配列に対しても最適化を行い、高速な動作を実現しています。 一方、型付き配列は扱えるデータの種類が固定されており、通常の配列とは明確に区別されます。注意: 型付き配列に対して Array.isArray(

  11. JavaScriptにおけるメモリ管理の仕組みを徹底解説

    メモリのライフサイクルとは どのプログラミング言語においても、メモリのライフサイクルはほぼ共通しており、次の3つの段階で構成されています。 必要なメモリを割り当てる(アロケート) 割り当てたメモリを使用する(読み取り・書き込み) 不要になったメモリを解放する このうち2番目の「使用」については、すべての言語で開発者が明示的に行う必要があります。 一方、1番目の「割り当て」と3番目の「解放」の扱いは言語によって異なります。C言語のような低レベル言語では開発者が明示的に行いますが、JavaScriptのような高レベル言語では、ほとんどの場合、暗黙的に自動処理されます。 JavaScriptのメ

  12. JavaScriptの==演算子と===演算子の違いを徹底解説

    JavaScriptでは、2つの値(オペランド)を比較する際に「==(ダブルイコール)」と「===(トリプルイコール)」という2種類の等価演算子を使用できます。一見よく似ていますが、この2つには重要な違いがあり、使い分けを誤ると予期しないバグの原因になります。 ==と===の主な違い 番号項目==(ダブルイコール)===(トリプルイコール) 1名称==は等価演算子(Equality Operator)と呼ばれます。===は同一性演算子/厳密等価演算子(Identity / Strict Equality Operator)と呼ばれます。 2比較方法比較の前に型変換(型強制)を行います。

  13. JavaScriptのガベージコレクション(GC)とは?仕組みとアルゴリズムを解説

    ガベージコレクション(GC)とはガベージコレクション(GC)とは、自動メモリ管理の一種です。ガベージコレクタ(単に「コレクタ」とも呼ばれます)は、プログラムがもう使用していないオブジェクト、つまり「ゴミ」が占有しているメモリを回収します。ただし、あるメモリが「もう不要かどうか」を自動的に判定するという一般的な問題は、理論的に決定不能(undecidable)であることが証明されています。そのため、ガベージコレクタはこの一般的な問題に対する制限付きの解決策を実装しています。ガベージコレクションのアルゴリズムが依存する中心的な概念は「参照」です。メモリ管理の文脈では、あるオブジェクトが別のオブジェ

  14. JavaScriptにおける循環参照が問題視される理由とは?

    循環参照とは何か循環参照(circular reference)とは、2つの独立したオブジェクトが互いに参照を持ち合う状態を指します。 かつてはメモリリークの原因だった古いブラウザでは、循環参照がメモリリークの主な原因のひとつでした。しかし、現在のガベージコレクション(GC)アルゴリズムはサイクルや循環依存を適切に処理できるよう改良されており、この問題はすでに過去のものとなっています。 設計の観点から見ると「コードの臭い」とはいえ、純粋なソフトウェア設計の観点から見ると、循環参照は依然として好ましくない「コードの臭い(code smell)」です。互いに参照し合う2つのオブジェクトは密結合(t

  15. JavaScriptのOOPで循環参照を回避する方法とは?設計上の注意点を解説

    循環参照(サイクル参照)とは、2つの異なるオブジェクトが互いに参照を持ち合う状態を指します。かつての古いブラウザでは、この循環参照がメモリリークの原因となることがありました。しかし、現代のガベージコレクション(GC)アルゴリズムは循環や循環依存を適切に検出・解放できるよう進化しているため、メモリリークの観点ではもはや大きな問題ではなくなりつつあります。とはいえ、純粋なソフトウェア設計の観点から見ると、循環参照は依然として避けるべき「コードスメル」とされています。循環参照が存在するということは、参照し合う2つのオブジェクトが密結合の状態にあることを意味します。その結果、片方のオブジェクトへ変更を

  16. JavaScriptのtest()メソッドとexec()メソッドの違い

    test()は入力文字列が正規表現にマッチするかどうかを判定し、ブール値(true/false)を返します。一方、exec()はマッチ結果を配列形式で返し、キャプチャグループやマッチ位置(インデックス)などの詳細情報を取得できます。 test()メソッドを使うべきケース 入力文字列が正規表現にマッチするかどうかを確認したいだけなら、RegExp.testが最適です。戻り値がブール値であるため、if文などの条件分岐で扱いやすく、シンプルな存在チェックに向いています。 exec()メソッドを使うべきケース RegExp.execは、マッチした文字列全体だけでなく、すべてのキャプチャグループやマッチ

  17. JavaScriptでファイルを読み書きする方法|Node.jsのfsモジュール徹底解説

    結論から言うと、クライアントサイド(ブラウザ上)のJavaScriptでは、セキュリティ上の制約によりファイルの読み書きはできません。ファイル操作が可能なのはサーバーサイドであり、Node.jsのfsモジュールを使用することで実現できます。fsモジュールは、ファイルシステムに対して同期的・非同期的な読み書きを行うための豊富なAPIを提供しており、Node.jsにおけるファイル操作の標準的な手段です。fsモジュールの主な特徴非同期処理:コールバックやPromiseを使い、他の処理をブロックせずにファイル操作が可能同期処理:処理完了まで待機するfs.readFileSync()などのメソッドも提供

  18. JavaScriptのparseInt関数で任意の基数の文字列を整数に変換する方法

    JavaScriptには、文字列を整数に変換するためのparseInt関数が用意されています。この関数を使えば、2進数から36進数まで、任意の基数で表現された数値文字列を簡単に整数へと変換できます。parseInt関数の基本構文parseInt(string, radix);各パラメータの意味は次のとおりです。string(第1引数)解析対象となる値です。この引数が文字列以外の場合は、ToStringメソッドによって自動的に文字列へ変換されます。また、値の先頭にある空白文字は無視されます。radix(第2引数)文字列がどの記数法(基数)で表現されているかを示す、2から36までの整数です。たとえ

  19. JavaScriptで使えるポップアップダイアログの3種類を解説!alert・confirm・promptの違いと使い方

    JavaScriptには、ブラウザ上で手軽にユーザーと対話できる組み込みのポップアップダイアログが3種類用意されています。それぞれ「alert」「confirm」「prompt」というメソッドで、用途に応じて使い分けることができます。 1. alert() — 警告ダイアログ window.alert() メソッドは、指定したメッセージと「OK」ボタンだけを持つシンプルな警告ダイアログを表示します。ユーザーへの通知や注意喚起など、返答を必要としない一方向のメッセージ表示に適しています。 使用例 <script>     alert(これは

  20. JavaScriptでinnerHTMLを使う際のデメリットと注意点を解説

    innerHTMLの主なデメリットJavaScriptでDOM操作を行う際、innerHTMLは手軽に使える便利なプロパティですが、いくつかの重要なデメリットがあります。ここでは、その主な問題点について詳しく解説します。1. 追加時に全体が再パースされるため処理が遅いinnerHTMLには、既存の内容を保持したまま要素を追加する(アペンドする)仕組みがありません。値を更新すると、ブラウザはHTML文字列全体を解析し直してDOMツリーを再構築します。そのため、要素を頻繁に追加・変更するような場面では、パフォーマンスが大きく低下します。例えば、あるdivタグに新しい要素を追加したい場合、次のような

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:161/297  20-コンピューター/Page Goto:1 155 156 157 158 159 160 161 162 163 164 165 166 167