JavaScript

HTML要素にクラスを追加するのは、JavaScriptのclassListプロパティが持つadd()メソッドを使えばとても簡単です。まずは基本的な書式を確認し、そのあとに実際のコード例を見ていきましょう。 基本の書式 var element = document.querySelector(selector) element.classList.add(class) 上記の汎用的な例では、まず指定したセレクター名(要素セレクター、クラスセレクターなど)に一致するページ上の最初のHTML要素を取得し、その参照を変数に格納しています。 その後、対象の要素に対してclassListプロパティのad

HTML要素からクラスを削除するには、JavaScriptのclassListプロパティが提供するremove()メソッドを使います。すでに「要素にクラスを追加する方法」の記事を読んだことがあれば、削除もまったく同じ仕組みを逆方向に使うだけだとすぐに理解できるでしょう。 まずはclassList.remove()の基本的な構文を確認し、そのあとで実際のコード例を見ていきます。 基本の構文 var element = document.querySelector(selector) element.classList.remove(class) このコードでは、まずquerySelector()

このシンプルなコードスニペットを使えば、JavaScriptだけで既存のHTML要素にID属性を追加できます。CSSでのスタイリングや、JavaScriptによるイベント処理のフックとして活用できる便利なテクニックです。 コード let featuredTitle = document.querySelector(h1); featuredTitle.id = featured-title; コードの解説 動画内で行っている処理は以下の通りです。 まず、document.querySelector(h1)でWebページ上のh1要素を取得し、featuredTitleという変数に代入し

