ブックマーク / zenn.dev/uhyo (6)

  • 【速報】Opus 5、React習熟度ベンチマークで余裕のFable 5超え

    考察 Opus 5はこのベンチマークをクリアしたのかもしれません。 このベンチマークで最強だったFable 5を圧倒し、Opus 5が新しいReact習熟度トップに立ちました。 まず、Opus 5のレベルになってくると、effortの恩恵は限定的になってくるようです。従来Claude系モデルではeffortをhighからmaxに上げるとスコアが4~5点上がっていましたが、Opus 5では3点程度しか上がっていません。 また、スペックごとのスコアを見ると、highがスコアでmaxを上回っている場面もあり、highとmaxの差が運によるノイズに隠れてしまうようです。 ただし、特定のスペックではmaxがhighを大きく上回る場面があります(スペック004, 006, 010)。特に004と006は難しいスペックであり、Opus 5がそこでしっかりと得点してきたことは注目に値します。逆に、ここを攻

    【速報】Opus 5、React習熟度ベンチマークで余裕のFable 5超え
  • Reactのデータ再取得、タイムスタンプで管理すると宣言的になる話【AI生成】

    この記事は、AIが生成した記事を無修正で公開しています。投稿者(人間)の普段の作風・意見と異なる点や内容の粗もありますが、技術記事として公開するに足るクオリティであるという投稿者の判断と責任により投稿するものです。 ただし、記事に含まれる、経験に基づくエピソードは全てAIによる創造である点はご了承ください。 ちなみに、記事の生成は事前に用意したスタイルガイドに基づき、人間が記事のアイデアと結論を与えてAI (Claude Code) が出力したものであり、出力結果に対する追加の修正依頼などは行わない一発撮りです。 皆さんこんにちは。最近、データ再取得の実装パターンについて考えていて、面白い気づきがあったので共有します。 Reactでデータを再取得したいとき、普通はrefetch()みたいな関数を呼ぶ実装になります。ボタンを押したらサーバーからデータを取り直す、みたいなやつです。でも、これっ

    Reactのデータ再取得、タイムスタンプで管理すると宣言的になる話【AI生成】
  • Reactコンポーネントが「純粋である」とはどういうことか? 丁寧な解説

    Reactにおいては、コンポーネントは純粋であるべきだとされています。これはReactのルールの一部であり、ルールを守らずに非純粋なコンポーネントを作った場合、さまざまな不都合が発生する恐れがあります。 書いた通りの挙動にならない(ように見える) 今はうまく動いていたとしても、関係ない箇所を修正すると急に壊れる 最適化(React Compiler)によって挙動が変わり、バグの原因となる Reactの新機能と互換性が無くなり、新機能の恩恵を受けられなくなる Reactのアップデートで壊れてしまったり、破壊的変更の影響を受けたりする 単純にコードの可読性が低下し、保守性が悪化する では、コンポーネントが “純粋” であるとは、具体的にどういうことを指すのでしょうか。Reactを使いこなしている人は経験的にこのことを理解していますが、正確に説明しろと言われると困る人も多いのではないでしょうか。

    Reactコンポーネントが「純粋である」とはどういうことか? 丁寧な解説
  • Reactのトランジションで世界を分岐させるハンズオン

    ReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。このでは、手を動かすことでトランジションの機構をしっかりと理解することを目指します。

    Reactのトランジションで世界を分岐させるハンズオン
  • Immutable.jsとImmer、ちゃんと使い分けていますか?

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

    Immutable.jsとImmer、ちゃんと使い分けていますか?
  • React17におけるuseEffectの破壊的変更を理解する

    しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます(以下は公式サイトから引用)。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.

    React17におけるuseEffectの破壊的変更を理解する
  • 1