はてなブックマーク

🌼 はじめに 最近仕事で Next.js（app router）を触ってて、こういうエラーに出会いました。 Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: {sever text} Client: {client text} 今回の記事ではなぜこういうエラーが起きるのか、そしてどう解決すれば良いかを解説していきたいと思います。 Hydration とは SSRを実行する場合、クライアント側でJavaScriptが全てのレンダリングを行うのではなく、サーバー側で事前に静的なHTMLを生成してクライアントに送信します。これにより初期表示を高速化できますが、HTMLだけを送信した段階ではまだインタラクションができません（クリックしても、、何

🌼 はじめに 私は高校の数学時間に初めて集合について教わりましたが、その時は全然知らなかったです。まさか Typescript に集合の知識を活かす日が来るとは、、 ということで今回は集合の観点で理解する Typescript について語ります。 1. 型は値の集合 変数には色んな種類の値を割り当てることができ、Typescript なので型を持ちます。 const A: number = 42 const B: null = null const C: undefined = undefined const D: string = 'Canada' const E: boolean = true const F: number[] = [1, 2, 3, 4] const G: { [k: string]: string} = { name: "name" } 集合的に考えると、型は割

🌼 はじめに 皆さんは Javascript である値を boolean に変換するときどういう方法も使いますか？よく使われる方法は!!（二重否定・Double negation）か、Boolean()だと思います。 const hello = Boolean("hello"); // true const world = !!"world" // true Typescript のハンドブックでもその２つを紹介してます。 You can always coerce values to booleans by running them through the Boolean function, or by using the shorter double-Boolean negation. いちおう型の観点では、!!を使ったら型がtrueかfalseになり、Boolean()関数を使った

🌼 はじめに 最近 Next.js の app Router で開発してて、不思議なワーニングに出会いました。 Props must be serializable for components in the "use client" entry file, "handleClick" is invalid. これがなんなのかがすごく気になり、"use client"について色々調べたので共有したいと思います。 1. "use client" は何なのか "use client"は Server Component と Client Component の境界の宣言です。公式ドキュメントにもそう書いてました。 The "use client" directive is a convention to declare a boundary between a Server and Clie

🌼 はじめに フロントエンドエンジニアなら誰でも一回はボタンコンポーネントを作ったこと、もしくは使ったことがあるのではないかと思います。私もUI実装のときよく触ってました。 最近 <input type="button" value="保存" /> のようなボタンコンポーネントを見かけて、「なんで buttonじゃないんだろう、てかなんでボタン作る要素が button と input の２つあるわけ？」という気持ちになりました。 気になったら調べるしかないので、今から調査結果を共有します。 1. input要素とbutton要素は似てる さっそくフォームの中にinput要素とbutton要素でボタンを作ってみました。 <form action=""> <label> 好きな食べ物は？ <input type="text" /> </label><br /> <div class="but

🌼 はじめに 2023.02.27 UPDATE） この記事は一部正確ではない内容がありましたので、タイトルと内容を 「React で ref ではなく ref.current を操作する理由」 に変更しました。 既に読んでくださった方々、申し訳ありませんでした。 1. React で DOM にアクセスする React の世界で DOM にアクセスするとき ref を使います。 sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you

🌼 はじめに 実はpromise.allSettledは使ったことはありません！が、今後使いたい場面がありそうなのではっきり整理しておきたいと思います。 1. Promise.all Promise.allは引数として受け取ったPromiseがすべて成功(fulfilled)したら解決されるプロミスに結果値の配列を返し、一つでも失敗したら残ったPromiseは実行せずすぐエラー処理に移ります。 MDNからサンプルコードをもらってきました。 まずすべてのPromiseが成功する場合です。成功した結果値の配列を返してますね。このとき配列の順番は実行完了順ではなく引数で渡された順と同じになります。 const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, re

