javascript

javascript

【2025年最新】Day.jsの使い方完全マスターガイド – Moment.js比較から実践テクニックまで

JavaScript開発者必見!2KBの軽量ライブラリ「Day.js」の使い方を徹底解説。Moment.jsからの移行メリット、基本的な日付取得・フォーマット変更から、加算・減算・比較操作まで実践的なコード例付きで紹介。さらにReact/Node.js環境での活用法、locale設定、タイムゾーン処理のコツまでカバー。初心者から上級者まで使える日付操作テクニックが全て分かる完全ガイドです。
javascript

JavaScriptのPromiseをわかりやすく解説!初心者向け入門ガイド

JavaScriptのPromiseを初心者向けにわかりやすく解説!非同期処理の基本概念、then()・catch()の使い方、async/awaitとの違いまで詳しく説明します。コールバック地獄を解消し、スムーズなコードを書けるようになりましょう!
javascript

JavaScriptでキャッシュをクリアする方法【完全ガイド】

はじめにWeb開発を行っていると、変更を加えたはずのJavaScriptファイルがブラウザにキャッシュされていて、意図した動作にならないことがあります。この記事では、JavaScriptを使用してキャッシュをクリアする方法を詳しく解説します...
javascript

IndexedDBとは?ブラウザ内で使えるデータベースの基本と活用法

IndexedDBは、ブラウザ内で大容量データを保存・管理できるストレージ機能です。localStorageの制限を超え、オフライン対応も可能。この記事ではIndexedDBの基本概念や使い方、メリット・注意点をわかりやすく解説します。Web開発でデータ管理を効率化したい方は必見です!
javascript

JavaScriptのドット3つ(…)とは?スプレッド構文を徹底解説

1. はじめにJavaScriptを学んでいると、...(ドット3つ)という記号を目にすることがあります。これは「スプレッド構文(Spread Syntax)」または「レスト構文(Rest Syntax)」と呼ばれ、配列やオブジェクトの操作...
javascript

JavaScriptやjQueryで特定の表示状態を持つ要素の中のインデックスを取得する方法 – display: none の要素は数えないで!

1. はじめにJavaScriptを使用して、特定の表示状態を持つ要素の中でインデックスを取得する方法について解説します。例えば、display: none; の要素を除外して、表示されている要素だけのインデックスを取得したい場合があります...
WordPress

WordPressでAjax処理を行う時の簡単な方法と流れ

はじめにWordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。wp_localize_scriptwp_ajax_、wp_ajax_nopriv_javascriptこれらのキーワードをこの順番で覚えてお...
HTML

入力内容に応じて高さを自動調整するtextareaの作り方(Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法)

はじめにWEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによって見ることができはし...
その他

これは便利!HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法

モーダルウインドウ機能を実装するのに古い方法で作成していませんか?古い方法とは次のようなやり方です。オーバーレイ(モーダルの背景)用のdivタグを用意モーダルの実体用のdivタグを用意cssもしくはjsでpositionやopacity、d...
その他

jsでもっとちゃんとタブUIを実装する(jQuery不使用)- ページ更新してもタブがリセットされないやり方

WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの記事が検索でひっかかりますが「とりあえず動けば良い」というようなコードも少なくありません。タブを押せて該当するコンテン...
javascript

jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法

はじめにカルーセル(スライダー)をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。▼Swiper今回作りたいカルーセルの仕様記事のリンクを想定しています。上側は記事のサムネイル...
HTML

inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み(jQuery不使用)

はじめにフォームで入力欄に全角数字だけを入力してほしいときがあります。javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。今回はjQueryは使用しないで処理を行...
javascript

ReactをCDNで利用した場合のuseState、useEffectの書き方

はじめにReactをCDNから利用することは以前の記事で書きました。▼過去の記事はこちらReactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構...
javascript

これなら簡単!cdnでreactとjsxを呼び出してサイトに組み込む方法

はじめにjavascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりを...
javascript

ブラウザバックをjavascriptで判定する方法とつかいどころ

はじめにホームページを閲覧中、前のページに戻りたい時にはだいたいの人がブラウザの戻るボタン(ブラウザバック)を使用すると思います。スマホでは特にグローバルメニューを押すのが面倒なのでPCよりも多用するかもしれません。ブラウザバックを想定して...
javascript

新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール

WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ(LP)で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE1...
javascript

jQueryなしでも大丈夫!Ajax処理を生のjavascriptで行う方法

AjaxとはAsynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。jQueryでの書き方は以下の記事に書きました。jQueryを使う書き方の記事が多...
javascript

Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法(jQuery使用)

WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケースがあります。そんなときにはjsonデータなどの外部ファイルをAjaxで取得して表...
その他

JSONファイルはコメントアウトできません。でもなんとかする方法

JSONファイルでコメントアウトはできませんAjaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジ...
javascript

jQueryでリンク先が別ドメインのURL(外部サイト)かどうか判定して自動的にtarget=”_blank” rel=”noreferrer noopener”を加えるスクリプト

完全に備忘録です。前提条件jqueryをheadタグ内で読み込んでいるES2015(ただlet使用しているだけ…)を使用しても問題ない状況である$(function() { $('a').each(function() { ...