JavaScript 【React】fetchでAPIからデータを取得して表示する方法
こんにちは、かつコーチです。前回はRedux・Zustand・Context APIの使い分けについて解説しました。状態管理の仕組みが分かってきたところで、今回は「外部のAPIからデータを取得して画面に表示する」という、実務では必ず通る道を...
2024-08
JavaScript JavaScript 【React】Redux・Zustand・Context API、結局どれを使うべき？
こんにちは、かつコーチです。ここまで3回にわたって、useReducer、Context API、Redux Toolkit、Zustandと、状態管理まわりの選択肢を一つずつ解説してきました。「結局、自分のプロジェクトではどれを使えばいい...
JavaScript 【React】Zustand入門：シンプルな状態管理ライブラリ
こんにちは、かつコーチです。前回は、状態管理ライブラリの定番であるRedux Toolkitの入門編を解説しました。Redux Toolkitは強力な反面、slice の作成・store の設定・Provider の配置など、覚えることがそ...
JavaScript 【React】Redux Toolkit入門：状態管理ライブラリの定番
こんにちは、かつコーチです。前回は、Context APIを使って実践的なグローバル状態を作る方法を解説しました。Context APIはアプリ全体の状態を共有するのに便利ですが、状態の種類が増えたり、更新ロジックが複雑になったりすると、だ...
JavaScript 【React】Context APIで実践的なグローバル状態を作る
こんにちは、かつコーチです。前回は useReducer で複雑な状態管理を整理する方法を解説しました。今回は、その useReducer とセットでよく使われる「Context API」を使って、複数のコンポーネントから参照できるグローバ...
JavaScript 【React】useReducerで複雑な状態管理を整理する
こんにちは、かつコーチです。前回は、カスタムフックを自作してロジックを再利用する方法を解説しました。今回は、状態管理の話をもう一段階深く掘り下げます。useState で状態を管理していると、フォームの入力値・エラー内容・送信中フラグなど、...
Django 【Django】DjangoアプリをRenderにデプロイする方法
こんにちは、かつコーチです。ローカル環境でDjangoアプリが動くようになると、次にぶつかる壁が「これをインターネット上に公開するにはどうすればいいのか」という疑問です。AWSやHerokuなど選択肢は色々ありますが、初めてのデプロイには設...
Django 【Django】pytest-djangoでテストをもっと書きやすくする
こんにちは、かつコーチです。前回は標準のTestCaseによるテストの書き方を扱いました。TestCaseはDjangoに標準で組み込まれている分、追加のライブラリなしで始められるのが魅力です。一方で、テストの規模が大きくなってくると、クラ...
Django 【Django】Django TestCaseでモデル・ビューのテストを書く
こんにちは、かつコーチです。「動くには動いているけど、テストは書いたことがない」というDjango学習者は少なくありません。筆者自身も最初の頃は、機能を作っては手動でブラウザを操作して確認する、という進め方をしていました。しかしアプリが大き...
Django 【Django】CSRF対策とDjangoのセキュリティミドルウェアを理解する
こんにちは、かつコーチです。「フォームを送信したら403 Forbiddenが出た」「CSRFトークンって何のために必要なの？」という質問は、Djangoでフォームを扱い始めた頃に必ずと言っていいほど出てくる悩みです。この記事では、Djan...
Django 【Django】カスタムユーザーモデル（AbstractUser）を実装する
こんにちは、かつコーチです。前回の記事ではDjango標準のUserモデルを使ったログイン機能を扱いました。ただ実務では、標準のUserモデルをそのまま使い続けるプロジェクトはむしろ少数派です。「メールアドレスでログインさせたい」「電話番号...
Django 【Django】Django標準の認証システム（Userモデル）でログイン機能を作る
こんにちは、かつコーチです。前回はN+1問題とselect_related・prefetch_relatedによるパフォーマンス改善を解説しました。今回からは認証・セキュリティ分野に入り、Djangoに標準搭載されている認証システムを使った...