Nova.js - A collection of dependency-free React hooksA collection of dependency-free React hooksCarefully developed React hooks that you can copy and paste into your projects.
ReactでChrome拡張機能を作るメモ
はじめに Chrome拡張機能を作る機会があったのでその時のメモです。 ライブラリ選定 以下のライブラリを使用する。 React TypeScript Vite Material-UI prettier 選定基準は新しすぎず古すぎない。 プロジェクトの作成 プロジェクト作成は以下のサイトを参考に行う。 vite3がbeta版なので、vite2を使用する。 プロジェクトの設定 MUIは以下のサイトを参考にインストールする。 prettierは以下のコマンドでインストールする。 . ├── manifest.json ├── package-lock.json ├── package.json ├── src │ ├── background.ts │ ├── content.ts │ └── popup │ ├── App.tsx │ ├── index.css │ ├── index.ht
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
[Next.js] Storybook
TypeScriptベースのNext.jsプロジェクトでStorybookを使ってコンポーネント主導開発をしてみましょう。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトにStorybookを入れてコンポーネント主導開発(Component Driven Development)をやってみましょう。 Storybookここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/6.storybookブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポ
![[Next.js] Storybook](https://cdn-ak-scissors.b.st-hatena.com/image/square/42c65e8db30c6c67f722dab5a657df0845bb84a3/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Fstorybook%2Fbackground.jpg)
[Next.js] MUI
TypeScriptベースのNext.jsにUIライブラリであるMUI(Material UI)を追加して使う方法について説明します。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトでUIライブラリであるMUI(Material UI)をインストールして、使う方法について説明します。 MUIここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/8.muiブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポーネント追加[Next.js] テスト[
![[Next.js] MUI](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56373db1eec167d81178ce358ce2ada3a0e1516/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Freact%2Fnextjs%2Fbackground.jpg)
useReducer + useContext + Typescriptに慣れよう
概要 以下の記事で「useReducer + Typescript」について記事を書きました。 今回はその第 2 弾として、useReducer での状態管理を子のコンポーネントでも使えるようにするために、 useContext と組み合わせた場合にどのようにプログラムを書けば良いかをご説明します。 想定読者 React がなんとなく書けるレベル以上の方 Typescript が基礎レベル以上の方 (型についてわかれば十分) React の useReducer と useContext の使い方がなんとなくでもわかっている方 useContext と useReducer を組み合わせる際に Typescript でどう書くと良いのか悩んでいる方 もし、useReducer について、どのように書けばいいかまだわからない方は、 概要に張りましたリンクの記事を読んでいただければと思います。
useReducer+Typescriptに慣れよう
はじめに これまで React+Typescript での開発において、state 管理を useState で主に扱っていました。 それはなぜか？ ↓ React で最初に useState を学ぶから!!! その後に useReducer を学ぶものの、「useState で state 管理できるからいいじゃん」と考えることを放棄しちゃいました。。。 結構いろんな記事で useReducer と useState の違いを見ていると、 「useState より useReducer の方が良くね？」と思ったので、ここ数か月で useReducer を試しています。 今回、useReducer+Typescript に関して、どのように記述をしていけばよいか手順をまとめました。 想定読者 React がなんとなく書けるレベル以上の方 Typescript が基礎レベル以上の方 (型につ
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。
制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
React with TypeScript Cheatsheet
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
Fower
Atomic PropsWrite styles with Atomic Props, rapid to develop complicated UI by composing Atomic Props. Scoped styleBorned with scoped styles, So don't worry any conflicts due to the globalnamespace. Type SafePerfect support for TypeScript, which bring Type definition,IntelliSense,Self documentation.
Reactコンポーネントの定義にFCではなくVFCを使う - いけだや技術ノート
[RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped [@types/react] add VoidFunctionComponent type which does not accept "children" by awmottaz · Pull Request #46643 · DefinitelyTyped/DefinitelyTyped https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/ 簡単に言うと React.FCのpropsの型定義には暗黙的にchildrenが含まれてしまう childrenが必要ない
ぼくのかんがえたNext.jsの構成
はじめに 普段開発している Next.js プロジェクトの構成がなかなかいけてるんじゃないかということで、その構成を公開しちゃおうというお話。ほんとはタイトルをぼくがかんがえたさいきょうのNext.jsの構成にしたかったけどひよりました (今回の記事を作るにあたり改めて一から Next.js のリポジトリ作ったら husky のバージョン上がってたり、eslint-config-prettier の v8 系になって config の書き方ちょっと変わってたり、時代は移り変わるのです・・) 意外と手順書いていくと長くなったので一部coming soonになっているものは確固たる意思を持って、随時追記します 更新履歴 2021/04/01 css modules が storybook で上手く呼べてなかったので修正、あと storybook のバージョンアップ 2021/03/31 なんと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【TypeScript】ReactとCRXJS Vite Pluginで作るChrome拡張機能
ReactではじめるChrome拡張開発入門
