KDE BLOG

バイブス

bindActionCreators を使うと何がいいのか実際コードを書いて理解する

前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。

  • カウンターアプリ ver.1
    • コード(ファイル名押下でコード展開)
      • redux
      • container component
      • presentational component
      • エントリーポイント
    • Action Creators だけのオブジェクトを渡す
    • dispatch を引数に取った関数を定義
    • bindActionCreatorsを使った方法
  • カウンターアプリ ver.2
  • まとめ
続きを読む

【React Redux】mapStateToProps の公式ドキュメント訳

React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google 翻訳の力で訳したので、自分用にメモ。

react-redux.js.org

続きを読む

React Context APIを理解する

ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感(?)を感じたので、現実から逃げずにちゃんと勉強していくことにしました。
今回は 下記公式ドキュメントを元に Context API について理解したいと思います。

ja.reactjs.org

  • Context APIの使い所
  • サンプル完成版
  • まとめ、感想
続きを読む

名前付け大全を読んだメモ

WEB+DB PRESS VOL.110 の特集「設計も、実装も、ここから始まる!名前付け大全」を読んだメモです。

  • 第1章 「良い名前」とは何か
    • なぜ名前付けが重要なのか
    • 悪い名前の問題
      • 理解が困難
      • 勘違いが起こる
      • 変更が難しい
      • 読みにくい
    • なぜ名前はあるのか
  • 第2章 名前付けの理論
    • 良い名前とは
    • 適切な名前とは
    • 名前の意味と挙動の不一致 3つパターン
    • シンプルさを保つ:適切な名前の基準の一つ
    • 正しい書き方
  • 第3章名前付けの実践
    • パターン1. 名前の意味と挙動がずれている
    • パターン2. 名前の意味と挙動がずれている
    • パターン3. 名前の意味が広すぎる
    • ケーススタディ1:安易な単語を選ぶ
      • check は真偽がどちらかよく分からない
    • ケーススタディ2:重要な単語を不用意に使ってしまう
      • スコープなしで重要な単語を使ってしまう
      • 役割が抜けている
    • ケーススタディ3:実装変更により、既存の名前の意味が変わってしまう
    • もうひとつの基準:シンプル
  • 第4章 英語の壁の克服
    • 品詞
    • 時制・相・法助詞
    • 語彙
    • スペリング
    • 誤読・誤解を防ぐ配慮
  • 第5章 さらなる効率化の手法
  • 読んだ感想
続きを読む

【webpack速習】vol.13: Build Performance

下記ページのざっくりとした翻訳。

webpack.js.org

  • General
    • Stay Up to Date(最新に保つ)
    • Loaders
    • Bootstrap
    • Resolving
    • Dlls
    • Smaller = Faster
    • Worker Pool
    • Persistent cache(永続キャッシュ)
  • Development
    • Incremental Builds
    • Compile in Memory
    • stats.toJson speed
    • Devtool
    • Avoid Production Specific Tooling(production 固有のツールを避ける)
    • Minimal Entry Chunk
    • Avoid Extra Optimization Steps(余分な最適化手順を避ける)
    • Output Without Path Info
    • Node.js Version
    • TypeScript Loader
  • Production
    • Multiple Compilations
    • Source Maps
  • Specific Tooling Issues(特定のツールのイシュー)
    • Babel
    • TypeScript
    • Sass
続きを読む