カテゴリー別アーカイブ: 参照記事

わたしもみている | 破片プログラマーの悲しみ | Promiseは常に非同期?

jflute : http://d.hatena.ne.jp/jflute/20160330/fragramming

2.3.コラム: Promiseは常に非同期?

Promiseとasync-awaitの例外処理を完全に理解しよう

document.implementation
他の「わたしもみてる記事」

【JavaScript】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 – Reflect」の記事概要

【JavaScript】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 - Reflect」の記事概要

【JavaScript】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 – Reflect」の記事概要

以下ここの記事の概要

続きを読む

わたしもみている | rollup.js | react_speed_cording | Babel で ES7 Async/Await を試してみた |

React_Speed_Cording
webpackのバージョンが2では動かないっていうのが気になる。。

英語動画
リスニングしやすい動画。。

Taming the asynchronous beast with ES7
そろそろそこらへんもまとめたい。。

今更ながら Babel で ES7 Async/Await を試してみた
ここも。。

rollup.js (next-generation JavaScript module bundler)
Webpack2との違いが知りたい。。

Beginner’s guide to Webpack
やさしい。。

JavaScriptの仕様を書いている人
フォローしてた。。

JavaScriptの仕様書の経緯
これで追っているんすね。。毎年6月にECMAScript20XXとしてリリースするんすね。
2016はArray.include()と2**2 === 2 * 2 * 2だけ
2017はasync/await、Object.values, Object.entries(),Object.getOwnPropertyDescriptorsとか

【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで – Gulpで作るwebフロントエンド開発環境
Gulpか。。Webpackがいいな。。

ECMAScript® 2017 Language Specification
冬ですね。そろそろ。。

You Don’t Know ES Modules
defaultをdefで参照できるのか。。

東京Node学園
ここチェックしておけばいいのか。。

JSConf Iceland 2016
アイスランドであったんすね。。

フロントエンドエンジニアが暇なときにやると良いかもしれないこと
多いな。。

英語の「不定詞」|3つの用法を簡単に5分でマスターする!
丁寧な記事。

関係代名詞の「which」の3つの使い方を簡単マスター!
いいね。

WHAT ARE LOADERS?
ここらへんをもっと知ればもっと便利になる。。

他の「わたしもみてる記事」

well-known Symbolとは| 海外記事「Detailed overview of well-known symbols」の和訳

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-15-10-19-28
参照記事

SymbolはECMAScript2015の新しいプリミティブ型です。それはユニークな識別子を作ることができます

let uniqueKey = Symbol('SymbolName')

Symbolはオブジェクトの中のプロパティのkeyとして使うことが可能です。

(上のように使ったら)JavaScriptは「well-konwn symbols」として公開されたsymbolのリストを扱えます。

「Well-known symbols」はビルドインJavaScriptのアルゴリズムとして使われています。
例えば
Symbol.iterator はarrayやstringの要素を イテレートすること、もしくはあなた自身が定義したイテレーター関数などに利用されています。

それらの特別なSymbol等(ら)は重要です

なぜならそれらはオブクトのシステムプロパティで独自の振る舞いを定義できるからです。

それらをJSの中で使えるのです。

「唯一」として存在し、文字列イテレーターの代わりにkeyとしてシンボルを使うことは
新しいオブジェクトに新しい機能を追加することを簡単に可能にします

この記事ではwell-known Symbolのリストを通して、それらのコード中での快適な使い方を説明します

多くの場合単純化のために well-known Symbol.<name> は @@<name>形式に省略されています。

例えば

Symbol.iterator は @@iterator

Symbol.toPrimitiveは @@toPrimitive

「オブジェクトは @@iteratorメソッドを持つこと」を可能にすると言うことができます。

そのことは、オブジェクトはSymbol.iteratorと名付けられた、関数を所有するプロパティを持っていることを示しています。

{ [Symbol.iterator]: function(){...} }.

目次

  1. Symbolを短く紹介
  2. オブジェクトイテレータブルを作る@@iterator
  3. instanceofをカスタマイズする@@hasInstance
  4. オブジェクトをプリミティブに変換する@@toPrimitive
  5. オブジェクトのデフォルト記述を作成する@@toStringTag
  6. 派生されたオブジェクトを作成する@@species
  7. オブジェクトのような正規表現を作成 @@match, @@replace, @@search, @@split
  8. 配列要素に対してのオブジェクトをフラットにする@@isConcatSpreadable
  9. withの中のアクセス可能にするプロパティに対しての@@unscopables
  10. 終わりに

1.Symbolを短く紹介

Symbolは数値型、真偽値、文字列型のような唯一かつ不変なプリミティブ型です
symbolを作成するために、名前を引数とするオプションでSymbol関数を実行します。

  let mySymbol = Symbol();
  let namedSymbol = Symbol('myName');
  typeof mySymbol;
  //'symbol'
  typeof namedSymbol
  //'symbol'
  

mySymbolとnamedSymbolは symbolプリミティブです。 namedSymbolは ‘myName’ネームとの結びつきを持っていて、
それはデバッキングに対してよく使われます。

いつでもSymbol()が実行されることは重要で、
新しく且つユニークなsymbolが作られます。
2つのsymbolはたとえそれらが同じ名前を持っていてもユニークです。

  let first = Symbol();
  let second = Symbol();
  first === second;
  //false
  let firstNamed = Symbol('Lorem');
  let secondNamed = Symbol('Lorem');
  firstNamed === secondNamed; 
  //false
  

ユニークなシンボルで作られた first と second は違うものです。
firstNamed と secondNamed は ‘Lorem’ という同じ名前を持ちますが、違うものです

Symbols は オブジェクトのプロパティに対してkeyになることができます。
オブジェクトリテラル それか クラス定義の中で、
コンピューティッドプロパティネーム構文の [symbol]は使用は不可欠です。

  let stringSymbol = Symbol('String');
  let myObject = {
   number: 1,
   [stringSymbol]: 'Hello World'
 };
  myObject[stringSymbol];//'Hello World'
  Object.getOwnPropertyNames(myObject); //['number']
  Object.getOwnPropertySymbols(myObject);//['Symbol(String)']
  
  

リテラルからmyObjectを定義している際、コンピューティッド構文はsymbol[stringSymbol]からのプロパティkeyを設定するために使われます。

シンボルで定義されたプロパティはObject.keys()やObject.getOwnPropertyNames()関数を使ってアクセスできません。

それらにアクセスするためには特別な関数であるObject.getOwnPropertySymbols()を呼びます。

keyとしてシンボルを使うことは重要な観点です。
特別なSymbol(well-known symbols)はイテレーションやプリミティブなオブジェクト、文字変換等のようなカスタムオブジェクトを定義することを可能にします。

well-known symbolsは列挙不可、書き換え不可、再設定不可 を可能にした Symbol関数オブジェクトのプロパティです
単純、Symbol.iteratorやSymbol.hasInstance等、それらを得るためのSymbol関数オブジェクト上のプロパティアクセサーを使います

このようなwell-known symbolsのリストを得ることができます。

Object.getOwnPropertyNames(Symbol);
//["hasInstance", "isConcatSpreadable", "iterator", "toPrimitive", "toStringTag", "unscopables","match", "replace", "search", "split", "species", ...];
typeof Symbol.iterator; 
//'symbol'

Object.getOwnPropertiesNames(Symbol) は Symbol関数オブジェクトの所有されたプロパティを返し、
well-known symbolsのリストを含んでいます。
Symbol.iteratorの進む「型」は’symbol’です。

オブジェクトイテレータブルを作る@@iterator

Symbol.iteratorは多分より知られているsymbolです。
それはオブジェクトがfor…of文やスピリードオペレータによってどのように使われ、イテレートされるべきかを定義することを可能にします

多くのstrings、arrays、maps、sets、などのビルドイン型はイテレータブルで、@@iteratorメソッドを持ちます。

let myString = 'Hola'
typeof myString[Symbol.iterator];// 'function'
for(let char of myString) {
 console.log(char); //logs on each iterator 'H', 'o', 'I', 'a'
}
[...myString];// ['H', 'o', 'I', 'a']

文字列のプリミティブ型のmyString はSymbol.iteratorプロパティを持ちます。
プロパティは文字列のキャラクターをイテレートすることに使うメソッドを所有します。

Symbol.iteratore という名前のメソッドを定義するオブジェクトはイテラブルプロトコルに準拠しています。
メソッドは イテレータープロトコルに準拠したオブジェクトを返す必要があります。

イテレータプロトコルオブジェクトは{value: , done: }を返すnext()メソッドを持つ必要があります。