JavaScriptのオブジェクトは、そのままの状態ではサーバーに送信できません。しかし、あらゆる環境で利用できる文字列形式であるJSONであれば、送信することが可能です。 この記事で紹介するコードスニペットを使えば、JavaScriptオブジェクトを手軽にJSON文字列へ変換でき、サーバーへのデータ送信ができるようになります。 まずは、1人の人物を表すJavaScriptオブジェクトの例を見てみましょう。 let personObject = { name: Adam, age: 25, city: San Diego, profession: Web Developer,

JavaScriptでは、classListプロパティのcontains()メソッドを使うことで、要素に特定のクラスが存在するかどうかを簡単かつ高速に確認できます。 まずはclassList.contains()の基本構文を確認し、その後に実際のユースケースを見ていきましょう。 classList.contains()の基本構文 var element = document.querySelector(selector) element.classList.contains(class) 上記の汎用例では、柔軟性の高いquerySelector()メソッドを使って、セレクタ名から対象の要素を取

アクションバーやメニューなど、普段は見えない要素があり、ユーザーのマウスがその領域に入ったときだけ表示したい——そんなケースはよくあります。これを実現するには、JavaScriptのmouseenterイベントを使うのが簡単です。 実装手順 HTMLのマークアップ お好みのエディタに以下のHTMLコードを追加してください(オンラインで試すならCodePenがおすすめです)。 CSSスタイリング スタイルシートに以下のCSSを追加します。 .invisible-box { opacity: 0; transition: all 500ms; padding: 32px

JavaScriptで要素のクラスを切り替える（トグルする）方法は、開発者として身につけておきたい非常に実用的なスキルのひとつです。クラスのトグルは、メニューの表示・非表示、検索フィルターの追加・削除、SNSのボタン（いいね！など）など、さまざまな場面で活用されています。 トグル処理は、状況にもよりますが、わずか数行のコードで実装できます。今回は、クラスのトグルの基本を学びながら、JavaScript全般の学習の入り口としても役立つシンプルな方法を紹介します。 HTMLの構造 JavaScriptで動きを加える前に、まず操作対象となるHTML要素をいくつか準備しましょう。ラッパー（wr

JavaScriptで文字列の末尾の1文字を削除したい場合、最もシンプルなのはslice()メソッドを使う方法です。 slice()メソッドの基本構文 slice()メソッドには、以下の2つの引数を指定します。 開始位置： 0（文字列の先頭） 終了位置： -1（末尾から数えて1文字目の手前＝最後の文字を除外） 終了位置に負の値 -1 を指定すると、「最後の1文字を取り除いた部分文字列」を取得できます。 コード例：会社名のスペルミスを修正する たとえば、余分な文字が入ってしまった会社名を修正するケースを見てみましょう。 const companyName = Netflixx const f

JavaScriptで特定の単語が含まれているか確認するには？ JavaScriptで文字列に特定の単語（文字列値）が含まれているかどうかを調べたいときは、組み込みメソッドの includes() を使います。このメソッドは、対象の文字列の中に探している文字が存在するかどうかを判定し、true または false を返します。 この記事では、HTMLページ内の要素に「JavaScript」という単語が含まれているかを実際にチェックする手順を、コード例とともにわかりやすく解説します。 チェック対象となるHTMLの例 たとえば、次のようなHTMLページに「JavaScript」という単語が含まれ

JavaScriptのslice()メソッドとは JavaScriptの配列から最初のX個の要素にアクセスしたい場合、組み込みのslice()メソッドを使うのが最もシンプルで確実な方法です。 slice()は元の配列を変更せず、指定した範囲の要素だけを含む新しい配列を返す非破壊的なメソッドです。 サンプル:配列の最初の3つの要素を取得する 例として、配列の最初の3つの項目を操作するケースを考えてみましょう。ここでは、トレーニング種目のリストを配列として定義します。 const exerciseList = [ Deadlift, Squat, Push-up, Pull-up

バニラJavaScript（プレーンなJavaScript）だけでも、DOM要素を簡単に非表示・表示できます。この記事では、その基本的な方法を実例付きでわかりやすく解説します。 styleプロパティとは JavaScriptには、その名もずばり style というプロパティが用意されています。このプロパティを使えば、CSSと同じように要素へCSSプロパティを設定し、自由にスタイリングすることが可能です。早速試してみましょう。 DOM要素を非表示にする方法 JavaScriptでDOM要素を非表示にするには、display プロパティに none を設定します。 element.style.di

JavaScriptを使って配列に要素を追加する方法を、実例付きでわかりやすく解説します。 配列に要素を追加するには、状況に応じてJavaScriptの push() メソッドまたは concat() メソッドを使い分けるのが基本です。どちらのメソッドもJavaScriptのArrayオブジェクトが標準で提供しています。 この記事では、それぞれのメソッドの使い方と、実践での使い分けのポイントを順番に見ていきましょう。 配列に1つの要素を追加する まずは、既存の野菜リスト（配列）に新しい野菜を追加してみましょう。push() を使うと、配列の末尾に要素を追加できます。 const vegetab

JavaScriptオブジェクトに含まれるプロパティの数を数える方法を、2つの異なるアプローチとともにわかりやすく解説します。 JavaScriptオブジェクトのプロパティ数を取得するには、主に以下の2つの方法があります。 for ループを使う方法 Object.keys() メソッドを使う方法 それぞれの使い方と違いを見ていきましょう。 forループを使ってオブジェクトのプロパティ数を数える まず、次のような dog オブジェクトを用意します。 const dog = { name: Naya, age: 2, color: black, Breed: Rottweile

JavaScriptで要素の外側のクリックを検出するテクニックは、メニューやモーダルウィンドウを非表示にしたいときなど、さまざまな場面で活用できる非常に便利なスキルです。この記事を読み終える頃には、その実装方法をマスターできているはずです。 基本の「要素の外側クリック」検出 まず、HTMLでボックス要素を作成します。 続いて、CSSでボックスの見た目を整えつつ、要素を非表示にするためのユーティリティクラスを作成します。 .box { margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; b

JavaScriptで正規表現（RegEx）を使えば、文字列内の空白を簡単に置き換えられます。この記事では、テキストからパターンを見つけ出す強力なツール「正規表現」の基本と、空白を削除・置換する具体的な方法を解説します。 正規表現（RegEx）とは？ 正規表現（「RegEx」や「RegExp」と表記されることもあります）は、文字列（テキスト）を扱うための高性能なツールです。主な用途は以下の2つです。 テキストのバリデーション（入力チェック） テキスト検索 今回は、正規表現を使ってテキスト（文字列）内のすべての空白を「空文字（なし）」に置き換えるシンプルな例を通して学びます。ただし、このコー

JavaScriptで配列を文字列に変換する方法を、2つの異なるメソッドを使ってわかりやすく解説します。 JavaScriptには、配列の内容を文字列として返すためのメソッドがいくつか用意されています。それが toString() と join() です。一見すると両者はほぼ同じように見えますが、実際には違いがあります。それぞれ試しながら確認していきましょう。 まず、数値のリストを含む配列オブジェクトを用意します。 const numbersArray = [2, 4, 6, 8, 10] toString()メソッドで配列を文字列に変換する この配列を文字列に変換するために、numbersA

JavaScriptを使って、文字列から二重引用符（ダブルクォート）で囲まれたテキストを抽出する方法を解説します。 テキストブロックから引用文を取り出したい場面はよくあります。引用文は通常、二重引用符（" "）で囲まれています。そんなときは、JavaScriptのmatch()メソッドと正規表現を組み合わせれば、シンプルに解決できます。 まずは、二重引用符で囲まれた一文を含むテキストブロック（文字列）を用意し、textWithQuoteという変数に代入します。 const textWithQuote = One of my favorite quotes is Firs

JavaScriptを使えば、文字列の中から1つでも複数でも、数値を簡単に取り出すことができます。この記事では、match()メソッドと正規表現を使った具体的な方法を解説します。 たとえば、文章の中に含まれる数字だけを抜き出したい場面はよくありますよね。そんなときに便利なのが、JavaScriptのmatch()メソッドです。 文字列から1つの数値を抽出する まずは基本となる例を見てみましょう。次のコードでは、1つの数値(1995)を含む文字列を変数stringWithOneNumberに代入しています。 const stringWithOneNumber = JavaScript was i

正規表現(RegEx)とreplace()メソッドを組み合わせることで、JavaScriptで文字列内の特定の単語をすべて一括置換できます。この記事では、その基本的な使い方をわかりやすく解説します。 置換が必要になるシーン たとえば、自社の最新製品について書かれた長いテキストがあり、その中である単語が何度も誤って記述されていたとします。次のテキストは本来「Epic Games」とすべきところが、誤って「Glorious Games」と入力されてしまった例です。 const textBlock = We at Glorious Games, are very proud to present

この記事では、正規表現（RegEx）とreplace()メソッドを組み合わせて、JavaScriptで文字列内の任意の文字を置き換える方法を解説します。 問題となるシーン たとえば、テキストの中でダッシュ（—）を使うつもりだったのに、うっかりハイフン（-）を入力してしまったとしましょう。 const textBlock = When you’re typing fast it’s normal to make a few spelling mistakes here and there - it just means you’re human. 素早くタイピングしていると、こうした記号の