DjangoとReactを使ったポートフォリオサイトの紹介

バックエンドをDjango、フロントエンドをReactで構築したポートフォリオを紹介していきます。

初めに言い訳すると、ここで紹介するサイトは個人の学習目的で作ったものとなっており、ソースコードについては突っ込みどころもいろいろあると思われます。

なので参考程度に見て頂ければ嬉しいです。

アプリケーションの概要

作成したアプリはこちら。

・webサイト
http://160.251.20.91/
⇒VPSの契約終了に伴い閉鎖

・ソースコード
https://github.com/kkoch5t2/english-learning-site.git

『English Learnig』はその名の通り、英語の学習サイトです。

2024年4月頃から要件定義（実現したいことの検討）をはじめ、5月～6月頃から設計・開発が始まったと思います。

普段はエンジニアとして働いていますので平日は退勤後に少し作業して、休日はなるべく時間を作って作業してという感じで制作に約6カ月間かかりました。

使用技術や実装機能はこの後紹介します。

使用技術

フロントエンド

• HTML
• CSS
• React

バックエンド

• Python（バックエンド）
• Django（フレームワーク）
• Postgres（データベース）

インフラ

• AWS / VPS(Conoha VPS)
• Docker（コンテナ仮想化）
• docker-compose（複数コンテナの定義・操作）
• Nginx（webサーバー）
• Github（バージョン管理）

実装機能

新規ユーザー登録

ログイン

パスワード変更（ログインで忘れたとき）

クイズ（単語・熟語・短文・長文）

単語

熟語

短文

長文

ランキング

マイページ（利用状況のチャート化、ログアウト）

ユーザー設定

設定一覧

ユーザー名変更

ニックネーム変更

メールアドレス変更

パスワード変更

アカウント削除

今回の開発における学び・所感

インフラ構築の難しさ

今回の開発では当初AWSを使って開発を進めていました。

インフラの構築は7月頃から始めましたが、AWSを使ったインフラ構築経験がほぼなくいろいろ試しながらだったのとTerraformの学習も並行して行っていたことからAWSの1カ月ごとの無料枠の制限にすぐ達してしまいました。

AWSで料金節約のため毎回EC2を停止していたのですが、そうするとIPが毎回変わるのでそれがあまりにも不便でConoha VPSという仮想プライベートサーバーに乗り換えました。

Elastic IPアドレスを使えばIPを固定できましたが、それはそれで料金がかかるので2024年9月まで契約が残っていたConoha VPSのサーバーを使って開発を進めたという経緯です。

AWSには無料枠があるとはいえリソースを無限に使えるわけではないですし、無料で使えるのも1年間だけです。

業務ではAWSは使えて当たり前みたいな風潮があるので、ある程度お金を使ってでも勉強した方がいいんだろうなと思いつつ、使うお金はなるべく抑えたいという板挟み状態になりながら開発を進めました。

ちなみにAWSでも簡単な構成（EC2インスタンス2つ⇒踏み台・Dockerを動かすサーバー）でデプロイしましたが、以下の構成をTerraformで実現したかったのでその点は心残りです。（今後時間を作って実現します）

ただ、EC2周りの設定についてはだいぶ慣れたので、次回使うときがあればよりスムーズに実装できると思います。

Chat GPTが便利

以前から開発する際にChat GPTを使って不明点などを調べていましたが、今回改めてChat GPTは開発に便利だと思いました。

Chat GPTに要件を正確に伝える能力があれば誰でもwebサイトを簡単に作れるので、何なら私いらなくない？と思ってしまいました。

あと数年すれば（すでにあるかもですが）今回作ったようなサイトをものの数分で作ってくれるサービスとかも出てきそうですね。

今後エンジニアとして活動していくにはAIや機械学習を理解しておかないといけないと思ったので、今後勉強していきたいと思います。

PCスペックは高ければ高いほど良い

今回Dockerを使って開発を進めたのですが、私の使っていたパソコンはスペックが低く、リビルドに数分～数十分かかったり、PCがブルースクリーンで落ちたりとフラストレーションがたまる状態でした。

ちなみにPCスペックは以下の通りです。

スペック不足で重くなるのが嫌だったのでミニPCを購入してDockerを使ったところ処理速度も格段に向上し、作業速度が上がりました。

やっぱり開発する上でメモリは8GBだと少ないですね。

エンジニアなら最低でもメモリ16GBは必要だと言われますが、確かに最低でもメモリ16GBはあった方がいいなと思いました。（開発環境にもよりますが）

今回購入したのは中華製のミニPCですが、ミニPCの中ではよく知られているMINISFORUMというメーカーで上記スペックで6万円台とかなりコスパの高いPCでした。

購入してから約2カ月たちましたが今のところ問題なく使えており、これまで使っていたノートパソコンと比べて爆速です。

今までは使えればいいくらい感じで安いパソコンを選んでいましたが、商売道具にはこだわっていかないとだめですね。

まとめ

今回はここ半年で作成したポートフォリオサイトを紹介しました。

正直言うともっと修正したい部分や追加したい機能がたくさんありましたが、サイト制作の目的が学習のためでしたのである程度のところで区切りをつけました。

学びたかったReactやAWS（EC2）の基礎はしっかり学べたので、今回の経験が後々の開発で活かせるといいなと思います。