カスタムイテレータの定義の仕方を理解しましょう。
下の例はmyMethods というイテラブルオブジェクトを作成、myMethodsはメソッドの所有を可能にします。

  function methodsIterator(){
   let index = 0;
   let methods = Object.keys(this).filter((key) = &gt; {
     return typeof this[key] === 'function';
   }).map(key =&gt; this[key]);
   return {
     next: ()=&gt; ({//Conform to Iteretor protocol
      done: index &gt;= methods.length,
      value: methods[index++]
     })
   };
  }
  let myMethods = {
    toString: function(){
     return '[object myMethods]';
    },
    sumNumbers: function(a, b) {
     return a + b;
    },
    numbers: [1,5,6],
    [Symbol.iterator]: methodsIterator //Comform to Iteratable Protocol
  };
  for ( let method of myMethods) {
     console.log(method); //logs methods `toString` and `sumNumbers`
   }

methodsIterator() は イテレーターオブジェクト{next : function(){…}}を返す関数です。
myMethodsの中でオブジェクトプロパティはkeyとしてSymbol.iterator、値としてmethodsIteratorがセットアップされます

これはmyMethods をイテラブルにさせ、
for…ofループの中のsumNumbers()とtoString()らのオブジェクトが所有するメソッドを渡すことができます

それに加えて、[…myMethods]かArray.from(myMethods)を呼ぶことによってそれ等のメソッドを得ることができます。

@@iterator プロパティ は ジェネレーター関数も受け取り、そのジェネレーター関数を値にさせることもできます

@@iteratorメソッドでFibonacci シーケンスを生成する class Fibonacci を作ってみましょう

  class Fibonacci {  
  constructor(n) {
    this.n = n;    
  }
  *[Symbol.iterator]() {
    let a = 0, b = 1, index = 0;
    while (index &lt; this.n) { index++; let current = a; a = b; b = current + a; yield current; } } } let sequence = new Fibonacci(6); let numbers = [...sequence]; numbers; // =&gt; [0, 1, 1, 2, 3, 5]
  

*[Symbol.iterator](){…} はジェネレーター関数はクラスメソッドということを明らかにします。
Fibonacciクラスのインスタンスはイテラブルプロトコルに準拠します。

そしてシーケンスインスタンスは[…sequence]スプレッドオペレーターで使われます。
スプレッドオペレーターは生成された数値からの配列を作成するために@@iterator メソッドを呼びます。

なので 結果は最初のFibonacci 数値の5の配列です。

もしプリミティブ型かオブジェクトが@@iteratorメソッドを持つなら、それらは下のコンストラクタ内で適応することができます。

・for…ofループの中での要素を超えイテレートする
・スプレッドオペレータ[…iterableObject]を使って要素の配列を作成する
・Array.from(iterableObject)を使って要素の配列を作成する
・他のジェネレーターへの代理する為のyield*式の中で
・Map(iterableObject)、WeakMap(iterableObject)、Set(iterableObject)、WeakSet(iterableObject)に対してのコンストラクタの中で
・静的メソッドPromise.all(iterableObject)、Promise.race(iterableObject)であるPromiseの中で

instanceofをカスタマイズする@@hasInstance

デフォルトでは obj instanceof Constructor オペレーターはConstructor.prototypeオブジェクトを含むObjectのprototypeのチェーンかどうか検証する
例題をみていきましょう

function Constructor(){
//constructor code
}
let obj = new Constructor();
let objProto = Object.getPrototypeOf(obj);
objProto === Constructor.prototype // true
obj instanceof Construcotr;//true
obj instanceof Object;//true

obj instanceof Constructor はtrueかを評価します。なぜならobjのprototypeはConstructor.prototypeと同等だからです。
instanceof 検証はobjのprototypeチェーンも検証し、したがって、
obj instanceof Object は trueです。

多くのアプリケーションはprototypeに対処し、instanceの検証を必要としません

幸い、カスタマイズのinstanceof 評価を呼ぶことができる@@hasInstancseを定義できます。
obj instance Type はType[Symbol.hasInstance](obj)と同等です。

例えば、もしobjectかプリミティブがイテラブルの場合の検証をしましょう。

class Iterable {  
  static [Symbol.hasInstance](obj) {
    return typeof obj[Symbol.iterator] === 'function';
  }
}
let array = [1, 5, 5];  
let string = 'Welcome';  
let number = 15;  
array instanceof Iterable;  // =&gt; true  
string instanceof Iterable; // =&gt; true  
number instanceof Iterable; // =&gt; false 
  

イテラブルは@@hasInstance静的メソッドを含むクラスです。
このメソッドは供給されたobjパラメータがイテラブルか検証します
後のイテラブルかは違うタイプの値か検証に使われます
配列と文字列は はイテラブルで数値はそうではありません

個人的に単にinstanceof と constructorで@@hasInstanceを使うことは
isIterable(array)を呼ぶより
嬉しいです。

