【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつあり…

スコープとライフタイムで考えるReact State再考

ReactはじめSPAのStateは大きく2種類、Local State・Global Stateの2種類でおおよそのStateの分類が可能であると考えていました。これに対し会社の先輩から意見をもらって、以下2点に気づきました。 Global Stateには大きく、Client StateとServer Stateの2つがある Stateにはライフタイム（生存期間）が存在し、Client …

無限スクロールは考慮することが多い

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば …

React + Testing Library + Jestの覚書

最近、Zenn に全然(?)記事書けてないなぁっていうのと、フロントエンドのテスト大事やなぁと感じることが多かったので、React + Testing Library + Jest の覚書を雑に書くことにした (特定の用途で覚書まとめたら、この内容だったら Zenn にも出せるやんか、とかそんなことがあったわけでは断じてない) JavaScript のテ…

個人開発でReactとFlutterを同時に使うとどうなるか

はじめに この記事は、個人で作っているサービスをアプリとWebの両方に展開しいて感じたことを書いたものです。 作っているもの 著者は、個人でRabbytという、デジタルキャンバスサービスを作っています。 タブレットやスマホに全画面で絵を表示することで、「タブレットで絵を飾れる」サービスです。 壁にかけたりスタ…

Next.js の「next start・next dev」挙動差分一覧

Next.js で開発をしていると、ドキュメントに書かれている通りに記述してもうまく動かず、実は「next build && next start しないと確認できないものだった」という事がしばしばあります。そこで、気づいた時雑多に放り込む場所があると良さそうと思い、スクラップを開きました。 どなたでも投稿大歓迎です。

Next.jsアプリのローカライゼーション | POSTD

クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらに…

Hotwireの良かった点、辛かった点、向いているケース、向いていないケース – 猫Rails

Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM…