【Go＋React】株のipoを管理するWebアプリをSPAで作ってみた【個人開発】

# 目次
| 項番 | ページ内リンク |
|:----:|:-------------|
| 1 | [1. このプロジェクトの概要](#1-このプロジェクトの概要) |
| 2 | [2. どのような機能を](#2-どのような機能を) |
| 3 | [3. どのような技術を用いて](#3-どのような技術を用いて) |
| 4 | [4. どのような工夫をして](#4-どのような工夫をして) |
| 5 | [5. どのような成果に繋がったのか](#5-どのような成果に繋がったのか) |
| 6 | [6. 今後やりたい事](#6-今後やりたい事) |

# システム
**【プロジェクト名】**
manamana ipo管理ツール
![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/521daa34-9d63-082a-c71d-b53d8bc4df53.png)

# 1. このプロジェクトの概要
ipo（新規公開株式）の自動申し込み、
および現資産の確認・管理を行うシステムです。
忘れがちなipoの申し込みと、
資産運用の改善をこのアプリケーションで一括して行う事ができます。

**【GitHub】**
https://github.com/Shinya0714/manamana

**【機能】一覧表示**
・証券会社ごとの買い付け余力や、
ブックビルディング状況を一覧表示します。

・画面上部「最新の情報に更新」を押下すると、
Goのライブラリ「agouti」がキックされ、
各々の表示に必要な情報をスクレイピングによりクロールし、
表示します。
![localhost_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/32a95c32-a299-2052-89ed-0dd163a0c122.png)

・~~なんとなくの~~レスポンシブ化にも対応させました。
（デザインに関する知見が皆無なので、全てbootstrapですが。。）
（隠れている部分は横スクロールで表示されます。）
![localhost_res.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/77702eb8-d7c7-5009-490f-010344fbbea7.png)

**【機能】ブックビルディング実行**
・ブックビルディング期間外の対象や取扱いのない銘柄の場合、
実行ボタンがdisabledになります。

・対象の「実行」ボタンを押下すると、
ブックビルディングの実行が行われます。
（実行前に確認のアラートが出ます。）
![スクリーンショット 2022-10-29 17.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/5007af28-de27-6d98-a369-2fd1bbe20a60.png)

・予約の実行が完了すると、
結果のステータス表示が「完了」となります。
![スクリーンショット 2022-10-29 17.37.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/f9600658-d021-3bc7-8726-5561b3a39eb4.png)

**【機能】操作ログ**
・ロゴの隣に操作ログが表示され、
どんな操作を行なったかを確認する事が出来ます。
![スクリーンショット 2022-10-29 17.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/27fb6ff7-d38b-2ab4-c777-6e3757805324.png)

# 2. どのような機能を
**【課題とその背景】**
課題として、
◯SPA
◯インフラのコード化
◯GoとReactの使用
を実現したいと思っていました。

背景として、
日頃からこの様なシステムが欲しいと思っていましたが、
代替となるものは見つける事が出来なかったです。

また、今興味のある技術の学習を考えた時に、
自分が欲しいと思うシステムを開発する事がモチベーションに繋がると考え、
このシステムを作るに至りました。

# 3. どのような技術を用いて
**【インフラ構成図】**
![manamana_arcitect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455017/ec2ecd34-cfb4-af1b-221f-aa1de654cd4e.png)


**◯バックエンド：Go 1.17**
**【具体的にどのように使用したのか？】**
バックエンドのAPIとして使用しました。

工夫した点としての一つとして、
自作したユーティリティークラスのパッケージをモジュール化し、
GoのモジュールモードにてGitからimportする様に実装を行いました。
Goでは相対パスでのローカルモジュールのimportは非推奨とされているとの事でしたので、
それに沿う形で解決策を調べながら実装を行いました。

また、
goroutineによる並行処理も実装しております。
「最新の情報に更新」ボタンを押下時に走るプログラムは、
APIを同時実行させています。
（一覧表示に行う為の情報を集めるのは数が多くて時間が掛かるので）

（選定理由）
実行速度が速いとの事で選定しました。
また、SPA形式でのアプリケーションの作成を考えていたので、
バックエンドのAPIとして使用するのに相性が良いと考え選定しました。

**◯FW：echo v4**

（選定理由）
Ginと悩みましたが、
Ginよりも軽量かつ小・中規模のアプリケーションの開発に向いているとの事で、
こちらを選定しました。
また、情報ソースも多く、
一見した時にコードの可読性が良かったのも選定理由の一つです。

**◯ORM：Gorm**

（選定理由）
保守性向上の為ORMの導入は元より考えていたので、
情報ソースが多く可読性の良いこちらを選定しました。

**◯OSS：agouti**

（選定理由）
当初ブラウザのクローリングはSeleniumで行う予定でしたが、
PythonやJavaの動作環境をその為だけに用意するのは保守性の面から鑑み、
あまり妥当ではないと考え、
Goで動作するこちらを選定しました。

**◯フロントエンド：React 17.0.2**

（選定理由）
Goと同様に実行速度が速いとの事で選定しました。
また、レンダリングも速く、
UXの面から鑑みてもこちらがフロントエンドに向いていると考え選定しました。

**◯ライブラリ：axios**

（選定理由）
SPAでアプリケーションを制作するにあたって非同期通信は必須となるので、
こちらを選定しました。
ajaxの使用経験はあったので、
学習コスト自体は低かったです。

**◯Webサーバーソフトウェア：nginx 1.21.4**

（選定理由）
Apacheと違い、
シングルスレッドでプロセスの処理を行う事ができ、
負荷の増大に寄与せず、
処理速度の維持が実現できるので、
こちらを選定しました。

**◯インフラ管理ツール：Terraform v1.1.3**

（選定理由）
インフラの保守性の向上から選定しました。
また、今後別のアプリケーションの開発を行う際に、
類似した環境構築が容易に再現できる様になるので、
導入するに至りました。

**◯ツール：Dcoker 20.10.10**

（選定理由）
開発環境構築の高速化、
およびローカル環境から本番環境への再現流用性の高さから選定しました。

# 4. どのような工夫をして
**【行動の背景】**
UXの向上を鑑みた時に、
SPA化が現状のベストプラクティスであると考え、
それを実現する為に技術を選定していきました。

# 5. どのような成果に繋がったのか
これまでは、
自分の分かる範囲で使用経験のある技術を選定して開発を行なっていた事が多かったですが、
今回はどれも使用経験の無い技術で、
また、台頭間も無いモダンな技術もいくつか盛り込んでいるので、
そもそもWeb上に情報ソースが少なく、
開発中に問題が起きた際に解決するまでに時間が掛かってしまう事態が散見されました。

成果として、
まだまだ改善の余地はあり、
手を動かしている段階ではありますが、
自分の欲しい機能と使いたかった技術を盛り込み、
形にする事が出来てきたので、
更なる改良を続けていきたいと思います。

# ６. 今後やりたい事
◯EC2→ECSへの移行
現状EC2にDockerを乗せているので、
ECSへの移行を考えています。

◯LINEAPIでの連携
LINEのトークでブックビルディングの実行を行なったり、
現状の予約状況の確認が出来れば更に便利かなと考えています。