タグ別アーカイブ: わたしもみてる

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

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

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

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

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

わたしもみている | 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?
ここらへんをもっと知ればもっと便利になる。。

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

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

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

過去にこういう記事書いて
Immutable.jsを使って参照等価性を保証するのと、Object.assignやArray.reduceを使ってそれするのと何が違うんだろうと思って、
lmmutable.jsを使うユースケースはどんな時かを探っていました。
「 Immutable Javascript using ES6 and beyond」は「lmmutable.JS vs ECMAScript2015」したら出てきた記事です

const person = {
 name: 'john',
 age : 28
}
const newPerson = person;
newPerson.age = 30;
newPerson === person 
//true
person
// {name: "john", age: 30}

これは参照元のageを書き換えてしまいます。
厳密等価演算子でもtrue

freezeしても。。

const myObject = {a: {b: 1}, c: 2};
Object.freeze(myObject);
myObject.a.d = 2; 
myObject
// {a: {b: 1, d: 2}, c: 2}

子供オブジェクトはfreezeできない。

不変オブジェクトにするには、、

const person = {
  name: 'John',
  age: 28
}
const newPerson = Object.assign({}, person, {
  age: 30
})
console.log(newPerson === person) // false
console.log(person) // { name: 'John', age: 28 }
console.log(newPerson) // { name: 'John', age: 30 }

新しいオブジェクトを返します。比較はfalseで同じ参照をもちません。
ちなみにObject.assign()の第一引数にpersonを渡すと、参照元のpersonも上書きますよね。

ここからがへぇだったのですが、
babel-stage2、experimental ES7 draftsでは
下のようなobject spread が使えます

const person = {
  name: 'John',
  age: 28
}
const newPerson = {
 ...person,
 age: 30
}
console.log(newPerson === person);
//false
console.log(newPerson)
//{"age": 30,  "name": "John"}//overrideします

コード

これはいい。。
これだとassignいりませんね。
…はそのオブジェクトをコピーしています。
ageはoverrideしています。
なので上のコードでもし

const newPerson = {
 age: 30,
 ...person
}

こうした場合、
ageは28です。

const obj1 = {a: 1};
const obj2 = {b: 2};

const obj3 = {...obj1,...obj2};
console.log(obj3)
//{"a": 1,"b": 2}

記事ではオブジェクトを削除する方法もあります。
ただこの方法は不変性に欠ける、なぜコードを多く書いて、オブジェクトを配列にして、操作しないといけないのかを問うています。

お時間です。
あしたはArrayの方を追ってみようと思います。

Reference:
Immutable Javascript using ES6 and beyond

【関連記事】
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

わたしもみてる |【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されている

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

わたしもみてる| 近い将来JavaScriptはなくなりブラウザ革命が起こるのか

みてる

WebAssembly

「WebAssembly」がITの未来に変革もたらす|Google、Apple、Microsoft、Mozillaが共同で開発した新概念

JavaScriptデザインパターン

JavaScriptデザインパターン – 第1部:シングルトン、コンポジット、ファサード
TypeScriptやECMAScript2015を扱うにはパターンを知っているか否かが重要とずーーと前から実感している泣

WebGL と GLSL で始める、はじめてのシェーダコーディング(1)

Unityやる前に足元のWebGL勉強しよう。three.jsじゃなく。

でわーー

わたしもみてる
Good bye Flux, welcome Bacon/Rx?

https://medium.com/@milankinen/good-bye-flux-welcome-bacon-rx-23c71abfb1a7#.6zhfv542c

link

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

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

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

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

他のReact記事

フロントエンド記事

github

qiita