FYI: React Confの動画 https://youtu.be/pj5N-Khihgc https://youtu.be/ytudH8je5ko (個人的)React v18のメイン Suspense automatic batching useDefferedValue hook startTransition 今回はReact18と言うよりSuspenseの話になります Suspenseによって何が変わるのか UX面 ユーザーに対して表示できるところから段階的にビューを表示させることができる 重たい処理が必要なところは完了後に表示させる コード面 ビューの要素だけをJSXに書くことができる isLoading&&<Loader/>みたいな奴がいらなくなる Apollo,React Queryと組み合わせることでfetch on renderとかfetch then render

『ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ』 Mark Richards, Neal Ford　著、島田 浩二　訳 2022年3月8日発売予定 436ページ ISBN978-4-87311-982-3 定価4,180円（税込） ソフトウェアアーキテクチャとは、ソフトウェアシステムの成功に欠かせない重要な土台です。そのためソフトウェア開発者には、効果的なアーキテクチャを実現するスキルが求められます。本書は、そうした効果的なアーキテクチャを設計、構築、維持するアーキテクトになるために必要なスキルや知識を、現代的な視点から整理して包括的に解説する書籍です。 ソフトウェアアーキテクチャの定義から、アーキテクトの役割、モジュールや結合、アーキテクチャスタイルといったアーキテクチャ設計の基礎、チームやステークホルダーと効果的にコラボレーションしていくために必要なソフ

「買い物に行ったとき、急激な値上がりを強く意識し始めたのが昨年の夏ごろだった」と話すのは米オレゴン州在住のジャーナリスト・岩田太郎氏。340グラムのベーコンが4ドルくらいから、8～9ドル（約900～1000円）に跳ね上がったという。品不足の半導体を使用したパソコンの価格も高止まりしており、買い替えがしにくい状況だ。散髪料金も15ドルくらいだったのが、25ドルまで値上がりしている。「これだけ急激な高騰は記憶にない」（岩田氏）。 西海岸ロサンゼルス（カリフォルニア州）在住のジャーナリスト・土方細秩子氏も「地元スーパーでは店頭の棚がスカスカ。商品の値段も驚くほど上がっていて欲しいものが手に入らない」と困惑する。ロス港近郊ではコンテナ内の商品を狙った略奪事件も頻発。米市民の不満が高まっている。 米国ではインフレの指標とされる消費者物価指数（CPI）の上昇率が2021年12月に前年同月比7％上昇と、

概要 Digest認証（digest authentication）とは、HTTPでユーザー認証を行う標準仕様の一つで、認証情報をハッシュ化して送受信する方式。データの伝送経路上で第三者に盗み見されてもパスワードなどを盗み取られることを防ぐことができる。 Webコンテンツを送受信するプロトコル（通信規約）であるHTTP（Hypertext Transfer Protocol）には、特定のリソース（ファイルやフォルダなど）へのアクセスを一部のユーザーに制限し、アクセスを試みた際にユーザー認証を行う仕組みが定義されている。 Digest認証はそのようなHTTP認証の手順の一つで、ユーザー名やパスワードなど認証のために必要な情報をそのまま送らず、ハッシュ関数により算出したハッシュ値のみを送る。ハッシュ値から元になった値を効率よく推測することはできないようになっており、攻撃者がやり取りを盗聴しても

React server components (RSC) is an exciting new feature that will have huge implications on page load performance, bundle size, and how we write React applications in the near future. We at Plasmic make a visual builder for React, and we care a lot about React performance — many of our customers use Plasmic to build performance-critical marketing and e-commerce sites. And so, even though RSC is s

基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの

BtoB SaaSの会社でDDDを活用して事業を成長させてきた中で、DDDのプラクティスの実践という面ではかなり大きな成果が得られました。 しかし、事業を成長させるという点において、DDDのプラクティスだけではうまくいかないこともあり、別のアプローチも同時に試行錯誤しています。 この発表では、うまく行ったプラクティスの内容と、カバーできなかった課題、そこに対する現在の取り組みについて紹介します。 ドメイン駆動設計 サンプルコード&FAQ https://little-hands.booth.pm/items/3363104 ドメイン駆動設計 モデリング/実装ガイド https://little-hands.booth.pm/items/1835632 ドキュメント内のブログ記事URL https://little-hands.hatenablog.com/entry/2020/12/22/

2021年8月4日紙版発売 2021年7月30日電子版発売 森下光之助　著 A5判／256ページ 定価2,948円（本体2,680円＋税10%） ISBN 978-4-297-12226-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 機械学習の研究開発が急速な勢いで進んでいます。理論研究はもちろん，機械学習手法が実装されたオープンソースのパッケージ開発も進み，それらを実務で利用するためのノウハウも蓄積されてきています。結果として，機械学習をはじめたばかりの入門者でも比較的高い精度の予測モデルを構築できるようになりました。 Deep Learning, Grad

Payment and address form best practices Stay organized with collections Save and categorize content based on your preferences. Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible. Well-designed forms help users and increase conversion rates. One small fix can make a big difference! Here is an example of a simple payment form that demonstr

Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

レガシーコード改善ガイド（マイケル・C・フェザーズ ウルシステムズ株式会社 平澤 章 越智 典子 稲葉 信之 田村 友彦 小堀 真義 ウルシステムズ株式会社）｜翔泳社の本 からなるほどと思ったところのピックアップ、読書感想文です。以下目次は紹介ページ からの引用です。感想のハイライトを書くと、第24章　もうウンザリです。何も改善できません が読めただけでも良かったです。レガシーコードで「もうウンザリです。何も改善できません」と思っている人はこの章だけでもどうにかして読むと良い... 。 第1部 変更のメカニズム 第1章　ソフトウェアの変更 1.1　ソフトウェア変更の4つの理由 1.2　危険な変更 レガシーコードとは、単にテストのないコードである。 テストのないコードは悪いコードである。どれだけうまく書かれているかは関係ない。どれだけ美しいか、オブジェクト指向か、きちんとカプセル化されている

皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ

最強の WSL 環境を作る まあ、何が最強なのかよくわからないのですが。 WSLg は GUI が動いて音もなるので大変便利なのですが、systemd が動作していない弱点があります。LXD を多用している身としては結構しんどいのですね。 snapd が使えないので、JetBrains の開発ツールをインストールするのもちょっと面倒。まあ、Ubuntu Make を使えばいいのでそれほど気にはしていないのですが... というわけで、定期的にいろいろ試している今日この頃、ようやく自分が常用しているものが全部動く環境が作れました。 セットアップ (2022/01/11 追記) 手順は、入力するコマンドを PowerShell だったり、WSL だったりといりみだれます。次のルールで書いていますので、間違えないようにしてください。 プロンプトが > のときは PowerShell に入力してくだ

これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必

制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React

Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and AngularToss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences. Read the Docs(or check out query.gg – the official React