Webフロントエンドの開発効率を高く保つための考え方
これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必
Next.jsにStorybook(CSF3.0)を導入してSnapshot TestやUnit Testを実行する | ZUMA Lab
Next.js と Typescript のプロジェクトに Storybook を導入して Snapshot Test や Unit Test を試してみます。 この記事では現時点で prerelease 版の Component Story Format 3.0 (以後 CSF3.0) を使用した Story を作成します。 CSF3.0 については以下公式の記事を参考にしました。 CSF3.0 で 新たに追加される play 関数についても試してみます。 play 関数はフォームの値入力や button のクリックなどユーザーインタラクションを Story で表現できる便利な関数です。 play 関数のおかげで Storybook の表現の幅が広がり、Storybook の導入で Snapshot Test と併せて Unit Test が書きやすくなります。 個人的には Storyb
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
React Hook Form ライブラリの使い方！フォームのバリデーションを実装しよう【TypeScript】 | ノマドクリエイターの執務室
ショウヘイ どうも、ノマドクリエイターのショウヘイ（@shohei_creator）です。 ふーちゃん ブログアシスタントのふーちゃんです。 HTML で構成されるフォームに細かなバリデーションをかけるには、 JavaScript による DOM 操作が必須になります。バリデーション処理を実装する作業は手間が多いので、バリデーション用のライブラリを使う方法が現実的です。 React には、フォームにバリデーションを簡単に実装できる React Hook Form というライブラリが用意されています。 React Hook Form は、 Yup や Zod といったバリデーション特化ライブラリと連携できるため、とても拡張性が高いです。 この記事では、 React Hook Form の使い方について説明します。 ショウヘイ この記事では、 React Hook Form の Version
React Suspense での非同期処理のエラー処理パターン
この記事は 2021 年 9 月、React v17 相当時点での情報に依存しています。 React の Suspense による非同期処理は未だ Experimental な機能ですが、いくつかのデータフェッチ系ライブラリや状態管理ライブラリのインターフェースでサポートされています。 公式ドキュメントに例示された実装 Suspense を利用するときのエラー処理には、公式ドキュメントで ErrorBoundary を使う事例 が紹介されています。「データ取得のエラーの処理はレンダーのエラーと同様に動作」することに由来しています。 エラーレポートと一緒に使うと困る Sentry 等のエラーレポートサービスを利用していて、データ取得の準正常系にあたるエラーは検知したくないが、実行時エラーのような異常系は検知したいときに、この例示を素朴に採用するのでは困ることに気づきました。 ところで、Err
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
