自動化無しに生活無し

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

データを一覧で並べる時、並び順を任意に変更させたいときがある。 そういう時、sortable.jsを使えば良い。 JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】 しかし、並び替えた順番をDBに記録する場合は、別途対応が必要だ。 モデルに並び替えの順番を記録するフィールドを追加 並び替えた順番を送信する(FetchAPIによるリクエスト) 別途ビューを作り、並び替 ...

書類(PDF)を1つにまとめる必要が出てきたので。 複数のPDFを1つにまとめるPythonコードを作ることにした。 前提 pip install PyPDF2==3.0.1 ソースコード PyPDF2 をインストールしておく。 PyPDF2 では PdfFileMerger は削除されたため、 PdfMerger を使う。 import glob import datetime from PyPDF2 import PdfMerger now = datetime.datetime.now() now_str = now.strftime("%Y-%m-%d_%H:%M:%S") # TIPS: 既存のPDFファイル名を指定した場合、上書きではなく、追記されるので注意。 def merge_pdfs(output_filename=f"{now_str}.pdf"): # すべてのPDFファイルを取得。 # ファイル名順に並び替える。 pdfs = sorted( glob.glob(f"./*.pdf") ) #print(pdfs) if not pdfs: print(& ...

画像を複数枚指定できるようにする。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file" multiple> <input type="submit" value="送信"> </form> このフォームで指定された画像は、下記のように同じname属性の値のフォームが複数存在する状態と同じ。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <!-- 略 --> <input type="submit" value="送信"> </form> そのため、例えばDjangoでは .getlist() を使って取り出す。 request.FILES.getlist("content") ...

コードは『Djangoで1対多のリレーションを構築する【カテゴリ指定、コメントの返信などに】【ForeignKey】』の https://github.com/seiya0723/startup_bbs_foreignkey から引用。 モデルが class Category(models.Model): name = models.CharField(verbose_name="カテゴリ名",max_length=20) def __str__(self): return self.name class Topic(models.Model): category = models.ForeignKey(Category,verbose_name="カテゴリ" ...

例えば、投稿した内容に色をつけたいというとき。 通常は、type="color"のinputタグを使う。 <input type="color" name="color"> だが、これはブラウザごとに見た目が大きく異なる。しかも見た目があまりよろしくない。 そこで、以下を考慮して、JavaScriptのライブラリを選定した。 無料 フォームの見た目が良い 扱いやすい jQueryに依存していない 実装が非常にシンプルでわかりやすい コピペですぐに使えるジェ ...

クエリビルダでまとめて検索ができない状況下で、検索処理を複数回に分けて実行し、得られたQuerySetを1つにまとめたいとき。 .union() もしくは|が使える。 from django.shortcuts import render,redirect from django.views import View from .models import Topic class IndexView(View): def get(self, request, *args, **kwargs): topics = Topic.objects.all() context = { "topics":topics } # 重複は自動的に除外される topics = topics.union( Topic.objects.all() ) print(topics) first = Topic.objects.filter(id=1) second = Topic.objects.filter(id=2) third = Topic.objects.filter(id=3) # パイプを使用して連結しても良い。 topics = first | second | third return render(request,"bbs/index.html",context) def post(self, request, *args, **kwargs): posted = Topic( comment = request.POST["comment"] ) posted.save() return redirect("bbs:index") index = IndexView.as_view() ...

インデントが雑だったり全くされていない見づらいコードを読まないといけなくなることがある。 いつもは、A Delete Enter を実行したあと、 . で何度も改行をさせるようにしていた。 が、これもめんどくさいなと思うとき、 gg=G を実行すると良い。 gg でファイルの上部にカーソルを移動。=Gを打つことで、ファイルの末尾まで自動的にインデントしてくれるようだ。 逆に考えると、=G とすると今のカーソル位置から最後までを自動的にインデントする ...

ReactをVimでコーディングしているとき、不自由だと感じることが多々ある。 その1つが、.jsxファイルのHTML部をコーディングしているとき、改行でインデントしてくれないこと。 例えば、下記のコードのHTMLで改行をしても、HTML形式でインデントをしてくれない。 return ( <> <textarea id="textarea" className="form-control"></textarea> <input onClick={ addTopic } type="button" value="送信" /> {topics.map( (topic,i) => ( <div className="border" key={i}> <div> { topic } </div> <div className="text-right"> <input onClick={ deleteTopic } className="btn btn-danger" type="button" value="削除 ...

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