JavaScript

【JavaScript】任意の位置へスクロールさせる方法

概要 JavaScriptで任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。要素.scrollIntoView() window.scrollTo...

2020.08.27

JavaScript

Node.js

npm runコマンドとnpxコマンドの使い方

npm runコマンド (npm srcipts)とは？ Node.jsをインストールすると、npm run xxxで任意のコマンドを実行できるようになる。これはnpm scriptsと呼ばれ、任意のコマンドのショートカット（エイリアス）を定義することができる機能である。 npm runコマンド (npm srcipts)の使い方 package.jsonのscriptsに実行したいコマンドを定義...

2020.08.06

Node.js

【JavaScript】スクロール量(位置・座標)の取得方法

Windowのスクロール量 window.pageYOffsetで取得することができる。ただし、IE8以前は非対応のためdocument.documentElement.scrollTopとする必要がある。よって、(window.pageYOffset || document.documentElement.scrollTop)と書くことで、クロスブラウザ対応することができる。 window.a...

2020.05.22

JavaScript

【脱jQuery】JavaScriptだけで要素のwidth, heightを取得・設定する方法

jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。 width, heightの取得 jQuery const width = $('#hoge').width(); const height = $('#hoge').height(); JavaScript // borderとscrollbarの高さをめない場合 const widt...

2020.05.11

JavaScript

【脱jQuery】jQueryのliveメソッド、 onメソッドをJavaScriptだけで記述する方法

概要【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登...

2020.04.16

JavaScript

【JavaScript】ブラウザバック(戻るボタン)を無効化する方法

概要 JavaScriptのHistory APIでブラウザの戻るボタンを無効化することができる。サンプル window.history.pushState(null, null, null); window.addEventListener("popstate", function() { window.history.pushState(null, null, null); return; ...

2020.04.08

JavaScript

【脱jQuery】JavaScriptだけで要素のtop, leftを取得・設定する方法

jQueryのoffsetメソッドをJavaScriptだけで実装する方法をまとめました。 top, leftの取得 jQuery const left = $('#hoge').offset().left; const top = $('#hoge').offset().top; JavaScript const rect = document.getElementById('hoge').ge...

2020.04.07

JavaScript

【脱jQuery】JavaScriptだけでイベント処理を行う

ページ読み込み完了時に処理を実行する jQuery $(document).ready(eventHandler); // または $(document).ready(() => { // 処理 ); JavaScript document.addEventListener('DOMContentLoaded', eventHandler); // または document.addEventLis...

2020.03.14

JavaScript

【脱jQuery】JavaScriptだけでAJAX通信を行う

概要脱jQueryのためのメモ。 Fetch APIを使うとXMLHttpRequestよりも簡単に処理を記述することができる。ただし、IEは非対応であるため、polyfillを使ってトランスパイルする必要がある。polyfillにはnpmのwhatwg-fetchパッケージを使う。 jQuery $('#hoge').load(url, completeCallback); JavaScrip...

2020.03.13

JavaScript

【脱jQuery】JavaScriptだけでDOMを操作する

脱jQueryのためのメモ。テキスト、HTMLの取得・設定取得$el.text();⇒el.textContent;$el.html();⇒el.innerHTML;設定$el.text('xxx');⇒el.textContent = 'xxx';$el.html('xxx');⇒el.innerHTML = 'xxx'; 要素削除 $el.remove();⇒el.parentNode.r...

2020.03.12

JavaScript