はじめに

今まで制作物をQiitaに投稿してきましたが、数が多くなりユーザーページからだと見通しが悪くなっているので、ポートフォリオサイトを作ることにしました。

また合わせて新しい技術を習得できるように、ReactとそのコンポーネントであるMaterial-UIを利用して、Firebaseでホスティングすることとしました。

制作物

SINHALITE'S PORTFOLIO
https://sinhalite.me/

手順

1 - `create-react-app`でひな形作成

npm install -g create-react-app

2 - Material-UIのインストール

npm install --save @material-ui/core

3 - ファイル編集

ひな形のファイルを編集していきます。

Material-UIのモーダルウィンドウを使いたいため、demoページのコードを参考にしてファイルを作成します。いくつか種類があるのですが、今回はモーダル内でスクロールができるコンポーネントを使います。
Dialog React component - Material-UI

モーダルで制作したプログラムの情報を表示したいので、propsに該当のプログラムに関する情報を渡して、コンポーネント側で組み立て流ようにしました。

モーダル

<ScrollDialog
  title="競走馬の能力予測"
  alt="競走馬の能力予測"
  img="derby.png"
  techs={["Python","pandas","scikit-learn"]}
  qiita="c177299718d2eca7c1b6"
  description={<span>hogehoge</span>}
/>

スタイルについては、基本1カラムで構成しています。
中央のカード部分のみフレックスボックスで構成し、PCで2列/SPで1列となるようにしました。

4 - Firebaseにデプロイ

npm install -g firebase-tools
firebase login
firebase init
firebase deploy

おわりに

この規模だとReactを利用する恩恵は少ないかと思いますが、モーダル画面を簡単に実装することができました。大規模になるほどコンポーネントを使い回す箇所が増えると思うので、そういった場合に便利なんだろうなあと思いました。
そしてFirebase Hosting、静的サイト公開するのには本当にうってつけですね。早い&簡単で素晴らしい

React+Material-UI+Firebaseでポートフォリオサイトを爆速で作成した