🌼 はじめに Javascript の Hoisting をなんとなくは知ってたけど正確にどういう動きをするのかをあまり把握してなくて、一度ちゃんと理解したいという気持ちは昔からありました。 が、なかなか実行できず、、（^_^）だったので今年アドベントカレンダーを機会にちゃんと整理したいと思います！！ 1. Hoisting とは Javascript における Hoisting は「変数や関数などの宣言をスコープの先頭に巻き上げること」です。 「hoist」という英単語自体が「持ち上げる、巻き上げる」という意味を持っているので、日本語では Hoisting のことを「巻き上げ」とも言うらしいですね。 まあ言葉だけではピンとこないかもしれないので、これから変数と関数の具体例で説明します。 2. 変数の Hoisting 2-1. var まずvarの Hoisting による事象の一つを

🌼 はじめに 最近 TypeScript 4.9 Beta のお知らせがありましたね！ その中で新しく登場したsatisfiesがとても気になったのでざっと整理してみたいと思います。 1. Typescript のジレンマ 1番最初の文書としてこういう話が出てきます。 TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes. TypeScript経験者なら一回は出会ったことある状況かもしれません。サンプルコードで見てみましょう。 // 各プロパティは

1.はじめに 普段画面共有しながら実装することや、メンティーとペアプロすることが結構あります。自然に人のターミナル見ることも多くなりましたが、zsh-autosuggestions 使ってない方々が多いことに気づきました。これめっちゃいいから知らない人いないように…！！！！ という強い気持ちで記事にします。 2. zsh-autosuggestions とは zsh-autosuggestions はターミナルのコマンド履歴に基づいてコマンド候補を表示、入力補完もしてくれるとても便利なプラグインです。 皆さんよく使うコマンドたくさんあると思いますが、それを毎回いちいち最後まで打ってるのはとても…とてもめんどくさいです。私はめんどくさがり屋なので無理です。そういう人のためのプラグインなので今から入れてみましょう。 やり方は公式のインストールガイドの通りです。パッケージ、Antigen、Oh

React 勉強でツイッターみたいな SNS を一人で作ってましたが、プロフィールページの Followings＆Followers 情報を読み込むときずっとこのエラーが出てました。 Unhandled Runtime Error Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. レンダリング数が多すぎると怒ってますね。 「はあ！？フォロワー1人しかいないのに何言ってるんだこいつ」とか思いましたが、やはりコードは嘘つきません。悪いのは私でした。 1. 最初のコード 大体こんな感じのコンポーネントを書いてました。swr でデータフェッチして、Followings＆Followers の数は最初に3件表示、 More ボタンクリックしたら 3件ずつ表示件数を増や

最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。 私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。 1. カスタムフックとは カスタムフックは自分がカスタムして作るフックです。 React 公式サイトではカスタムフックをこう説明してます。 カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。 でもこれだけ見たら絶対わからないと思うのでサンプルコートを一緒に見てみましょう。 2. チャットアプリの例 サンプルコートも React 公式サイトにあるものを持ってきました。 チャットアプリで友達がオンラインかオフラインかを示すメッセージを返す

始め redux-toolkit を触ってみて、createSliceで action も reducer も一緒に管理できるって素敵ー！と思いました。 1. Action 1-1. Reduxの場合 既存の Reduxでは action type 定義と action creator 作成を別々で宣言してました。 //action type 定義 const INCREMENT = 'counter/increment' //action creator 作成 function increment(amount: number) { return { type: INCREMENT, payload: amount, } } const action = increment(3) // { type: 'counter/increment', payload: 3 } 1-2. crea

始め 最近案件で debounce 機能を実装する機会がありました。色々調べてたら、カスタムフックで実装できる方法があったので紹介したいと思います。 まだカスタムフックに馴染んでない方は「React 初心者の難問、カスタムフック（Custom Hook）を解説します」を是非お読みください。 1. debounceとは 私が実装してたのは検索欄に文字を打つたびにサジェストを表示する機能でした。普通は検索するとき単語をぱぱっと連続で入力しますので、インプットが発生するたびに API コールするよりは入力が終わった後に API コールしたほうが効率的です。ここで欲しくなるのが debounce です。 debounceとは連続で実装された関数たちの中で一番最後の関数だけ(もしくは一番最初の関数だけ)実装させることです。 簡単なデモを準備しました。インプット欄になにか入力してみてください。 原理は

