JavaScript 【脱jQuery】JavaScriptだけでイベント処理を行う ページ読み込み完了時に処理を実行する jQuery $(document).ready(eventHandler); // または $(document).ready(() => { // 処理 ); JavaScript document.addEventListener('DOMContentLoaded', eventHandler); // または document.addEventLis... 2020.03.14 JavaScript
JavaScript 【脱jQuery】JavaScriptだけでAJAX通信を行う 概要 脱jQueryのためのメモ。 Fetch APIを使うとXMLHttpRequestよりも簡単に処理を記述することができる。ただし、IEは非対応であるため、polyfillを使ってトランスパイルする必要がある。polyfillにはnpmのwhatwg-fetchパッケージを使う。 jQuery $('#hoge').load(url, completeCallback); JavaScrip... 2020.03.13 JavaScript
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
JavaScript 【脱jQuery】JavaScriptだけでセレクタ指定により要素を取得する 脱jQueryのためのメモ。 要素を取得するためのメソッド ID指定の場合はdocument.getElementById、それ以外はdocument.querySelectorAll(1要素だけ取得する場合はdocument.querySelector)を使うdocument.getElementsByClassNameは使わない(戻り値であるHTMLCollectionはブラウザによってはit... 2020.03.11 JavaScript
JavaScript 【JavaScript】console.log(e)でcurrentTargetがNULLになる? 概要 JavaScriptのイベントハンドラにて、console.log(e);とするとイベントオブジェクトの中身が表示されるが、それはconsole.log(e)を実行した時の中身ではなく、コンソールで確認した時点(▶︎をクリックしてオブジェクトを展開したとき)の中身が表示される。currentTargetは処理が終わるとNULLに書き換わってしまうので、console.log(e);を実行した... 2020.03.01 JavaScript
JavaScript JavaScript(ES2015, ES6)でのループ処理の書き方 – for…of, forEachの使い分け 概要 JavaScript(ES2015, ES6)で配列やオブジェクト(連想配列)をループさせるとき、for…ofとforEachのどちらを使うべきかをまとめました。 ループ処理ごとの特徴など for…ofはIE11非対応for…ofはArrayやNodeListなどiterableなオブジェクトで使うことができる。ただし、{}で定義したオブジェクト(連想配列)では使うことができないない。ite... 2020.02.26 JavaScript
JavaScript JavaScriptにおける文字列’0’の扱い 文字列の'0'は条件式ではtrueになるので注意 RubyやPHPでは'0'はtrueとして扱われるが、JavaScriptではfalse扱いとなる。 if ('0') { console.log('true'); // trueが出力される } if (0) { console.log('true'); // trueは出力されない } 暗黙の型変換 等価演算子(==)で異なるデータ型を比較した... 2020.02.24 JavaScript
JavaScript JavaScriptで@(アットマーク)キーが押されたら処理を実行させる OSによるキーコードの違い keydownイベントのイベントハンドラ内でkeyCodeの値を取得し、どのキーが押されたかを判定するが、アットマーク(@)はWindowsとMacでキーコードが異なるので注意が必要。 Windows:192Mac:219 サンプル // 「Ctrl/command + @」が押されたら処理を実行する document.addEventListener('keydown... 2020.02.08 JavaScript
WordPress 【WordPress】データベースへ新しいテーブルを追加する方法(独自テーブルの作成) WordPressのデータベースにテーブルを追加し、テーマファイルの中で使用するには以下の手順が必要となる。 データベースにログインしてCREATE文を実行する mysqlコマンド、またはphpMyAdminにログインしてSQLを実行する。以下はwp_hogeテーブルを作成する場合。 CREATE TABLE `wp_hoge` ( `id` int(11) NOT NULL, `name` va... 2020.01.26 WordPress
HTML HTML5ではアンカーポイント<a href=”#top”>をデフォルトで使用することができる これは知らなかったことなのでメモ。HTML5ではid属性がtopの要素が存在しなくても、アンカー名topが使えるようになった。つまり、<h1 id="top">タイトル</h1>のような要素が存在しなくても<a href="#top">TOP</a>でページトップへジャンプするようになった。ちなみにname属性は廃止になった。<a name="hoge">hoge</a> 2020.01.24 HTML