タグ

reactに関するt-wadaのブックマーク (118)

  • useEffect完全ガイド

    あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は? 🤔 useEffect 内で正確に非同期処理を行う方法とは? []ってなに? 🤔 関数をエフェクトの依存関係として記すべき? 🤔 非同期処理の無限ループがたまに起こるのはなぜ? 🤔 古い state か props がエフェクト内にたまに入るのはなぜ? 私も Hooks を使

    t-wada
    t-wada 2019/11/21
    React の useEffect を理解するためには一種のアンラーニングが必要であることがわかる
  • React Native for Windowsを斜め読みした感想 - ナカザンドットネット

    jp.techcrunch.com はい、なんか出てきました。「react-native-windowsなら前からあったじゃん」と思ったのですが、どうやら大幅にリライトしたみたいなので、家とどのくらい違うのか、簡単に流し読みしてみました。雑に読んだだけなので、たぶん勘違いを多分に含んでます。眉に唾をつけて読んでください。ちゃんと知りたい人はコード読んでください。 三行で 前提 今までのreact-native-windows 新しいreact-native-windows 感想 全面C++リライト フォルダ構成の変更 家との挙動の違いについて まとめ 三行で VC++使った結果、言語をブリッジするレイヤーがひとつ減ったのは面白い フォルダ構成は大きく変わったけど、たぶん妥当 開発者が使うときのAPIだけ家と共通なら、内部実装の方針は多少家と違ってても大丈夫なはず(ほんとか?) 前提

    React Native for Windowsを斜め読みした感想 - ナカザンドットネット
    t-wada
    t-wada 2019/05/07
    react-native-windows は前から GitHub 上で公開されていたのになぜ今日騒がれているのか調べてみたら中身が C++ で全面的にリライトされていた話
  • React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜

    React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか

    React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
    t-wada
    t-wada 2018/04/11
    React/Redux を利用した「現実的な」サイズのアプリから知見を読み取るエントリ
  • モダンなJavaScriptアプリケーションでモダンにスタイリングする方法

    WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/

    モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
    t-wada
    t-wada 2018/02/08
    CSS in JS の中でも筋が良い styled-components について
  • React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ! - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以前 React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うテーマで発表した内容に、加筆修正して記事にしてみました。2年半くらい取り組んで見ての結果や感想をシェアできればと思います。 対象読者 SPA の開発に興味がある方 最近の WEB フロントエンド開発に興味がある方 ある程度 React や Redux を触ったことがある方、触りたい方 目的 具体的な実装例をもとに知見を共有し、Web 開発の役に立ててほしい おかしな実装や、もっと良い方法があれば、教えてほしい 内容 コードベースでの実装例の紹介

    React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ! - Qiita
    t-wada
    t-wada 2018/02/08
    良い知見だ
  • You Need to know SSR - Speaker Deck

    ng-japan で発表した Server Side Rendering の資料です。

    You Need to know SSR - Speaker Deck
    t-wada
    t-wada 2017/07/24
    サーバサイドレンダリングは SEO のためだけじゃなく、初期表示(First Meaningful Paint)のために行う
  • やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();

    個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング(以下SSR)をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない(お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい! けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д`)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない

    やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();
    t-wada
    t-wada 2017/07/24
    ブコメ含めて SEO への温度感が違っていて面白い。
  • 2017年のformの話

    teppeis_sushi でした。てっぺーさん、おめでとう。

    2017年のformの話
    t-wada
    t-wada 2017/07/05
    セオリーから言うと Ephemeral な状態は React の state を使うべきだが、管理上は Redux の state に寄せた方が便利で、その上でパフォーマンス上必要なバッファとして React の state を使う。現場感があって良い。
  • React Fiber現状確認

    F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ

    React Fiber現状確認
    t-wada
    t-wada 2017/04/25
    "内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません" "これまで同期的にツリーを処理していくしかなかったものが非同期に、より柔軟に処理出来るようになるのがメリット"
  • kobito-oss のソースの読み方 - Qiita

    メインの開発者として、備忘録を残しておく。 どんなものか試したい人は、 https://mizchi.github.io/kobito-oss/ で、IndexedDBの許す5MBぐらいまでは試せる。 一応言っておくと、これは僕が退職するんでOSS化ってわけではなく、元々あった計画の前倒しです。時期が早まったのはある。 以下、どのようにコードを読むか。 念頭に置くこと 2年前 の技術選定のスタック Mac版Kobitoと仕様が違う。Kobitoと同期しない、Inboxという仮グループがある。 mizchi/arda electron 以前の atom-shell 時代の互換コードが一部残ってる 細々とバグ対応はしつつ、あんまり依存パッケージのメンテ出来てなかった 公開にあたって、個別のタスクの綺麗さより、ビルドできるの優先した とりあえず yarn で固定して yarn upgrade-i

    kobito-oss のソースの読み方 - Qiita
    t-wada
    t-wada 2017/03/30
    昨日 OSS 化された Windows 版 Kobito 公開の背景と動かしかた、今後の開発方針について
  • Reduxの正しい解釈の話

    2016年の課題は状態遷移の管理だったと思う。 そのアンサーとして、 Fluxのような実装におけるStore相当にアプリケーションの状態をほぼすべて管理させるReactのようなVirtual DOMを搭載したビューの実装を透過的なユーザーインターフェースとして扱うこの2つの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる。というのがFluxReact以降のパラダイムだと思う (理論として) 。 このパラダイムなら、エラーの発生時にアプリケーションの状態を表現するJSONをエラー収集サービスに送るようにして、簡単にバグを再現したりできるし、状態の遷移をテストしていくことで、クラッシュするようなバグのうち大半を検出できる。 Fluxの問題そこで問題が出るのが、Action(Creator) とReducer (Store#reduce())の2要素間のル

    t-wada
    t-wada 2017/01/26
    "React/Fluxの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる" "Reactは透過的ユーザーインターフェースで、Fluxは有限オートマトンのように考えると、一種のパラダイムシフト"
  • 「後付の型システム」の活用についてFlowtypeとReduxから考える - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    「後付の型システム」の活用についてFlowtypeとReduxから考える - Qiita
    t-wada
    t-wada 2017/01/25
    mizchi が Flowtype の仲立ちで Redux と和解しようとしている……!!
  • リクルートテクノロジーズのフロントエンド開発 2016 - from scratch

    前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた

    リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
    t-wada
    t-wada 2016/12/09
    足りないピースがあったら自分たちで OSS プロダクトを作って埋めていく姿勢が本当に凄い
  • アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ

    みなさんこんにちは、サイバーエージェントフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう

    アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
    t-wada
    t-wada 2016/10/17
    やりきった感がある、すさまじい事例だ
  • JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット|dwango creators' blog(ドワンゴクリエイターズブログ)

    はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー(HTML/CSS/JSは扱えるいわゆる「Webデザイナー」)として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき

    JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット|dwango creators' blog(ドワンゴクリエイターズブログ)
    t-wada
    t-wada 2016/08/10
    "JSの中にHTMLを書くのが気持ち悪いという向きもありますが、個人的にはわかりやすかった" "Reactのコンポーネントまでをデザイナーが扱えるようになっているのが、エンジニアの方々と協業する上で程よいバランス"
  • React エンジニアのための React Native 入門

    AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass

    React エンジニアのための React Native 入門
    t-wada
    t-wada 2016/08/09
    あまり追えていなかった React Native のいまがわかる資料。 flexbox が使えるのはかなり嬉しそう
  • Redux Middleware Wars (Japanese)

    M3 Tech meetup! #2 ~フロントエンドの副作用~ http://m3-engineer.connpass.com/event/33802/

    Redux Middleware Wars (Japanese)
    t-wada
    t-wada 2016/07/19
    他がシンプルなため複雑さが押しつけられがちな Redux middleware について、テスト容易性、時間制御(debounce 等)可能性、ロジック凝集度、開発の活発さの四つの観点で評価している資料
  • enzyme+mocha+power-assertでReactコンポーネントのフルレンダリングテスト - wadackel.me

    公開されている React コンポーネントのテストコードを見てみると、enzymeを使ってテストしているものを結構見かけます。enzyme はReact 公式でも押しているっぽいので、積極的に使っていきたいです。 Note: Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing library, it’s worth checking out: http://airbnb.io/enzyme/ 日語の紹介記事では@syossan27さんの記事が参考になりました。 React のテストを Enz

    enzyme+mocha+power-assertでReactコンポーネントのフルレンダリングテスト - wadackel.me
    t-wada
    t-wada 2016/07/06
    "Reactに限らずmocha+power-assertを使ったテストが自分の中でよく使うスタックなので、enzymeはそれらと簡単に統合出来て、割と直感的なAPIでテストが書き進められるので良い感じですね" enzyme 良い
  • React / Flux を実案件で使ってみた (2015/02/16 講演資料) - Qiita

    2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」 自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr をつくった AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + babelify で T

    React / Flux を実案件で使ってみた (2015/02/16 講演資料) - Qiita
    t-wada
    t-wada 2016/06/20
    2015/02/16 の講演資料 (ちょっと古い) を Qiita のスライドモードに移植してみました
  • GitHub - tj/react-enroute: React router with a small footprint for modern browsers

    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

    GitHub - tj/react-enroute: React router with a small footprint for modern browsers
    t-wada
    t-wada 2016/06/16
    TJ がつくった非常にシンプルな React Router