Node.jsのExpressアプリをNext.jsでリファクタリングする

IPO(新規上場株)の評価をまとめて表示するアプリをリファクタリングする

今回の記事ではNode.jsのフレームワークの1つであるExpressで作成していたWebアプリをNext.jsでリファクタリングして開発していこうと思います。

なぜリファクタリングするのか・・・それはExpress アプリをFirebaseにデプロイする方法が分からなかったからです! (え・・?)

それとNext.jsの勉強のために! 最近仕事でNext.jsに触れられていないのでオフの時間を使ってプログラミングしないと腕が腐っちゃいます。

まず、デプロイしていないので相当古い画像になっちゃいますがExpressで作成した際の画面を貼り付けます。

こんな感じですね。全体的に3分割していて、それぞれ以下のような働きを持たせています。

  • 左側(スケジュール一覧)
    • 申込期間に入っている企業情報を表示
    • 購入期間に入っている企業情報を表示
  • 中央
    • 直近のIPO情報として会社名や上場日、評価などをまとめたテーブルを作成
    • 過去実績として会社名や上場日、評価などをまとめたテーブルを作成
  • 右側
    • IPO関連書籍の紹介
    • ここの部分は何を表示すべきか検討中

こんな感じですね。ここから詳しく実装手順を考えていきます。

Next.jsで実装するための手順を考える

まずNext.jsで開発する上で、開発環境と言語を選択しましょう。私は仕事でもNext.jsをあつかっているので仕事先と環境を合わせます。

  • 開発環境・・・Visual Studio Code
  • 使用言語・・・TypeScript

また、Next.jsを使うので画面デザインはMaterial UIを使っていく事にします。

そして開発していく上で以下の手順になるかなと思っています。

  1. 画面全体を3分割する
    • Material UIの Drawer を使って分割する予定
  2. 中央の 直近および過去履歴のテーブル2つを作成する
    • Material UIの Table を使ってテーブル作成
    • Material UIの Typographyを使ってテキスト作成
  3. 左側の申込期間と購入期間に入った企業情報を表示する
    • Material UIの Card を使って各企業情報を作成
  4. 右側のコンテンツ作成
    • 何を実装するかをそもそも検討中・・・
    • 従来通りならば販売ページへのリンクを貼って終わりだがどうするか
  5. Firebaseにデプロイする
    • FirebaseでWebアプリを公開する
    • Firebaseのデータベースは使用しない予定

上記のような流れで開発を行っていきます。開発は別記事でアップしていきます。

というか最近仕事でフロントエンド開発担当を外されかけているんですよね・・・。私しか触っていないSaaSがあって、それの担当にされてしまい・・・。

本当に勘弁してくださいよ・・・フロントエンドの開発者希望なんですけど~。正直私が担当してるSaaSはあんまりイケてなくて数年後にはサービス終了しそうですし。

こちらの記事にも書きましたがフロントエンドエンジニアが今後ソフトウェアエンジニアの中で需要が高そうですから頑張りたいですね。

フォローしてくれると嬉しいです

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA