KDE BLOG

Webデザインやコーディングについて書いています

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

React.js Redux JavaScript

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

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

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

React.js Redux JavaScript

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

react-redux.js.org

続きを読む

React Context APIを理解する

React.js JavaScript

ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感（？）を感じたので、現実から逃げずにちゃんと勉強していくことにしました。
今回は 下記公式ドキュメントを元に 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

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

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
続きを読む