React は次の10年を生き残れるか：3つのトレンドから考えるReact Tokyo ミートアップ #7 のメイントークのスライド。 https://react-tokyo.connpass.com/event/358171/
王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
こわくない関数型プログラミング
関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
なんでコンポーネントに副作用があんだよ！ 教えはどうなってんだ教えは！
皆さんこんにちは。先日公開した以下の記事は多くの方にご覧いただきありがとうございます。 この記事に対して多く見られた反響のひとつは、コンポーネント内に use(fetchNote(id)) という非同期処理を行うコードが含まれていることに対する違和感です。 function Note({id, shouldIncludeAuthor}) { // ↓↓↓↓↓ const note = use(fetchNote(id)); let byline = null; if (shouldIncludeAuthor) { const author = use(fetchNoteAuthor(note.authorId)); byline = <h2>{author.displayName}</h2>; } return ( <div> <h1>{note.title}</h1> {byline}
次世代のカメラパッケージreact-camera-proの紹介
経緯 今回、社内で開発中のWebアプリにカメラの機能を実装する必要があり、npmでもダウンロード数が最も多いreact-webcamを使うことを検討していたのですが、色々あって断念した話です。 （react-webcamの批判ではなく、自分たちに合わなかったという事だけ誤解しないでいただければ助かります） 断念した理由 当然ですが、この開発中のWebアプリでは画質が要求されていてreact-webcamでは、その画質を満たすことができませんでした。 react-webcamの問題点 もしかしたら自分の技量不足で対処する方法があったのかもしれませんが、 時間的制約などがあり2つ問題が浮上しました react-webcamはカメラのスクリーンショットをbase64に変換する過程で画質が下がってしまう （説明が難しいのですが、）スクリーンショットの出力サイズがカメラのアスペクト比に依存する 画質
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構
イマドキの技術同人の大手はどのくらい儲けているのか - くるみ割り書房ブログ
技術書の執筆は儲からない？ この業界にいると「技術書の執筆は儲からず、エンジニアにとって割に合わない」という言説をちょくちょく聞きます。試しに Twitter で「技術書 儲からない」と検索してみると驚くほどたくさんのツイートがヒットします。それらを見ていくと、実際に複数の著書を出されているエンジニアの方々のぼやきがあります。 技術書を書いて思ったのは、本当に儲からないということだ。残念ながらもう日本語で書かれた質の良い技術書を手にするのは無理だろう。 — 江添亮 (@EzoeRyou) December 21, 2020 いわゆる印税や原稿料の金額についてはなんとなく言っちゃいけなさそうな雰囲気を感じてるので公言してないと思うけど、とりあえずIT系技術書や技術雑誌に関しては、書いてる人たちはだいたい「その時間かけて普通にITの仕事した方がはるかにお金になる」レベルだろうというのは一般的に
「3種類」で管理するReactのState戦略
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう
もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
React Componentの実装ルールを決めてみた - Money Forward Developers Blog
こんにちは。 経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。 クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。 なぜルールをまとめようと思ったのか Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。 昨年の10月までは挙げた３つとも使用していなかったので、試行錯誤しながら進めています。 チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。 そこで一旦現状を整理し
【React】新機能hooks - Qiita
はじめに 会社で色々な事件に巻き込まれしまってなかなか書けなかった不幸な日々でした。 ちょっと乗り遅れた感あるんですが、自分の勉強と理解がてら新しい機能であるhooksを書いていきます。 hooks hooksはclassを書くことなくstateとか、色々な機能を使うことができる新しい機能です！React v16.7.0-alphaから使えます。 create-react-appでつくると、僕がやってみたときは16.6だったので、ちょっとアップデートしないとできないので注意です。 そして、かつてはSFCと呼ばれる関数定義のコンポーネントたちも、ここではSFCではなくFCになります。 なにせstatelessではないからね・・・！！。 state この機能を使うと、functional componentがstateを扱えるようになります。ちゃんとre-renderされようとも値を保持してく
React Native開発のつらい点まとめ – MMiyauchi Blog
React Native v0.42で開発していて、つらい点を述べていく。良い点はあったかもしれないが、忘れてしまった…(良い点含めたより公平な意見は、あらためてまた今度書く 2018年2月28日追記: 書きました!!→ React Native開発の良い点と注意点まとめ)。 なお、製品でReact Nativeを運用されている方で、他にもつらいとおっしゃっている方もいるようなので、自分がReact Nativeに対して感じているこのつらさは間違っていないと思う。 大前提として「React Nativeは、Viewしか扱わないReactがベース」である これがそもそものReact Nativeがつらいと思える根本的な原因かもしれない。React Nativeのコンセプト通り、React Nativeではたしかに、Reactの知見をほとんどそのまま流用してReact Nativeではアプリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native for Webのこれまでから読み解くReact GUIのこれから
宣言的UI
Web開発者が React Nativeで 開発から本番運用までして辛かった事
