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