「わたしもみてる」タグアーカイブ

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

jflute : https://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らへん

[code language="javascript"]
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
}
}
}
[/code]

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の利点を見逃していると述べています。

[code language="javascript"]
// 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>

;
}
}

[/code]

これを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として書いておくことで予想できてバグを見つけられたり、学習コストを下げるのですね。

コンテナー

[code language="javascript"]
// 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} />;
}
}
[/code]

コンポーネント

[code language="javascript"]
// 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>

;
}
}
[/code]

これは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