かもメモ

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

javascript

ESlint acyncとFetchAPIがエラーになる

簡単なESlintの設定で試してたら、acyncとfetchでエラーにったのでメモ .eslintrc { "root": true, "extends": [ "eslint:recommended" ], "env": { "es6": true, "node": true, "commonjs": true }, "parserOptions": { "sourceType": "module" }, "rules":…

Ajax (XHR) まわりいろいろ試してみた。

jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた

Fetch API 試してみた。

恥ずかしながらFetchAPIたるものがあるのを知らなかったので、ざっくり試してみた。 Fetch API Service Workersでも使えて、プレーンなJavaScriptのXMLHttpRequestより強力で柔軟な操作ができるそうです。 GET fetch(api_url, {method: 'GET'}) .then((res) …

APIのモックアップに便利なjson-server使ってみた。

フロントエンドの制作とかで使えるAPIのモックアップにjson-serverってのが便利だよーって教えてもらったので使ってみた。 インストール $ yarn add -D json-server デフォルトのデータを作成 db.json { "articles": [ {"id": 1, "title": "json-server", "a…

PHP / JavaScript ファイル生成してDLさせたいけどmax_input_varsにかかってしまう問題にパワープレイで立ち向かった話

PHP製の管理ツールで、CSVを生成してDLするシステムを作っていました。 データ量が多いとエラーになるということで調べたら、PHPのmax_input_varsにかかって居るのが原因でした。 そして、使っているサーバーがhetemlでmax_input_varsの上限を変えることが出…

JavaScript Blobオブジェクトでファイルを作成してダウンロードしてみる

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support f…

HTMLでES moduleをつかうメモ

ES2015で、scriptタグモのtyoeで指定できるモードにmoduleが追加されたようです。 script:グローバル名前空間を必要とする標準的なスクリプトのためのもの module:明示的なインポートとエクスポートを必要とする、モジュール化されたコードのためのもの sc…

node.js モジュール(ES Module)のimport/exportにハマる。

node.jsでimport/exportで試そうとしてハマったのでメモ。 $ node -v v11.4.0 import / export を使っているファイルの拡張子は.mjsでないとエラー // moduleA.js export const hi = (name) => `Hi ${name}. `; // main.js import {hi} from './moduleA.js';…

JavaScript (ES2015) 同じ名前のモジュールをインポートしたい

webpackを調べていた時にwebpackのメリットとして 各モジュールを閉じたスコープにしてまとめてくれるので、モジュール名や変数名が被るのを気にする必要がなくなる というのがありました。 で、同じモジュール名だったりした時、インポートする側はどうする…

今更の webpack 4 導入とbabel使うところまでのメモ。

3年ほど山ごもりをしていて、浦島太郎状態なので、その間に進んだフロント周りのキャッチアップを ちょっとづつ進めています。 今回はwebpackについて、フリーな個人制作が多くgulpで何とかなるしと秘伝のタレ使いまわしていたのですが、JavaScriptのモジュ…

IoT初心者がobnizと戯れてみて、"簡単に"とは何かについて考えてみたメモ。

これはobniz Advent Calendar 201812日目の記事です。 はじめまして。 IoTデバイスを触ったり、回路作ったり自体が初めてのド素人です。 obnizのハンズオンに参加してJavaScriptSDKを使って"簡単に"LEDを光らせたりモーターを動かしたりができたので、調子に…

JavaScript 該当する文字を全部変換したいメモ

例えば次のようなテキストを "藤堂ユリカ\n一ノ瀬かえで\n神崎美月" "藤堂ユリカ 一ノ瀬かえで 神崎美月" のように置き換えたい時 JavaScriptにはreplaceAllのようなメソッドがないので、 const str = "藤堂ユリカ\n一ノ瀬かえで\n神崎美月"; str.replace("…

HTML 本当は怖い target="_blank" 。rel="noopener" ってなに?

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new …

今更のバベる。 Babel 7を試してみたメモ

BabelやWebpackとかを業務で使う機会がなくて、なんとなくな感じだったので自分の手動かして設定しながら試してみました。Babel 7になっていて検索で出てくる情報だとうまく行かなかったり試行錯誤したのでメモ。 Babelとは babel + webpack の構成で合わせ…

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) オブジェクトのループについてのメモ

ES2016/ES6でfor...ofが追加されたので改めてオブジェクトのループの方法を見直そうと思いました。 for..of for...of 文は、iterableオブジェクトに対して反復的な処理をするループを作成します(iterableオブジェクトには組み込みのString, Array, 例えば A…

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…