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

![Panda_Watcher.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639092/1657868f-87e2-b6c6-4780-73de6bd4f332.png)
# 1. はじめに
* udemyで1年間勉強してきた成果を試すべく、本格的な個人開発を始める前にポートフォリオを作りました。

* [pandas-datareader](https://pandas-datareader.readthedocs.io/en/latest/remote_data.html#remote-data-stooq)という株価や経済データをダウンロード出来るpythonのライブラリをGUIで試せるWebアプリで、
React/mui/Typescript/Django/nginx/circleci/Docker/terraform/aws等人気の高い技術を盛り込んでみました。

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

### ベースにしたpandas-datareaderについて
* [pandas-datareader](https://pandas-datareader.readthedocs.io/en/latest/remote_data.html#remote-data-stooq)は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](https://pandas-datareader.readthedocs.io/en/latest/remote_data.html#remote-data-stooq)で何が出来るか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で設定|
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639092/73f13ef8-1db3-b085-8802-13cb10e9a203.png)

### CI/CD/エラーレポート

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

|名称|説明|
|:-|:-|
|CircleCI|Githubにコミットするとビルドが走るように設定|
|Sentry|DjangoとReactからエラーレポート。コードマップとの連携は手が回りませんでした。|
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639092/90d13e2a-7288-9131-c27a-38ba31f6bded.png)

### 開発環境
|名称|説明|
|:-|:-|
|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の理解を仕上げた感じです。

#### ①Kazu.T先生のReact/Django講座 (フロントエンドとバックエンド両方学びたいなら絶対お勧め⇒[講師発行のクーポン](https://nextjs-lp-course.vercel.app/))
[最速で学ぶTypeScript](https://www.udemy.com/course/typescript-react-frontend/)
[[SNS編] React Hooks + Django RestFramework API でフルスタックWeb開発](https://www.udemy.com/course/sns-react-hooks-django-restframework-api-web/)
[[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb](https://www.udemy.com/course/youtube-react-hooks-django-restframework-api-web/)
[[テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト](https://www.udemy.com/course/nextjs-react-testing-library-react)
[[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発](https://www.udemy.com/course/react-hooks-django-rest-framework-api-web)
[Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API)](https://www.udemy.com/course/web-react-hooksredux-django-rest-api)
[GraphQL SNS機能開発 (React + Graphene-django)](https://www.udemy.com/course/graphql-sns-react-graphene-django)
[Reactソフトウェアテスト(Hooks+ReduxToolKit時代のモダンテスト手法)](https://www.udemy.com/course/reacthooksreduxtoolkit)
[[Instagramクローン編] React Hooks + Django Restframework](https://www.udemy.com/course/instagram-react-hooks-django-restframework)
[Firebase + React Hooks(TypeScript)によるWebアプリ開発](https://www.udemy.com/course/firebase-react-hookstypescriptweb)
[[Redux編] Redux Tool KitとReact HooksによるモダンReact フロントエンド開発](https://www.udemy.com/course/redux-redux-tool-kitreact-hooksreact)
[[COVID 19アプリ編] Reactで作るコロナウイルス Live ダッシュボード](https://www.udemy.com/course/covid-19-react-live)
[[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA](https://www.udemy.com/course/jirareact-hookstypescript-django-rest-apijira)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639092/22cef102-9f42-2254-6f52-f794c907f2d9.png)


#### ②Python / Financeの講座 (Pythonとファイナンスの組み合わせ)
[The Complete Pandas Bootcamp 2021: Data Science with Python](https://www.udemy.com/course/the-pandas-bootcamp/)
[Python Data Science with Pandas: Master 12 Advanced Projects](https://www.udemy.com/course/python-data-science-with-pandas-master-advanced-projects)
[Manage Finance Data with Python & Pandas: Unique Masterclass](https://www.udemy.com/course/finance-data-with-python-and-pandas)
[Python for Excel: Use xlwings for Data Science and Finance](https://www.udemy.com/course/python-for-excel-xlwings-for-data-science-and-finance)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639092/135e972f-2adb-8720-f06c-05015eb6f814.png)

#### ③AWS ソリューションアーキテクト (下記で勉強して合格)
[これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破…これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）](https://www.udemy.com/course/aws-associate)
[【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan)

#### ④React / Django / CircleCi / Terraform (実践的なDevOps学習)
[Build a React & Redux App w/ CircleCI CI/CD, AWS & Terraform](https://www.udemy.com/course/build-a-modern-react-and-redux-app-with-circleci-cicd-aws)
[Build a Backend REST API with Python & Django - Advanced](https://www.udemy.com/course/django-python-advanced)
[DevOps Deployment Automation with Terraform, AWS and Docker](https://www.udemy.com/course/devops-deployment-automation-terraform-aws-docker)

#### ⑤その他React (グラフ表示等、基礎の習得)
[React Data Visualization - Build a Cryptocurrency Dashboard](https://www.udemy.com/course/react-data-visualization-build-a-cryptocurrency-dashboard)
[Finance Market Stocks and Currency Visualization in React JS](https://www.udemy.com/course/finance-stocks-and-currency-in-react)
[React Pizza Shop - Ordering Food with Hooks and Firebase](https://www.udemy.com/course/react-pizza/)
[Advanced React and Redux ](https://www.udemy.com/course/react-redux-tutorial)
[React Instagram Clone - CSS Grid Mastery](https://www.udemy.com/course/css-grid-with-react/)
[Implement High Fidelity Designs with Material-UI and ReactJS](https://www.udemy.com/course/implement-high-fidelity-designs-with-material-ui-and-reactjs)
[Gatsby V3 Tutorial and Projects Course](https://www.udemy.com/course/gatsby-tutorial-and-projects-course)
[【はむ式】モジュールバンドラー webpack を1日で習得！フルスクラッチでイン…【はむ式】モジュールバンドラー webpack を1日で習得！フルスクラッチでインストールからカスタマイズまでを理解する](https://www.udemy.com/course/webpack-crash-course)

#### ⑥その他React/Django (React / Djangoの組合せは講座は片っ端から受講)
[GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client)](https://www.udemy.com/course/graphql-web-django-reactapollo-client)
[React & Django Full Stack: web app, backend API, mobile apps](https://www.udemy.com/course/react-django-full-stack)
[Full-Stack React, Python, and GraphQL](https://www.udemy.com/course/full-stack-react-python-and-graphql/)
[Django with GraphQL](https://www.udemy.com/course/django-with-graphql)

#### ⑦デザイン 
[User Experience Design Essentials - Adobe XD UI UX Design](https://www.udemy.com/course/ui-ux-web-design-using-adobe-xd)
[How to Design & Prototype in Adobe XD](https://www.udemy.com/course/adobe-xd-experience-design/)
[Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://www.udemy.com/course/advanced-css-and-sass)
[未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース](https://www.udemy.com/course/web-design-master)

#### ⑧気分転換
[React Native - The Practical Guide [2021 Edition]](https://www.udemy.com/course/react-native-the-practical-guide/)
[Complete Financial Modeling for Project Finance in Excel](https://www.udemy.com/course/project-finance-modeling)
[成果を出すための「戦略」超入門【 経営/副業/投資/勉強 何でも使える！ほとんどの人が間違える、戦略の「正しい」立て方】](https://www.udemy.com/course/strategy-of-strategy)
[Visually Effective Excel Dashboards](https://www.udemy.com/course/excel-dashboards-reports)