JavaScript

JavaScriptにおける「式（expression）」とは何か。そして、言葉の使い方ひとつでシンプルな概念が難しく感じられてしまう理由について解説します。 JavaScriptにおいて、式（expression）とは、値という答えが返ってくる「質問」のようなものです。しかも、その答えは必ず単一の値になります。 次のコードは式の一例です。 console.log(5 + 5) // 結果: 10 上記のコードでは何が起きているのでしょうか。 あなたはJavaScriptにこう尋ねています。「5 + 5はいくつ？」 するとJavaScriptはこう答えます。「5 + 5は10と評価されます

本記事では、JavaScriptにおけるイベント委任（イベントデリゲーション）の概要、その利点、そして具体的な実装方法について詳しく解説します。 JavaScriptのイベント委任とは？いつ使うべき？ 簡単に言うと、イベント委任とは、親要素にたった1つのイベントリスナーを設定するだけで、子要素とやり取りできるJavaScriptの手法です。イベント委任を使えば、すべての子要素に個別にイベントハンドラーを追加する必要がなくなりながらも、子要素を検出して自由に操作できます。 この手法がなぜ強力なのかは、この後すぐにわかります。 例えば、リストの中に複数の項目があるとします。ユーザーがいずれかのリス

JavaScriptのsplice()メソッドで配列から特定の要素を削除する方法 コンピュータは「0」から数え始めます。つまり、インデックス0は1番目、1は2番目、2は3番目を表します。このため、list[2]と書くと、配列の3番目の要素が選択されるのです。 例として使用する配列のコードは次のとおりです。 var list = [item 1, item 2, item 3, item 4] splice()メソッドに必要な2つの引数 splice()メソッドを使うには、次の2つの情報が必要です。 開始位置：どこから削除を始めるかを指定する数値 削除数：その位置から何個の要素を削除するかを指

配列のインデックスは「0」から始まる コンピュータの世界では、物事の数え方が「0」から始まります。つまり、インデックス「0」が1つ目の要素、「1」が2つ目の要素に対応します。この「ゼロベース（0始まり）」という考え方は、プログラミング初心者がつまずきやすいポイントの一つです。 そのため、list[2]と記述すると、配列の3つ目の要素であるitem 3が選択されることになります。 例で使用している配列のコード var list = [item 1, item 2, item 3, item 4] この配列の場合、各要素とインデックスの対応は以下のようになります。 list[0] → i

JavaScriptで配列を操作する際に頻繁に使われるのが、以下の4つの配列メソッドです。それぞれ、配列の「先頭」または「末尾」に対して要素を追加・削除する役割を持っています。 unshift()：配列の先頭に要素を追加します。 shift()：配列の先頭にある要素を削除します。 push()：配列の末尾に要素を追加します。 pop()：配列の末尾にある要素を削除します。 Chrome DevToolsコンソールで試してみよう この記事の例では、Chrome DevToolsのコンソールを使用します。コンソールを開くには、次のショートカットキーが便利です。 Mac：Cmd + Opti

JavaScriptを使って、画面幅が特定の値より大きいか小さいかを判定する方法を解説します。リサイズイベントと matchMedia() を組み合わせれば、ブラウザの幅に応じた処理を簡単に実装できます。 Web開発では、「条件に応じてコードを実行したい」という場面がよくあります。たとえば、大画面では表示したいけれど、スマートフォンのような小さな画面ではスペースの関係上、表示したくないコンテンツがあるといったケースです。 なお、デバイスの種類そのものを判定する処理は非常に複雑で、開発者の間でも意見が分かれる分野です。確実性の高い情報がまだ十分に集まっていないため、この記事ではよりシンプルで実用

Vanilla JavaScriptを使って、Webサイトの特定の部分に含まれるすべての単語をカウントする方法をご紹介します。 記事やページ内の総単語数を把握したい場面は意外と多いものです。Webサイトにワードカウンター機能を実装したいとお考えなら、以下のJavaScriptコードスニペットを使えば、ライブラリ不要で素早く実現できます。 var wordsInPost = wordCount(document.querySelectorAll(.posts-content)) function wordCount(words) { var count = 0 for (var i =

ライブラリ不要の素のJavaScript(バニラJS)だけでも、ユーザーがページの下部へスクロールしたタイミングを簡単に検知できます。この記事では、基本的な実装方法から、ブラウザごとの挙動の違いへの対処法まで解説します。 「ユーザーがページ(または特定のセクション)の最下部までスクロールしたら、イベントを発火させたい」という場面はよくあります。無限スクロールで次のコンテンツを読み込む場合や、フッターに到達したことを通知したい場合などがその例です。 最下部へのスクロール検知の基本(モダンブラウザおよびIE9以降で動作) = document.body.offsetHeight) { a

JavaScriptを学んでいると、「プリミティブ値は不変（イミュータブル）であり、非プリミティブ値は可変（ミュータブル）である」という話をよく耳にします。この2つの値の型（データ型とも呼ばれます）の違いを理解しておくことは、今後の開発でつまずきを避けるためにとても重要です。 まず、プリミティブ値には次のようなものがあります。 数値（number） 文字列（string） 真偽値（boolean） 一方、非プリミティブ値には以下が含まれます。 オブジェクト（object） 関数（function） 可変（ミュータブル）とは「変更できる」という意味です。 不変（イミュータブル）とは「変更

JavaScriptを使ってWebページを再読み込み（リロード）したい場合、window.location.reload()というメソッドを使用します。この記事では、コンソールから直接実行するシンプルな方法と、ボタンのクリックイベントに組み込む実践的な方法の2つを紹介します。 1行のJavaScriptでページを再読み込みする 最も手軽なのは、ブラウザの開発者ツール（Console）から直接コードを実行する方法です。以下のコードをブラウザのコンソールに貼り付けて、Enterキーを押してみてください。 window.location.reload() これだけで現在開いているページが再読み込みさ

JavaScriptを使って、DOMから要素を素早く削除または非表示にする2つの方法をわかりやすく解説します。 まず判断しよう:「後で再表示が必要か?」 JavaScriptでDOMから要素を取り除く方法は、主に2つあります。どちらを選ぶかは、次の質問への答えによって決まります。「この要素を、後でもう一度表示する必要があるか?」 答えが「はい」の場合は、要素を物理的に削除せず、styleプロパティを使って非表示にするのが適切です。 方法1: styleプロパティで要素を非表示にする const hideElement = document.querySelector(#element-to-h

この記事では、JavaScriptを使って既存の要素の中に別の要素（マークアップ）を追加する方法を解説します。 JavaScriptには innerHTML という便利なプロパティがあり、これを使えば既存の要素内にHTMLマークアップを簡単に追加できます。 例として、見出し（h1）を持つ記事のヘッダーがあり、その直下にサブタイトルやキャッチコピーといった重要なメッセージを追加したいケースを考えてみましょう。 HTMLの準備 まずはベースとなるHTMLです。article要素の中にheader要素とh1見出しが配置されています。 <article> <header>

React Nativeアプリを起動しようとした際に、以下のようなエラーメッセージが表示されて困ったことはありませんか？Something went wrong installing the sharp moduleこのエラーの原因はいくつか考えられ、解決方法も複数存在します。エラーが発生する主な原因筆者の経験上、このエラーは最新版のNode.jsをインストールした直後に発生することが多いようです。sharpは画像処理を行うネイティブモジュールであり、Node.jsのバージョンに依存してビルドされます。そのため、Node.jsをアップデートすると、既存のnode_modules内にあるshar

window.location.hrefでURLを取得する基本 ブラウザで現在表示しているWebページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティには、プロトコル（https://）から始まる完全なURLが文字列として格納されています。 以下のコードをブラウザの開発者ツール（コンソール）に入力してEnterキーを押すと、現在のページのURLを簡単に確認できます。 var currentURL = window.location.href; console.log(currentURL); locationオブジェクトの主なプロパティ

これまでの記事では、JavaScriptのpush()メソッドを使って配列に要素を追加・削除する方法を学びました。 しかし、既存の配列に「別の配列そのもの」を追加したい場合はどうすればよいのでしょうか。つまり、2つの異なる配列を1つに結合（マージ）したい場合です。 JavaScriptで2つ以上の配列をマージするには、Array.prototype.push.apply()を使用します。 例として、果物かごが2つあるとしましょう。すべての果物を1つのかごにまとめたい――そんなとき、この方法が役立ちます。 ES5での配列のマージ方法 var fruitBasketOne = [apple, ba

Webサイトのフッターに表示される現在の年を自動的に更新することは、実装としては非常に簡単です。しかし残念ながら、多くのサイト運営者は現在の年を表示することの重要性を理解していません。著作権表示としての役割だけでなく、訪問者に対して「このサイトは最新の状態が保たれている」という印象を与えるためにも、年表記は重要な要素です。 古いWebサイトの多く、そして一部のモダンなサイトでも、フッターのHTMLは次のように記述されています。 <span>© 2018 Company Name</span> © 記号による著作権表示 現在の年 会社名 このような静的なタイムスタンプ

この記事では、任意のWebサイトからすべてのリンクを取得し、コンソールに出力する方法を解説します。 コード var links = document.querySelectorAll(a); for (var i = 0; i < links.length; i++) { var link = links[i].getAttribute(href); console.log(link); } 使い方 このコードを使うには、対象のWebページを開いた状態でブラウザの開発者ツール(デベロッパーツール)を起動し、「Console(コンソール)」タブにコードを貼り付けて実行する

要素のクリック数をカウントするのは、JavaScriptで実装できる最もシンプルな処理のひとつです。必要なのは、クリック数を保存するための変数を宣言し、対象となる要素にaddEventListenerメソッドを設定することだけです。 ここでは、ホームボタンのようなボタン要素のクリック数を追跡したい場合を例に、具体的な手順を見ていきましょう。 HTMLマークアップ まず、HTMLのbutton要素を作成し、button-homeというクラス名を付けます。 <button class=button-home>Home</button> JavaScriptコード 次に、以下

このチュートリアルでは、JavaScriptのオブジェクト配列を、Webページ上でHTMLのリスト要素として表示する方法を解説します。 例として、トレーニング種目のデータを格納したJavaScriptオブジェクトの配列を用意し、それをブラウザ上に箇条書きリストとして出力していきます。 元データとなるJavaScriptオブジェクト let exercises = [ { name: デッドリフト, }, { name: プッシュアップ, }, { name: プルアップ, }, { name: スクワット, }, ]; 上記は4つ

要素のクリック数をカウントするのは、JavaScriptで実装できる最もシンプルな処理のひとつです。必要なのは、クリック数を保存するための変数を宣言することと、対象の要素に対してaddEventListenerメソッドを使用することだけです。 ここでは、ボタン要素(例えばホームボタン)がクリックされた回数を追跡したいケースを例に、具体的な手順を解説します。 HTMLマークアップ まず、button要素を作成し、button-homeというクラスを付与します。 <button class=button-home>Home</button> JavaScript 次に、以下