2024-05-29うひょさんに聞く！ React 19アップデートの勘所 #React19_Findy
React 19を概念から理解する
2024-05-29うひょさんに聞く！ React 19アップデートの勘所 #React19_Findy
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
はじめに こんにちは！ Yahoo!知恵袋の津村です。去年の11月からYahoo!知恵袋のフロントエンドシステムのリアーキテクトに取り組んでいます。この記事では、これまで抱えていた技術的な問題と、それらをどう解決したかについて説明します。この結果、開発効率向上やレビュー時間短縮などの効果がありました。 Yahoo!知恵袋は利用者登録者数5,200万人、質問総数2億8,000万件、回答総数は6億5,000万件以上（2024年4月3日現在）ある、日本最大級のQ&Aサイトです。2004年からサービスを開始し、今年20周年を迎えます。 Yahoo!知恵袋はモバイルクライアント、バックエンド、フロントエンドの3つのシステムで構成されています。今回対象とするフロントエンドシステムは、ブラウザやYahoo! JAPANアプリからアクセスされる際のWebページを提供するシステムです。 Yahoo!知恵袋の
There have been quite a few articles in the past year or so about the downsides of using Rust and introducing the async keyword into your code base: Why asynchronous Rust doesn't work Mixing Sync and Async Rust Async Rust Is A Bad Language Avoid Async Rust at All Cost ...too lazy to continue searching, but you get the idea It generally boils down to two things: async is invasive. The path of least
僕がエンジニア転職した方法
またポエムでも書こうと思った エンジニア転職目指している人たちいると思うけど、どうやって転職すればいいのかわからない.... 私は２年ぐらい勉強して３０代でIT業界に入りました。最初は、PHP, MySQL, jQueryやってましたが全然成果物を作れなかったですね。通ってたプログラミング教室がそもそもレガシーだった笑 Jboyさんはどうやって転職したのか🧑💻 あまり技術者がいないと言われているモバイルアプリを作る技術を勉強しましたね。FlutterとSwiftを勉強して転職しました。 現在はフリーランスエンジニアですが、モバイルやってたおかげで仕事たくさんあるので、ライバルが多いPHP, Rubyなんてやらなくて良かったなと思いましたね。 例をご紹介💁 僕は現在は東京に住んでいますが、福岡県に住んでいたので地方の人の感覚で感想を書きます。参考にならないかもしれません👎 やったこ
Cybozu Frontend Weeklyの記事一覧
articlesTrendingAlltimeLatest🌐デジタル庁デザインシステムのサンプルコンポーネントなど: Cybozu Frontend Weekly (2024-06-04号)おぐえもんinサイボウズ フロントエンド2日前 8🎸Webアプリの主流がCSRからSSRに？など : Cybozu Frontend Weekly (2023-02-07号)nus3inサイボウズ フロントエンド2023/02/09 66🎸Remix v3 の今後についてなど : Cybozu Frontend Weekly (2024-05-21号)mugiinサイボウズ フロントエンド16日前 52🐌React 19 Beta の公開など : Cybozu Frontend Weekly (2024-05-07号)mugiinサイボウズ フロントエンド1ヶ月前 41🌸React の新しい公
フロントのコンポーネント設計の学び方を分かりやすく説明する
概要 React.jsでのコンポーネント設計について、チュートリアル内の下記のリストを例に考えたい。 初めてコンポーネントを作成した際は、コンポーネントのベストプラクティスを理解せずに実装してしまっていた。 今回は可読性と再利用性についてリファクタリングしつつ説明していく。 const listItems = people.map(person => <li key={person.id}> <img src={getImageUrl(person)} alt={person.name} /> <p> <b>{person.name}:</b> {' ' + person.profession + ' '} known for {person.accomplishment} </p> </li> ); 対象読者 React.jsのチュートリアル終わったぐらいの人 コンポーネント設計を学んで
「1000人以上の組織で働く人々が最も使いたいと考えているインフラツールとその理由は何ですか？」 あなたがチャットアプリの開発者だとして、この質問にどう返すように設計しますか？ 単にOpenAIのAPIに質問を送った場合、APIは広大なネットの海から関連しそうな記事を取ってきて返答してくれます。 しかしその記事は本当に正しいのでしょうか。 関連しそうな記事がない場合は？ 「1000人以上の組織で働く人々が最も使いたいインフラツール」というコンテキストがあるので、ソースとなるドキュメントからSQLを実行したいですよね。 Text-To-SQLはクエリをSQLに変換する技術です。 回答の根拠が見えることやハルシネーションが起きないことなどメリットがありますが、反面テーブル名やカラム名、データを直接指す質問ばかりとは限らない(リンク先は課題の詳細)などの課題もあります。 またデータベースのカラム
Next.jsテンプレートを使ったWebサイト制作の解説
Next.jsテンプレートを使ってWebサイトを制作する 概要 Next.jsは、React.jsベースのフレームワークです。Next.jsには、さまざまなテンプレートが用意されており、それらを利用することで、簡単にWebサイトを制作することができます。 メリット Next.jsテンプレートには、以下のようなメリットがあります。 簡単にWebサイトを制作できる デザインや機能が充実している 拡張性が高い おすすめのNext.jsテンプレート 以下に、おすすめのNext.jsテンプレートをご紹介。 ストアサイト Builder.io Shopify Commerce このテンプレートは、Next.js、Builder.io、Shopifyを使用して、ヘッドレス型のShopifyストアを構築するためのスターターキットです。 このテンプレートを使用すると、簡単にかつ迅速にShopifyストアを構
噂のHTMXを試してみたぞ！
はじめに前提HTMXとはHTMXのコンセプトHyperMediaサーバとのデータ通信についてJavaScriptについてインストール使い方サーバHTMLhx-メソッドについてhx-triggerについてhx-swapについてカスタムデータ属性として使う場合動作確認使い方2: loaderを表示サーバHTML動作確認自分のCSSを適用する場合使い方3: formで送信サーバHTML動作確認私の感想良い点「？」と思う点最後に参考 はじめに HTMXは、HTMLを拡張し、HTMLだけでサーバとの通信等を可能にするJavaScriptのパッケージです。1年ほど前から、インターネット記事等でその名前を良く聞くようになりました。2023 JavaScript Rising Starsというランキングでは、Front-end Frameworksの部門で2位だったようです（1位はReact.jsなのです
1. React.jsとNode.jsの概念：ウェブ開発への応用1.1. React.jsの概念1.2. Node.jsの概念1.3. どちらも Web 開発でよく使用されますか?2. React.js とNode.jsの比較3. React js – ユーザーインターフェースの構築における強み3.1. 複雑なユーザーインタラクションを必要とするプロジェクト3.2. クロスプラットフォームのアプリケーション開発3.3. コード再利用を重視するプロジェクト4. Node.js – バックエンドの豊富な機能4.1. リアルタイムとリアルタイム性が必要なアプリケーション4.2. 多数のユーザーをサポートするアプリケーション4.3. コード再利用を重視するプロジェクト5. FAQQ1: React js と Node jsの違いは何ですか？6. 結論 Webアプリケーションを開発する際に、Reac
【React.js】useEffectの使い方: レンダリングを最小限に抑える方法やuseLayoutEffectとの違いも解説！
【React.js】useEffectの使い方: レンダリングを最小限に抑える方法やuseLayoutEffectとの違いも解説！ 今回は、Reactの重要なフックuseEffectの使い方やその周辺知識について説明します。useEffectの基本から、useLayoutEffectとの微妙な違い、そして使用する際のベストプラクティスまでを紹介していきます！ 3 行で要約すると useEffectは React のライフサイクルや副作用を扱う強力なフック。 useEffectとuseLayoutEffectは実行タイミングに違いがあり、使用シーンに注意が必要。 正しくuseEffectを使用することでアプリケーションの品質とメンテナンス性が大幅に向上する。 useEffect の基本的な使い方 useEffect とは？ useEffect は React のフックの一つで、関数コンポーネ
〜家庭内DX〜 バーコードリーダーの作成 26卒予定のしがない学生エンジニアです。この記事では、日常のDX化としてちょっとしたバーコードリーダーを作成したので、ご紹介します。 リポジトリは以下に公開してますが、4時間程度で作ったものなので、クオリティは低いです。 https://github.com/ei-sugimoto/barcodeScan 背景 大学院のオンライン授業を受けたあと、昼飯を食べつつ母親の愚痴を聞く、というのが日課になっていました。ある時に、バーコードの写真を消すを見たのでなぜ消しているのか尋ねると、「箱のバーコードを読み取るのが面倒」とのことでした。 母は配達業をしており、配達終了時にバーコードを会社の端末で読み取るのですが、配達用の箱が大きいので、事前に自分の携帯で写真を撮って、それを読み取っていました。しかし、毎回バーコードの写真を消すのが大変でした。母親のフォル
Vue.js Vue.jsは、シングルページアプリケーション開発に使われていることが非常に多い。 シングルページアプリケーションで開発すると、ページ遷移をする時はJavaScriptを使用することによりHTMLの一部を差し替えて切り替えることができる。従来のWebページではページ遷移の時に全体を切り替える必要があったので、シングルページアプリケーションによって新しいUIの実現やスピードの向上を実現することが可能となった。 このようなパフォーマンスの高さから今では多くの企業でWebサイトやアプリケーションの開発にシングルページアプリケーションを採用しており、シングルページアプリケーション開発に使われるVue.jsの人気も高まっている。 React React.jsはWebサイトよりもアプリケーション開発に使われることのほうが多い。何かに特化したWebサイトやアプリケーションの開発がしたい方に
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
Yahoo!知恵袋 フロントエンドをリアーキテクトしている話
n8s.site | Async Rust Isn't Bad: You Are
Text To SQLは使えない子？社運かけDBベンダー挑む
ReactjsとNode.jsの違い：プロジェクトに適した技術の3つの選択
〜家庭内DX〜 バーコードリーダーの作成 - Qiita
JavaScriptフレームワーク,ライブラリについて調べてみた - Qiita