かもメモ

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

ES2015 (ES6)

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

JavaScript null とか undefined を配列から取り除く

create-react-app で作ったプロジェクトを npm run eject して webpack の秘伝のタレを眺めていて次ような記述を発見しました。 const loaders = [ // 略 ].filter(Boolean); 0 とか null とか undefined とか false になる値を配列から削除してる array.fil…

JavaScript 配列をオブジェクトに変換したい。

[{id:1, ...}, {id:2, ...}. {id:3, ...}, ...] みたいな配列を{id: {...}, id: {...}, id: {...}, ...} なオブジェクトに形式に変換したい時のメモ。 e. g. 元の配列 const arg = [ {id: 1, name: '星宮いちご', type: 'cute'}, {id: 2, name: '霧矢あおい'…

React JSX className に変数と固定値を混ぜて使いたい

ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 …

JavaScript (ES2015) super のメモ

ES2015 で使えるようになった class ですが、JavaScriptではあくまでクラスっぽいモノ(プロトタイプ・オブジェクト)として実装されているらしいので、継承元のプロパティやメソッドを使えるsuperがどうなってるのか気になったので調べてみたメモ。 super con…

JavaScript (ES2015) Object の色々メモ

キーの名前とプロパティの変数名が同じなら省略できる ES5 var cute = '星宮いちご'; var cool = '霧矢あおい'; var sexy = '紫吹蘭'; var soleil_es5 = { cute: cute, cool: cool, sexy: sexy, }; console.log( soleil_es5 ); // { cute: '星宮いちご', coo…

JavaScript タイプライターみたいなエフェクト作ってみた。

単純に文字列を1文字づつ追加していくだけのものですが See the Pen Text Typewriter with Javascript Promise by KIKIKI (@chaika-design) on CodePen. ※ 表示エフェクトはForkしたものですが、表示ロジックは丸っと作り直ました PromiseはsetTimeoutを繰り…

Webpack 4 で Cannot assign to read only property 'exports' of object エラー

こんにちは、Webpackでのbundle化初心者です。 今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので…

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を簡単に試してみた

HTMLでES moduleをつかうメモ

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

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

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

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

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

今更のバベる。 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サイト…

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

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

JS call apply vs bind アロー関数

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

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

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

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

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