JavaScript

Webサイトをよりインタラクティブにするには、ページ上のテキストやHTMLを動的に変更する方法を理解することが不可欠です。そのために活躍するのが、innerTextとinnerHTMLという2つのプロパティです。 これらのプロパティを使えば、DOM要素のテキストやHTMLコードを簡単に書き換えられます。本記事では、JavaScriptにおけるinnerTextとinnerHTMLの基本的な使い方から、実際のコード例まで詳しく解説します。 JavaScriptのinnerHTMLとは？ innerHTMLは、Webページ上の要素のHTMLコンテンツを取得・設定するためのプロパティです。inner

JavaScriptのsplit()メソッドは、文字列を部分文字列（サブストリング）の配列に分割します。分割された部分文字列は新しい配列に格納され、split()はその新しい配列を返します。 プログラミングをしていると、大きな文字列の中から特定のテキストを取り出したい場面によく出会います。例えば、1つの文字列からユーザーの姓と名を別々に取得したい場合、どうすればよいのでしょうか？ そんなときに役立つのが、JavaScriptのsplit()メソッドです。split()は文字列を複数の部分文字列のリストに分割します。この記事では、実際のコード例を交えながら、split()メソッドの使い方を詳し

JavaScriptのObject.keys()メソッドは、オブジェクトに含まれるキーを取得し、それらを格納した配列を返します。返される配列内のキーの順序は、元のオブジェクトに出現した順序と同じになります。 JavaScript（JS）のオブジェクトは、「キー」と「値」という2つの主要な要素で構成されています。 オブジェクトを扱っていると、そのオブジェクトに関連付けられたキーの一覧を取得したい場面が出てきます。そんなときに役立つのが、JavaScriptのObject.keys()メソッドです。このメソッドを使えば、オブジェクト内のすべてのプロパティ名を一覧形式で簡単に生成できます。 この記

jQueryのaddClass()メソッドは、開発者がHTML要素をより柔軟に操作するための手段を提供します。メソッド名が示すとおり、選択した要素にクラス属性を追加できる機能です。なぜこの機能が必要なのでしょうか？例として、タイトル・段落・クリックすると何らかの動作をするボタンといった既存の要素を持つWebページを思い浮かべてください。このページには、各要素のクラス名をもとにスタイルを適用するスタイルシートも用意されています。ボタンをクリックすると、既存コンテンツのスタイル（見た目）を切り替えられるわけです。addClass()メソッドを使えば、ボタンがクリックされたタイミングで既存コンテンツ

jQueryとは？ jQueryは、開発者がわずか数行のコードでDOM操作、イベントハンドラの記述、アニメーション、AJAXリクエストなどを実現できるJavaScriptライブラリです。これは、jQuery API独自のセレクタとメソッドによって可能になっています。その中の一つがappend()メソッドです。 jQuery append()メソッドとは？ append()メソッドは、「コンテンツ」（HTML文字列、テキスト、配列、DOM要素、さらにjQueryオブジェクトなど）を1つまたは複数の引数として受け取り、セレクタに一致するすべての要素の末尾に追加（アペンド）できるメソッドです。 よ

Webアプリケーションを開発していると、ユーザーが入力したデータをもとに何かを作成する処理は避けて通れません。たとえば、サインアップフォームから送信された情報で新しいユーザーアカウントを作成したり、レシピ管理アプリで新しいレシピを登録したりするケースが挙げられます。フォームに入力されたデータから、データベースに保存された新しいレシピのインスタンスを作るまでには、HTTP POSTリクエストが必要です。 POSTリクエストは、フォームのデータをサーバーへ送信し、バックエンドやAPIで処理してデータベースに保存するための仕組みです。デフォルトでは、フォームを送信するとページのリダイレクトや再読み

JavaScriptの文字列補間（string interpolation）とは、文字列の中に式を埋め込む処理のことです。式の埋め込みには「テンプレートリテラル」を使用します。補間を使えば、変数や計算結果などの値を文字列の中に簡単に組み込むことができます。 JavaScriptの文字列の中に値を追加したいと思ったことはありませんか？そのようなときに役立つのが、テンプレートリテラルという構文です。テンプレートリテラルを使うと、複数行にまたがる文字列の扱いが容易になり、文字列内への値の埋め込みもシンプルに行えます。テンプレートリテラルこそが、JavaScriptにおける文字列補間の構文なのです。

挿入ソート（Insertion Sort）は、リスト内の各要素を一つずつ評価していくソートアルゴリズムです。ある要素がその前の要素より小さければ、2つの要素を入れ替えます。そうでなければ、要素はそのままの位置に留まり、次の要素との比較へ進みます。 コンピュータはリストの並べ替えが得意です。ループを使えば、リスト内のすべての要素を調べ、順序が整うまで入れ替えを繰り返すことができます。 プログラミングには、リストをソートするための標準的な手法がいくつか存在し、これらは「ソートアルゴリズム」と呼ばれます。ソートアルゴリズムは、リスト内の全要素を読み込み、あらかじめ決められた手順に従って並べ替えを

Webページのリダイレクトには、HTMLのmetaタグを使ったクライアントサイドの方法や、HTTPリダイレクトを使ったサーバーサイドの方法など、複数の手段があります。本記事では、その中でもJavaScriptを使ってページをリダイレクトする方法について詳しく解説します。 JavaScriptでリダイレクトを行う2つの方法 JavaScriptでページをリダイレクトするには、主に2つの方法があります。どちらもwindowオブジェクトに含まれるlocationオブジェクトを使用します。 1. location.hrefを使う方法 1つ目は、locationオブジェクト（windowオブジェ

JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。 これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済

Webフォームの作成を学ぶ中で、最もよく行う作業のひとつが「ドロップダウンから値を取得する」ことです。この記事では、JavaScriptを使ってドロップダウンの値を取得する方法を、コード例とともに丁寧に解説します。 ドロップダウンHTML要素のおさらい まずは、HTMLでドロップダウン要素を作成する方法を簡単におさらいしましょう。手順に迷ったら、Codepenのサンプルを参考にしてください。 ドロップダウンを作成するには、selectタグを使用し、その子要素としてoptionタグをネストします。select要素がドロップダウン本体を生成し、optionタグでその中に表示される選択肢を定義

JavaScriptには、値の等価性を比較する方法が4つあります。本記事では、等価性を判定するために使われる各演算子の特徴、型強制（type coercion）とは何か、そしてJavaScriptでtruthy・falsyの値を評価する際に注意すべき特異な挙動について、コード例と比較表を交えて詳しく解説します。 厳密等価比較（===） 厳密等価演算子は、イコール3つ（===）で表されます。この演算子の目的は、値だけでなく型も含めて比較することです。 const strictComparison = (a, b) => { console.log(typeof a); con

Reactコンポーネントを書き始めたばかりの頃、開発者はさまざまなエラーに遭遇しがちです。その中でも特によく見られるのが「Cannot read property setState of undefined（未定義のプロパティ setState を読み取ることができません）」や「this.setState is not a function（this.setState は関数ではありません）」といったエラーです。この記事では、これらのエラーが発生する理由と、具体的な解決方法をわかりやすく解説します。 なぜこのエラーが発生するのか？ これらのエラーの主な原因は、Reactコンポーネント内で使

Node.jsの環境が正しく動作しているかを確認するために、最初に書くことが多いのが「Hello World」プログラムです。作成方法は主に2つあります。ターミナル（コマンドライン）で直接実行する方法と、Visual Studio CodeやVimなどのコードエディタを使う方法です。始める前に、お使いのマシンにNode.jsがインストールされていることを確認してください。 方法1：ターミナルで実行する 1. ターミナルで node と入力して、Node.jsの対話モード（REPL）を起動します。 2. インタプリタに console.log(Hello World) と入力し、Ent

コーディングの問題を解く際、Dateオブジェクトを使って日付や時刻を比較し、条件に応じて特定のロジックを処理することができます。この記事では、Dateオブジェクトを使って2つの日付を比較し、どちらが新しい（または古い）日付かを判定する方法を解説します。 準備 JavaScriptには組み込みのDateオブジェクトが用意されており、タイムスタンプに基づいたロジックを組むためのさまざまなメソッドを利用できます。まずは、以下のコードで新しいDateをインスタンス化してみましょう。 const date = new Date(09-20-2020); //2020-09-20T07:00:00.000

はじめにJavaScriptでは、文字列から空白文字を取り除く方法がいくつかあります。この記事では、代表的な4つのアプローチを、実際に動作するコード例とともにわかりやすく紹介します。ループを使う方法配列メソッド（split / filter / join）を使う方法配列メソッド（split / join）を使う方法replaceメソッドと正規表現を使う方法1. ループを使う方法forループを使う場合は、ループの前に新しい文字列変数を宣言しておき、処理を進めながらそこへ文字を追加していきます。<!DOCTYPE html><html> <head> <

さまざまな関数を書いていると、データを扱うために「範囲（レンジ）」を作成したくなることがよくあります。範囲とは、開始値と終了値を持つ一連のデータを配列やオブジェクトとして表現したものです。多くのプログラミング言語には、範囲を作成するための組み込みメソッドが用意されています。たとえばRubyにはto_aというメソッドがあります。(a..e).to_a => [a, b, c, d, e]一方、JavaScriptにはこのための専用の組み込みメソッドは存在しません。しかし、範囲を作成する方法はいくつもあります。この記事では、代表的な3つの方法をご紹介します。1. _.range() – Lo

JavaScript の getElementById メソッドは、HTML の Document Object Model(DOM)から要素を選択するためのメソッドです。このメソッド名を誤って記述すると、プログラム実行時に document.getElementByID is not a function(関数ではありません)というエラーが発生します。 本記事では、このエラーの意味と発生理由を解説し、実際のコード例を通して修正方法をわかりやすく紹介します。 document.getElementByID is not a function とは何か document.getElemen

JavaScriptは、括弧によって関数呼び出しの開始位置と終了位置を認識します。関数が閉じられる前に構文の一部が欠けていると、「SyntaxError: missing ) after argument list」というエラーが発生します。 この記事では、このエラーの意味と発生理由を詳しく解説します。実際のコード例を通じて、問題の修正方法を一緒に学んでいきましょう。 SyntaxError: missing ) after argument list とは 「missing ) after argument list」というメッセージは、関数呼び出しの内部に構文エラーが存在することを示

JavaScriptにおけるTypeError（型エラー）は、実行できない操作を行った結果として発生するエラーオブジェクトです。多くの場合、操作に含まれる値が期待される型と異なることが原因となります。 JavaScriptの9つのデータ型・構造型 そもそも「型」とは何でしょうか。最新版のJavaScript仕様であるECMAScriptでは、9つのデータ型および構造型が定義されています。このうち、string、number、bigint、boolean、undefined、symbolの6つ（nullを含めれば7つ）がプリミティブ型です。なぜ操作中にTypeErrorが発生するのかを理解す