kenju's blog

About Programming and Mathematics

React.js

Reactを一年書く中で感じたこと

Compositionによる関心の分離は心地よい Viewを部品ごとに分割し、フロントを設計するComposition Patternsの場合、「今書いているComponentsが画面上のどの部分」なのかが非常にイメージしやすい。 ReactのDesign Principlesとして「Composition」が尊重さ…

bind()は常に新しいインスタンスを返却する

bind(this) とすると返却される関数は常に新しいインスタンスである。 stackoverflow.com 具体例:React Componentsのイベントハンドラーをbind()する場合 問題 たとえば、React Componentsを書いている時、イベントハンドラーを以下のようにbind()する場合…

Draft.js における keydown イベントの処理の流れの詳説

tl;dr エディターのキー入力に対するテストを書く中で、Draft.js の内部実装における KeyboardEvent -> keyDown の処理の流れを理解する必要があったので調べた keyDown イベントは src/handlers/edit/editOnKeyDown.js で処理されている onKeyDown は div >…

Enzyme First Impession as React.js Components Testing Tool

tl;dr 擬似DOM環境を必要としない、ミニマルなShallow Renderingテストが広く使われているが、Shallow Renderingを使うくらいならJestのSnapshot Testingの方がコスパが良い Full DOM Rendering 環境では、JSDOMを用いた疑似ブラウザ環境を前提としており、…

React画像用ライブラリ"react-simple-image"

github.com なぜ作ったか srcSet, mediaConditionなどを宣言的に書けるReact Componentsが欲しかったから React Components libraryを作成し公開するまでの一連の流れを経験するため 特徴 srcSetに指定する、pixel descriptorもしくはwidth descriptorを宣言…

OSS: EnzymeのJSDOMドキュメントのバージョンアップデート

自分の出したPR備忘録。今回は、Enzymeのドキュメントが、最新のJSDOMバージョンに対応していなかったので、修正した。 github.com 解決した課題 ドキュメントのJSDOMのバージョンが古く、最新のJSDOMのバージョンでは動かなかった ポイント copyPropsで、JS…