はじめに

ポートフォリオという呼称の使い方はよくわかってないので職務経歴書とでもいいましょうか、そういったものにあたる Web サイトをこの度制作し、公開しております。
実は以前にも同じようなプロットで Web サイトを制作・公開していたので (https://hrfmmymt.github.io/skillsheet/) 、今回はある意味リニューアルとも言えるプロジェクトとなっています。

以前のサイト制作当時は、もう 丸四年以上前 のこととなるのですが、それは各所で業務委託に勤しんでいた頃のことです。業務委託マンとしての業務の一つとして取引先担当者に自分の概要を示すために 職務経歴書.xls （ファイル名は当記事での便宜上のものです）を更新するというものがあるのですが、その業務というのが自分にとっては非常につまらないもので、なんとか自分の過去を前向きに振り返ることができないかと思った次の瞬間には GitHub でリポジトリを新規作成していました。そのまま半日ほど作業をし、GitHub Pages でホスティングして完成したのは非常に簡素なペライチサイトでした。

そして今、改めて職歴サイトを再開発して公開しようと思ったのもいくつかのきっかけがあります。まず大きな一つとしては、自分の現在の所属企業にて、以前よりも深く採用に関わるようになったことがあります。
求職活動において用意する履歴書や職務経歴書といったいわば定型の書類は誰もが用意することと思いますが、我々のような技術職の場合、自らのスキルを示すためにコードや制作物を添えるというのが必須ではないにせよ、ある種の暗黙の了解のように扱われていると思っています。いや、思っていました。そういうものでもなかったという所感を持ったということです。いやいや、もっと作ればいいのに。もっと公開すればいいのに。という気持ちではあります。うーむ。
まあ、そんなようなのとか他にもいろいろがあって、丸四年前に一筆書きで作ったサイトの新バージョンを作ってみようと思い立ったのです。
それがこちら https://hrfmmymt.com 。ここから先は技術的な解説パートとします。

preact-cli

もうタイトルにしてしまっているのですが、preact-cli というツールにどっかりと乗っかっています。ざっくり言うと、この "30 秒で PWA を始められる" スターターで雛形を作って、あとはデザインとその他別途の作業をしていった感じです。すでに挙がっている PWA をはじめ、Preact による SPA 構築についてなど個々の技術トピックについての解説などはできるだけ最小限に抑えたり、省いたりしつつ、本項では雛形作成以降に行った作業の記録を申し訳程度で以下に記しておきます。こういう時はリポジトリを見るといいですね。
まずは CSS から追っていきましょうか。

クリティカル・レンダリング・パス CSS 最適化

これには、matthewlynch/preact-cli-plugin-critical-css を使用しました。ただただ、滅茶苦茶お手軽でしたという感想しかないです。元になってる anthonygore/html-critical-webpack-plugin という webpack プラグインなんかは、某ギョームサービスで投入してみたいなーという気持ちにもなりました。

CSS Modules

これは preact-cli デフォルトなんですが、例外的に書いておこうかと思います。はい、preact-cli 公式デフォルトは CSS Modules を採用しています。自分の好みとしては CSS in JS の特に styled-components だったのですが、SSR するなら自分でプラグインを書かないとなーと思いつつググってみたら robinvdvleuten/preact-cli-plugin-styled-components が出てきて「🤔」の顔になりました（作業当時は 2 commits）。とりあえず CSS Modules のまま書いています。↑はまだ試してないのです。

追記。その後試してみたんですが、この issue ( Doesn't work on the latest version of preact-cli · Issue #1 · robinvdvleuten/preact-cli-plugin-styled-components ) と同じ現象にハマり、もういいやとなりました。

CSS その他

あとは申し訳程度の Autoprefixer と prettier による整形くらいです。自動リンターは別にいらんと思いました。

JS Testing

そもそも preact-cli による JS 実装を振り返ると、そこまで複雑なデザインを要求されるサイトではなかったので Preact による React-Components と 仮想 DOM だけあればよく、さらに "-cli" によりルーティングと SSR と PWA というセットが簡単かつ軽量かつほぼ無思考で実装できたのが良かったなと思います。
ただ preact-cli は現状は、テストまでは付いてこないので自前で用意する必要がありました。とはいえテストコードはまだ TODO という形ですね。とりあえずは動くことが確認できたくらいです（このままやらないパティーンですかね）。
CI は CircleCI (これも自前で用意)、あとは Prettier と ESLint の --fix 連携とか。JS に関しては以上。

PWA

これも基本はほとんどやることないはずなんですけど、service-worker.js の生成にデフォルトで sw-precache を使用しているので、workbox を使いたいとかあったらカスタムする必要があります。自分は prateekbh/preact-cli-sw-precache を使用しています。カスタム目的としては 404.html を ignore するとかです。

泣いてるように見えるかもしれませんが、いないいないばあの「いないいない中」です。

その他

一応ドメイン取って、Firebase でホスティングしています。
それとこれは開発技術にはあたらないですが、長らく愛用していた Sublime Text とは本件でお別れして、Visual Studio Code に乗り換えました。

PageSpeed Insights はこう。

PC / SP 共に 90 超えの様子です。

おわりに

書き切りました。とりあえず。