背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな

とんかつ@インデックス投資 @tonkatsu_index 家族でフードコートに行く人を馬鹿にする投稿を見たけど、子育て世代にとってフードコートは最高なんだよな。ガヤガヤしてるから子供が出す音に神経質ならなくていいし、食べたい物の気が変わったら対応できるし、こっちが食べてる間にキッズエリアで遊ばせれるし。馬鹿にする奴は何も分かってない

最近見たコードでuseEffectとuseLayoutEffectがごちゃまぜになっているソースコードを見かけた。 リファクタリングする際に、大まかにわかっているつもりだったが説明がうまくできないと感じたのでまとめてみる。 初心者のため間違っている部分も見受けられると思います。 間違っている箇所があればご指摘いただけますと大変助かります。 useEffect useEffectとは 公式ドキュメントのフックAPIリファレンスによると 副作用を有する可能性のある命令型のコードを受け付けます。 とのこと。 ちなみにここでいう副作用とは ある機能がプログラム上のデータを変化させ、それ以降の演算の結果に影響を与えることを指します。 ということです。 関数コンポーネント本体以外のデータなどを変化させる処理などをイメージすればよいのでしょうか。 ドキュメンには例として DOM の書き換え データの購読

これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理

失われた技術 設備がなく、技術者も引退 迫るタイムリミット 6500メートルの深海まで人を乗せて潜れる「しんかい6500」。重要部品をつくる技術が、今の日本にはもうない――といった趣旨の投稿が話題になりました。この情報は本当なのでしょうか。しんかい6500を運用している海洋研究開発機構（JAMSTEC）に話を聞きました。（朝日新聞デジタル企画報道部・武田啓亮） 失われた技術 「しんかい6500」はその名の通り、6500メートルの深さまで潜れる有人潜水調査船です。 1989年に三菱重工によって建造され、就航以来、1700回以上の深海調査を行ってきました。 水中では10メートル潜るごとに1気圧ずつ水圧が増していくため、深海6500メートルでは、1平方センチメートルあたり、約650キロもの力がかかることになります。 自衛隊や米軍が運用する軍用の潜水艦でも、この水圧にはとても耐えられません。 その

Haru📚 @Haru_uts2 東大に入って初めて、「学力が集団の平均以下となる」経験をしたのだが、かなり辛くないか。先生の言ってることが理解できず、自分だけ取り残されてしまうような感覚。 小中でつまづいた人は高校卒業までずっとこの感覚を味わい続けるわけで、かなり苦しいだろう。落ちこぼれる苦しさが分かったよ。

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱

Product.div でStrapを開発している、フロントエンドエンジニアのあげです。 Strapは今年、React v17から18へアップデートを行いました。当初の想定ではもう少しスムーズに行く予定でしたが、想定よりハマってしまったので、大変だったポイントとリファクタのTips共有します。 React v18 の主な変更点 Automatic Batchingでハマったところ 🤔 Automatic Batching とは？ 🤯 手続き的なstate更新をしていると意図した挙動にならない React v17 での Receipt コンポーネントのレンダリング回数 React v18 での Receipt コンポーネントのレンダリング回数 💊 どうリファクタしたらいいか そのuseEffect 必要？ その state 必要？ ♻️ リファクタについてのまとめ まとめ React

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

Takuo Kihira @tkihira 「はい」か「いいえ」かで答えてください、って質問は暴力的だと思う。質問への答え方は大事な表現の一つだ、という認識を持っている。 あなたは会社のお金を横領することをやめましたか？

はじめに Reactで開発を行うにあたって外部システムとの同期をエフェクトを通じて行います。 エフェクトの利用はuseEffectが使われることが多く、次点でuseLayoutEffectが使われると考えています。そして、CSS in JSのライブラリ開発などではuseInsertionEffectが利用されます。 この記事ではそれらのエフェクトを利用する3つのhooksについて見ていきます。 useEffect useEffectは以下のような型を持ちます。 declare const UNDEFINED_VOID_ONLY: unique symbol; type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; type EffectCallback = () => void | Destructor; type

概要 前回の投稿でuseEffectのクリーンナップについて調べている時に、ふとuseLayoutEffectというhookを目にしました。 Reactの学習を始めた頃になんか見たことあるなと思っていたが、使い方や、useEffectとの違いが分からなかったので、少し調べてみた際のメモです。 useLayoutEffectとuseEffectの違い useLayoutEffectも基本的にはuseEffectと使い方は変わりません。 useLayoutEffectは、ブラウザが画面を再描画する前に実行する、useEffectのバージョンです。 構文 : useLayoutEffect(setup, dependencies?) 違い useEffect useEffectは、コンポーネントのレンダリングが完了した後に非同期的に副作用が実行され、 通常、データの取得や購読のセットアップ、クリ

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する 2024.06.30 CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。 CSS の @layer ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。@layer ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現できます。 @layer ルールは CSS カスケーディングレベル

もう容量不足に怯えない。サンディスクのmicroSD 1.5TBは在庫があるうちに回収だ #Amazonセール

リンク Wikipedia ダイナー ダイナー（英: diner）は、もともと簡易食堂、食堂車を意味する用語で、おもに米国・カナダ、その他の国でも見られる小規模で安価なレストランを指す。ダイナーでは、主にアメリカ料理を中心とした幅広い料理をカジュアルな雰囲気で提供し、特徴的なのは給仕係がサーブするブースと、少なくとも料理人が直接サービスを提供する長い着席カウンターの組み合わせでできている。 多くのダイナーでは営業時間を普通より長くしており、主要道路沿いや交代勤務が多い地域では24時間営業しているところもある。 北アメリカ特有のプレハブ式レスト 14 users 89 あんこ👹 @Mads4649 洋画好きなら誰もがダイナーってところで朝食を食べるのに憧れるよな…。 脂ぎったベーコンと卵が入った皿を持って無愛想なウェイターが珈琲のお代りを入れに来てさ、そしてデザートには間違いなく甘ったるそ

'use client' でマークされているファイルがサーバコンポーネントからインポートされた場合、互換性のあるバンドラは当該モジュールのインポートを、サーバで実行されるコードとクライアントで実行されるコードの境界として扱います。 上記では formatDate と Button は RichTextEditor が依存するモジュールですので、これらのモジュール自体に 'use client' ディレクティブが含まれているかどうかに関わらず、これらもクライアントで評価されます。ある単一のモジュールが、サーバコードからインポートされた場合はサーバで、クライアントコードからインポートされた場合はクライアントで評価される場合があることに注意してください。 注意点 'use client' はファイルの冒頭、すなわちインポートや他のコードより先になければなりません（コメントは OK です）。シング

この記事は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