DockerでReact + Django + Postgresの連携・SPA構築チュートリアル

ReactとDjango REST framework、Postgresで簡単なSPAアプリを作成しました。環境の準備からブラウザに表示させるまでをまとめます。

Djangoのfixtures機能でダミーのデータをDBに流しこむ

DBにダミーのデータを作りたいとき、スクリプトを書いてDBへ流し込むということをしていたのですが、fixturesという機能で簡単にできるということだったので、試しました。

DockerでReactの開発環境を構築

これまでホスト側にnode.jsやwebpackなど必要なツールを揃えてReactの環境を構築していたのですが、ホストPCの環境が汚れてお手入れが大変なので、Dockerでreactの環境を用意しました。

GolangでシンプルなWebAPIを作成

Golangで簡単なWebAPIを作りました。Frameworkを使うか悩みましたが、まだ玉石混合でデファクトスタンダードが決まっていないようなので、ルーターを使っています。

【Golang入門!】dockerを使ったGolangの開発環境構築

ReactやVue.jsの登場により、Web業界全体でフロントエンド主体の開発に少しずつシフトしているようです。それに合わせて、新規の案件でバックエンドにGolangやGraphQLを採用しているケースをよく見かけるようになりました。私もこの流れに追従すべく、Golangの環境を用意したのでまとめます。

docker run時にpwdコマンドを使って作業ディレクトリをマウントする

docker runでボリュームをマウントする時、pwdコマンドを挟むととっても楽チンだったのでメモします。

DjangoのModelFormでForeignKeyフィールドをSelectタグ(ドロップダウン)として表示する

ForeignKeyで繋がっているモデルの項目を、ドロップダウン表示するのに少し手間取ったので、メモを残します。

Djangoで複数ファイル(画像)のプレビューとアップロード

Djangoで複数の画像をアップロードする際、少し手間取ったのでメモを残します。アップロードの前にプレビューを挟み、画像を確認するコード(jQuery)もまとめます。

jQueryのon()とclick()でイベントが2回以上重複して実行されるのを防ぐ

`.on()`はDOMにイベントを追加するメソッドなのですが、同じ要素に対して同じイベントを複数登録できてしまいます。気をつけないと同じイベントが重複して実行されるので、.off()で初期化してあげます。

Djangoのテンプレート内で変数を設定する方法

DBの情報を出力したいとき、基本的にはviews.py側で変数へ代入し、テンプレート側で展開するやり方がほとんどだと思います。が、どうしてもテンプレート側で新たに変数を設定したいというケースに遭遇しました。テンプレート側で変数をセットする方法をメモします。