かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

javascript

JavaScript (ES2015) 今更のPromise (3) 非同期処理を順番に実行するチョットマニアックなメモ

前回までのあらすじ 非同期処理を平行に実行する場合はPromise.allやPromise.raceを使えばよいのですが、非同期処理で受け取った値を使って次の処理を行いたいなど順番(同期的)に実行したい場合のメモ Promise~thenでのメソッドチェーン たぶん一番正当なや…

JavaScript (ES2015) 今更のPromise (2) Promiseが返された後の処理のメモ

前回のあらすじ 通常のPromiseを返す関数で明示的にresolve()、reject()をreturnしてないと関数の終わりまで実行されるのでは?と思い調べてみました。 明示的に resolve/reject がreturnされていない場合 function myFunc(a, b = 0) { return new Promise((…

JavaScript (ES2015) 今更のPromise

JavaScriptを扱うにあたって避けては通れない道、Ajaxとかタイマーとかの非同期処理… ES7のawait/asyncを学ぶ方が良いのでしょうが、jQuery.deferred辺りで止まってしまっていると、いきなりawait/asyncは辛いので、Promiseをざっくり理解してawait/asyncに…

JavaScript (ES2015) アロー関数 省略した書き方とかのメモ

ES2015/ES6で追加されたアロー関数()=>{...}はthisを拘束できるのがメインだと思っているのですが、色々と省略した書き方ができるようで、まだ不慣れなのでライブラリとか参考のコード見てる時に何だっけ?となりがちだったので省略した書き方のメモ。 アロ…

JavaScript (ES2015) 分割代入でエラーになるトラップにはまる。

ECMAScript2015 (ES2015 / ES6)で追加された、配列やオブジェクトを分割して変数に代入できる分割代入で色々エラーになってハマったのでメモ。 分割代入 Destructuring assignment 分割代入 - JavaScript | MDN とは // 配列 let [a, b, ...rest] = [10, 20,…

JavaScript (ES2015) スプレッド演算子のメモ

スプレッド演算子(Spread Operator) ... で使用 for of で回せるArray-like(イテラブル?)なオブジェクトを個々の値で展開できる ※配列での仕様はES2015/ES6で標準になっているが、オブジェクトでの仕様はまだドラフト (ECMAScript® 2019 Language Specifica…

JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ

JavaScriptで変数を展開した文字列を作成する時、+で文字列連結をしていましたがES2015(ES6)からは``(バッククォート)で囲うテンプレート構文(Template literal)で書くことができるようです。 ※ IEやAndroidでは未対応なブラウザもあるようなので、WEBサイト…

Mac Sublime Text 3 ESLint 導入メモ

ESLintをグローバルにインストール $ npm install -g eslint Sublime TextにSublimeLinterパッケージをインストール Sublime Textを起動しPackage Control(⌘+shift+P)を起動 Installと入力しInstall Packageを選択 SublimeLinterと入力しEnterを押してインス…

JS 表示してるページのURLを取得したりするアレコレのメモ

URLを取得する方法のメモ (※ Chrome / Firefox / Safari で確認しています。) 例えばこんなURL 1. http://example.com/dir/ 2. http://www.example.com/dir/ 3. http://example.com/dir/index.html#section01 4. http://www.example.com/dir/index.html#sect…

iOS javascript clickイベントが効かないにはまる。

レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。 Chromeの開発ツールでは意図したとおりに動作していたのですが、…

Javascript Chromeでページトップに戻る(scrollTop)が効かなくなってた件。

Chromeで以前作ったサイトを見ていて、jQueryで実装していたページトップに戻るが効かなくなっているのに気づいてしまいました... スペック Mac OSX Chrome v61.0.3163.91 $('body').scrollTop() が効かなくなっていた。 今までは、FireFoxとIE系はhtmlタグ…

Ajaxを使ってWordPressからコンテンツを取得したい。

WordPress製のサイトに独自のコンテンツなどを取得できるAjaxを作成する方法のメモ 1. 呼び出すアクション名を決める 2. Ajaxの送信先をjsから使えるように出力する 3. Ajaxで呼び出される関数を作成する (PHP) 4. フロントからAjaxでの呼出しを作成する (ja…

JS 配列の重複を取り除きたい

配列の重複した値を削除したい時のメモ。 filterでループさせindexOfで値の重複をチェックするパターン array.indefOf(value)がvalue自身のインデックスと異なる場合は既に配列内に同じ値があるという判定 var arr = [0, 1, 2, 3, 4.1, true, false, 1, "2",…

JS 2つの配列の差分を取得したい

1. 値の差分をチェック 2. 値とインデックスでチェック 2-1. 新旧の比較のように、配列Aと配列Bを比べ配列Aから変化しているものを返す 2-2. お互いの配列で異なっているものを返す

JS call apply vs bind アロー関数

javascriptの関数とthisとの関係のメモの続きです。 関数のthisを決めることができるcall()とapply()で実行される関数がFunction.prototype.bindやアロー関数でthisが決められているものだった場合どうなるのか気になったので調べてみました。 call と apply…

Javascript 関数とthisについてのメモ

以前書いた記事でオブジェクトの関数内でsetTimeout()に無記名関数を渡した際のthisの値について理解が不明瞭だったのでjavascriptの関数とthisについて調べたメモです。 関数について 関数宣言 (function declaration) function 関数名(){} 関数の巻き上げ…

JS オブジェクトのキーがあるかチェックしたい。

オブジェクト({})のキーが存在しているか調べる時、if文を使うと値によっては上手くいかない。 var obj = { A: 0, B: 1, C: 2, D: "" }; var foo; obj.E = foo; ["A", "B", "C", "D", "E", "F"].forEach(function(key) { if( obj[key] ) { console.log( obj[…

JS 0や文字列を含んだ数字のチェックをしたいメモ

数値を扱う時や数値変換を行う時に0が鬼門になることが多いのでメモ var checklist = [ 0, "0", "", undefined, "undefined", false, "false", true, "true", null, "null", NaN, "NaN", Infinity, "Infinity", -Infinity, "-Infinity" ]; -0で数値変換した…

JS 配列の要素が全て条件を満たすか調べたい

EX: 配列に含まれる数が全て0 <= N <= 255 かどうか調べたい 次のデータから条件にマッチする配列だけを取り出す。 // 調べる配列の入ったデータ var data = [ [ 217, 0, 0, 0 ], [ 169, 254, 0, 1 ], [ 0, 0, 0, 256 ], [ 1, 0, -1, 255 ], [ '', 0, 0, 0 ]…

Javascript 自然数の約数の総和を求めたい

プログラム書く仕事が無いので、お脳が腐らないように息抜きにプログラムのパズルをしています。 自然数の約数の総和を求める方法を考えてたのでメモ。 数学的なやつ 自然数Nが P1のa1乗、P2のa2乗に素因数分解できる時 Nの約数の総和は (1+P1+P1**2+...+P1*…

GoogleMaps マウスホイールでのズームしないようにしたい。

シングルページのサイトなどで100%幅でGoogleMapsを表示させるような時、マウスホイールで地図がズームしてしまうと不都合があるので、地図のマウスホイールでのズーム機能をOFFにするメモ。 scrollwheel オプションを使用する。 マウスホイールでのズーム機…

JS 配列の初期化についてのメモ

長さNの配列をSで埋めて作成したい。 var a = (new Array(3)).fill('A'); // ["A", "A", "A"] length N の配列の作成は new Array(N) arr.fill()メソッドは第一引数で指定された値で配列の値を設定する。 arr.fill(value[, start = 0[, end = this.length]])…

JS 呼び出し元の this を担保するメモ。

例 オブジェクト内の関数でsetTimeoutを使ってその中で、オブジェクト自身をthisとして使いたいような場合 var obj = { name: 'obj', func: function() { console.log(this); // => Object setTimeout(function() { console.log(this, this.name); // => Win…

jQuery .triggerと.onとで実行される関数へのデータの渡し方の違いメモ。

オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ .trigger .trigger( eventType [, extraParameters ] ) extraParameters Type: Array or PlainObject Additional parameters to pass along to the event handler. .…

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。 ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。 そこで、ContactFo…

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定 を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。 on_sent…

Gulp min化したJS・CSSに自動でコメントを入れたい

コーディングをする時、Gulpでコンパイル&min化をしています。 min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。 javascript ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglify…

PHP Slim 2.x Ajaxでputで送った値を取得したい。

"Slim is a PHP micro-framework" Rubyのテンプレートエンジンじゃない娘のお話です。 3系が既に出ているのですが、先方のサーバーのPHPのバージョンの関係で2系で開発をしています。今回 Ajaxのputメソッドでデータを送ったのですが、Slim側で値をとるのに…

javascript 確認ダイアログ(confirm)の文章を改行させたい。

削除するとか、元に戻せない動作を行う前には誤動作の可能性を考慮して、確認ダイアログを入れるのが好ましいと思っています。 独自実装しても良いのですが、デザインが無かったりで、とりあえずサクット作ってしまっておきたい場合はデフォルトのwindow.con…

ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。

画面をスクロールさせて、特定の要素の場所に来た時にアニメーションをさせるなどスクロールに応じたアクションの作成をすることがあります。 複雑なものの場合ライブラリを使うのが手っ取り早いと思いますが、簡易なものの時や大きなライブラリを読み込ませ…