始め Pre-renderingって全部同じ Pre-rendering じゃなかったですね 1. Pre-rendering SPAではページをロードする時、まず空の html を読み込んで JS ファイルも読み込んでその JS が画面をレンダリングします。このやり方では SEO でデメリットがあったりファーストビューが遅くなったりする問題があります。 この問題を解決するため、 Next.js は基本的にすべてのページを Pre-rendering します。これはクライエント側の JS がレンダリングする代わりに、各ページに対して html を予め作っておくことを意味します。そうするとパーフォーマンスでも SEO でもより良い結果が出せます。 こうやって生成された html は必要最小限の JS コードに繋げられます。ページがブラウザにロードされるときにその JS コードも実行され、ペー

始め すべての始まりは一つのエラーでした。 Access to XMLHttpRequest at 'http://localhost:3065/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ですので、今回はこの話をします。 1. CORS まずCORSについてからです。 CORSは「Cross-origin resource sharing」の略です。直訳したら「Cross-originリソース共有」ぐら

始め Redux勉強するぞ！と思ってまずReduxが何なのかから調べました。そして「これcontext調べてた時も見たような…？」と感じました。一度整理したかったです。 いいタイトルが思い浮かばなくて以前書いたinterfaceとtypeの違い、そして何を使うべきかについてのタイトルパクりました、笑。 1. メインストレージの必要性 アプリケーション制作においてstateを管理することは大事です。Reactでstate管理と言ったらすぐuseStateが頭の中に浮かびますね。確かにuseStateでstateを全部管理することもできます。 しかし、useStateで管理してるstateをたくさんのコンポーネントで使っているとしたら以下のようになります。 あるコンポーネントでstateの変更が起こり、そのstateを使ってる他のコンポーネントに変更を伝える図です。一つ確かなことはこれはめんど

始め JS,特にReactを勉強してるとよくimmutabilityという言葉を聞きます。最近immerを使ってみて不意にimmutabilityは何で重要だったっけ？と思ったので、投稿します。 1. immutabilityとは immutabilityは不変性、つまり変わらない性質という英単語です。 プログラミングでのimmutabilityは「stateを変更しないこと」とも言えます。(韓国では漢字の方の「不変性」を採用していますが、日本語あまり分からないので今回は英単語そのまま書きます。) ここで、「stateを変更する」ということは正確に何を意味するのでしょうか？一番簡単な例を見てみましょう。

始め Reactのmapを使う時、keyエラーをなくすためindexを使ったことがあります。しかし最近それがanti-patternだということを知りましたので、その理由をまとめました。 1. keyの存在意義 1-1. keyってなんだっけ そういえばそもそもkeyって何で必要だったけ…？と、ふいと思ってしまいました。何となくは知ってますが、明確にしたいのでこの部分から始めましょう。 まずはこのサンプルコードをご覧ください。 export default function App() { let fruits = [{ name: "apple" }, { name: "banana" }, { name: "pear" }]; return ( <div className="App"> {fruits.map((fruit) => ( <p>{fruit.name}</p> ))}

始め すべての始まりは「When to useMemo and useCallback」という記事でした。これを見て「あれ？useCallbackってパフォーマンス向上するやつじゃなかったの？」混乱し、いろいろリサーチしたので、整理したいと思います。 1. 基礎知識 Reactコンポーネントは自分のstateが変更された場合、渡されるpropsが変更された場合に再レンダリングされる。 親コンポーネントが再レンダリングされると子コンポーネントも一緒に再レンダリングされる。この時子コンポーネントが最適化されていなかったら、親から渡されるpropsに変更がなくても基本的に再レンダリングされる。 コンポーネントが再レンダリングされると、その中で宣言されている関数や変数は以前保存されていたメモリを空けて新しいメモリに再び保存される(garbage collection)。 2. useCallbac

始め TSを初めて勉強したときに「typeよりinterfaceを使うように！」というブログをよく見ましたが、業務の時は全部typeで型を定義してました。あれ？と疑念に思ってましたので、記事でお話させていただきます。 1. 型の定義 TSで一番手っ取り早く型を定義できる方法は多分これだと思います。 let level: number = 15; level = 15 level = "十五" //Type 'string' is not assignable to type 'number' このように宣言時の変数に方の注釈をつけることを型アノテーション(Type Annotation)と言います。上の例だけ見たら特に問題なさそうに見えますが、コードが少しでも複雑になったら問題があります。