fuyu77のブックマーク - はてなブックマーク

Immutable.jsとImmer、ちゃんと使い分けていますか？

昨今のフロントエンド開発では、データをイミュータブルなオブジェクトとして扱うのが主流です。すなはち、データが変わるときはオブジェクトを書き換えるのではなく、新しいデータを持った新しいオブジェクトを作ります。最近ではオブジェクトがデータとしてプログラムのあちこちで取り回されることが増えて、一度余所に渡されたデータの中身が後から変更されるのは混乱をきたし設計が困難になるというのが主な理由です。データを変更するたびに新しいオブジェクトを作るのは、特にデータが複雑になったりネストしたりしていると面倒だしプログラムの見通しが悪くなります。そこで使われるのが、データをイミュータブルに扱うためのライブラリであるImmutable.jsとImmerです。データをイミュータブルなものとして扱うという目的はどちらのライブラリでも達成することができますが、現在では Immer のほうが開発が活発であり、独自

fuyu77 2024/01/22

リンク

一言で理解するReact Server Components

この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React 本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？　という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？先日React公式ブログでアナウンスされた、新しいリリースチャネルです。筆者の理解による概要をお伝えすると、Canary版のReac

fuyu77 2023/05/07

Next.js

リンク

なんでコンポーネントに副作用があんだよ！　教えはどうなってんだ教えは！

皆さんこんにちは。先日公開した以下の記事は多くの方にご覧いただきありがとうございます。この記事に対して多く見られた反響のひとつは、コンポーネント内に 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}

fuyu77 2022/10/19

リンク

最速攻略！　Reactの `use` RFC

皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。そこで、この記事ではさっそくRFCを理解することを目指します。ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。新しい use API このR

fuyu77 2022/10/16

React

リンク

TypeScript 4.8で入る型の絞り込みの改善とは

皆さんこんにちは。今回はTypeScriptの更新先取りシリーズです。TypeScriptの次のバージョンでは、以下のPRの更新が入ると思われます。もちろんPRの著者はAndersさんです。このPRではTypeScriptの根幹を成す機能の一つである「型の絞り込み」が改善されます。特に、unknown型と{}型の取り扱いが修正されている点が注目に値します。型引数に対する推論が抱えていた既存の問題 {}型は、「nullとundefined以外の任意の値」という意味を持つ型です。この型は形としては空のオブジェクト型ですが、JavaScriptではnullとundefined以外のプリミティブ（文字列や数値など）に対してもプロパティアクセスをしてもエラーにならないという仕様を考慮して、{}型には文字列や数値などのプリミティブも含まれています。従来型引数に対する推論が抱えていた問題とは、任意の

fuyu77 2022/06/17

TypeScript

リンク

[...Array(n).keys()] はやめた方がいいのでは？

[...Array(n).keys()]は、JavaScriptで0からn-1までの整数が順番に並んだ配列を得る記法です。 const arr = [...Array(5).keys()] console.log(arr); // [0, 1, 2, 3, 4] この記事では、これはやめた方がいいのではということを主張します。理由読み手にかかる負荷が高い（≒理解しにくい）からです。特に、Array(n).keys()の挙動を正確に把握する難易度が高くなっています。かといって、[...Array(n).keys()]という長いコードを中身を気にせずイディオムとして覚えるのは脳の記憶領域の無駄遣いです。以下では、Array(n)とkeys()に関して見ていき、難易度の高さを実感します。 Array(n)とempty Array(n)はnew Array(n)でと同じ意味で、一言で言えば長

fuyu77 2022/02/02

リンク

次の時代のCSS in JSはWeb Componentsを従える

CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c

fuyu77 2021/07/02

styled-components

リンク

React 18 alpha版発表まとめ

先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。本記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18