JavaScript
Firebase
React
material-ui

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


はじめに

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

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


制作物

SINHALITE'S PORTFOLIO

https://sinhalite.me/

Screenshot_2018-09-30 SINHALITE'S PORTFOLIO.png


手順


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、静的サイト公開するのには本当にうってつけですね。早い&簡単で素晴らしい:v: