RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想

PageSpeed Insightsは、Googleが提供するパフォーマンス測定ツールです。ウェブページのURLを入力すると、そのページのパフォーマンスをその場で測定して、100点満点中何点のスコアを計算してくれます。内部ではLighthouseというツールを動かして、パフォーマンスを測定してスコアを計算しています。 URLを入力するだけで簡単に利用できるため、ウェブページのパフォーマンスの測定にこれを使っているという開発者の方も多いと思います。とはいえ、このPageSpeed Insightsは常に信頼できるスコアを出してくれるわけではありません。この記事ではその辺りの事情について解説します。 モバイル向けスコアが低く出やすい PageSpeed Insightsでの測定結果では、デスクトップ向けとモバイル向けの2種類のスコアを計算してくれます。モバイル向けのスコアの場合、ネットワーク速

プロダクト開発のアンチパターン プロダクトオーナー（PO）が仕様案を持ってリファインメントや計画に臨み、エンジニアが実現可能性や曖昧さの観点からダメ出しをして手戻りが起こる……スクラムやデュアルトラックアジャイルを志向する組織においては、一度は目にする光景だろうと思います。しかしこれは、以下のふたつの理由からひどいアンチパターンであると言えます。 ひとつには、仕様案を持って臨むPO側の精神的な負担があまりにも大きいやり方だからです。ちゃんとした仕事をしているPOならば、そもそも仕様案なんていう細かいところにたどり着くまでに、とてつもない量の不確実性を捌いてボロボロになっているのです。プロダクトのミッション、戦略、プロダクトゴール、ユーザーの課題、仮説検証の設計、MVPの特定、そういった大上段からのヘビーな分解を繰り返して、ようやくたどり着くのが具体的な仕様案なわけで、それを実装が難しいとか

なぜイスを買うのか？ 俺は都内の狭小物件に住むサラリーマンである。先の見えないテレワーク生活を耐え抜くために、間に合せの作業環境からそろそろ脱出したくなってきた。 先日、うさぎ小屋などと揶揄されそうな6畳にも満たないワンルームの一角に激安電動昇降デスクを導入し、コンパクトながらも作業スペースを整備したのだが、それだけでは飽き足らず今度はそれなりのイスが欲しくなってきた。 人間の欲深さとは恐ろしいものだ。一度「長時間の作業を継続するためにはそれなりのイスが必要だ」と思い込むと買うまで欲は衰えない。 テレワーク生活では寝ている時間以外のほとんどの時間をデスクに向かって、そして椅子に座って過ごす（はずだ。俺のような真面目な勤め人が勤務中にベッドで横たわっているはずはない） 今まで地獄のような座り心地の折りたたみ椅子で過ごしてきた俺である、多少金をかけてもバチは当たらないだろう（と自分の脳に刷り込

コードレビューあるあるなんですけど、レビューする時に「これってなんでこうしてるんですか？」みたいなピュアなコメントを書いてしまうと、その意図がレビュイーに伝わらなくて、「詰められてる」「コードに疑念を持たれている」「修正依頼をされている」「純粋に質問されている」という解釈のブレを生んでしまって物事が円滑にいかないみたいなことは発生します。 コメントする側からするとただ単に質問しているだけなのにどうして・・・と思いがちなのですが、コードレビューに慣れていない人はこういう重要度や意図がはっきりしないコメントをたくさん書いてレビュイーを困惑させがちというのはあるんじゃないでしょうか。 重要度や意図がはっきりしないコメントを書くのが常になってしまうと、GitHubでPRを出してレビューをしてもらってマージするという開発者が何度も何度も回していくワークフローに滞りが発生してしまう、もしくはそれどころ

この記事は、Supershipグループ Advent Calendar 2021の7日目の記事になります。 先日、sshを使用したファイル転送が回線速度と比べて異常に遅いという現象に遭遇したので、その際に行った調査を再現しつつ原因や対策について書いてみたいと思います。 要約 OpenSSHはデフォルトでinteractiveなセッションに af21 、non-interactiveなセッションに cs1 をDSCP値としてIPヘッダに設定する フレッツ網はIPヘッダのDSCP値を帯域優先サービスで使用しており、契約に応じて指定された優先度以外が設定されたパケットの転送は保証されない そのため、OpenSSHをデフォルト設定のままフレッツ網で使うと通信ができなかったり、速度低下などの悪影響を受ける可能性がある OpenSSHがDSCP値を設定しないようにするためには、IPQoS noneを設

ブラウザのアドレスバーで検索できて便利やん。でもね、会社でつかうのはやめとき。 mDNSで同じLAN居る人全員に、このアドレス知りませんか？って検索ワードで聞きおるで。 Firefoxは検索窓がアドレスバーの右にあるからアドレス… https://t.co/zhn1fKxxe2

Alexander Mielke Hellinger--Kantorovich (a.k.a. Wasserstein-Fisher-Rao) Spaces and Gradient Flows

