クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 先日、クラスメソッドのReact事情大公開スペシャルというイベントにて、「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました。 登壇資料 登壇資料はこちらです。 フロントエンド開発、順調に進んでる？ 会場でも来場者のみなさんに軽く聞いてみましたが、首を横に振られている方が多かったように思います。 （残念ながら私もNoです🥺） なぜそんなに苦労しているのか、それはフロントエンドならではの難しさがあるからだと私は考えています。 一つは変化の激しさです。 Reactを例にとって考えてみると、直近では従来からあるSPA・クライアントサイドでのレンダリングが主流だったものからServer Componentが出てきたりして、関心がサーバ
React lifecycle Hooks diagram, Functional Components visualized
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
const IMAGE_TYPES = ['image/jpg', 'image/png']; const MAX_IMAGE_SIZE = 5; // 5MB // バイト単位のサイズをメガバイト単位に変換する const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => { const result = sizeInBytes / (1024 * 1024); return +result.toFixed(decimalsNum); }; const schema = z.object({ file: z // z.inferでSchemaを定義したときに型がつくようにするため .custom<FileList>() // 必須にしたい場合 .refine((file) => file.length !== 0, { messag
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
始め すべての始まりは「When to useMemo and useCallback」という記事でした。これを見て「あれ？useCallbackってパフォーマンス向上するやつじゃなかったの？」混乱し、いろいろリサーチしたので、整理したいと思います。 1. 基礎知識 Reactコンポーネントは自分のstateが変更された場合、渡されるpropsが変更された場合に再レンダリングされる。 親コンポーネントが再レンダリングされると子コンポーネントも一緒に再レンダリングされる。この時子コンポーネントが最適化されていなかったら、親から渡されるpropsに変更がなくても基本的に再レンダリングされる。 コンポーネントが再レンダリングされると、その中で宣言されている関数や変数は以前保存されていたメモリを空けて新しいメモリに再び保存される(garbage collection)。 2. useCallbac
事前準備 Vercelとは Git Hubと連携 Vercel アカウントの作成 まとめと機能 今回は、Next.jsプロジェクトをデプロイする方法について解説します。 デプロイ先には多くの選択肢がありますが、代表的なものに「Cloudflare Pages」や「Netlify」があります。 この記事では、「Vercel」と「GitHub」を組み合わせてサイトを公開する方法を紹介します。 GitHubはコードのホスティングに使用されます。 一方、ビルドやサイトの公開にはVercelが活用されます。 幸いにも、この方法は複雑な操作を必要としませんので、安心して取り組むことができます。 事前準備 ・ Next.jsプロジェクト ・ Git Hubアカウント ・ VS Code(Visual Studio Code) デプロイするにあたり、Git HubアカウントとVS Code(Visual
import { BrowserRouter, ParamParseKey, Route, Routes, useParams } from "react-router-dom"; import User from "./pages/users/[id]"; import "./App.css"; import Top from "./pages/top"; export const PATHS = { TOP: "/", ABOUT: "/about", USERS_ID: "/users/:id", } as const; // これでクエリパラメータの id が取り出せる export const useParamsUsersId = useParams<ParamParseKey<typeof PATHS.USERS_ID>>; function App() { return (
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに プロジェクト構成 Next.jsにおけるプロジェクト構成とディレクトリの役割 ルートディレクトリファイル 最後に はじめに 前回のNext.js入門に続き、本日はNext.jsでプロジェクトを構造化する方法について説明していきます。 前回の記事は以下となります。 dev-k.hatenablog.com Next.jsに適したフォルダ構造を自分で考えることは一般的です。 Next.jsにはページレベルでの最適化が存在し、ビルド時にログに記録されたページが表示されます。 すべてのコンポーネントファイルは「pages」フォルダ内でページとして処理されます。 そのため、ページに関係のないコンポーネントを「pages」フォルダに配置すると、ビルド時に不要なコンポーネントがページとして処理され、ビルド時間が増加してしまいます。 今回は、個人開発や小規模なチーム開発向けのNext.jsフォル
はじめに こんにちは。株式会社スタメンでフロントエンドエンジニアをしております@0906kokiです。 React Hooksが2019年にリリースされてから、Reduxの実装でコンポーネントがstoreと接続する方法に選択肢が増えました。 具体的に言うと、今までconnect関数でstoreにあるstateやactionをpresentational componentに対してpropsとして渡していましたが、hooks時代ではuseSelectorとuseDispatchによってconnect関数を書かなくても、storeとの接続が可能になりました。 実装の広がりが出たと同時に、connect関数とuseSelector + useDispatchのどちらを使えばいいのか、いざ実装しようと思った際に悩むかもしれません。 現在、弊社では後者のuseSelectorとuseDispatch
React Hooks でリストの絞り込み検索と並び替え機能のサンプル ReactとHooks機能を使ってリストの絞り込み検索（フィルター）と並び替え（ソート）機能を作成してみます。 投稿日2019年07月23日 更新日2019年07月23日 準備 適当なコンポーネントファイルを作り作成しましょう。 importするのはuseStateとuseMemo import React, { useState, useMemo } from 'react'; export default () => { // ここにコードを追加していきます。 }; 初期データ（initialState） initialStateとして最初に表示されるデータを作成します。 実際のアプリケーションでは必要ないかもしれませんが、今回はサンプルの動きを見るために作成してます。 今回の検索は、テキスト入力でのタイトル検索と
# react-robot Table of Contents react-robot Installation API License The react-robot package provides the useMachine hook for use with React. import React from 'react'; import ReactDOM from 'react-dom'; import { createMachine, state, transition } from 'robot3'; import { useMachine } from 'react-robot'; const machine = createMachine({ off: state( transition('toggle', 'on') ), on: state( transition(
前回は React の基礎的なことをまとめましたが、今回は React アプリのルーティング設定をするうえでよく使われている React Router についてまとめました。 ※2021/08/22追記 TypeScript ベースで、全体的に大幅加筆修正を行いました。 ※2022/01/24追記 あくまでライブラリの記事であるとわかりやすくするために、記事タイトルを変更しました（旧：React入門 ～React Router(v5)編～） React Router とは？ 公式 5系 React で SPA を書くにあたって、DOM を書き換えて複数ページがあるように見せても URL が変わらないため、ブラウザからは1つのページとしてしか認識されません。 そこで、SPA の画面状態と URL とを紐づけ、さらにブラウザ履歴の同期を行います。 そうすることで、疑似的なページ遷移を実現できま
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsと同じチームによって作成されている、データ取得のための React Hooks ライブラリとして「SWR」というライブラリがあります。 今回はこのライブラリの一番基本の部分をNext.jsのプロジェクトで試してみたいと思います。 SWRとは 公式サイトにも以下のように記載されていますが「SWR」という名前はHTTPキャッシュ無効化戦略であるstale-while-revalidateに由来しています。 “SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に
Create your whole app in a single language. Don't worry about writing APIs to connect your frontend and backend.
概要 社内勉強会の資料。 ReactのContextの考え方と、使い方について。 ちなみにここでは、有用性を伝えるというよりは実際の使い方を感じとってもらうというのがメインの目的です。 通常の使い方に加えて、Hooksでの使い方も合わせて記載します。 React.createContextとReact.useContextって何が違うの？って思ったら、対象読者です。 React Contextって？ Reactでは、基本的にコンポーネントがコンポーネント外から動的に値を受け取る方法はpropsのみです。 Reduxを使用する場合でも、react-reduxなどによってStoreの値をprops経由でコンポーネントに渡しますね。 Contextは、propsとは別の方法でコンポーネントに動的に値を渡す、React純正のAPIです。 Contextの存在意義 Contextは、propsのバケ
% git clone https://github.com/sprout2000/vite-react-typescript.git % cd vite-react-typescript % docker-compose up localhost:3000 を開きましょう。これだけです。 ローカルに Node.js がインストールされていなかったり、インストールされていてもこのコンテナで利用されているバージョンとは異なっていたりしても同じ（仮想）環境でプロジェクトが起動します。
【2024年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア
Magicというマジックリング認証に特化したサービスを知ったので素振りしてみた記録。 サーバーサイドまで含め入ったサンプルは公式のチュートリアルにある https://magic.link/guides 逆にSPAのようなクライアントログインの最低限パターンのサンプルが見当たらなかったので、素振りを書いてみた サンプル import { Magic } from 'magic-sdk' import { useState, useEffect } from 'react' // Dashboardに表示されたpublishable keyを持ってくる。これは公開してよいキー const MAGIC_LINK_PUBLIC = "pk_test_****************" // hooksに処理をまとめる const useMagicLogin = () => { const [is
Using Next.js is not an official part of Expo's universal app development workflow. Next.js is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with the Expo SDK, we recommend using @expo/next-adapter library to handle the configuration. Using Expo with Next.js means you can share some of your existing components and APIs across your mobile
Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: Framer Motion Variants 01 https://codesandbox.io/s/react-typescript-framer-motion-variants-01-862dkh コンポーネントごとのアニメー
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Server ComponentはReact単体の機能ではなく、バンドラーなどを巻き込んだシステムを作ろうとしている。 In our bundler plugins we'll enforce that a .server.js file cannot be imported in that environment. First, they make code splitting automatic: Server Components treat all imports of Client Components as potential code-split points.
Mantine UI 123 responsive components built with MantineBuild your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.
SWR と React Query どっち使ってるの 2021年12月の現状として、ついこの間まではSWRを使っていたが、最近React Queryに乗り換えた。 両方触ってみた感じ、たしかにReact Queryのほうが多機能（そのぶんバンドルサイズもデカいけど） ただ解決したい課題と解決手法は同じなので、APIはほとんど一緒。 腐敗防止層になる中継ファイルを作り、適切にAPIやOptionsを中継しておけば、乗り換えはそのファイル内の書き換えのみで済む。 機能比較ページ： https://react-query.tanstack.com/comparison React Queryの優位性（2021/12現在） キャッシュを参照しないオプション 乗り換えに至った直接的な理由。 あるリソース詳細を取得済みだったとしても、そのリソースの編集フォームではそのキャッシュを使いたくない。 なぜな
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
はじめに ウェブアプリを書いていてよく出てくるUIの一つに「タブ」があると思います。 UIライブラリを導入していれば、大抵のライブラリにはその機能を実現出来るコンポーネントが実装されていることからも、よく求められる機能の一つといえるでしょう。 そして、数あるUIライブラリのうちの一つ Ant Design にも、以下のように書ける便利なタブコンポーネントが含まれています。 リファレンス ところでこのコードの「<Tabs> の下に <TabPane> を置くとそれがタブUIとして表示される」というライブラリデザイン、どうやって実装しているのか気になりませんか？ <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPa
Figmaは非常に優秀で、Reactのコンポーネントをよく表現できると日々感じています。 だからこそ、Reactを実装しているエンジニアとFigmaで作成しているデザイナーとで、微妙に噛み合わない…シーンが出てきます。 お互いに「あ！ここが違うのか！」ということを知っておくと、コミュニケーションが楽になるのでは？と思ったので、まとめてみます。 こんな人におすすめ Reactは実装できるが、Figmaではどんなことができるのかよく知らない Figmaでコンポーネントを作成することはできるが、どう実装されるのかよくわかっていない できるだけFigmaの設定とReactでの表現を合わせて書くようにするので、それぞれの対応表みたいな形で使ってもらえると嬉しいです。 プロパティ・Props編 Figma:プロパティ と React: props は同じものと考えてよい コンポーネントという単位で考え
2023 年の 5 月に Introducing react.dev というブログにて新しい React のサイトが公開されました。 そこから翻訳の準備が整った後に、有志の方達による翻訳が進んできて主要な部分の翻訳が終わってきたので紹介したいと思います。 オリジナルのサイトからリンクされていないけど URL は https://ja.react.dev/ です。 ↑のブログの記事は react.dev のご紹介 です。 私自身はレビューをやっているだけなのでたいした貢献はしてなくて、@smikitky さんをはじめとするコントリビュータの方のおかげです。 New Translation Progress Checklist #452 まだ英語のままのドキュメントもありますがすでにレビュー待ちのものもあるので順次翻訳が公開されていく予定です。 全体的に実際に動かして試せるサンドボックスが特徴
はじめに こんにちは、フロントエンドエンジニアをしている大倉です。 この記事では、個人的に興味があったReactのProps Drilling問題について焦点を当て、この課題を解決するための効率的なコンポーネント設計について学んだことを紹介します。 本記事はHRBrain Advent Calendar 2023の6日目の記事です。 Prop Drilling問題とは？ Prop Drillingは、Reactのコンポーネント構造において、データ（Props）を親コンポーネントからその子孫コンポーネントへと階層を下っていく形で渡していくプロセスのことです。 Reactアプリケーションは多くのコンポーネントで構成され、これらはツリーのような階層構造を形成しています。Reactには、アプリケーションの状態管理を単純化し、データの流れを追跡しやすくするため「データは常に親から子へと一方向に流れる
We officially launched 1Password for Linux today! 🎉 What makes this release even more amazing is it was created from scratch and developed using new languages and techniques most of our team never used before. Almost everything you can name we did in a new way: from team organization, programming languages and toolkits, design language and processes, all the way through to new deployment and pack
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた Storybookとは、React、Vue、Angular 用の UI コンポーネントを開発・管理するためのオープンソースツールです。 公式ページにあるチュートリアルを、普段の業務で使用しているReact Native for WebとTypeScriptを使ってやってみたのでご紹介します。 実装するもの Storybook 公式ページのチュートリアルの タスク管理アプリ（当記事では、タスク一覧の表示までをご紹介します。） 今回作成したソースコードの一式はこちらにあります。 実装方針 Create React App を使ってプロジェクトを作成する TypeScript を使用する 画面の作成に、React Native for Webのコンポーネントを使用する チ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
※本記事はSansan Advent Calendar 2020の3日目になります。 はじめに 自分はSansanが展開しているtoC向けの名刺管理サービス Eight を開発しています。 先日EightのWebページでReact DnDを利用した並び替えを実装していたので、そのときの経験を踏まえてかんばんボードを作成してみました。 できあがりのサンプルはこちら、ソースコードはこちらになります。参考としたのは本家のSortable Simpleです。 本記事では以下の流れで簡単な解説をしていきます。 React DnDの概要 環境構築 Sample作成 まとめ React Dndの概要 React Dndは2014年から開発されているReact用のドラッグ＆ドロップを実現するライブラリです。 Reduxの作者であるDan Abramovさんによるものとしても知られています。 READMEで
Integrating GraphQL Code Generator in your frontend applications In this article we’ll try to explain and demonstrate common patterns for frontend development with GraphQL and GraphQL Code Generator. Most patterns are general and can be applied to most popular frontend frameworks (React, Angular, Vue, Stencil), and to popular GraphQL client libraries (Apollo / urql), due to extended support of Gra
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
