2022年に起きたフロントエンドの変化Burikaigi 2023 https://burikaigi.dev/ Twitter https://twitter.com/__sakito__
The new wave of React state management
The new wave of React state managementUnderstand the core problems state management libraries need to solve. And how the proliferation of modern libraries address them in new ways. IntroductionAs React applications grow in size and complexity, managing shared global state is challenging. The general advice is to only reach for global state management solutions when needed. This post will flesh out
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Next.jsアプリをVercelからGoogle Cloudに移行した話
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから
2020年代、使う技術はどう選ぶ？
Front-End Study #5 の発表資料です。 https://forkwell.connpass.com/event/205227/ フィードバックはこちら： https://koibu.me/events/14/talks/wQQs0pbvMZHcnZ8TawAi
2021年の密かなトレンド？ “型安全ルーティング”の概観
2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文
【エンジニアブログ】ダイニーのエンジニアリング3カ条｜ダイニー公式
こんにちは、ダイニーでソフトウェアエンジニアをしている唐澤 @karszawa です。ここ数週間ふるって開発してきた新規プロダクトがつい先日リリースされ、店舗の方や来店客の方に大いに利用されているようです。恐縮しつつも頑張って作った甲斐を感じる繁盛具合で大変うれしく思っています！ 本日はエンジニアリングブログの第二回として、ダイニーのエンジニアリングの特色を紹介してみたいと思います。 キーワードJavaScript / TypeScript / GraphQL / Hasura / React / React Native / Expo / NestJS / Monolithic architecture 概要本記事では、ダイニーのプロダクト開発チームが プロダクト数＞エンジニア数 という状況下において、どのようにすれば効率よく開発を進められるかという試行錯誤を行ってたどり着いた3つのエン
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
Reactのイベントハンドリングについて - indilog
はじめに この記事はReact #2 Advent Calendar 2019 11日目の記事です。 先日JSConfに参加し、今まであまり意識せずなんとなく使ってきたReactのイベントハンドリングについて個人的に新しい発見があったので、記事にしてみます。 本記事ではReactのイベントハンドリングの仕組みについてざっくりと理解することを目的としますが、より詳しい説明や、この仕組みによって puppeteer などでテストする際にこれによってどのような技術的チャレンジが行われているかはBenjamin Gruenbaumさんの The Anatomy of a Clickという発表から知ることができるのでぜひご視聴ください。 www.youtube.com JavaScriptのイベント伝搬について まずJavaScriptがイベントを取り扱うのかについて見ていきます。 通常クリックイベ
Build your own React
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
実践 Off the main thread - from scratch
実践 Off the main thread 実際に Off the main thread をやりつつ、パフォーマンスチューニングをする際にどこに気をつけるべきかを今やっているので、それについて話します。 Off the main thread とは JavaScript の処理は基本的にメインスレッドで実施します。JavaScriptの実行処理以外にも記述された内容を解釈するためのパース処理やGC処理もメインスレッドをブロックします。メインスレッドの処理が多いとUI jankと呼ばれるガタツキ、チラツキ、画面の固まりの原因になります。 UI jankが発生していると、ユーザーがクリックしたり、text入力をしようとしてから反応するまでの時間（Input Latency）が即時ではなくなります。 このUI jankを無くすために、なるべくメインスレッドを阻害する要因を減らすことが Off
Five ways AirSHIFT improved their React app's runtime performance | web.dev
Website performance is not just about load time. It is critical to provide a fast and responsive experience to users, especially for productivity desktop apps which people use everyday. The engineering team at Recruit Technologies went through a refactoring project to improve one of their web apps, AirSHIFT, for better user input performance. Here's how they did it. Slow response, less productivit
TwitterやSlackのRedux Storeを覗く | Recruit Tech Blog
{ domainData1 : {}, domainData2 : {}, appState1 : {}, appState2 : {}, ui : { uiState1 : {}, uiState2 : {}, } } ref: Basic Reducer Structure and State Shape · Redux 正規化 Recipesでは正規化についても言及しており、リレーショナルデータを管理する場合はデータベースのように正規化することを推奨していました。 以下は投稿が複数のコメントを持つ例です。postsはcommentsのidだけを持っています。 { posts : { byId : { "post1" : { id : "post1", author : "user1", body : "......", comments : ["comment1", "comment
React Ref の基本 - 30歳からのプログラミング
React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて考えたほうが理解しやすい。 まずRefオブジェクトについて扱い、次にref属性について見ていく。 なお、この記事のコードは React のv16.10.2で動作確認している。 Ref オブジェクト 最初にRefオブジェクトの特徴を述べると、コンポーネントがマウントされたときからアンマウントされるときまで存在し続ける、書き換え可能なオブジェクト、である。 この特徴を理解するためにまず、Refではない一般的なオブジェクトの挙動を確認する。 以下のAppコンポーネントは、ボタンを押下するとstateが更新され、その度に再レンダー、つまりAppという関数が再呼び出しされる。 その際、Xとコメントし
React Concurrent Mode の概要をおさえる - うどん よこみち
はじめに この記事は， Introducing Concurrent Mode (Experimental) – React を，和訳しつつ自分の解釈や図を少しだけ足したものになります． 筆者は，そこまで英語が得意ではないので，一部適切でない表現があるかもしれませんがご了承ください． Introducing Concurrent Mode (Experimental) Blocking vs Interruptible Rendering Concurrent Mode は，バージョンコントロール を使って説明します． ここで言うバージョン管理というのは，gitのようなバージョン管理システムです． ブランチを切って作業を行い，他の人が pull できるように作業ブランチをマスターにマージします． バージョン管理の概念が存在する前と後では，開発ワークフローは大きく異なっていました． ブランチ
Migration from React Native to PWA
JSConf JP 2019 "Migration from React Native to PWA" https://jsconf.jp/2019/talk/masato-ohba
React Router v5.1
Today, we are releasing React Router version 5.1. This post will discuss the 5.1 release as well as discuss a few things you can do to prepare for the future. We are hard at work incorporating the best ideas from @reach/router, as well as community feedback about the 4/5 API, into version 6 which we expect will be ready sometime around the beginning of the new year. That being said, we are putting
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hooks時代の設計の話 #agrinoteinside
