1. はじめに

udemyで1年間勉強してきた成果を試すべく、本格的な個人開発を始める前にポートフォリオを作りました。
pandas-datareaderという株価や経済データをダウンロード出来るpythonのライブラリをGUIで試せるWebアプリで、
React/mui/Typescript/Django/nginx/circleci/Docker/terraform/aws等人気の高い技術を盛り込んでみました。

自己紹介

昔Visual C++使ってバイトしましたが暫くプログラミングを離れていたので、Webは未経験です
「個人開発をはじめよう！」を読んで実践してみたくなり、1年前からUdemyでReact、Django、AWS等を勉強しました。

ベースにしたpandas-datareaderについて

pandas-datareaderはpythonのライブラリで、様々なデータプロバイダから手軽に株価やGDPや為替等がダウンロードできます。

In [1]: import pandas_datareader.data as web
        web.DataReader('^DJI', 'stooq')

Out[1]: 
                Open      High       Low     Close     Volume
Date                                                         
2020-07-06  25996.08  26297.53  25996.08  26287.03  344151697
2020-07-02  25936.45  26204.41  25778.12  25827.36  350387758
2020-07-01  25879.38  26019.31  25713.61  25734.97  374839860

2. アプリ概要

環境構築以前の初心者にもPythonやpandas-datareaderで何が出来るかGUIで理解して貰えるようにWebアプリを作りました。
ログインしてサイドバーでデータプロバイダを選びticker (企業コード)と開始日と終了日を選びSubmitを押すとグラフと表が更新されるというシンプルなものです。


Demo	(ストップしてます)
Github	https://github.com/tanosugi/public_panta_watch

開発までにかかった期間:1.5カ月くらい

使用技術の選定基準と感動、苦労した点

フロントエンド

選定基準 : 世界で使われているものに触れるたいので、React/Typescriptにしました。
感動した点：Material UIもreact-routerも慣れてくると非常に使いやすいです。
苦労した点：Material UIでレスポンシブ対応(携帯でも表示できるように)はサンプルコードのままだと上手くいくもののの、改変が最初は難しかったです。あとはreact-routerでログインしていないとログインページに飛ぶようにというのも初めは苦戦しました。

名称	説明
React/Typescript	JSX無しでの開発は考えられません。
Material UI	UIフレームワークでトップやサイドのバー、Inputやボタン等のデザインはデフォルトのデザインを活用、まだアルファバージョンのv5を使いました。
react-router	ルーティング(画面の切り替え)のライブラリで、こちらもβ晩のv6を使いました。
Graphql	バックエンドとの通信に使用

バックエンド

選定基準：株価や経済データを扱いたいのでRuby on RailやLalabellではなくPython/Djangoにしました。
感動した点：各データプロバイダのデータのカバー範囲が広いうえに、pandas-datareaderはそれらを似たようなインターフェースで使えるので素晴らしいです。Python書く際にformatterのblackは手放せません。PostgreSQLはEC2にインストールも試してみましたが、やはりDockerの方が手軽です。
苦労した点：Pandas dataframeの形式の価格データを、GraphQLで送る前にJSONにする方法を見つけるのに手間取りました。Dockerのビルトは時間がかかるので、CircleCIのキャッシュを使おうとしたら高額で、Buildkitを使うことにしました。正解はDockerキャッシュを圧縮してCircleCIのキャッシュに保存することだった気がします。

名称	説明
pandas-datareader	データプロバイダから株価やGDPや為替等がダウンロードしてフロントに提供
Django	Graphql APIを作成、ログイン機能等を実装
poetry	仮想環境、インストールが他の仮想環境より速いらしい
black/flake8/isort	linter, formatter
nginx	web server
PostgreSQL	Djangoのデータベース
Docker/docker-compose	nginx, PostgreSQLはインストールするよりDockerを使った方が手軽なのと、ECS Fargateを目指していたのでDjangoもDockerコンテナ化。結局EC2内でこれらのコンテナをdocker-composeで立ち上げることにしたが、コスパ的にはこれがいいかもしれない
Docker Buildkit	CircleCIはキャッシュが高額なのでイメージにキャッシュを入れ込む

