はじめに スプレッド構文は、JavaScriptでデータを展開する際に非常に便利な機能です。JavaScriptにおけるスプレッド構文の基本的な使い方とその応用について説明します。 スプレッド構文の基本 スプレッド構文は、配列やオブジェクトの要素を展開するために使用されます。スプレッド構文は三点リーダー...を ...

はじめに JavaScriptでの||（論理和演算子）と??（Nullish Coalescing演算子）は、どちらも値を選択する際に使われる演算子ですが、それぞれの動作には重要な違いがあります。 ||（論理和演算子） aが偽の値（Falsy）であればbを返し、それ以外はaを返します。 js a || b 偽 ...

はじめに JavaScriptには、var,let,constという3種類の変数宣言方法があります。これらは、それぞれ異なる特性と用途を持っています。以下に、それぞれの違いを説明します。 var スコープ varで宣言された変数は、関数スコープを持ちます。これは、変数が宣言された関数の中で有効であることを意味し ...

はじめに JavaScriptの関数は、コードの再利用やモジュール化を実現するための基本的な要素です。関数は、プログラムの複雑さを管理しやすくし、コードの可読性と保守性を向上させます。 JavaScriptには、いくつかの異なる方法で関数を定義し使用することができます。それぞれの方法には特有のメリットとデメリッ ...

はじめに JavaScriptのエクスポートは、モジュールを使用してコードを分割し、再利用可能にするための重要な概念です。エクスポートを利用することで、他のファイルから関数や変数、クラスをインポートして使用することができます。 JavaScriptには、主に「名前付きエクスポート/インポート」と「デフォルトエク ...

はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href="https://i.imgur.com/zTufFAS.jpg"><img ...

はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 サンプル <iframe height="392" style="width: 100%;" scrolling="no" title="Untitled" src="https://code ...

はじめに JavaScriptプラグインを使わずに、背景画像の視差効果（パララックス）をVanilla JS（ピュアなJavaScript）だけで実装する方法について説明します。 サンプル まず、背景画像の視差効果（パララックス）とはどういうものなのか確認するために、下記のサンプルをご覧ください。 <ifram ...

はじめに JavaScriptで現在のスクロール量を取得するためのプロパティはたくさんあります。種類がありすぎるため、かえってどれを使えばいいのかいまいちわからないという人も多いかと思います。 本記事では、各プロパティのブラウザ対応状況まとめと、現在のスクロール量を確実に取得する方法について説明します。 スクロ ...

はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラッグ&ドロップできるエリアが一部分だけだと少し不便な場合があります。 ...