【React】知らなかったReact Developer Tools、20分で手軽に８つReact コンポーネントのデバッグテクニックをマスターする - Qiita

2024/11/13 199 users Qiita React デバッグテクニック コンポーネント

前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、Rea... 続きを読む

Reactのレンダリングとメモ化についてようやく理解したので書く - Qiita

2024/10/10 115 users Qiita React レンダリング ユーティリティ関数

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? レンダリングとメモ化についてようやく理解したので書く なぜこの記事を書こうと思ったのか Reactを学び始めてから、props の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む

知らないとあぶない、Next.js セキュリティばなし

2024/06/29 53 users Next.js zaru 引数 ムー ムーザルちゃん

ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い... 続きを読む

Readonly 使ってますか？

2024/06/13 13 users readonly React zaru READ ムー

ムーザルちゃんねるのムーです。今回は TS の Readonly を使うか否か zaru さんと会話しました。 以前の zaru さんのこちらの記事 Reactのpropsはreadonlyにするべきか？で、Readonly については記載していますが、今回会話をする中で改めて気づいた知見などがあったのでシェアしたいと思います。 動画本編の中でも Read... 続きを読む

Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる

2023/03/17 11 users gzip jsx 知見 Next.js パッケージ

どういうこと？ 少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇 これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪 検証環境 パッケージ... 続きを読む

const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた

2023/02/22 184 users satoko React import return from

VTeacher所属のSatokoです。 QAエンジニアとフロントエンドエンジニアを兼任しています。 1.久しぶりにReactのプロジェクトに参加 リズミカルにキーボードを　タタンッ！　として、 import { FC } from "react" type Props = {} const Hoge: FC<Props> = () => { return ( <> </> ) } export default Hoge って、得意気... 続きを読む

Reactのprops/contextの使い分け - saneyuki_s log

2021/03/19 124 users CONTEXT React log saneyuki_s 議論

Reactのprops/contextの使い分け 仕事先でたまたまこれの話になり、個人的に思っていることをまとめた。 公開したのは、時々見かける「どっちを使うべき？」みたいな議論に 自分も混ざりたかった 思うところがあったから. 「とにかくpropsでいい」と自分は考えている。 なによりReactは書き方に詰まった場合に、フレーム... 続きを読む

props のバケツリレーって何が悪いんだっけ - fsubal

2021/03/11 206 users React fsubal コンポーネント バケツリレー 大半

#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のよ... 続きを読む

useCallbackはとにかく使え！　特にカスタムフックでは - uhyo/blog

2021/02/23 114 users uhyo useCallback React useMemo

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する... 続きを読む

Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説 | コリス

2020/11/04 10 users コリス Vue.js コンポーネント間 ニーズ たくさん

Vue.jsのコンポーネント間でデータを渡す方法はたくさんありますが、Propsを使うかSlotsを使うかはニーズによります。Slotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて紹介します。 The Difference Between Props, Slots and Scoped Slots in Vue.js by Luca Spezzano 下記は各ポ... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー CLI Button

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

Recoil について勉強した - mizdev

2020/05/16 95 users Recoil Facebook uhyo mizdev 最速

Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書... 続きを読む

ReactでTypeScript使うときにPropsやStateってinterfaceよりType Aliasの方よいのでは説 - terrierscript: 保存済みの下書き

2019/08/08 98 users INTERFACE TypeScript スターター 主流

#TypeScript #React 発端 https://twitter.com/terrierscript/status/1022376213791166466 まじか！ いや、まあMSのスターター見るとinterfaceだし、interfaceが主流なのはわかるんだけど とはいえこんなに差がつくのか・・・ が、今のところ考えきってもinterfaceにする妥当性は強く感じてないという気持ち 同じこと思... 続きを読む

Reactのstateに何を入れるべきか問題 - non117's diary

2018/02/26 13 users state React non117's diary 暫定

2018 - 02 - 27 Reactのstateに何を入れるべきか問題 暫定の結論 ドメイン モデルを コンポーネント として表現する場合は、Viewの外 *1 に状態を持ち、propsとして状態を流し込む ドメイン モデルの表現ではない状態（UIとしての中間状態）はstateとして コンポーネント の内部に隠蔽して保持する UI上の操作で、別の コンポーネント の状態が変わってほしいときは、... 続きを読む

React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita

2018/02/06 190 users Qiita SPA 知見 React Redux state

Facebook が開発した UI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*... 続きを読む

ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita

2018/01/09 508 users Qiita React製 state jsx React

はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールで... 続きを読む

[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法 | Black Everyday Company

2017/10/29 120 users 図解 Black Everyday Company データ

引用:  Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則として Pass Props/Emit Events で行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ... 続きを読む

Reactのprops/stateとFluxのStore - mizchi's blog

2015/08/24 60 users Flux immutable state React

2015-08-24 Reactのprops/stateとFluxのStore 基本的に、ReactのpropsはImmutable, stateはmutableという扱いです。 storeはストレージ抽象じゃない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 rootComponent以外のComponentで参照するプロパティは基本的に全てpropsになるしstoreから... 続きを読む

reactjs - React Native ファーストインプレッション - Qiita

2015/03/28 338 users Qiita reactjs ファーストインプレッション 作法

React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデ... 続きを読む

NuGet で MsBuild ターゲットが展開できるのが便利すぎて全俺が（ｒｙ | kazuk は null に触れてしまった

2013/07/12 31 users NuGet null TARGETS ｒｙ csproj

というわけで、 NuGet & MsBuild なネタ。 NuGet 2.5 から MsBuild の targets と props の展開ができるようになりました。 NuGet 2.5 のリリースノート んで何が便利かというと、ビルド時処理のカスタマイズを部品化できて、 csproj を人がいじらないでも、その部品の付け外しが NuGet パッケージのインストール/アンインストールで簡単にでき... 続きを読む

耳から外したイヤホンを首にかけてスグに装着できる位置にキープする「Props」 - GIGAZINE

2012/10/08 226 users GIGAZINE quirky ポロン 灰色 着脱

使用していないイヤホンはカバンに入れるとスグに絡まってしまうし、かといってそのまま首にかけたりしているとポロンと落っこちて地面を引きずって汚れたりしてしまうので割と置き場所に困るもの。そこで、そんな悩みを解決するために、イヤホンをおしゃれに首から提げて着脱がしやすい場所にホールドしておくためのアクセサリーが「Props」です。 quirky - Props カラーバリエーションは黒、灰色、水色、ピ... 続きを読む