JavaScript

JavaScriptのコンソールに Uncaught SyntaxError: Illegal return statement というエラーが表示された場合、その原因はほとんどの場合、return文（return）を関数の外側に記述してしまっていることにあります。 エラーが発生する原因 JavaScriptでは、return 文は必ず関数の中で使用しなければなりません。関数の外部に記述すると、構文エラーとして扱われ、スクリプトの実行が中断されます。 これはエラーになる例： // 関数の外側にあるため、エラーが発生する return David; これは正しく動作する例： // 関数の中にある

この記事では、JavaScriptにおけるスコープの仕組みと、グローバルスコープ・ローカルスコープ・レキシカルスコープという3種類の違いについて、実例コード付きでわかりやすく解説します。 スコープ（Scope）とは、関数や変数にアクセスできる範囲（コンテキスト）のことです。JavaScriptのスコープには、主に以下の3種類があります。 グローバル変数： コードブロックの外側で宣言された変数 ローカル変数： コードブロックの内側で宣言された変数 覚えておきたいポイント： 関数は、自分の外側で定義された変数や関数にはアクセスできます。しかし、他の関数の内側で定義された変数にはアクセスできませ

JavaScriptの文字列メソッド repeat() は、括弧内で指定した回数だけ文字列を繰り返して新しい文字列を返すメソッドです。区切り文字の生成やテキストの装飾など、さまざまな場面で活用できます。 let hipHop = hiphop .repeat(5); console.log(hipHop); // hiphop hiphop hiphop hiphop hiphop 基本的な構文 repeat() メソッドは次のように記述します。 文字列.repeat(繰り返し回数); 引数には0以上の整数を指定します。なお、元の文字列そのものは変更されず、繰り返し処理された結果が新しい文

JavaScriptのconcat()メソッドは、2つ以上の文字列を1つに連結（結合）するためのメソッドです。 例えば、名と姓をそれぞれ別の変数に保存していて、それらを1つの文字列として結合したい場合を考えてみましょう。concat()メソッドを使うと、次のように簡単に実現できます。 const firstName = David const lastName = Tromholt var fullName = firstName.concat(lastName) console.log(fullName) // DavidTromholt とてもシンプルですね。ただし、このままでは「Da

JavaScriptで文字列を大文字に変換する方法 JavaScriptを使えば、あらゆるテキストを簡単に大文字へ変換できます。この記事では、文字列を大文字に変換するための基本メソッドと、使用時の注意点についてわかりやすく解説します。 toUpperCase()メソッドの基本的な使い方 文字列を大文字に変換するには、JavaScriptのtoUpperCase()メソッドを使用します。このメソッドを呼び出すだけで、文字列内のすべての英字が大文字に変換されます。 let someText = Here is some text. Let us convert it all to upperca

JavaScriptを使えば、あらゆるテキストを簡単に小文字へ変換できます。この記事では、toLowerCase()メソッドの基本的な使い方と、注意すべきポイントをわかりやすく解説します。 toLowerCase()メソッドの基本 JavaScriptで文字列をすべて小文字に変換したい場合は、toLowerCase()メソッドを使用します。使い方は非常にシンプルで、変換したい文字列に対してこのメソッドを呼び出すだけです。 let someText = Here is some text. Let us convert it all to lowercase someText.toLowerC

JavaScriptには2種類の等価比較があるJavaScriptで値の等しさを比較する際、実は2つの方法が用意されていることに気づいたことはありませんか？通常の等価演算子（あいまい等価）：==（イコール2つ）厳密等価演算子：===（イコール3つ）両者の違いは以下のとおりです。==（通常の等価）は値のみを比較し、データ型は無視します。===（厳密等価）は値とデータ型の両方を比較します。具体例で見る違い// true を返す 5 == 5 // false を返す 5 === 5上記の例では、左辺は数値型、右辺は文字列型（引用符 で囲まれているため）です。どちらも「5」という同じ値を持ってい

