【徹底比較】Vue.js と React でレンダリングされる値、されない値

2024/02/26 8 users React Vue.js 変数 console.log 変化

フロントエンドの開発・デバッグ中にコンポーネント内の変数や props の値を確認したい時、console.log() で出力するよりも画面上にレンダリングしてしまう方が分かりやすい場合もあります。 コンソール出力は値の変化をリアルタイムで確認するには不向きです。一方、画面上にレンダリングすると、値の変化を直感的に把... 続きを読む

useState の初期値 ―― 変化する Props の値を固定する

2023/08/15 6 users useState 初期値

この記事は、以下の記事で述べたライフタイムのうち、 2. レンダー, 3. コンポーネント に関連する内容です。 両方を合わせて読むと、より理解が深められると思います。 はじめに: 止まらないデータの流れを意図的に止めることが可能 React の、特に Function Component の良いところといえば「ステートを更新したのに表... 続きを読む

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】useEffect解体新書 - Qiita

2023/02/20 5 users Qiita React state useEffect パク

はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。... 続きを読む

styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com

2022/03/19 8 users styled-components CSSTYPE 複数

3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安... 続きを読む

nextjsのISRを使うときのfallback指定について理解するまでの話

2021/04/29 8 users ISR 見様見真似 nextjs pages Next.js

next.jsのISRを使おうとして「なんか全然うまく行かない」ってなってたのがやっと理解出来たのでメモ 問題編 とりあえず見様見真似でISRはrevalidateとfallbackつければ良いんだな？とやってみたところ、どうもpropsが空Objectになってしまうようで悩んでいた。 例えば下記のような場合、エラーが起きる // pages/greeti... 続きを読む

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 カラーバリエーションは黒、灰色、水色、ピ... 続きを読む