インフラ

選定基準：HerokuやNetlifyもありますがスケールするにはAWS一択でしょう、学習コストはありますが慣れれば問題ないです。
感動した点：Terraformは一旦動いてしまえばdevelopment、staging、mainで同じ環境を再現できるので最高です。
苦労した点：Terraformは動かすまでが大変でした。

名称	説明
AWS S3/Cloudfront	React/Typscriptの静的ホスティング
AWS EC2	Django等のコンテナを配置
AWS ECR	ビルドしたコンテナを預ける場所
Terraform	AWSのリソースをInfrastructure as Codeで設定

CI/CD/エラーレポート

選定基準：GitlabやCodePipeLine等もありますが、大差なさそうなので日本でスタンダード担っているCircleCIを選択しました。
感動した点：CircleCIは有料プランに入ると並行ビルドが出来、格段に速くなりました。
苦労した点：CircleCIはビルトの方法を構築するまでは、エラーが出るたびに最初からになるので時間を要しました。

名称	説明
CircleCI	Githubにコミットするとビルドが走るように設定
Sentry	DjangoとReactからエラーレポート。コードマップとの連携は手が回りませんでした。

開発環境

名称	説明
VSCode	エディタ
EC2	Remote SSHで接続して使用

3. 開発してみた感想

ググればある程度は何とかなる、とりあえず動くものは作れるというのがわかりました。
挙動不安定なのはテストを書きながら開発しないと解決しにくいです。
勉強してた時にサンプルコード改造したものや、今回の開発で活用した技術はかなり身についているからアウトプット大事だと再認識しました。
CI/CDは大規模化するほど便利そう、個人開発でも意味あります。
AWSでも慣れるまで大変でしたが、Terraformはもっと難しかったです。

反省としては

テストを書いていなかったのでエラーがつぶし切れていないです。 (言い訳。。)
再描画多すぎます。 (React memoとか使えば。。)
ECS Fargate, 独自ドメインのhttps化に挑戦したかったがterraformが難しく挫折しました (次回こそは。。)
デザインセンス大事です。CSS書けないとセンスあっても適用できないのでCSSも大事、要勉強です (結構勉強したつもりなのに。。)

ですが、今回は容赦いただき次回に活かしたいと思います。

4. 1年間の学習記録 (= Udemy受講記録)

技術全般はUdemyで、サンプルコード写経して動画視聴し習得しました。視聴だけしたものも3割くらいありますが、1か月後には忘れてしまったので、写経との組み合わせが有効でした。Qiitaも個別の項目では参考にしました。
数えたら42本受講してました。働いて子育てしてる時間以外はUdemy見てるかその写経という生活でした。
半分(①-④だけ)でよかった気がするのでだいぶ遠回りしました。メンターをつけてたら違っていたかもしれません。
React/Djangoを理解し始めたところでAWSやCI/CDの必要性に気づき、それが終わってKazu.T先生の講座でReact/Djangoの理解を仕上げた感じです。

独学でここまで出来た! pandas-datareaderによる株価表示ポートフォリオ(React/MUI/Typescript/Django/Nginx/CircleCI/Docker/Terraform/AWS)

1. はじめに

自己紹介

ベースにしたpandas-datareaderについて

2. アプリ概要

開発までにかかった期間:1.5カ月くらい

使用技術の選定基準と感動、苦労した点

フロントエンド

バックエンド

インフラ

CI/CD/エラーレポート

開発環境

3. 開発してみた感想

反省としては

4. 1年間の学習記録 (= Udemy受講記録)

①Kazu.T先生のReact/Django講座 (フロントエンドとバックエンド両方学びたいなら絶対お勧め⇒講師発行のクーポン)

②Python / Financeの講座 (Pythonとファイナンスの組み合わせ)

③AWS ソリューションアーキテクト (下記で勉強して合格)

④React / Django / CircleCi / Terraform (実践的なDevOps学習)

⑤その他React (グラフ表示等、基礎の習得)

⑥その他React/Django (React / Djangoの組合せは講座は片っ端から受講)

⑦デザイン

⑧気分転換