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

わたしもみている | 破片プログラマーの悲しみ | 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

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

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