自動化無しに生活無し

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 ...

React学習のため、とりわけ扱いやすいGatsbyを使うことにした。 学習完了次第。このサイトは、HUGOからGatsbyに移行する予定。 本記事では、Gatsbyを調べてわかったことをまとめる。学習の都度まとめているため、誤りが含まれる可能性がある点をご了承いただきたい。 実装方法 Ubuntu 22.04 LTS 環境下で動作させている。 sudo npm install -g gatsby-cli まず、グローバル環境下でGatsbyをインストールする。 これでGatsbyコマン ...

index.js の root.render( <React.StrictMode> <App /> </React.StrictMode> ); を root.render( <App /> ); に直す。 補足 これは StrictMode が開発段階で動作チェックをするためにやっていること。 本番環境に移行した場合、2度実行されることはない。 そのため、放置していても問題はない。 参考元 https://stackoverflow.com/questions/73002902/api-getting-called-twice-in-react ...

最近(2018年以降)の開発では関数ベースのコンポーネントが主流のため、一部を書き換えた。 React App.js import React, { useState, useEffect } from "react"; import Modal from "./components/Modal"; import axios from "axios"; const App = () => { const [topicList, setTopicList] = useState([]); const [modal, setModal] = useState(false); const [activeTopic, setActiveTopic] = useState({ comment: "" }); // コンポーネントがレンダリングされるときに実行する useEffect(() => { refreshList(); }, []); // ページロード const refreshList = () => { axios .get("/api/topics/") .then((res) => setTopicList(res.data)) .catch((err) => console.log(err)); }; const handleSubmit = (topic) => { if (topic.id) { axios .put(`/api/topics/${topic.id}/`, topic) .then(() => refreshList()) .catch((err) => console.log(err)); } else { axios .post("/api/topics/", topic) .then(() => refreshList()) .catch((err) => console.log(err)); } closeModal(); }; const handleDelete = (topic) => { axios .delete(`/api/topics/${topic.id}/`) .then(() => refreshList()); }; const openModal = (topic) => { if (topic.id) { setActiveTopic(topic); } else { setActiveTopic({ comment: ...

Django Rest Framework (以下、DRF)のビューの書き方をまとめる。 下記記事で紹介した素のDjangoのビューと同様、DRFでも継承するビューによって大きく書き方が全く違う。 【関連記事】 : 【Django】ビュー関数とビュークラスの違い、一覧と使い方 本記事では、状況に応じて、適切なビューがコーディングできるようビューの書き方をまとめる。 前提 モデル from django.db import models class Topic(models.Model): comment = models.CharField(verbose_nam ...

textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...

Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...