家具販売大手の「大塚家具」は、かつて創業者である父親との間で経営方針をめぐって対立した大塚久美子社長が辞任する人事を発表しました。 過去の業績についての責任を明確にするため、本人から辞任の申し出があったとしています。 発表によりますと、大塚久美子社長本人から、ことし12月1日付けで辞任したいと申し出があり、28日に開いた取締役会で申し出を受理しました。 大塚家具は去年12月に、家電量販店大手ヤマダホールディングスからの出資を受け入れて傘下に入り、経営再建中です。 ことし7月までの3か月間の決算で10億円を超える最終赤字を計上するなど、厳しい状況が続いていますが、会社によりますと、来年4月までの1年間の決算は改善が見込まれるほか、その後の黒字化の道筋もつきつつあるとしていて、会社では、大塚久美子社長がこうしたタイミングで過去の業績についての責任を明確にするため、辞任を申し出たとしています。

大きなサメのぬいぐるみの購入方法について。 背景 最近サメの人気が高まっているのか、サメのぬいぐるみについてよく質問されるようになった。Gawr Guraさんの影響が大きいのかもしれない。つい先日質問してきた人は、サメ好きの友達にプレゼントするつもりらしい。いい友達だ。これまでこういう質問に対しては昔書いたサメを支える技術を紹介していたが、情報が古くなってきたので、この機会に新たに書き直すことにした。 サメの配信を見るサメ 購入方法 2020年10月25日現在では、この大きなサメのぬいぐるみはchumbuddy.comから購入できる。2015年にはamazon.comでも購入できたので、自分はここから購入したのだけど、今は取り扱っていないようだ。惜しいことだ。 chumbuddy.comでは、わた入りザメとわた無しザメが売られている。 体積が増えるので海外からの配送が大変そう 出所不明のわ

Node.js+TypeScriptでバックエンドを書いてると、DIパターンを使いたい場面が結構ある。 いわゆるDIと言うとコンストラクタインジェクションなどクラスありきの方法が思い浮かぶけれども、実際には関数でもDIパターンを書くことができる。単純に関数のパラメータに依存を受け取ればよい。 // 依存を表現する型 interface Deps { appService: AppServiceInterface; } // DIパターンを記述する関数 function DoSomething({appService}: Deps, params: any) { ... } 依存を注入する場合には、引数を部分適用するbind()メソッドを使う。 // 依存を注入 const doSomething = DoSomething.bind(null, { appService: new MyAp

REACT-VFX is a React component library which allows you to add WebGL powered effects to you React aaplication.

初めてまともに携わったシステムはNTT研究所で作られていたCBoCといわれるものであった。内容について詳しくは述べないが、国内では割と先進的でありながらとにかくNTTの事業会社（割と稼いでいる）で使えるものを作ろうというものであった。この時期は研究所は研究だけしていればよいというものではなく事業貢献が求められており、論文になるような研究を生み出すだけでなくそれをどうやってビジネスにするかが重要視されていたのだと思う。このとき作ったものは実際に事業会社で使われ、退職の前後には年間数万円が口座に振り込まれるようになっていた。なお収入なので税金の扱いを間違えないように。しかし特許といえばガッポガポ…というイメージだがそんなに当たることはない。わたしが携わったそのソフトウェアは確かに使われていたが、事業会社のビジネスの中核を支えていくようなものにはならなかった。ならなかったのでメンテナンスフェーズ

概要 インターネットに晒されているWebサービスでは TV等で紹介されたことによる大量流入 悪意ある人物からの攻撃 クライアントのバグに依る大量リクエスト など、本来想定していた以上のトラフィックが来ることはよくあります。 単純にシステムを構築すると大規模トラフィックに対応できずシステムがスローダウンしてしまうため、何かしらrate limitをかけておいた方が良いです。 ただしrate limitと一口に入っても色々あるため、今回は主なrate limitアルゴリズムを紹介します。 Leaky bucket Leaky bucketはデータ転送レートを一定にする（＝上限を設定する）アルゴリズムです。 下の図のように、様々な流量の水流がそのバケツに流れ込んでも小さな穴からは一定の水流が流れ出す仕組みです。 ref: What is the difference between token

<text x="40" y="80">Hello World</text> <path fill="none" stroke="blue" stroke-width="3" d="M 28 152 C 28 152 49 78 100 67 C 151 56 210 164 255 148 C 300 133 295 59 295 59" />

React勉強会@福岡 vol.2での発表資料

UIデザイナーと言うと、「アプリとかウェブサービスの見た目を作ってくれる人でしょ」みたいな至極ざっくりとした認識の人が業界内でもいるわけですが、実際には見た目だけを作っているわけではなく、開発プロセスの中で様々な中間成果物を作ったりします。この記事では、中間成果物という観点から、UIデザイナーがやっていることを解説したいと思います。 概念モデル図 クライアントワークの場合だと、クライアントの求めているモノ、具体的にはアプリやウェブサービスが、どのような情報の構造を持っているか、どのような語彙を持っているかをまず理解する必要があります。 ここで単に打ち合わせしてヒアリングしただけだと、齟齬や漏れが生じたりして後で痛い目を見ることがあります。これを防ぐために概念モデル図を作成して、クライアントの前で説明してフィードバックをもらって認識をすり合わせます。 この概念モデル図を作成する仕事は、必ずし