JavaScriptにおけるreturnステートメントは、関数の実行をその時点で停止し、関数の内部から値を呼び出し元へ返すために使われる構文です。 returnがないとどうなる？ まず、名前を受け取る関数 addName を用意してみましょう。 let addName = function(name) {} 続いて、この addName() 関数に名前を渡します。 let myNameIs = addName(David) この時点で、addName 関数の中には文字列 David を持つ変数 name が存在しています。しかし、この変数とその値は関数の内部に閉じ込められているため、外部からは

Webサイトの中には、ページを再読み込みせずにフォームを送信したり、送信後に別の完了ページへリダイレクトしたりしない実装が多くあります。このような場合、ユーザーが次の入力を始めやすいように、送信後にフォームの入力欄を空にしておきたいことがあります。本記事では、ライブラリに頼らずバニラJavaScriptだけでこれを実現する方法を解説します。 1. HTML：ログインフォームのサンプル まずは、ユーザー名とパスワードを入力し、「ログイン」ボタン（送信ボタン）を押して認証を行う、典型的なHTMLログインフォームです。 <form> <label for=username>

JavaScriptには、オブジェクトに新しい項目（プロパティと値）を追加する方法が2つあります。 ドット記法：object.thingToAdd ブラケット記法：object[thingToAdd] それぞれの書き方と違いを、具体的なコード例とともに見ていきましょう。 ドット記法とは まずはドット記法から確認します。次のような犬のオブジェクトを用意しました。 let dog = { name: Naya, age: 2, color: black, } // dogオブジェクトに項目を追加 dog.breed = Rottweiler mix // コンソールに出力して確

JavaScriptでは、組み込みの setTimeout() メソッドを使うことで、任意の関数の実行を簡単に遅延させることができます。 たとえば、「3秒後にアラートダイアログを表示したい」というケースを考えてみましょう。 まず、3秒をミリ秒（ms）に変換します。3秒＝3000msです。その値をもとに、次のように関数を設定します。 setTimeout(function() { alert(3秒経ちました！) }, 3000) 上記のコードで使っているのは無名関数（匿名関数）です。しかし実際の開発では、この書き方はあまり実用的とは言えません。再利用ができず、コードの意図も伝わりにくいためで

JavaScriptで文字列内のすべての空白を削除する方法 JavaScriptで文字列からすべての空白（スペース）を取り除きたい場合、最もシンプルで確実な方法は replace() メソッドと正規表現（RegEx） を組み合わせることです。 replace() と正規表現を使った基本の書き方 正規表現 /\s/g を使うことで、半角スペースだけでなく、タブや改行などすべての種類の空白文字を一度に削除できます。\s は「任意の空白文字」にマッチする特殊文字で、末尾の g フラグは「文字列全体を対象に置換する」ことを意味します。 const sentence = This sentence ha

ES6（ECMAScript 2015）のJavaScriptを使えば、DOMから要素を削除するのはとても簡単です。特別なライブラリや複雑な処理は不要で、削除したい要素に対して remove() メソッドを呼び出すだけです。 remove() メソッドの基本的な使い方 まず querySelector() で対象の要素を取得し、その要素に remove() を実行します。 let element = document.querySelector(element-to-remove) element.remove() この2行のコードだけで、指定した要素がDOMから完全に取り除かれます。 具体例

JavaScriptのnew URL()コンストラクタを使えば、URL文字列からすべてのデータ値を簡単に取り出せます。この記事では、その基本的な使い方と実践的な活用例をわかりやすく解説します。 URLのデータ値が必要になる場面 たとえば、Webサイトにサイト内検索機能を実装するケースを考えてみましょう。検索機能を正しく動作させるには、URL文字列に含まれるすべてのデータ値(パス名、ホスト名、クエリパラメータなど)にアクセスできる必要があります。 new URL()コンストラクタとは 幸い、JavaScriptにはnew URL()という便利なコンストラクタが標準で用意されています。これを使うと