array instanceof Iterable は配列がイテラブルプロトコルに準拠しているかの検証されることとしてオススメします。

オブジェクトをプリミティブに変換する@@toPrimitive

プロパティの値記述としてのSymbol.toPrimitive 使用はオブジェクトからプリミティブへの変換する関数です。
@@toPrimitive メソッドは1つのnumberかstringかデフォルトを取るパラメーター[ヒント]を持ちます。
ヒントパラメーターは返すべきプリミティブの型の提案を示します

例えば 配列インスタンスを@@toPrimitiveメソッドで改善しましょう。

  function arrayToPrimitive(hint) {  
  if (hint === 'number') {
    return this.reduce((sum, num) =&gt; sum + num);
  } else if (hint === 'string') {
    return `[${this.join(', ')}]`;
  } else {
    // hint is default
    return this.toString();    
  }
}
let array = [1, 5, 3];  
array[Symbol.toPrimitive] = arrayToPrimitive;  
// array to number. hint is 'number'
+ array; // =&gt; 9
// array to string. hint is 'string'
`array is ${array}`; // =&gt; 'array is [1, 5, 3]'
// array to default. hint is 'default'
'array elements: ' + array; // =&gt; 'array elements: 1,5,3'  
  

arrayToPrimitive(hint) は配列をhintから独立しているプリミティブへ変換する関数です

その割り当てである array[Symbol.toPrimitive] = arrayToPrimitive は新しい変換メソッドを使えるように配列を作ります。

+array は@@toPrimitiveメソッドを’number’で呼びます。

配列は数値に変換され、9の要素配列の合計です。
プリミティブ変換は'[1, 5, 3]’
最後の ‘array elements: ‘ + arry は変換用のhintデフォルトを使います。
この場合 arrayは’1,5,3’に評価されます。

@@toPrimitive メソッドは オブジェクトがプリミティブ型と相互作用するとき使われます。
・object == primitive 同等操作の中で
・追加、連結操作 object + primitive
・減算操作の中で object – primitive
・オブジェクトがプリミティブへ強制されたときの違う状況で String(object), Number(objet)

オブジェクトのデフォルト記述を作成する@@toStringTag

 

プロパティを示すためにSymbol.toStringTagを使います。プロパティの値はオブジェクト型が記述された文字列です。

@@toStringTag メソッドは Object.prototype.toString()として使われています。

Object.prototype.toString()の仕様書は多くのJavaScript型はデフォルトとしてタグを持っていることを示します。

let toString = Object.prototype.toString;  
toString.call(undefined); // =&gt; '[object Undefined]'  
toString.call(null);      // =&gt; '[object Null]'  
toString.call([1, 4]);    // =&gt; '[object Array]'  
toString.call('Hello');   // =&gt; '[object String]'  
toString.call(15);        // =&gt; '[object Number]'  
toString.call(true);      // =&gt; '[object Boolean]'  
// etc for Function, Arguments, Error, Date, RegExp
toString.call({});        // =&gt; '[object Object]'  

これらの型はプロパティSymbol.toStringTagを持っていません。
しかしObject.prototype.toString()アルゴリズムはそれらとは分けて評価します。

多くの他のJavaScript型はSymbol、ジェネレーター関数、maps、promises、など、で@@toStringTagプロパティを定義します。
ちょっと見てみましょう。

let toString = Object.prototype.toString;  
let noop = function() {};

Symbol.iterator[Symbol.toStringTag];   // =&gt; 'Symbol'  
(function* () {})[Symbol.toStringTag]; // =&gt; 'GeneratorFunction'
new Map()[Symbol.toStringTag];         // =&gt; 'Map'  
new Promise(noop)[Symbol.toStringTag]; // =&gt; 'Promise'

toString.call(Symbol.iterator);   // =&gt; '[object Symbol]'  
toString.call(function* () {});   // =&gt; '[object GeneratorFunction]'  
toString.call(new Map());         // =&gt; '[object Map]'  
toString.call(new Promise(noop)); // =&gt; '[object Promise]'  

上のサンプルでみるように、
多くのJavaScript型はそれらが所有する@@toStringTagプロパティを定義します。

オブジェクトが型や@@toStringTagプロパティが提供されていない他のケースでは
単に’Object’としてタグされます。
もちろん@@toStringTagプロパティでカスタム定義できます。

let toString = Object.prototype.toString;

class SimpleClass {}  
toString.call(new SimpleClass); // =&gt; '[object Object]'

