JavaScript

jQueryの animate() メソッドを使ってアニメーションにイージング効果を加えることで、Webページにより自然で洗練された動きを実現できます。重要なのは、アニメーションの速度を適切に制御することです。速度を急激に上げすぎず、どこでアニメーションを止めるかを意識しながら実装しましょう。サンプル概要：回答追加ボタンの実装ここでは例として、クリックすると回答入力用のテキストエリアへスムーズに切り替わるボタンを作成します。まずはHTMLでボタンを定義します。<button class=btn id=answer> Add answer </button>fad

jQueryでページ全体のアニメーションをまとめて無効化したい場合は、jQuery.fx.off プロパティを使用します。この値を true に設定すると、以降のすべてのアニメーションが即時に完了状態となり、要素はアニメーションなしで最終的な状態へ直接切り替わります。低スペックなモバイル端末でのパフォーマンス向上や、動きを最小限にしたいユーザーへの配慮など、アニメーションを一括してオフにしたい場面で非常に便利です。アニメーションを有効にするアニメーションを有効に戻すには、jQuery.fx.off を false に設定します。$(#enable).click(function(){

GatsbyJSはReactベースのフレームワークですが、プロジェクトにプレーンな（バニラ）JavaScriptを追加したい場面は意外と多くあります。たとえば、旧サイトからGatsbyへ移行したばかりで、React構文への書き換えがまだ済んでいないカスタムスクリプトが大量にある――そんな経験はありませんか？ 幸い、Gatsbyに素のJavaScriptを追加するのはそれほど難しくありません。ポイントは、デフォルトではプロジェクト内に表示されない html.js というファイルを公開（利用可能な状態に）することです。 html.jsファイルを公開する まず、ターミナルを開き、Gatsbyプロジェ

バニラJavaScript（素のJavaScript）で要素に複数のスタイルを適用するのは、少し面倒に感じることがあります。最もよく見かける方法は、対象の要素を取得してから、スタイルを1つずつ追加していくやり方です。 // 対象要素を取得（ここではclass属性を使用） const buttonAddToCart = document.querySelector(.button-add-to-cart) // スタイルプロパティを1つずつ追加 buttonAddToCart.style.backgroundColor = #82b97e buttonAddToCart.style.color

プレーンなJavaScript(バニラJS)だけを使って、配列の最後の要素を取得する3つの方法を学びましょう。まずは操作対象となる配列を用意します。ここでは、エクササイズのリストを使用します。 エクササイズ配列の作成 const exercises = [pull-up, push-up, squat, deadlift] リストの最初の要素を取得するには exercises[0] を、2番目の要素を取得するには exercises[1] を使います。しかし、リスト内のエクササイズの総数がわからない場合はどうすればよいのでしょうか? ご安心ください。いくつかの方法があります。 1. array

JavaScriptでは、一定の時間が経過した後に特定の関数を呼び出したり実行したりしたい場面がよくあります。そんなときに役立つのが、タイマー系イベントメソッドの setTimeout() と setInterval() の2つです。 この2つのメソッドには、以下のような違いがあります。 setTimeout(): 指定したミリ秒待機した後に、関数を一度だけ実行する setInterval(): 指定した時間間隔ごとに、関数を繰り返し継続的に実行する それぞれの簡単な使用例を見ていきましょう。 JavaScript setTimeout() の使用例 まずは setTimeout() から

JavaScriptで配列を空にするのは、実はとても簡単です。この記事では、基本的な方法から注意点まで、初心者にもわかりやすく解説します。 サンプルとなる配列を用意する まずは例として、トレーニング種目のリストが入った配列を作成してみましょう。 let exerciseList = [squat, deadlift, push-up, pull-up]; 配列の中身を確認する console.log() を使うと、配列の中身をコンソールに出力して確認できます。 console.log(exerciseList); // 出力: [squat, deadlift, push-up, pu

JavaScriptで昨日の日付を取得したい場合、手順は非常にシンプルです。まず現在の日付を取得し、そこから1日分だけ減算すればOKです。 基本的なコード例 以下のコードでは、Dateオブジェクトを使って今日の日付を取得し、そのコピーを作成したうえでsetDate()メソッドにより1日前の日付に変更しています。 const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) today.toDateString() yesterday.toDateSt

入力フィールドが空かどうかを判定して、ボタンを有効または無効にする方法を解説します。 Webでフォームに入力する際、「必須項目がすべて（または一部）入力されるまでフォームを送信できない」という仕組みを目にしたことはありませんか？この原則は、チェックボックスやラジオボタンにも同様に適用されます。 ここでは、入力フィールドが空かどうかに応じて、ボタンの状態（有効／無効）を制御する方法を紹介します。 HTML まず、エディタに以下のHTMLを追加してください。 <input class=input type=text placeholder=fill me /> <button c

JavaScriptには、条件分岐をわずか1行で記述できる便利な演算子があります。それが三項演算子（条件演算子）です。if/else文と同じ処理をより簡潔に書けるため、コード量を大幅に削減できます。三項演算子とは？三項演算子は、「?」と「:」を使って条件分岐を表現する演算子です。「3つの項（オペランド）」を持つことから「三項」と呼ばれています。基本構文条件式 ? 値1 : 値2;この構文では、条件式がtrueの場合は値1が返され、falseの場合は値2が返されます。if/else文との比較まず、従来のif/else文で書いた例を見てみましょう。let age = 20;let message;

