Rules of React を経典に React を書いて心の安寧を保つべし - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【海外記事紹介】React、そしてReact Nativeは、Meta社自身にどう使われているのか？
10月3日、Engineering at Metaで「Meta Connect 2024 でのReact(React at Meta Connect 2024)」と題した記事が公開された。この記事では、MetaにおけるReactとReact Nativeの深い活用方法、さらにはこれらの技術がどのようにしてMetaの大規模な製品開発に革新をもたらしているかについて、詳しく紹介されている。 ReactとReact Nativeは、Metaにとって単なるツール以上の存在であり、これらの技術は製品開発の根幹を成すものだという。毎月5,000人以上のエンジニアがこれらを駆使して、新しい製品やエクスペリエンスを作り上げている。Metaが開発する製品の品質と、凄まじいリリース頻度の背景には、ReactとReact Nativeの強力な基盤がある。 InstagramとFacebookのMeta Ques
Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる
Kamalシリーズ Kamalについては他にも記事を書いていますので、ご覧ください Kamal 2で さくらのVPS にRailsアプリをデプロイ Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる(本記事) Kamal 2でNext.js + DatabaseをVPSにデプロイする Hono + JSX + Hotwire + SQLite + Kamal はじめに 9月26, 27日に開催され、めちゃくちゃ盛り上がったRails World 2024でKamal 2が発表されました。Kamal 2はRuby on Railsを作った37signals社が、自社の人気サービスをデプロイするのに使用しているツールです。 37signals社はAWS等のクラウドに年間で$3,201,564を使った(2022年: 日本円で4.5
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
React Compilerについて理解する | POSTD
Reactのコアアーキテクチャは、与えられた関数（すなわちコンポーネント）を繰り返し呼び出します。この仕組みはReactのメンタルモデルを単純化し、その人気に一役を買いましたが、同時にパフォーマンスの問題が生じる原因にもなりました。関数のパフォーマンスコストが高いと、アプリの動作は総じて遅くなります。 開発者はReactにどの関数をいつ再実行するか手動で指示しなくてはならなかったため、パフォーマンスチューニングが悩みの種になっていました。Reactチームが最近リリースしたReact Compilerというツールは、コードを書き直すことにより、開発者が手動で行っていたパフォーマンスチューニングの作業を自動化します。 React Compilerはコードに何をするのでしょうか？裏ではどのような処理が行われるのでしょうか？使った方がいいのでしょうか？こうした疑問について詳しく見ていきたいと思いま
React useで非同期処理を簡単に扱う | stin's Blog
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装しています。TypeScript PlaygroundやReact Compiler Playgroundのような感じです。 例えば次のようなURLをシェアすることができます。 https://stinbox.github.io/lz-string-vs-compression-stream?source=eJx73Nj0uHHV48b5jxvXKxSXZObpJuXkpys8blz3uHnV4-bNj5vWP26a9GJH_-Omy
業務システムのモダナイズを始めました〜RoRからFastAPI × next.jsへ
はじめに この記事では、詳細な技術の話は割愛しています。 「なぜモダナイズをやろうと思ったのか?」 「どんな課題意識があったのか?」 「具体的にどうプロジェクトを進めてきたのか?」 といった、課題設定・意思決定のプロセスに重点を置くことで、同じような境遇にあるチームの意思決定の材料になればと思っております。 RoRの限界...? ダイレクト出版の業務システムはRoR(v6.1)で動いてきました。リリースから6年ほど経っているでしょうか。このシステムは何をするものかというと、例えば、 商品を管理する 顧客を管理する 注文内容を設定する 一斉配信メールを送信する マーケティングオートメーションを設定する 各種分析を行う など、業務に関わるありとあらゆることを行っています。ソースコードは10万行程度で、中堅システムといった具合でしょうか。 実はこのシステム、そこまでレガシーというわけではなく、テ
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
Reactが初回マウントされるまでの仕組みを理解する
今回はReactが初回マウントされるまでの実装を私自身が学習した流れに沿って解説したいと思います。「React Internals Deep Dive」というブログ記事がReactの内部実装を知るのに大変参考になります。 また、「React Internals Explorer」を使うとReactが実行するプロセスを視覚的に理解することができるため、大変おすすめです。 はじめに 本記事では以下の構成に従って解説をしていきます。 前提として理解するべき要素 FiberNodeの種類 4つの実行フェーズ currentとworkInProgress Trigger フェーズの実装 Render フェーズの実装 Commit フェーズの実装 初回マウントに関する内容は主にこちらのブログを参照しています。 なぜ初回マウントに限定するのか 今回はReactの実行の中でも初回マウントに限定して解説をし
汎用的な非依存のReactフックを30以上まとめたコレクション・「Nova.js」 - かちびと.net
Nova.jsは汎用的な非依存のReactフックを30以上まとめたコレクションです。何もインストールする必要はなくコードをコピーするだけで使う事が出来ます。 TypeScriptとJavaScriptで利用可能、依存関係も無くセットアップや構成も不要、CLIでフックを追加できます。 用意されたフックはオーディオ管理、バッテリー状態の追跡、クリップボードへのコピー、カウントダウンやカウントアップの実装、ユーザーが初期訪問かどうかの検出、ユーザーの位置情報の検出、ブラウザの選択言語の検出、タッチデバイスかどうかの検出、ローカルストレージの管理、オフラインかどうかの検出などなどその他にもさまざまなフックが用意されています。 各フックのコードも使い方もドキュメントに詳しく書かれていますので合わせてご参照下さい。ライセンスはMIT。 Nova.jsGithub
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
Storybook 8.3 のリリースつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが、 ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story glo
SimpleでStaticなNext.jsを中心としたフロントエンド技術選定
Next.js 事務局と権利者で利用 アプリケーション基盤となるフレームワークとしてNext.jsを利用しています。2022年の4月頃の開発立ち上げ当時から使い続けています。時期的にもReactで中規模以上のアプリケーションつくるならデファクトスタンダードだったと認識しています。 開発初期はとにかく事業の立ち上げのスピードを優先しており、ゼロコンフィグで簡単にアプリケーションが立ち上がること、ファイルベースルーティングが直感的でわかりやすいことなどが採用の理由でした。 export: static 事務局と権利者アプリケーションともに全てのページでログインしないと利用できないサービスなのでstaticビルドをしています。APIサーバーはJava(Spring Boot)で動いており、ログインが確認出来次第、全てブラウザからAPIコールしています。 ビルド時にAPIサーバーへの通信は発生して
コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ
120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「React」「Python」の4つです。今回は試しに「JavaScript」をクリック。 スペースキーまたはエンターキーを押してゲームスタート。 ゲームのプレイ動画は以下から確認できます。なお、プレイヤーはプログラミング未経験者です。 エンジニア向けタイピングゲーム「UnTyping」にプログラミング未経験者が挑戦してみた - YouTube ゲームが始まると以下のようにコードが表示されるのでタイピングしていきます。 一つのコードに
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？
こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しよう React を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog を同時に定義している hook const Dialog = memo<{ progress: number, ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
