React なんで2回走るの？
ムーザルちゃんねるのムーです。今回は @zaru さんと「React の StrictMode で処理が2回走ること」について話しました。 React に入門してコードを書いていると「あれ、なんかここ 2 回実行されてない？」となる瞬間、あると思います。それについての話になります。 なんで2回走るのかわからない StrictMode について知らない、知ってるけど2回走る意味がわからない どこの処理が2回走るかわからない という方に向けた動画となっています。 以下に簡単なサマリを書いておきます。 話したこと StrictMode があります なぜ StrictMode は 2 回走らせているのか？ どこで 2 回走るの？ （え、そこも2回走るの？） StrictMode があります。 これによって、2 回走ります。 off にすれば、2 回走らなくなります。 ではなぜ 2 回走らせているの
Next.jsのエラー画面が簡単＆柔軟
Webアプリケーションの開発にかかせないエラー画面ですが、Next.jsでは簡単かつ柔軟に対応することができます。今回はそんなNext.jsのエラー画面表示の解説をします。また、ムーザルちゃんねるのYouTubeに解説した動画の公開もしています。動画ではより詳細に、記事では内容をすぐ把握できるよう簡易にしています。 Next.jsのエラーハンドリング挙動 Next.jsでは予期せぬエラー（例外）が発生したら自動でキャッチしてくれます。具体的に言うと、 error.tsx というエラーコンポーネントを配置すると、自動でそのコンポーネントがレンダリングされます。 例外があると、error.tsxが表示される ネストしたエラー表示 error.tsx はどこの階層にも配置することができます。そして複数 error.tsx がある場合、エラーが発生したページコンポーネントからディレクトリの上方向に
Tailwind CSS初心者が絶対ハマる落とし穴
ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
知らないとあぶない、Next.js セキュリティばなし
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全な Next.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
