タグ

ブックマーク / zenn.dev/a_da_chi (3)

  • Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳

    Create React App(以下「CRA」という)の将来、およびReactとフレームワークの関係性についてDan氏がGitHubのIssueのコメントで語った内容の翻訳です。非常に長いコメントですが、Reactユーザーであれば一読に値する内容だと思ったので翻訳してみました。参考になれば幸いです。 原文 翻訳 みなさん、こんにちは。 CRAの現状については以前から痛いほどわかっており、それに対処するための提案に取り組んでいるところです。このプルリクエストは議論を始めることを目的にしていたので、私たちがCRAの将来について考えているいくつかの背景を説明する良い機会だと思います。私たちが考慮している理由とトレードオフについて明確にしたいので、いくつかのセクションからなる長いコメントになりそうです。もし全てを読む気になれないなら、最後のセクションまでスクロールして私たちが提案する今後の方法を

    Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
  • Storybook CSF3.0で登録したStoryをJestで再利用する

    はじめに デザインシステムが盛り上がっている今日この頃、フロントエンド開発においてコンポーネントカタログとしてStorybookを導入している方は多いのではないでしょうか? 今回はStorybookをコンポーネントカタログとしてだけではなく、テストツールの一部としても使用する方法について書いていこうと思います。 前提 Storybookが導入されていること Jest+Testing Libraryが導入されていること テスト対象のコンポーネントの要件 今回はメールアドレスを入力するフォームコンポーネントをテスト対象とします。 要件は以下です。 inputのid属性とlabelのfor属性が同じであること メールアドレスが未入力の場合は送信ボタンがdisabledであること 実際のコード 筆者がReactに慣れている都合上、Reactで実装した場合のコードになります。 import Reac

    Storybook CSF3.0で登録したStoryをJestで再利用する
  • もう迷わないNext.jsのCSR/SSR/SSG/ISR

    はじめに Next.jsで一番最初の詰まりどころと言えば、「CSR/SSR/SSG/ISRとあるけどデータ取得はどのやり方でやれば良いか」という点ではないでしょうか。 自分の中でようやくこの辺りの整理ができたので、この記事ではCSR/SSR/SSG/ISRとは何ぞやというところからそれぞれの使い分けについて書いていこうと思います。 CSR/SSR/SSG/ISRとは CSRとは CSRはClient Side Renderingの略で、日語に訳すとクライアント側でのレンダリングです。 CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。 Reactのみを使ってSPAを作る場合にuseEffectの中でデータをfetchして結果をuseStateに渡して表示するというお馴染みのやり方です。 全てがクライア

    もう迷わないNext.jsのCSR/SSR/SSG/ISR
  • 1