valid,invalid

関心を持てる事柄について

React

Node.js/React周辺プロジェクトステータス (2021年12月時点)

個人的な観測範囲にある Node.js / React 関連のプロジェクトなどについて 2021 年 12 月時点の情報メモ。 ここ 2 年ぐらいコンシューマー向けの SPA や Node.js アプリケーションを書いておらず、react-admin で作った管理画面*1を書いているぐらいなのだが…

React Adminの感想

marmelab.com A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab. Reac…

React AdminのExporter type definitionを修正した

React AdminにはExporterという機能がある。 Exporter feature https://marmelab.com/react-admin/doc/3.10/List.html#exporter にならってjsonexportのようなライブラリと組み合わせれば数行〜数十行のコードでリストをCSV等で出力できる。 // in PostList.…

React Adminで開発しているSPAのReactを17.0へupgradeした

業務で扱っているSPAのReactバージョンを17.0にアップグレードした。 reactjs.org 対象のSPAの開発が始まったのが2020年内で元々16.13からスタートしていることもあり、production codeに関するブロッカーは1つもなかった。 ちなみにReact Admin 3.10.4を使…

react-use-kana v2.2.0 ユーザーの入力文字列からひらがなを抽出する

react-use-kanaという、フォームでのよみがな入力支援のための npm package の内部実装をガッと書き換え、入力文字列からよみがなを抽出する処理を自前で書いてみた。 背景 同 package を作って公開したことは以前にも記事に書いた。 ReactのContextとHooks…

#jsconfjp 2019 で Migration from React Native to PWA という発表をした

JSConf2019 記念すべき第一回の*1のJSConf Japanで『Migration from React Native to PWA』というタイトルの発表をしてきた。 登壇に関して 資料 発表では触れなかった余談は泣く泣く削ったトピックなので参照されると嬉しい。 今回は発表資料を作ったり練習…

ReactのuseStateで日本語のふりがな入力を支援するhook書いた

半年以上前にReactのContextとHooksで日本語のふりがな入力を支援するコンポーネント書いた - valid,invalidという記事を書いたが、このときは何もわかってなかったということがわかった。 長々とContext, Provider, useReducerあたりのことを書きましたが、…

ReactのContextとHooksで日本語のふりがな入力を支援するコンポーネント書いた

(2019-09-22追記) この記事の内容と公開したライブラリはdeprecatedとしました。詳しくは ReactのuseStateで日本語のふりがな入力を支援するhook書いた - valid,invalid 参照 漢字を入力したときにふりがなを自動入力する機能をサポートするためのReact comp…

React で SVG を描画するための use タグでは xlinkHref を使う

React で use tag 使うときの躓き 結論 sprite - SVG use tag and ReactJS - Stack Overflow にある通り xlinkHref を使うとよい。 <svg> <use xlinkHref="#my-logo" /> </svg> 古いバージョンでは dangerouslySetInnerHTML を使うしか回避策が無かったようだが、今ではこの方法は避けたほうが良い。…

JavaScript が動作する Capybara の feature spec でブラウザのコンソールを確認する

結論 page.driver.browser.manage.logs.get(:browser) 調べた経緯 フォームの text input に対する fill が働かないのでどうしたかと思い、Selenium で操作中のブラウザをのぞいてみると React の component が一切 render されていなかった。 どこかで Java…

Trade-off Sliders アプリ作った

先週に会社でトレードオフスライダーを使った議論を初めて行ったところ、とても良い体験になったので、今度機会があったときに即席で使えるようなスライダーアプリを作ってみた。 URL: https://ohbarye.github.io/trade-off-sliders/ Code: https://github.c…

npm run eject で create-react-app はアプリケーションの長寿を保証する

create-react-app すごい。React アプリを開発する環境構築が圧倒的に楽になった。 開発も素早く始められて build も一瞬で出来るように用意されている。Rails なんかもこうやって参入障壁を下げていくことで広まったのかなと思う。 npm run eject まだ始め…