ポートフォリオサイトをFirebase + Next.jsでシュッと作った

ちょろっと前にこんな話があったので、簡単にポートフォリオサイトを構築した。

僕のポートフォリオサイトは「その人の世界観がきちんと伝わるデザインでかつFirebaseでnext.jsとreactをtypescriptで作る」ことが決まったので帰ってNintendo Laboやりたい。

— ふじけん (@kenshir0f) 2018年4月24日

業務でFirebaseを使うため、慣れつつ新しい技術を使ってみたいという思いで手を出してみた感じです。

ポートフォリオはこちら

触りたかった技術

• Firebase
• Next.js
• React
• Typescript
• Storybook
• (AtomicDesign)

デザイン

シュッと公開したかったので中身はほぼなしの一枚ページをsketchで作りました。
細かいところは後で直す予定。

構成

最近は業務でAtomicDesignの思想を取り入れてるので、コンポーネント単位で区切るのを意識して実装しました。
今回のページ構成はこんな感じ。めちゃくちゃシンプル。

Firebase

個人のポートフォリオでFirebaseを選んだ理由として

• 無料でhttpsの設定が出来る
• デプロイが簡単
• (業務で使ってるので慣れたい)

という感じ。
httpsは自動で行ってくれるので何もしなくて良くて最高。
デプロイもfirebase deployと入力するだけなのでちょっとした修正もすぐ反映できます。
ただデプロイ時間がめちゃくちゃ長いのはなんとかしてほしい。。。

Next.js

Next.jsはpagesディレクトリにindex.tsxを入れとくと/につながり、hoge.tsxを入れると/hogeにルーティングしてくれる非常に便利なやつです。
いちいちページを作るたびにルーティングの設定をしなくて済むので気軽に作れます。
今回はindex.tsxと_error.tsxを用意しました。後者は404ページのデザインを適用させています。

React

モダンなのとAtomicDesignと相性がいいので使ってみた。
現状のペライチだと恩恵が少ないが、今後拡張していく予定なので真価はこれから発揮されるであろう。

Typescript

単純に型定義をしっかりしてプログラミングしたかったので採用した。 それ以外の理由は特になし。

Storybook

AtomicDesignの参考書に導入方法が乗っていたのでそのまま使ってみた。
Typescriptに変換するところだけ注意すれば、コンポーネント単位でデザインをテストできるので便利。

(AtomicDesign)

前のブログで書いたとおり、デザインと実装の変更に強い仕組みなので採用。
今回は実装の部分で練習がてらいろいろ試してみた。

その他細かいところ

metaタグと共通のcss

共通で使いたい要素はutilsというフォルダに分けてimportしています。
こうするとHeadタグにタイトルやogpの設定ができるのでページごとで分けられて便利。
cssも共通のカラーを定義したファイルを置いてimportしているので変更があっても一箇所で済むのはよい。

SpeedTest

デプロイ後に https://gtmetrix.com/ でサイトのスピードテストをチェックした。
画像の圧縮で改善ポイントが見つかったのでそのとおりに従った。
キャッシュするともっと良いらしいがやり方が分からなかったので後で改善する予定。

終わりに

とにかくスピードを優先して実装したのでこれからちょっとずつ直していきます。
今後はブログもhatenaから自前のものに移していきたい。。。やっていくぞ！！！