ウェブサイトのナビゲーションメニューで、現在表示中のページに対応する項目を自動的に強調表示する方法を、バニラJavaScriptだけで実装する手順を解説します。 ページを移動するたびに、現在のページに該当するメニュー項目をハイライト表示するのは、多くのウェブサイトで採用されている定番の機能です。jQueryなどのライブラリやフレームワークに頼らなくても、素のJavaScript(バニラJavaScript)だけで簡単に実現できます。 ここからは、HTML・CSS・JavaScriptの3つのステップに分けて、具体的な実装方法を見ていきましょう。 ステップ1: シンプルなメニューを用意する まず

JavaScriptの比較演算子の基本をわかりやすく解説します。 JavaScriptにおいて、比較演算子は、値(数値や文字列)や変数同士の等価性や差異を調べるために使われます。比較演算子はオペランド(被演算子)を比較し、その結果が真(true)か偽(false)かに応じてブール値(boolean)を返します。 オペランド: 難しく考える必要はありません。オペランドとは、比較演算子の左右にある値のことです。例えば 2 < 4 の場合、2 と 4 がオペランドで、< が「より小さい」ことを判定する演算子です。 ブール値(Boolean) とは、true(真) か false(偽) の

バニラJavaScriptだけを使って、ユーザーがモーダルウィンドウ（または任意のUI要素）の外側をクリックしたときに自動的に閉じる方法を解説します。 モーダルポップアップは、多くの場合、ユーザーにとって煩わしい存在です。特に画面全体を占めてしまう場合はなおさらで、サイトにアクセスして数秒で表示されたりすれば、ストレスを感じずにはいられません。これは愚かな設計であり、良くないUXデザインの典型例といえます。 さらにひどいケースもあります。閉じるボタン（×）を極端に小さく、分かりにくい位置に配置しているサイトです。まるでパズルを解くように閉じるボタンを探すうちにイライラが募り、そもそも何の目的で

JavaScriptで文字列の最後の1文字を削除する最もシンプルな方法は、slice()メソッドを使うことです。slice()メソッドには、次の2つの引数を指定します。抽出の開始位置(0)抽出の終了位置(-1:末尾の1文字を除外)第2引数にマイナスの値を指定すると、文字列の末尾から数えた位置として扱われます。つまりslice(0, -1)と書くことで、「先頭から末尾の1文字を除いた部分文字列」を取り出すことができます。以下は、スペルミスのある会社名を修正する具体例です。const companyName = Netflixx const fixCompanyName = companyName

はじめに：JavaScriptで混乱しやすい「関数」と「メソッド」 JavaScriptの用語は、定義が似通っているものが多く、初心者が混乱しやすいポイントの一つです。「メソッド」と「関数」の違いもその代表例と言えるでしょう。 まず、次の2つの事実を押さえておきましょう。 メソッドは関数の一種である。 関数とは、呼び出すことでコードを実行できる仕組みのこと。 つまり、関数とメソッドの違いは「どのように使われるか」という点にあります。 通常の関数（スタンドアロン関数）とは 通常の関数は独立して存在しており、関数呼び出しによってトリガーされて実行されます。 通常の関数の例： function

JavaScriptでは、nullとundefinedはどちらもプリミティブ値（基本型）です。よく似た存在に見えますが、それぞれ意味や使われ方が異なります。 そもそもJavaScriptの値には、プリミティブ値と非プリミティブ値（オブジェクト型）の2種類があります。この違いを理解しておくことは、言語全体を学ぶうえでとても重要なので、あわせて押さえておきましょう。 undefinedとは？ undefinedは、「宣言はされたものの、まだ値が代入されていない」変数が持つ値です。 例えば、次のように変数を宣言しただけでコンソールに出力してみます。 let dogBreed // und