はじめに この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！ Cookieとは？ Cookieとは、一言で言うと、サーバーからブラウザに送信される小さな文字列データのことです。 HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます HTTP Cookie - MDN ...と言っても、これだと難しくてよく分からないですよね。そこで、今回の記事では「Cookieとは何なのか？」について、順を追って解説していきたいと思います。 HTTPはステートレス まず、覚えておかないといけないのは、HTTPがステートレスなプロトコ

Rust製のLinterである「Oxlint」が2023/12/12に利用可能となったので、ドキュメントをまとめてみました 特徴 ESLintの50倍から100倍速く、CPUコア数に応じてスケールする Node.jsが不要で、コマンドだけで実行可能 デフォルトで他のESLintプラグインのルールを統合 .eslintignore をサポート ESLintコメントの無効化をサポート インストール oxlintはNode.jsを必須としていないので、ダウンロードせずコマンドだけでも利用可能です インストールする時 Lintルール Oxlintはまだプラグインシステムを提供していませんが、TypeScript、React、Jest、Unicorn、JSX-a11y、Importなどの一般的なプラグインからのルールを積極的に統合しています eslint, typescript, eslint-pl

この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム（=stateの生存期間）による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に

本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま