初個人開発で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