class MyTypeClass {  
  constructor() {
    this[Symbol.toStringTag] = 'MyType';
  }
}
toString.call(new MyTypeClass); // =&gt; '[object MyType]'
"[object MyType]"

new SimpleClass インスタンスは @@toStringTagが定義されていなかった。
Object.prototype.toString()はそれに対してデフォルトの'[object Object]’を返します。
MyTypeClassコンストラクタの中で、インスタンスはカスタムタグ’MyType’で設定されました。

そのようなObject.prototype.toString()クラスインスタンスに対してカスタム型記述は'[object MyType]’を返します。

@@toStringTagは下位互換の点で存在していることに注意してください。

その習慣はなやましいです。
あなたは他のオブジェクト型の線引きするための違う方法(instanceofかtypeof のような)を使うべきと思うだろう

派生オブジェクトを作成する@@species

Symbol.speciesプロパティの値は派生オブジェクト を作成するために使われたコンストラクタ関数です。
多くのJavaScriptコンストラクタはコンストラクタ自身と同等の@@speciesの値を持っています。

Array[Symbol.species] === Array;   // => true  
Map[Symbol.species] === Map;       // => true  
RegExp[Symbol.species] === RegExp; // => true  

最初に注意したいのは派生オブジェクトは元のオブジェクト上の操作後に作成されるものです。
例えばオリジナルな配列上の.map()メソッドを呼ぶと、派生オブジェクトを返します(配列結果をマッピングした)

大抵、派生オブジェクトはオリジナルのオブジェクトとして同じコンストラクタを持ち、もっていることを期待されます。
しかし時々カスタムコンストラクタを示すことが必要になります。

@@speciesプロパティはその助けとなります。

Arrayコンストラクタを子classのMyArrayとして使いやすいメソッドを加えるために拡張する際のシナリオを想定してください。

後でMyArray classインスタンスがmap()で使われるとき、
Arrayのインスタンスである必要があり、MyArrayはその子供ではない場合、それをします。

@@speciesプロパティアクセサを定義し派生したArrayコンストラクタオブジェクトを示します。

class MyArray extends Array {  
  isEmpty() {//拡張
    return this.length === 0;
  }
  static get [Symbol.species]() {//プロパティアクセサを定義する
    return Array;//派生オブジェクトを示す
  }
}
let array = new MyArray(3, 5, 4);  
array.isEmpty(); // => false  
let odds = array.filter(item => item % 2 === 1);  
odds instanceof Array;   // => true  
odds instanceof MyArray; // => false  //違うことを示す

静的アクセさプロパティのMyArrayでstatic get [Symbol.species](){}が定義されています。
それは派生オブジェクトはArrayコンストラクタを持つべきだという指示です。
array.filter()メソッドはArrayを返し、配列要素を選別した後に

@@species アクセサプロパティは.map()、.concat()、.slice()、.splice()のようなArrayとTypeArrayメソッドで使われ、派生オブジェクトを返します。
それはmaps、正規表現オブジェクト、プロミスなどの拡張しているものに対して有効で、オリジナルコンストラクタをキープできるのです。

オブジェクトのような正規表現を作成 @@match, @@replace, @@search, @@split

JavaScriptのString プロトタイプは 正規表現オブジェクトを受け入れる4つのメソッドを持っています。

・String.prototype.match(regExp)
・String.prototype.replace(regExp, newSubstr)
・String.prototype.search(regExp)
・String.prototype.split(regExp, limit)

ECMAScript 2015は それらの4つのメソッドは正規表現以外のタイプをプロパティの値とされた結果の関数を「条件」を定義することで、受け入れることができます。

@@match, @@replace, @@search and @@split.

面白いことにそれらのメソッドが定義された正規表現prototypeはsymbolを使うことで定義できます

typeof RegExp.prototype[Symbol.match];   // => 'function'  
typeof RegExp.prototype[Symbol.replace]; // => 'function'  
typeof RegExp.prototype[Symbol.search];  // => 'function'  
typeof RegExp.prototype[Symbol.split];   // => 'function'  

カスタムパターンclassを作成してみましょう。
下の例はRegExpの代わりに使うことができる単純なclass定義です。

class Expression {  
  constructor(pattern) {
    this.pattern = pattern;
  }
  [Symbol.match](str) {
    return str.includes(this.pattern);
  }
  [Symbol.replace](str, replace) {
    return str.split(this.pattern).join(replace);
  }
  [Symbol.search](str) {
      return str.indexOf(this.pattern);
  }
  [Symbol.split](str) {
      return str.split(this.pattern);
  }
}
let sunExp = new Expression('sun');  
'sunny day'.match(sunExp);            // => true  
'rainy day'.match(sunExp);            // => false  
'sunny day'.replace(sunExp, 'rainy'); // => 'rainy day'  
"It's sunny".search(sunExp);          // => 5
"daysunnight".split(sunExp);          // => ['day', 'night']

