ポートフォリオサイトを作り直した。せっかくなので技術選定の経緯と、実装でこだわった部分をまとめておく。
選択肢を並べて比較した
フロントエンドエンジニアがポートフォリオを作るとなると、Next.js や Astro を選ぶのが最近のトレンドだと思う。自分も最初はその方向で考えていた。
| ツール | 強み | 弱み |
|---|---|---|
| Next.js | 柔軟性が高い | ブログ管理が面倒 |
| Astro | 静的生成が速い | CMS 連携に手間がかかる |
| Hugo | 爆速、シンプル | カスタマイズに慣れが必要 |
| WordPress | CMS として完成している | 「エンジニアっぽくない」と思われがち |
Next.js + microCMS の構成も試作したが、記事を書くたびにローカルで確認してデプロイという流れが思ったより重かった。自分にとってブログは「気が向いたときにサクッと書く」ものなので、管理画面から即投稿できる WordPress の体験が勝った。
WordPress + 自作テーマを選んだ理由
既製テーマを使うとどこかで見たようなサイトになる。だからテーマはゼロから作ることにした。PHP でテンプレートを書くのは久々だったが、バックエンドをやっている分、functions.php やカスタムポストタイプの設計はそこまで苦にならなかった。WordPress のフック/フィルターの設計は改めて見ると良くできていると思う。
CMS として WordPress を選んだ最大の理由は「10年使い続けられる安心感」だ。Next.js のバージョンアップに追随し続ける自信がなかったというのが正直なところ。ポートフォリオは更新頻度よりも継続性が重要だと判断した。
ターミナル風デザインにした理由
デザインのテーマはターミナル（CLI）にした。「エンジニアが作った感」を一番自然に表現できるモチーフだと思ったから。フォントは JetBrains Mono を採用し、カラーパレットはダークテーマをベースにアレンジした。実装してみると、ターミナル風 UI は情報の構造を整理しやすく、コンテンツが映えるという発見もあった。
タイプライター演出を vanilla JS で自作した
コンタクトページのヘッダーに、英語でテキストが打ち込まれてから日本語に変換される演出を入れた。最初は typed.js の使用を検討したが、ライブラリを読み込むほどの複雑さでもないと思い、自分で書くことにした。
function convertStr(enStr, jaStr, onDone) {
var jaLen = jaStr.length;
var enLen = enStr.length;
var i = 0;
(function tick() {
if (i >= jaLen) { tn.nodeValue = jaStr; onDone(); return; }
var enStart = Math.floor(enLen * (i + 1) / jaLen);
tn.nodeValue = jaStr.slice(0, i + 1) + enStr.slice(enStart);
i++;
setTimeout(tick, 38);
})();
}英語を打ち終わった後、左から日本語に置き換わりながら同時に英語が削除される演出にした。prefers-reduced-motion も考慮して、アニメーション無効設定のユーザーにはテキストをそのまま表示する。ライブラリなしでも意外とシンプルに書けた。
感想と反省点
作ってみて良かった点は、WordPress の完成度を改めて実感できたこと。ブログを書く体験としては今のところ不満がない。反省点は自作テーマのコードが若干カオスになっている部分があること。時間を見つけてリファクタリングしたい。
技術選定に「正解」はないが、「自分が継続して使えるか」を軸にするのは大事だと改めて感じた。