React フレームワークの 動向と選定基準まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容について触れたいと思います。
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 - connpass https://findy.connpass.com/event/296449/
Reactの公式ドキュメントを読む
2023/3に正式リニューアルされたreactのドキュメントを改めて読む。 https://react.dev/learn のLEARN REACTの部分で気になったところをまとめていく。 Describing the UI Your First Component 特になし Importing and Exporting Components componentをdefault exportとnamed exportどっちにするかは、チームで統一する場合もあるが、特に公式でどちらかを推してるわけではない。 Writing Markup with JSX JSXの利点: ロジックにマークアップをsyncできる。マークアップ上のコンポーネントごとにロジックを分離できる HTMLをJSXに変換してくれる便利ツールがある。class -> classNameとかの属性名変換もやってくれる Jav
今後の React ではどの範囲を Suspense で囲むかという設計が重要になってくる
はじめに 今後のReactではどの範囲をSuspenseで囲むか という設計が重要になってくる、という話をSuspenseの説明とともにしていきます！ ※React18がリリースされて１年近く経つので今更感あるかもしれませんが、お付き合いください。 Suspense とは React18で正式な機能として実装された機能 ※React16.6で実験的機能として追加されていた Suspense でできること データ取得中ローディング状態の宣言的な記述 コンポーネント単位でのSSR コンポーネント単位でのJSロード コンポーネント単位でのHydration Suspense は単にローディングを宣言的に記述できるだけの機能ではない Suspenseはローディングを宣言的に記述できるもの、といった内容を目にすることが多い印象です。 しかし、Suspenseは単にローディングを宣言的に記述できるだけ
Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
Create React App(以下「CRA」という)の将来、およびReactとフレームワークの関係性についてDan氏がGitHubのIssueのコメントで語った内容の翻訳です。非常に長いコメントですが、Reactユーザーであれば一読に値する内容だと思ったので翻訳してみました。参考になれば幸いです。 原文 翻訳 みなさん、こんにちは。 CRAの現状については以前から痛いほどわかっており、それに対処するための提案に取り組んでいるところです。このプルリクエストは議論を始めることを目的にしていたので、私たちがCRAの将来について考えているいくつかの背景を説明する良い機会だと思います。私たちが考慮している理由とトレードオフについて明確にしたいので、いくつかのセクションからなる長いコメントになりそうです。もし全てを読む気になれないなら、最後のセクションまでスクロールして私たちが提案する今後の方法を
2022年に最も普及するReactの技術スタック(和訳) - Qiita
Professional React Development 2022年に最も普及するReactの技術スタック Screaming Architecture - Reactのディレクトリ構成を進化させる プロフェッショナルなReactプロジェクトの立ち上げ方 React開発者のためのGitワークフローとGitHubセットアップ (こちらの記事の和訳です) React開発者としてのキャリアをスタートさせたいなら、難しい決断に迫られる。次のプロジェクトでは、どのライブラリとツールを使うべきでしょうか。Reactのエコシステムは巨大です。常に新しいハイプがあり、あまりにも多くの矛盾した意見があります。どうしても混乱する... しかし、決断は簡単です。最も人気のあるライブラリやツールに焦点を当てるのです。これらは、実際のプロジェクトでも広く使われている可能性が高い。こうすることで、あなたの技術スタ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
React I Love You, But You're Bringing Me Down
Dear React.js, We've been together for almost 10 years. We've come a long way. But things are getting out of hand. We need to talk. It's embarrassing, I know. Nobody wants to have that conversation. So instead, I'll say it in songs. You Were The OneI'm not a first-time JS lover. I've had long adventures with jQuery, Backbone.js, and Angular.js before you. I knew what I could expect from a relation
React Hook Formハマりどころとベストプラクティス
初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま
React18のTransitionの動作確認
React18のTransitionの動作確認をした。 useTransitionを使った例を用意し、React18のAPIを使わず同様の体験を提供すると、どのようになるかを確認する。また、startTransitionやuseDeferredValueでも同じことができるか確認する。 先に結論 Reactの18の新機能を使わずとも似たような表現はできるが体験は提供できない。即応性に大きな差がでる。また、useTransitionではisPendingが用意されているががstartTransitionやuseDeferredValueでもisPendingを実装できることも確認できた。 startTransitionが柔軟で表現力が高く、isPendingが不要ならstartTransitionで表記が単純にになるとも言えるし、isPendingを保持する必要があるためhookにする必要が
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=
Hooks時代のReactライフサイクル完全理解への道
はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Draft UI
まず Container より始めよ
React/Next によるアプリケーション開発のこれから
サカモト@エンジニアキャリア論 on Twitter: "フロントエンドエンジニア必見だけど、Reactの技術面接質問500問の問題集が凄い。英語だけど日本のフロントエンドエンジニアの面接にも使えるんじゃないかな？年明け転職考えてる人は一通り目を通して自分の弱い所がないかを確認しよう。… https://t.co/evqGIAqsFg"
Release 2.0.0-beta.1 · vercel/swr
GitHub - tajo/ladle: 🥄 Develop, test and document your React story components faster.
