目的 リンクの種類 next/link useRouter Router LinkコンポーネントとuseRouterの使い分け 感想 参照 目的 Next.jsの内部リンクの最適解を考えたい リンクの種類 next/link Linkコンポーネントをimportして使用する import Link from "next/link"; // 省略 <Link href="/">B</link>…

目的 about CVA usage Headless UIとの組み合わせ 感想 残課題 参照 目的 表題をやりたい。 用途としては、共通コンポーネントを作成するため。 1つの画面内でのスタイルをまず作成し、その後異なるスタイルが出た場合にvariantsを追加するだけで対応できる…

目的 モックの種類とそれぞれの特徴 ハンズオンしてみた 感想・残課題 目的 そもそもどんな選択肢があるのか調査する。 プロジェクトで使用されている方法（Apollo Server）についてハンズオンしたい。 モックの種類とそれぞれの特徴 Next.jsでのモックの選…

目的 結論 なるべくコンポーネント分割し、JSXの可読性を上げる テンプレートリテラルで改行する tailwind-mergeを使用する 参照 目的 ルールを決めることで、自由度の高いTailwind CSSをちゃんと管理していきたい。 結論 なるべくコンポーネント分割し、JSX…

目的 技術書で本当にスキルアップできる読み方とは？『「技術書」の読書術』の著者は「動くコードを自分で書く」 【技術書の読書術 実践してみた】3の発想で3冊の本を読んでみた 学習を効率化してくれる読書術 学習を加速させるインデックス読書術 目的 現状…

目的 forwardRefについて about usage 型 最終的なコード 目的 下記コードを理解したかった。 import { ReactNode, forwardRef } from "react"; export const InputSelectBox = forwardRef< HTMLSelectElement, JSX.IntrinsicElements["select"] & { childre…

目的 tailwind-merge about usage ※注意点 目的 Tailwind CSSについて基本的なところは理解できてきた。よりコードの質を高めるためにtailwind-mergeについて調べてみた。 tailwind-merge about TailwindのCSSクラスを、スタイルの衝突なしにJSに効率的にマ…

背景 それぞれについて 結論 背景 データフェッチする際に、JSON.stringify()や.json()のメソッドが出てきたが、それぞれが何をしているのか良く分かっていなかった。 それぞれについて JSON.stringify()・・・JavaScriptの組み込みメソッドで、JavaScriptの…

目的 graphql-requestとは 主な特徴 使用例 シンプルな例 react-queryと組み合わせて使用してみる axios・fetchで置き換えてみる axiosの場合 fetch関数の場合 それぞれのメリデメ graphql-request axios fetch 目的 graphql-requestがプロジェクトで使用さ…

目的 実装が必要になりそうな仕様 npm trends 選定基準 検討一覧 Tips SVG（Scalable Vector Graphics） Canvas どちらを使うべきか まとめ 参照 目的 chartライブラリの選定に先駆けて、各ライブラリの比較を行いたい。 仕様やデザイン（Figma）がFIXしてい…

目的 インストール～コンポーネントの使用 目的 プロジェクトでTailwind CSSを使用することになったが、Tailwindのみだとstate周りがつらいのでRadix UIを使うことにした。 shadcnであればコピペでTailwind+Radixのコンポーネントサンプルを使用することがで…

目的 Tanctack Queryについて about 簡単な使い方 豊富なオプション 残課題 目的 Tanstack Queryをプロジェクトで使用することになった。 元々データフェッチやAPI周りの知識も少なかったので、この機会にしっかりキャッチアップしたいと思った。 Tanctack Q…

目的 要点整理・感想 1部 アジャイル入門 1. ざっくりわかるアジャイル開発 2. アジャイルチームのご紹介 2部 アジャイルな方向付け 3. みんなをバスに乗せる 4. 全体像を捉える 5. 具現化させる 3部 アジャイルな計画づくり 6. ユーザーストーリーを集める …

目的 スクラム体制で開発を行うことになり、チーム全員でSCRUM BOOT CAMPを読むことになった。 各章をまとめながら自分なりに感想を持ちたいと思った。 まとめと感想 1. ロールを現場にあてはめる 1. ロールはPO・SM・開発チーム 2. ロールはチーム内での責…

目的 主な特徴 サーバーコンポーネント クライアントコンポーネント サーバーコンポーネントとクライアントコンポーネントの使い分け 使用の際の詳細パターン クライアント・コンポーネントの末端への移動 クライアント・コンポーネントとサーバー・コンポー…

目的 RSCって何？ Server Side Rendering(SSR)と一緒？ RSCはここがすごい RSCの詳細 残タスク 目的 How React server components work: an in-depth guideを読んで要点整理する。参照： How React server components work: an in-depth guide RSCって何？ R…

TypeScriptのEnumについて enumとは 生成されるJavaScriptが想定外の挙動を示す: 実行時にenumの値が変更可能である: as const構文を使用してreadonlyな定数を作成する TypeScriptのEnumについて enumとは enumは、関連する定数のグループを一緒に束ねるため…

将来的にドラッグアンドドロップでリストの並び替え機能の実装がある為、簡単にハンズオンしてみた。使用したライブラリは「react-beautiful-dnd」。 参照： GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists wit…

背景 制御コンポーネント・非制御コンポーネントでのReact Hook Formの使い方の違いについて そもそも制御・非制御コンポーネントとは 制御コンポーネントではControllerを使用する Chakra UI Zodで少し複雑なバリデーションを作成する 背景 前回の残課題だ…

背景 そもそもライブラリを使用しない場合 React Hook Formの使用 React Hook Formのバリデーション シンプルなバリデーション 複数のバリデーション デフォルト値 バリデーションの発火タイミング 入力状態のチェック 詳細な入力チェック Zodの利用 課題・…

NestJS・ReactでToDoリストを作成した。基本的なCRUD機能を実装し、GraphQLを用いた開発を一通りやることで理解が深まった。もっと確認したいことがたくさんあるので、引き続き手を動かしていきたい。残タスク： ・BFFについて確認したい ・Apollo Clientで…

まずGraphQLとNestJSについて基本的なことをまとめてみた。 GraphQL GraphQL 特徴 スキーマについて NestJS NestJS 特徴 Moduleについて Resolverについて Serviceについて Dependency Injection GraphQLを扱う方法 GraphQL GraphQL 特徴 Facebookによって開…