「わたしもみてる」タグアーカイブ
わたしもみている | 破片プログラマーの悲しみ | Promiseは常に非同期?
・jflute : https://d.hatena.ne.jp/jflute/20160330/fragramming
わたしもみている | 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;」ってのもあるんだ。。
わたしもみてる |awesome-redux | Reduxにおけるreducer分割とcombineReducersについて| 等
・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月現在)
・Constructing the Object Model
わたしもみている | マイクロサービスアーキテクチャ | React Storybook | マテリアル デザイン等
・マイクロサービスアーキテクチャにおけるAPIコールの仕方とHTMLレンダリング
・Angular 2 vs React: The Ultimate Dance Off
・MobX
わたしもみている| redux-saga等
・Master the DOM
It’s not as hard as you might think
・ブログ書いたよ / “株式会社サイバーエージェントを退職します。 - YuG1224 blog” (1 user)
・ブログが切り拓いた自分のエンジニア人生 / blog-engineer-career
・次期MacBook ProとAir 13はやはり10月中に発表か、Air13は早くも第7世代Core搭載との説も
・ノマドワークの出費は会社もち リクルートが「お茶代1日2000円出します」
・Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい
【React/Redux】わたしもみている | Container Components
Container Components | @chantastic

記事はこのコードについて悪くはないが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が付くときだけ猫になるカウンター】