kenju's blog

About Programming and Mathematics

React.js

Gave a talk at TOKYO Rails Meetup #37

I gave a talk at TOKYO Rails Meetup #37. Thanks for coming! Tweets Tokyo Rails Meetup #37 just started! Tonight, @itiskj is giving us a talk about Frontend Re-Architecture of a Decade-Old Rails App! pic.twitter.com/qa2z5h4ySM— TOKYO Rails …

Reading Notes of "The Road to GraphQL": "What is GraphQL?" Section

Where can I get the book? https://www.robinwieruch.de/the-road-to-graphql-book/ What is GraphQL? an open source query language created by Facebook Facebook used it internally for their mobile applications since 2012, as an alternative to t…

GraphQL First Impression

最近 10 年超えの Rails App に GraphQL/React/Apollo を導入した。 10年超えの Rails App に GraphQL/React/Apollo をガッと導入した。目指したいのはまさにここに書いてあるような、複雑な Legacy System をカプセル化したアーキテクチャなんだよな https:…

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…