javascript
-
IndexedDBとは？ブラウザ内で使えるデータベースの基本と活用法
IndexedDBは、ブラウザ内で大容量データを保存・管理できるストレージ機能です。localStorageの制限を超え、オフライン対応も可能。この記事ではIndexedDBの基本概念や使い方、メリット・注意点をわかりやすく解説します。Web開発でデータ管理を効率化したい方は必見です！
-
JavaScriptで一定時間後に自動で閉じるalertの実装方法
目次 はじめになぜalertを自動で閉じる必要があるのか？1. ユーザーエクスペリエンスの向上2. 繰り返し表示されるアラートの管理JavaScriptでale…
-
JavaScriptで曜日を取得・変換する方法まとめ（moment.js Day.js サンプルコードあり）
目次 はじめにJavaScriptで曜日を取得する方法Dateオブジェクトを使う曜日を文字列で取得する指定した日付の曜日を取得する日付を加算・減算して曜日を取得…
-
JavaScriptのドット3つ（…）とは？スプレッド構文を徹底解説
目次 1. はじめに2. スプレッド構文とは？2.1 スプレッド構文の基本2.2 配列のコピーと結合2.3 オブジェクトの展開3. スプレッド構文の活用例3.1…
-
JavaScriptやjQueryで特定の表示状態を持つ要素の中のインデックスを取得する方法 – display: none の要素は数えないで！
目次 1. はじめに2. インデックス取得の基本概念インデックスとは？display: none の要素を除外する理由3. jQueryを使ったインデックス取得…
-
WordPressでAjax処理を行う時の簡単な方法と流れ
※このページはプロモーションを含みます 目次 はじめに①Ajax通信用のjavascriptで使用できるグローバルな変数を設定する②Ajax通信の処理内容をPH…
-
入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）
※このページはプロモーションを含みます 目次 はじめに高さを自動調整する４つの方法の概要土台のHTMLとCSSjavascript（バニラJS）での調整CSSで…
-
Astroフレームワークを相対リンクにする方法 – Astro.jsで静的サイト制作
目次 はじめにAstro（Astro.js）とは相対リンクを実現するためにプラグイン「astro-relative-links」の設定方法はじめに ウェブフレー…
-
jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
※本ページはプロモーションを含みます 目次 はじめに今回作りたいカルーセルの仕様どうやって実現するの？実際のコード例実際の表示最後にはじめに カルーセル（スライ…
-
スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
※本ページはプロモーションを含みます 目次 はじめにFractalとはnunjucksとは前提条件プロジェクトの構築パッケージを追加する（@frctl/nunj…
-
inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
※本ページはプロモーションが含まれています 目次 はじめにコードのサンプルコードの詳細と注意点対象イベントは”input”。”…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
目次 はじめにuseState、useEffectとは必要な外部ファイルをCDNから呼び出す処理を記入する結果はじめに ReactをCDNから利用することは以前…
-
これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
目次 はじめにCDNのURLをscriptタグで呼び出すReactとReactDOMを呼び出すbabelを呼び出すReactを書き出すはじめに javascri…
-
ブラウザバックをjavascriptで判定する方法とつかいどころ
※本ページはプロモーションを含みます 目次 はじめにブラウザバックを判定するコードなぜブラウザバックで表示がおかしくなるのかキャッシュを読み込んでいるがために表…
-
tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
※本ページはプロモーションを含みます tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティ…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQu…
-
jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
目次 AjaxとはjQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける（結論）XMLHttpRequestをもっ…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
目次 browserslistとは何かbrowserslistは％（パーセンテージ）で設定できるがシェア率はどこでわかるの？browserslistとは何か 名…
-
jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのペー…