JavaScript

JavaScript

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

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

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

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

Nunjucksテンプレート内でjavascriptの関数を使用する

テンプレートエンジンnunjucksでテンプレートファイルにjavascript関数を使用することはできません。例えば次のようなコードはコンパイラエラーになります。{%- set currentTime = new Date() -%}nunjucks使用の際はテンプレート内で関数を使うことはできません。Nunjuck...
JavaScript

JavaScriptで曜日を取得・変換する方法まとめ(moment.js Day.js サンプルコードあり)

はじめにJavaScriptで日付を扱う際、曜日の取得や操作は頻繁に必要となります。しかし、実装時に具体的な書き方を思い出せないことも多いものです。本記事では、JavaScriptでの曜日の取得・操作方法を、初学者から実践者まで分かりやすく解説します。JavaScriptで曜日を取得する方法Dateオブジェクトを使うJ...
JavaScript

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

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

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

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

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

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

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

WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケースがあります。そんなときにはjsonデータなどの外部ファイルをAjaxで取得して表示させる処理も選択肢に入れれるように流れを覚えておくと良いです。Ajaxとは「A...
JavaScript

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

AjaxとはAsynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。jQueryでの書き方は以下の記事に書きました。jQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける頻繁にAjax...
JavaScript

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

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

はまると面倒!?Instagramのタイムラインをサイトに表示させる方法

「facebookのページプラグインやTwitterの埋め込みタイムラインのようにインスタグラムの投稿をサイトに表示させたい」という要望があることがあります。しかしfacebookのページプラグインやTwitterのタイムラインのように気軽に表示することができません。表示するにはひと手間、ふた手間かかるので注意が必要で...
JavaScript

iPhoneでページ下部のタップイベントを確実に発火する方法

スマホ用に見やすく設定されたWEBページのパターンの1つに画面下に固定されたナビゲーションがあります。ユーザーの親指の位置に近いので良いデザインかと思いきやiPhoneで落とし穴があるので注意が必要です。iPhoneでページ下部固定メニューをタップしても一回では動かない問題iOSの標準ブラウザsafariで下に表示され...
JavaScript

そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法

フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。jQueryに関しては脱jQueryが段々広まっているように見えますが案件によってはまだまだjQueryのお力を借りなければいけません。それはライブラリが豊富でスピーディーに...