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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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