JavaScript

JavaScriptのappendChild()メソッドは、親ノードの末尾に新しい要素を追加するためのメソッドです。特に、<ul>や<ol>などのリストに<li>項目を動的に追加する場面でよく使われます。複数の項目を追加したい場合は、appendChild()を必要な回数だけ呼び出すことになります。 JavaScriptのappendChild()とは？ Webページにはテキストのリスト、画像のリスト、カスタム要素のリストなど、さまざまなリストがあふれています。通常、リストを作成するときはHTMLで直接記述しますが、appendChild()メソッドを使

JavaScriptのif...else文は、条件が真（true）か偽（false）かを評価します。条件が真であればifブロック内のコードが実行され、そうでなければelseブロック内のコードが実行されます。また、else...if文を使えば、複数の条件を順番に評価することも可能です。 プログラミングをしていると、状況に応じて異なるコードブロックを実行したい場面が出てきます。そんなときに役立つのが条件分岐です。条件分岐はあらゆるプログラミング言語に欠かせない要素であり、特定の条件が満たされた場合にのみコードブロックを実行する仕組みを提供します。 このチュートリアルでは、JavaScrip

JavaScriptでは、sort()メソッドを使って配列を並べ替えることができます。sort()メソッドは配列の要素を昇順にソートします。ソートは「その場（in place）」で行われるため、元の配列自体が変更され、新しい配列は作成されません。 たとえば、名前のリストをユーザーにアルファベット順で表示したい場合など、配列を特定の順序で並べ替えたい場面はよくあります。目的に応じて、sort()関数でアルファベット順にソートしたり、reverse()関数で逆順にしたり、比較関数を組み合わせて独自のカスタムソートを実現したりできます。 この記事では、JavaScriptでsort()とreve

do...whileループは、コードブロックを一度実行し、条件がtrueと評価され続ける限り処理を続けることができます。whileループとdo...whileループは、特定の条件が満たされている間だけコードブロックを実行したい場合に非常に便利です。 ループはプログラミングの中核となる機能で、似たようなタスクを自動化するために使われます。例えば、学生名簿に登録された全員の名前を出力したい場合、ループを作成すればこの作業を自動化できます。 JavaScriptには、繰り返し処理を何度も実行するための主要なループが2種類あります。1つ目はforループで、指定した回数だけステートメントを実行します。

JavaScriptのスプレッド演算子は、配列などの反復可能なオブジェクト（イテラブル）を展開し、その中身を個々の要素として扱えるようにする構文です。オブジェクトの複製、配列の結合、関数への引数の受け渡しなど、日常的なコーディングで頻繁に活用される非常に便利な機能です。 この記事では、スプレッド演算子の基本的な仕組みから、よく使われるユースケースまで、具体的なコード例とともにわかりやすく解説します。 JavaScriptのスプレッド演算子とは？ スプレッド演算子を使うと、イテラブル（反復可能なオブジェクト）の中身にアクセスできます。記述方法はシンプルで、「3つのドット（...）」の後にア

JavaScriptのtrim()メソッドは、文字列の先頭と末尾にある空白文字を取り除きます。また、trimLeft()とtrimStart()は文字列の先頭の空白のみを、trimRight()とtrimEnd()は末尾の空白のみを削除します。 文字列の先頭や末尾から、スペース、タブ、改行などの不要な空白を削除したい場面はよくあります。たとえば、顧客名のリストを扱う場合、各名前の末尾に余計なスペースが入っていないか確認したいことがあるでしょう。 そんなときに役立つのがJavaScriptのtrim()関数です。trim()関数を使えば、文字列の先頭と末尾の空白文字を簡単に取り除けます。

Webアプリケーション開発において、HTTPリクエストは欠かせない基盤となる仕組みです。HTTPリクエストを使うことで、ユーザーの入力データを取得し、バックエンドを経由してサーバーへ送信し、その後レスポンスを受け取ることができます。 リクエストにはさまざまな種類があります。POSTリクエストのように、データベースへデータを保存するために送信されるものもあれば、サーバーからレスポンスを受け取ってユーザーに表示するGETリクエストのように、既存データを取得するためのものもあります。jQueryには、こうしたGETリクエストを簡潔に送信できるget()メソッドが用意されています。 jQueryのge

JavaScriptの+=演算子は、2つの値を足し合わせて、その結果を変数に代入するための演算子です。「加算代入演算子（addition assignment operator）」とも呼ばれ、通常の「変数 = X + Y」という記述方法よりも簡潔にコードを書くことができます。 プラス記号（+）とイコール記号（=）が並んでいる？タイプミスではありません。JavaScriptにおいて、この2つの記号が隣り合うと特別な意味を持ちます。それが「加算代入演算子」です。 本記事では、JavaScriptの+=演算子が何であるか、どのように動作するのかを解説します。実際のコード例も交えながら、使い方をし

JavaScriptのincludes()メソッドは、配列の中から特定の要素を検索し、その要素が存在すればtrueを返します。一方、filter()メソッドも配列から要素を見つけるための手段ですが、includes()とは異なり、検索対象の要素そのもの（該当するオブジェクト）を返す点が特徴です。 例えば、商品注文のリストの中に「ベッドサイドキャビネット」の注文が含まれているかどうかを確認したい、といった場面を想像してみてください。このように、配列に特定の値が存在するかどうかを調べたいケースは開発現場で頻繁に発生します。 JavaScriptで配列に要素が含まれるか確認する2つの方法 Ja

jQueryには、開発者が効率的に動的なWeb体験を作り出すための便利なメソッドが数多く用意されています。その中でもjQueryのhtml()メソッドは、選択した要素内のHTMLをすべて置き換えるためのメソッドです。ユーザーがページを操作した後に表示内容を動的に変更したい場合に非常に役立ちます。このガイドでは、html()メソッドの使い方と構文について学びます。さらに、ステップバイステップでhtml()を使用する方法も紹介します。jQueryのhtml()はjQueryライブラリにおける基本的なメソッドの一つであり、頻繁に使用されます。基本をマスターすれば、実際にhtml()を使った練習を始め

jQueryのeach()は、DOM要素を反復処理するための簡潔な方法です。each()メソッドは、対象となるjQueryオブジェクトに対して呼び出すように設計されています。jQueryオブジェクトとは、1つ以上のDOM要素を含み、jQueryのメソッドにアクセスできるオブジェクトのことです。each()を使えばエラーが発生しにくくなるだけでなく、複数のDOM要素の操作も格段にシンプルになります。 jQueryのeach()にはコールバック関数が必要です。コールバック関数とは、別の関数に渡され、後から実行される関数のことです。コールバック関数の中では、要素のインデックス番号と要素そのものにア

jQueryでボタンを無効化するには? Webアプリケーションでボタンを無効にしたい場面は多々あります。たとえば、売り切れの商品をショッピングカートに追加されるのを防ぎたいケースや、一度処理を実行した後にユーザーにボタンを再クリックさせたくないケースなどが挙げられます。 しかし、jQueryにはボタンを直接無効化するための専用メソッドは用意されていません。代わりに活用するのがprop()メソッドです。prop()はjQuery 1.6で追加された比較的新しいメソッドで、選択した要素のプロパティ値を取得・設定するために導入されました。 それ以前はattr()メソッドで属性値を取得するのが一般的で

JavaScriptのalert()メソッド（Window.alert()とも呼ばれます）は、ユーザーにアラートダイアログボックスを表示するためのメソッドです。省略可能なメッセージ引数を受け取り、OKボタン付きのメッセージをユーザーに表示します。alert()は、処理が成功したことをユーザーに知らせたり、エラーを表示したりする場面でよく使われます。また、alert()は開発ツールとしても便利です。例えば、フォーム送信を処理する関数の中にalert()を配置することができます。一般的には、event.preventDefault()が呼び出された後にalert()を配置します。おさらいすると、e

