【入門】Figmaで作ったデザインをReactアプリに連携する – Qiita

はじめに 今回はAWS Amplify Studioを利用してFigmaで作成したデザインをReactアプリに連携する方法について解説します。 「AWSなんて触ったことないよ！」「Reactも触ったことないでやんす！」って人でもサクッとできるような内容なので読んでいただければなと思います。 目標成果物 Figmaで作成したカードコンポーネン…

そのファイル、本当に hooks/・utils/ に入れるんですか？React プロジェクトを蝕む「技術駆動パッケージング」 – Qiita

太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやすくしたモノです。元のスクラップのほうが簡潔な解説です。 翌日 Slack 「ｽｯｺｺｺ」 お客さま @太郎くん すみません トーストに関するバグです。 『商品をカートに入れました』トーストが表示されてるときに 『通信エラーです』トーストを…

そのファイル、本当に hooks・utils に入れるんですか？React プロジェクトを蝕む「技術駆動パッケージング」 – Qiita

太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやすくしたモノです。元のスクラップのほうが簡潔な解説です。 翌日 Slack 「ｽｯｺｺｺ」 お客さま @太郎くん すみません トーストに関するバグです。 『商品をカートに入れました』トーストが表示されてるときに 『通信エラーです』トーストを…

JavascriptからTypescriptへ1人で5万行修正し、移行した話 – Qiita

環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-…

はじめに – NestJSの強化書 βversion

本書の目標は、本読者がNestJSをすぐに実務で利用できる(具体的に言えばNestJSで簡単なプロダクトを開発できる)ように、最短ルートに読者を導く一冊になることです。本書は、NestJSの網羅的なドキュメントではありません。取り扱う内容は頻出する機能に絞って、「実務でNestJSを扱うなら、最低限ここだけは理解しておこ…

React メジャーなパッケージを使った開発とテストのチュートリアル

有名どころのReact Query、React Hook Form、Redux Toolkitを使ってシンプルなアプリを作る。 APIへのリクエストに関する状態管理をReact Queryで、フォームの入力状態の管理をReact Hook Formで、アプリの状態管理(ユーザーのログイン状態など)をRedux Toolkitで行う。APIクライアントにはaxiosを使用する。また、テス…

【入門】フロントエンドのテスト手法まとめ – Qiita

はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直し…

【React】useTransition でページング UI のユーザー体験を向上させる – Qiita

よくある UI のひとつにページング UI があります。ユーザーが画面を開いたら Web API にページ番号(またはカーソル)を渡してデータの配列を取得して画面に表示します。ユーザーが「次のページ」「前のページ」または特定のページ番号へ移動するボタンをクリックすると、新しいページ番号で再度 Web API にリクエストを…