自動化無しに生活無し

DRF+ReactのSPAでCRUD簡易掲示板をつくる このDRF+ReactのCRUD簡易掲示板SPAに、JWT認証を実装する。 なぜなら、JWT認証を実装しない場合、通常のDjangoのセッションベースの認証を実装する場合では、CSRF検証が必要になるから。 開発要件 JWT認証を実装する( CSRF検証の廃止 ) ログイン、ログアウト、トークンの更新、アカウント新規作成の機能 ユーザー名とパスワードを使用し ...

Reactで全てのコンポーネントでStateや関数を扱いたい場合がある。 propsを使う場合はバケツリレーになってしまい、見通しが悪くなる。 そこで、Contextを使い、全コンポーネントでStateや関数を使えるようにする。 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する 更に、カスタムフックを使えば呼び出しやすくなる。 src/AuthContext.jsx まずはcreateContextで、コンテキ ...

タイトル通り、Django REST FrameworkとReactのSPAで、WebSocketを使ったチャットサイトを作った。 以前のWebSocket搭載チャットサイト(下記)はReactを使っていないため、SPAではない。今回はReactを搭載したSPAとしている。 DjangoでWebSocketを使って、チャットサイトを作る ただし、今回はJWT認証の実装は見送った。理由は後述。 開発要件 WebSock ...

開発要件 DRF+ReactでSPA react-router-domでページURLの構築 簡易掲示板のCRUD機能 カテゴリ指定・追加機能 リプライ投稿機能 CSRF検証の挙動を確認するため、あえてJWT認証はオミット CRAではなくViteを使用 以前のものは、1対多には対応しておらず、CRAを利用していた。またページもない。 更に、axiosがコールバック地獄になっているので、そちらも修正した。 使用ライブラリ ...

setStateをする時、こんな風に直接値を書き換えていないだろうか？ const handleToggle = () => { setToggle(!toggle); } state変数がプリミティブ型の場合、このsetToggleにより、再レンダリングは発生する。 しかし、オブジェクト型の場合、Stateが値の変更を検知できず、再レンダリングは発生しない。 const handleProfile = (e) => { profile[e.target.name] = e.target.value; setProfile(profile); // この方法では再レンダリングは発生しない。 } オブジェクト型の場合、このようにsetState関数内で処理をす ...

npx create-react-app frontend このコマンドでreactプロジェクトを作ってきたが、もうcreate-react-app はもう使われなくなったようだ。(2023年春時点から) そこで、Viteを使ってReactプロジェクトをつくる。 Viteとは？ Viteは、JavaScriptフレームワーク用のビルドツールである。Vite(フランス語で高速の意味)の名の通り、非常に高速。 ESモジュールで必要な部分だけオンデマンドでロードでき ...

npm install --save パッケージ名 この–saveで、package.jsonにパッケージ名を記録することができる。 ただし、–saveオプションは、npmのバージョン5からデフォルトで有効になっている。 故に、npmバージョン5で、特に設定を触っていない場合は、あえてつける必要はない。 npm install パッケージ名 でよい。 よって、タイトルのnpm install --save パッケージ名 の--saveは必要か？ はnpmバージョン5以 ...

DateTimeFieldを含むモデルで、シリアライザをこう作ると from rest_framework import serializers from .models import Category,Todo class CategorySerializer(serializers.ModelSerializer): class Meta: model = Category fields = ("id", "created_at", "name", "color") class TodoSerializer(serializers.ModelSerializer): category = CategorySerializer() class Meta: model = Todo fields = ("id", "category", "created_at", "content", "deadline", "is_done") このようにタイムゾーン表記になってしまう。 作成日: 2024-12-25T12:00:00+09:00 締切: 2024-12-25T12:00:00+09:00 年月日表記に修正をするには、serializers.pyでフォーマットを指定する。 from rest_framework import serializers from .models import Category,Todo class CategorySerializer(serializers.ModelSerializer): created_at = serializers.DateTimeField(format="%Y年%m月 ...

通常、 class Category(models.Model): name = models.CharField(max_length=100) class Todo(models.Model): title = models.CharField(max_length=200) category = models.ForeignKey(Category, on_delete=models.CASCADE) このモデル構造の場合、シリアライザはこうなる。 from rest_framework import serializers from .models import Todo, Category class CategorySerializer(serializers.ModelSerializer): class Meta: model = Category fields = ['id', 'name'] class TodoSerializer(serializers.ModelSerializer): class Meta: model = Todo fields = ['id', 'title', 'category'] ただこれだと、フロントサイドで得られる、JSONは、 [ { "id": 1, "title": "Todo 1", "category": 1 }, { "id": 2, "title": "Todo 2", "category": 2 } ] このように、categoryのidのみであり、カテゴリ名を表示することはできない。 ネストしたSerializerを指定する。 そこで、このように、TodoSerial ...

インストール npm install @fullcalendar/react @fullcalendar/daygrid ソースコード import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import { useState, useEffect } from 'react'; const App = () => { const [events, setEvents] = useState([]); useEffect( () => { setEvents([ { title: 'event 1', date: '2024-12-01' }, { title: 'event 2', date: '2024-12-02' } ]); }, []); // FullCalendarに events 引数を与える。Stateで管理する。 return ( <main> <div className="container"> <FullCalendar plugins={[ dayGridPlugin ]} initialView="dayGridMonth" locale="local" events={events} /> </div> </main> ) } export default App; 考察 今回は、useEffectでイベントを取得したが、実践ではfullcalendar.jsのeventSourceを使うほうが良いだろう。 なぜなら、useEffec ...