JavaScript開発者であれば、通常の関数を使ったことがあるでしょう。こうした「第一級関数（ファーストオーダー関数）」は、引数として関数を受け取らず、戻り値として関数を返すこともありません。 function hello(name) { return Hello, + + name } console.log(hello(Career Karma)); // Hello, Career Karma 本記事では、高階関数（HOF：Higher Order Function）について解説します。高階関数とは、関数を引数として受け取ったり、戻り値として関数を返したりすることで

開発業務では、自社のAPIやサードパーティのAPIからデータを取得する場面が頻繁にあります。本記事では、ブラウザに標準搭載されているFetch APIを使って、エンドポイントからGETリクエストでデータを取得する方法を詳しく解説します。 Fetch APIとは？ Fetch APIは、ChromeやFirefoxなどのWebブラウザからサーバーへHTTPリクエストを送信するためのインターフェースです。GETリクエストを送ると、サーバー上の指定したエンドポイントにアクセスし、そのエンドポイントが持つデータを含むレスポンスを受け取ることができます。 HTTPリクエストの種類 GETリクエス

他のプログラミング言語の経験があるエンジニアや開発者であれば、処理を一時停止させるためにネイティブのsleep()メソッドを使ったことがあるかもしれません。しかし、JavaScriptにはそのようなネイティブメソッドは存在しません。 この記事では、JavaScriptでスリープ機能をシミュレートする2つの方法——Promiseとasync/await関数について解説します。 非同期関数の基礎知識 Promiseやasync/awaitについて説明する前に、まずsetTimeout()メソッドに簡単に触れておきましょう。このメソッドを理解することで、なぜJavaScriptにPromise

JavaScriptのfilter()メソッドは、既存の配列から条件に合う要素だけを取り出し、新しい配列を作成するためのメソッドです。filter()メソッドは引数としてコールバック関数を受け取り、この関数が各要素を評価して、新しい配列に追加すべきかどうかを判定します。 JavaScriptを学び始めたばかりの方なら、filter()やreduce()といった配列メソッドに馴染みがないかもしれません。しかし、オブジェクトのリスト（いわゆる配列）を扱う際には、これらのメソッドが非常に役立ちます。 配列から特定の値だけを抽出したいと思ったことはありませんか？そんなときに活躍するのが、JavaSc

JavaScript の substring() メソッドは、2つのインデックス位置の間にある文字列の範囲を取得します。終了インデックスを省略することで、指定した位置から文字列の末尾までの文字を取り出すことも可能です。部分文字列(サブストリング)とは、大きな文字列の一部を指します。プログラマーは部分文字列を利用することで、文字列から必要なデータだけを抽出できます。例えば、ユーザーの生年月日を「日」「月」「年」の3つの変数に分割したり、ユーザーの名前から最初の2文字だけを取り出したりすることができます。本ガイドでは、JavaScript における substring の使い方を詳しく解説していき

JavaScriptでは、Intl.NumberFormat()コンストラクターを使うことで、数値を任意の通貨形式に整形（フォーマット）できます。このコンストラクターは、styleプロパティに「currency」を指定することで、通貨表示を実現します。 本記事では、Intl.NumberFormat()を使った通貨フォーマットの基本から、currencyDisplayやcurrencySignといった便利なオプションまで、具体的なコード例とともにわかりやすく解説します。 コンストラクターの構文とパラメーター new Intl.NumberFormat([locales[, options

JavaScriptを使ってWebページを再読み込み（リロード）したい場面は意外と多くあります。そんなときに活用できるのが、locationオブジェクトが持つreload()メソッドです。この記事では、実際のコード例をもとに、reload()の基本的な使い方と引数の挙動をわかりやすく解説します。 基本のコード例 以下は、ボタンをクリックするとページが再読み込みされ、そのたびにランダムな猫の画像が表示されるシンプルなサンプルです。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> &l