Expression classは@@match, @@replace, @@search and @@split. を定義しています。
後のsunExp インスタンスは 返すstring メソッドで使われて、だいたい擬似的な正規表現です。

配列要素に対してのオブジェクトをフラットにする@@isConcatSpreadable

————————————————-
以降はただいま翻訳中。。
長いな。。あと3つか。。

withの中のアクセス可能にするプロパティに対しての@@unscopables

終わりに

Enable USB debugging on your Android device
AndroidデバッグをMacPCでやる方法のDocument

ハードウェア端末上でアプリを実行する
Android実機でUSB繋いでもDeveloper Optionが表示されない問題はこれだった。7回タップするって。。

GPUアクセラレーションとposition: relativeによるレイヤー生成について
position relative内でanimation要素があるとそのレイヤー全体がリペインされるのか。。

Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた
でそれを解決させる1つに「backface-visibility: hidden;」ってのもあるんだ。。

他の「わたしもみてる記事」

yarn

IntellIJ IDEA 2016.3 EAP: JavaScript, TypeScript, React and Angular and More

WebSocket大合戦:Clojure、C++、Elixir、Go、NodeJS、Ruby

you might not need JavaScript

新型MacBook Pro発表は10月27日で確定? 待望のApple Pay国内サービス開始も

なりたいな「無ければ作る」エンジニア

解決済 javascript のクラスって継承をしないときでも使ったほうがいいの?

チームで仕事をすることについて

良いエンジニアの定義

わたしもみてる |awesome-redux | Reduxにおけるreducer分割とcombineReducersについて| 等

awesome-redux

人気のFluxフレームワークReduxをさわってみた

中規模Web開発のためのMVC分割とレイヤアーキテクチャ

redux-minimal

react-redux

Learn Redux

Reduxのメソッド
applyMiddleware.jsらへん

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer)
    var dispatch = store.dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware =>; middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

Reduxにおけるreducer分割とcombineReducersについて
combineReducersがやっていること

超訳 Redux Documentation – レジューサ(reducer)

日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。
日和見主義

10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)

TOEIC940点の文系大学生プログラマによるブログ

Constructing the Object Model

文系大学生がJavaScriptを始めて約一ヶ月経って思うこと

他の「わたしもみてる記事」

わたしもみている | マイクロサービスアーキテクチャ | React Storybook | マテリアル デザイン等

マイクロサービスアーキテクチャにおけるAPIコールの仕方とHTMLレンダリング

React Storybook

マテリアル デザイン日本語

【小ネタ】技術者向け:英語のヒアリング勉強法

Angular 2 vs React: The Ultimate Dance Off

React/Redux 使ってみての勘所

MobX

Immutable

fluxフレームワークreduxについてドキュメントを読んだメモ

他の「わたしもみてる記事」

わたしもみている| redux-saga等

yelouafi/redux-saga

Master the DOM
It’s not as hard as you might think

ブログ書いたよ / “株式会社サイバーエージェントを退職します。 – YuG1224 blog” (1 user)

redux-sagaで非同期処理と戦う

ブログが切り拓いた自分のエンジニア人生 / blog-engineer-career

次期MacBook ProとAir 13はやはり10月中に発表か、Air13は早くも第7世代Core搭載との説も

ノマドワークの出費は会社もち リクルートが「お茶代1日2000円出します」

Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい


【React/Redux】わたしもみている | Container Components

Container Components | @chantastic

【Redux】ReactやるにもAngularやるにもとにかくRedux

【Redux】ReactやるにもAngularやるにもとにかくRedux

記事はこのコードについて悪くはないがReactの利点を見逃していると述べています。

// CommentList.js
class CommentList extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return

<ul> {this.state.comments.map(renderComment)} </ul>


;
  }
  renderComment({body, author}) {
    return

<li>{body}—{author}</li>


;
  }
}

これをContainerとComponentを分ける。
なぜ分けるか
・データフェッチとレンダリングの関心を分ける→読みやすいとか保守しやすい
・再利用性が高まる
・型定義を使える(PropsType)

Container
→fetchして子コンポーネントに渡すだけ。stateを扱う

Component
→子コンポーネントはrenderするだけ。propsを扱う

