自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

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

  • DRFはいつCSRF検証をするのか？
    開発中、おかしなことが起こった。 これまでCSRFトークン無しで、PUTやDELETEメソッドが送信できていた。 だが、突然、同様の状況で403エラー(CSRF token missing)が起きた。 CSRFトークン無しでリクエストできていたものが、急に403エラーになりCSRF検証を行うようになった。 何故か？ DRFのビューでは、CSRF検証が免除されている https://github.com/encode/django-rest-framework/blob/master/rest_framework/viewsets.py#L146 DRFのビューは、このように .as_view()の戻り ...
    続きを読む

  • SQliteはマルチスレッド・マルチプロセスに対応していない
    SQliteはマルチスレッド・マルチプロセスに対応していない。 同時に大量のクエリをさばくことはできない。 実際にやってみる djangoで実際にやってみる。ベースは、40分django from django.shortcuts import render,redirect from django.views import View from .models import Topic from .forms import TopicForm import threading def writing(data): form = TopicForm(data) if form.is_valid(): form.save() class IndexView(View): def get(self, request, *args, **kwargs): print(Topic.objects.all().count()) context = {} context["topics"] = Topic.objects.all() return render(request,"bbs/index.html",context) def post(self, request, *args, **kwargs): threads = [] copied = request.POST.copy() for i in range(1000): thread = threading.Thread(target=writing, args=(copied,)) threads.append(thread) thread.start() # 全てのスレッドが終了するまで待機 for thread in threads: thread.join() return redirect("bbs:index") index = IndexView.as_view() 1回目は正常に1000個分のスレッドを処 ...
    続きを読む

  • npm で Fontawesomeを使う
    npm install @fortawesome/fontawesome-free これでfont-awesomeの最新版がインストールされる。後は、App.jsに下記を追加する。 import '@fortawesome/fontawesome-free/css/all.min.css'; importした後、JSXに、 <i className="fa-regular fa-square-check"></i> を追加する。 ちなみに、下記では旧版がインストールされてしまう。 npm install font-awesome ...

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

  • DateTimeFieldで、フォーマットを指定したserializers.pyを作る
    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月 ...
    続きを読む

  • 1対多のモデル構造で、ネストしたserializers.pyを作る
    通常、 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 ...
    続きを読む

  • DjangoでWebSocketを使って、チャットサイトを作る
    django-channelsを使ってWebSocketを実現させる【チャットサイト開発に】 ここで、チャットサイトを作ったが、ページリロードで全て消えてしまう。 チャンネルレイヤーにメッセージを与えるだけでなく、DBにも記録するように仕立てた。 consumers.py import json from channels.generic.websocket import AsyncWebsocketConsumer from asgiref.sync import sync_to_async from .forms import ChatLogForm from django.utils import timezone class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name await self.channel_layer.group_add( self.room_group_name, self.channel_name ) await self.accept() async def disconnect(self, close_code): await self.channel_layer.group_discard( self.room_group_name, self.channel_name ) async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json['message'] chat_log = await self.save_chat_log(message) if chat_log == None: return False local_created_at = timezone.localtime(chat_log.created_at) created_at_str = local_ ...
    続きを読む

  • ReactでFullcalendar.jsを使う
    インストール 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 ...
    続きを読む