HTMLフォームのページ読み込み時に、最初の入力フィールドへ自動的にフォーカスを当てる方法を解説します。 優れたUXデザインの基本原則のひとつは、ユーザーが目的のものに素早くたどり着けるよう、AからBまでの手順をできる限り減らすことです。 フォーム入力が好きな人はいません。特に長いフォームは敬遠されがちです。そこで、ページ読み込み時にフォームの最初の入力フィールドへ自動フォーカスを設定し、ユーザーの貴重な時間を少しでも節約しましょう。 HTMLフォーム 以下のフォームコードをHTMLドキュメントに追加してください。 <form> First name:<br> &l

Gatsby.jsとNext.jsは、現在のWeb開発において最も注目されている2大トピックです。掲示板やYouTubeのコメント欄では「どちらを選べばいいのか?」という質問を頻繁に見かけます。筆者はここ1年間、Next.jsとGatsby.jsの世界にどっぷり浸かってきた経験があり、この議論に加わる資格は十分にあると自負しています。 プロジェクトにNext.jsを使うかGatsbyを使うかという問題になると、「適材適所」という言葉が思い浮かびます。しかし安心してください。そんな曖昧な答えで終わらせるつもりはありません。 要点まとめ(TL;DR) GatsbyもNext.jsもどちらもRea

JavaScriptの「オブジェクトリテラル」について、基本の概念から書き方まで、初心者向けにわかりやすく解説します。 プログラミングには、名前の印象のせいで実際よりも難しく感じられてしまう概念がいくつかあります。オブジェクトリテラルもその一つですが、その実態は「買い物リスト」程度のシンプルさです。 オブジェクトリテラルとは何か？ オブジェクト（Object）とは、JavaScriptにおける特殊な種類の値で、他の値と関連を持つことができるものです。 オブジェクトリテラル（Object Literal）とは、プログラムやアプリの中に「文字どおり（literally）」直接記述したオブジェクト値

この記事では、JavaScriptにおける「ドット表記（Dot Notation）」の基本について、初心者の方にもわかりやすく解説します。 「表記（ノーテーション）」という言葉は少し難しく聞こえるかもしれませんが、実際の仕組みはとてもシンプルです。ドット表記とは、オブジェクトのプロパティにアクセスして値を読み取ったり、新しい値を代入したりするために、ドット（.）を使う方法のことです。 ドット表記で値を読み取る まず、次のような dog オブジェクトがあるとしましょう。 const dog = { name: Naya, age: 2 } このオブジェクトから値を1つ読み取りたい

JavaScriptにおける引数（argument）とパラメータ（parameter）の違いをわかりやすく解説します。さらに、どちらの用語を使うかが実際のコーディングにおいて重要なのかどうかについても見ていきましょう。 JavaScriptの引数・パラメータとは？ JavaScriptで関数を実行するとき、関数を呼び出す際に何らかの情報を渡すことができます。 このとき渡される情報は「引数（argument）」または「パラメータ（parameter）」と呼ばれます。多くの開発者は、この2つの用語をほぼ同じ意味で区別なく使っているのが実情です。 基本的な例 function greetings(n

JavaScriptにおける関数宣言（function declaration）と関数式（function expression）の違いについて、具体例を交えながらわかりやすく解説します。 まず、関数式の例から見てみましょう。 // 関数式 let executeMe = function () { console.log(Function Expression) } 次に、関数宣言の例です。 // 関数宣言 function executeMe() { console.log(Function Declaration) } 一見すると、関数式と関数宣言はほぼ同じ働きをし

JavaScriptにおけるリテラル（literal）とは、変数や関数を経由せずに、スクリプトの中に値を「文字どおり直接記述する」ことを指します。ソースコード上にそのまま書かれた固定値がリテラルです。 リテラルの基本的な考え方 たとえば、const x = 4; のように書いた場合、右辺の 4 は変数を介さずに直接記述された値、つまりリテラルです。このように、値をその場で明示的に表現できるのがリテラルの特徴です。 代表的なリテラルの種類 JavaScriptにはさまざまな種類のリテラルがあります。よく使われるものを以下に紹介します。 数値リテラル：4 や 3.14 のような数値を直接書いたも

JavaScriptにおける「変数」とは何か、そして何をするためのものなのでしょうか？ JavaScriptをはじめとするプログラミング言語において、変数とは値への参照を格納しておくための「入れ物（コンテナ）」です。必要なときにその値を取り出し、さまざまな処理を行うことができます。格納できる値は文字列（テキスト）や数値、関数、さらには他の変数まで、実に多彩です。 いくつか例を見てみましょう。 文字列の値: let name = James 数値の値: let amount = 100 関数の値: let myFunction = function() {} 変数の値: let fullNam

この記事では、JavaScriptにおいて何が「値（value）」として扱われるのかを、初心者にもわかりやすく解説します。 JavaScriptにおける「値」という概念 JavaScriptにおける値（value）とは、非常に抽象的で幅広い概念です。なぜなら、多くのものが値として扱われ、さらに値にはさまざまな型（type）が存在するからです。 例えば、以下のようなものがすべて値に該当します。 数値（number） 文字列（string） 関数（function） オブジェクト（object） 真偽値（boolean） null undefined typeofを使って値の型を確認しよう

JavaScriptには、値を比較するための2つの等価演算子があります。本記事では、厳密等価演算子 === と等価演算子 == の違い、そしてその違いを理解することの重要性を詳しく解説します。 JavaScriptで値を比較する際に使える等価演算子は2種類あります。1つは緩い比較を行う等価演算子 ==（ダブルイコール）、もう1つは厳密な比較を行う厳密等価演算子 ===（トリプルイコール）です。 この2つは一見同じように見えますが、実際の動作はまったく異なります。違いを理解していないと、思わぬバグの原因になるため注意が必要です。 まずは、次のコードをブラウザのコンソールで実行してみてください。