Data structure
Your markup components should state expectations of the data they require. PropTypes are great for this.

コンポーネントはコンテナーからどんなデータが期待されて渡ってくるかを前もってPropTypesとして書いておくことで予想できてバグを見つけられたり、学習コストを下げるのですね。

コンテナー

// CommentListContainer.js
class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
//CommentListとして切り出す。
    return <CommentList comments={this.state.comments} />;
  }
}

コンポーネント

// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);//props継承する
  }
  render() { 
    return

<ul> {this.props.comments.map(renderComment)} </ul>


;
  }
  renderComment({body, author}) {
    return

<li>{body}—{author}</li>


;
  }
}

これはgoodだそうです。
ただ「この記事」に言わせるとここからが本番らしいです。
※「この記事」はReduxのチュートリアルにリンクされている記事で、リンク先の「Presentational and Container Components」文中で、Reduxを学ぶ上で一読すべき記事として書かれています。

ちょっと今日はここまで

でわーー

reference
Container Components | @chantastic

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい

【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

わたしもみている

Angular 2アプリケーションをimmutable.jsとReduxで構築する

エンジニアとしていかに幸せに生き抜くか?まつもとゆきひろ氏が説く「エンジニア・サバイバル」

React Fiberアーキテクチャについて

React – Basic Theoretical Concepts

【関連記事】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

わたしもみている| Immutable Javascript using ES6 and beyond(Array)

前回ここのObjectまで読みました。

今回はArray
immutableなArray。
非破壊メソッドを使おう

pushの代わりに、
Spread Operator

let characters = ['a', 'b'];
let newCharactors = [...characters, 'c'];
console.log(newCharactors === characters)
//false
console.log(characters)
//["a", "b"]
newCharactors
//["a", "b", "c"]
//要素b以外の新しい配列を返す
const whithout = characters.filter(char => char !== 'b');
whithout
//["a"]

//要素bとcを入れ替えた新しい配列を返す
const backInTime = characters.map(char => char === 'b' ? 'c' :char);
backInTime
//["a", "c"]

//大文字にした新しい配列を返す
const shoutOut = characters.map( char => char.toUpperCase())
shoutOut
//["A", "B"]

//2つの配列を足した新しい配列を返す
let characters = ['a', 'b'];
const otherCharacters = ['d','e'];
const moreCharacters = [...characters, ...otherCharacters]
moreCharacters
//["a", "b", "d", "e"]

sort()の返り値とオリジナルの参照先は変わらない。要素順だけ入れ替える

const characters2 = ["b", "d", "a", "c"];
const sortedCharacters = characters2.sort()
sortedCharacters
//["a", "b", "c", "d"]
sortedCharacters === characters2
//true

順序を入れ替えた上で新しい配列を返すにはsliceを使う

const sortedCharacters2 = characters2.slice().sort();
sortedCharacters2 === characters2
//false
characters2
//["a", "b", "c", "d"]
sortedCharacters2
//["a", "b", "c", "d"]

なぜ新しいオブジェクトを生成する方がいいのか??
そんなに新しいオブジェクトを生成してメモリは大丈夫なの??

But that disadvantage is very small compared to the advantages.
欠点は利点に比べて非常に小さいです

One of the more complicated operations in Javascript is tracking if an object changed
JSでより複雑な操作の一つはオブジェクトが変更された場合の追跡です

Object.observe(object, callback) are pretty heavy
Object.observeは相当重たいです。
※記事が古いのか、Object.observeは今では廃止されています

if you keep your state immutable you can just rely on oldObject === newObject to check if state changed or not, this is way less CPU demanding.

もしオブジェクトの状態を不変に保てば古いオブジェクトか新しいオブジェクトかどうかのチェックは
oldObjet === newObject だけで可能だし、これはCPUへのダメージが少ない方法です

Second big advantage is code quality. Making sure your state is immutable forces you to think better of your application structure. It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs. Win, win, right?
第二の大きなアドバンテージはコードの品質です。
状態を確認することは不変オブジェクトがなせることです。
これはアプリケーションの構築への良い考えなのです
It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs.
より関数型なプログラミングを奨励します。バグを除き、コードを追いやすくするのです

Reference
Immutable Javascript using ES6 and beyond

わたしもみてる |【Typescript vs Flow】

Flow

Flow

ここをわたしもみている
https://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/

なぜ型システムを使うか
型システムはコード維持を簡単にさせる

より読みやすくさせ
より解析しやすくさせ
信頼の高いリファクタリングを可能にし
一般的なIDEサポートを可能にし
早い段階でエラーをキャッチできる

わたしにとって一番重要なユースケースは
JSONスタイルデータを扱うときだ
REST payload、configFile,データベースへのオブジェクトなど

TypeScriptは
・Microsoft
・ES6がベースにある
・オプション追加できる(型注釈、可視化、デコレーター)
・コンパイラーはチェックし型注釈を削除する
・最新の1.8はより一般的なチェック機能を加えた
・内部修飾子は型情報を追加できる。pureなJSへの

Flow
ゴールとして実行時エラーをさせないこと
・Facebook
・フローは静的型チェッカーでアプリケーションの中のエラーを素早く見つけるようにデザインされている
・コンパイラーではなくチェッカーだ
・なんの型注釈もなくに動く
・型推論がいい感じだ
・もし型注釈を渡せばbabelによってとても簡単に削除できる

比較
//TypeScript

//1
let obj: string;
obj = 'yo';
//Error Type 'number' is not assignable to type 'string'(数値型は文字列型へ割り当てられない)
obj = 10;

//2
//types can be inferred(返り値型は推測される)
function sayIt(what: string){
 return `Saying: ${what}`;
}
const said : string = sayIt(obj);

//3
class Sayer {
//mandatory(義務的な)
what : string;
constructor(what: string) {
 this.what = what;
}

//return type if you want to
sayIt(): string {
 return `Saying: ${this.what}`;
}
}

Flow

//1
let obj: string;
obj ='yo';
//Error : number: This type is incompatible with string(数値:←この型は文字列型とは不適合だ)
obj = 10;


//2
//一緒
function sayIt(what: string){
 return `Saying: ${what}`;
}
const said : string = sayIt(obj);

//3
//一緒
const said : string = sayIt(obj);
class Sayer {
//mandatory(義務的な)
what : string;
constructor(what: string) {
 this.what = what;
}

RIGHT, PRETTY MUCH THE SAME
そうです。ほとんど同じ!!

これらの基本的な特徴はドキュメントやリファクタリングやIDEのサポートに役立ちます

Non-Nullable Types
コレクションについて

TypeScript

function foo(num: number) {
    if (num > 10) {
      return 'cool';
    }
}
// cool
const result: string = foo(100);
console.log(result.toString());
// still cool?
console.log(foo(1).toString());
// error at runtime (実行時エラー)
"Cannot read property 'toString' of undefined"

TypeScript does not chatch this
TypeScriptはthisを捕捉できない

Flow

function foo(num: number) {
    if (num > 10) {
        return 'cool';
    }
}
// error: call of method `toString`.エラー。メソッドtoStringの呼び出し
// Method cannot be called on possibly null value(nullの可能性がある値にメソッドは呼び出せません)
console.log(foo(100).toString());

Flowはthisを捕捉できる
なぜ??

Flowは返り値の型としての文字列を型推論しない

// error: return undefined. This type is incompatible with string
function foo(num: number): string {
	if (num > 10) {
		return 'cool';
	}
}
//まだエラー
nullable Type(TypeScriptのような)は?をつけることによりnullを可能にする

// nullable type: the one inferred
function foo(num: number): ?string {
	if (num > 10) {
		return 'cool';
	}
}

//修正
// to fix this, we need to check the result(thisを修正するために返り値をチェックする必要がある)呼び出し元にもチェックする
const fooed: ?string = foo(100);
if (fooed) {
    fooed.toString();
}

NON-NULLABLE TYPESは、、

ちょっと脱線。
ドキュメントがそこらへん詳しく書いている
Javascriptにおいて、nullは暗黙的にすべてのプリミティブ型に変換します。
それはオブジェクトの種類として有効です。
それとは対照的にFlowはnullを個別の値になるように考えます。

var o = null;
print(o.x);
//Property cannot be accessed on possibly null value

?T とすることで任意の型を書き込むことによってnullを含めることができるが、、まだエラーとしてチェックする
var o: ?string = null;
print(o.length);
//Property cannot be accessed on possibly null or undefined value

nullチェックをしなくてはいけない
//No errors
var o: ?string = null;
if (o == null) {
  o = 'hello';
}
print(o.length);

このコードではif文の後にoはnullじゃないとFlow推論される

・TypeScriptにおいて型はnullable
・デフォルトのFlowにおいて型はnon-nullable。null-ableTypeにすることも可能

Non-nullable types not yet present in TypeScript ( but there is hope )
non-nullable typeはTypeScriptにおいてまだ実装されていない。でも期待はある←ブログの情報古い??mergeされている

お時間です。
わたしもさらにみている。