初個人開発でWebサービスを作りました。
はじめに
ご覧いただきありがとうございます。
私はプログラミングを独学している19歳（24年現在）で、以前まではゲーム制作に打ち込んでいました。詳しいプロフィールは自己紹介記事をご覧いただけると幸いです。
今回初めてWeb開発を行い、できたことと課題が見えてきたので、後から振り返れるようにするためと、同じ初学者のお役に立てればとの思いから記事に残すことにしました。
どんなWebサービスを作ったのか？
父の仕事が有価証券の取引と関係していて、その仕事を補助するツールを勉強も兼ねて会社として作ってみないかと父に誘われて開発したのが、このMedicalStockPortalというサービスです。
国内外で上場している主要な製薬関連の企業の株価動向や、配当金・利回り、プレスリリースといった情報をまとめて提供しています。他の株価情報サイトと違う点として、株価と利回りの２軸グラフを提供している点が一番の目玉機能となっています（以外と他のサイトではやっていないです）。他にもドル建てと円建ての切り替え機能も実装しています。ウェブサイトなので外部からもアクセスすることが可能ですが、現時点では社内ツールとしての役割が大きく、アクセス数もわずかです。
株価と配当利回りの２軸グラフ
実はこのサービスには過去バージョンが存在していて、機能としてはプレスリリースを追加したぐらいです。ですが、フロントエンド・バックエンド共に大きく刷新していて、特にフロントエンドは１から作り直しました。まだまだ簡素なデザインで、一部レイアウトがスマホで崩れていたりと問題はありますが、前からは大きく進歩したと感じています。（前バージョンはNoteの記事として残しています。）
設計
この辺りのフォーマットに慣れていなくて、適切でない部分もあるかと思いますがご容赦ください。
技術スタック
フロントエンド
言語・フレームワーク
- Next.js
- React
- TypeScript
- JavaScript
- TradingViewのウィジェット組み込みに使用
主要ライブラリ
- Tailwind CSS
- Lightweight Charts
- TradingView開発のチャート描画ライブラリ
ホスティング
- Render
ツール
- Google Analytics
バックエンド
言語・フレームワーク
- Python
- Flask
- WebAppサービス内で使用される
- Selenium
データベース
- MariaDB
- phpMyAdmin
Webサーバ
- Nginx
- リバースプロキシとして機能する
- certbotで証明書取得
ツール
- Portainer
- 主に外部からのログの確認で使用
インフラ
- Docker
ホスティング
- Xserver VPS（Ubuntu）
構造図（バックエンド）
要件定義
簡単にですが、このような要件で制作しました。
- JAPAN-REIT.COMみたいなサイトを作る
- 株価と配当利回りの２軸グラフを含める
- ニュースリリースをスクレイピングして、ヘッダー、日付、リンクをまとめる
- 本文をコピーせず、直接企業サイトへ飛ばすことで権利問題を回避する
- 毎日自動で更新されるようにする
できたこと
一区切りつけることができた。
意外とそれっぽくできました。プログラミングの経験というか、Unityでゲームを作っていたというバックグラウンドはありますが、どの言語やフレームワークも初めて触るというところから、形にするところまで持って来れたのはエラいと自賛しています。
設計も考えて作ることができたのは個人的に進歩したと感じる部分です。
もともとのバージョンでは、フロントエンドもバックエンドも一緒のリポジトリに突っ込んでいましたが、今回の開発で目標の一つだったバックエンドを分離作業を完遂して、さらにその中のサービスをコンテナ化まですることまでできたのは良かったと認識しています。
課題
ロジックを理解しきれていない
ググって見つけた記事のコードと、生成AIに壁打ちしてできたコードをコピペすることが多く、GitHub Copilotには大いに助けられました。あたりまえですが言語ごとに構文が違うので、それぞれ推測してそれらしいコードを組んでくれるのは初学者にとっては楽でありがたかったです。
ですが書いたコードを見て、なんとなくどういった処理をしているのかはわかっていても、全体を把握しきれていない感があります。その言語を扱えるようになったという実感もあまりありません。
エラーの対処
サービスは動きますが、発生するかもしれない問題を把握しておらず、適切に対処する仕組みができていないので、例外の発生に怯えながら運用することになっています。エラーを通知する仕組みを実装しなかったのも残念でした。
根幹機能がスクレイピングに依存している
設計的にも技術的にも致命的な部分です。
株価や配当金額の取得はあるライブラリを用いて実装しているのですが、そのライブラリはスクレイピングを行うもので、大元のサイト構造が変われば一気に機能不全に陥ってしまいます。
また、ニュースリリースもスクレイピングで取得しているので、エラーが発生するたびに手作業で直さないといけない様になっています。（一応この部分はデータベースにCSSセレクタを保存していて、そこをアップデートすれば対応できますが。）
勉強不足
ここまで課題（だと思っている）の部分をつらつらと書いてきましたが、全部具体性に欠ける内容になってしまいました。問題意識はあっても、どんな問題があって、どうやって解決するかが見えていません。
今後
課題の解決というか、勉強しないといけないというそもそもの部分を脇に置いて、このサービスの今後について少し触れます。
このサービスには２軸グラフや、通貨の切り替え機能など、珍しい機能はありますが、これだけではユーザーが株の売買判断をするところまで到達できず、決定的な強みに欠けると見ています。そのため、機能の追加も積極的に考えていきたいです。
技術的な話からは少々脱線しますが、製薬のパイプラインの情報を掲載するということを今話し合っています。これは他の株情報サイトにない独自の強みになると考えていて、開発品がステージを進められるか否かで株価が大きく変動するので、本当に製薬企業に特化するのであれば欲しい情報になります。
ただどうやってそういった情報を集めて、瞬時に掲載するか新しく方法を考える必要があります。
さいごに
ここまでご覧くださりありがとうございます。
今回のサービスですが、一区切りつけることができて自分としては満足しています。課題を認識することができたのもプラスになったと思っています。
またこのような記録を残すことがあれば、ぜひまたご覧いただけたらと思います。
ありがとうございました。
Discussion