てらブログ

てらブログ

日々の学習の備忘録

2023-07-01から1ヶ月間の記事一覧

forwardRefってなんだっけ

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

Tailwind CSS ・ tailwind-mergeについて

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

JSON.stringify()・.json()について

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

graphql-request, axios, fetch関数、何が違うのか比較検討してみた

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

Reactのチャートライブラリを比較検討してみる

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

shadcnを使用してみる

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

Tanstack Queryをキャッチアップしたい

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

アジャイルサムライ読んだ

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

SCRUM BOOT CAMPを読んでみた

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

Next.js(Using App Router)のドキュメントを読んでServer Componentsの要点整理してみた

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

How React server components work: an in-depth guideを読んでServer Componentsについて理解する

目的 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…

enumは使わずにas const等でreadonlyのconstを作成することについて

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

ReactでTrelloっぽいタスク管理アプリの作成

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