ポートフォリオについて
使用している技術
- Astro
- Bun
- Figma
- Tailwind CSS
- three.js
- TypeScript
- Vercel
このポートフォリオそのものも制作物の 1 つと捉えています。作った経緯や使用している技術、今後の展望などを記載します。
作った経緯
今のポートフォリオを公開する以前に、Gatsby で作ったものがありました。
作った当時は React の勉強を始めたいと思っていた頃で、ブログなどに適した Gatsby を選びました。
Gatsby 自体はとても良いツールで React の勉強にもなりましたが、自分の作りたいポートフォリオにはオーバースペックかもしれない、と思うように……。
新しい技術の勉強をしたかったのと、もっとシンプルなものを作りたいと思い、Astro で作り直すことにしました。
技術選定の理由
正直、技術選定というほど大仰なものではありませんが、それぞれを選んだ理由を記載します。
Astro
私が作ろうとしているものは、ほとんどブログサイトのようなものです。 記事や外部へのリンクがあるばかりで、動的に変化するような要素はほとんどありません。
そのため、React や Vue、あるいはそれらを用いたフレームワークはオーバースペックだと考え、Astro を選びました。
直接的に Astro の話ではありませんが、Content Collections の機能ともあわせて、記事のスキーマも Zod で定義しています。
Bun
2023 年 10 月 12 日追記:
Bun をパッケージマネージャーとして使っています。
Bun は 2023 年 9 月 8 日にバージョン 1.0 がリリースされたばかりです。 もともと PNPM を使っていましたが、速いに越したことはないため Bun へ乗り換えました。
Figma
2023 年現在のデザインツールとしては Figma がスタンダードだと考え、選んでいます。
またFriends of Figma Nagoyaというコミュニティのアドボケートをしたり、入門用の書籍を出版したりしています。 そのため、布教活動も含めて、ポートフォリオ制作でも Figma を使うことにしました。
Tailwind CSS
世間でかなり使われていることは認識していたのですが、日頃の業務や個人開発でなかなか使うことがありませんでした。
というのも、ちょっとした新規サービスなら 1 から書いた方が早く、既存のサービスでは新たに導入する決定には至らない、という状況だったからです。
これだけスタンダードになりつつある技術を触っていないのは問題かもしれないと思い、半ば強制的に導入することにしました。
ポートフォリオ制作においても、正直言って Astro によるスコープ設定だけを活かした素の CSS を書く方が早かったのですが、ひとまず練習中です。
three.js
ここ最近はクリエイティブコーディングに興味があり、canvas 関連のインプットをしていることが多かったです。
中でも、オンスクリーンにおけるノイズ表現は面白いと感じていて、それを活かして何か作りたいと思っていました。
デジタルコンテンツはムラや不均衡がなく非常に綺麗なのが魅力ですが、逆にそれが物足りないと感じることもあります。
特に最近はフラットデザインからの脱却が進んでいるように感じていて、その一環として動くノイズを実装してみました。
初めてシェーダーを自分で書いてみてもいます。
p5.js を使っていた時期もあるのですが、公式ドキュメントや世の中での導入事例の多いthree.jsへ移行しました。
TypeScript
Astro にはデフォルトで TypeScript のサポートが組み込まれているため、利用しない手は無いと考えました。
ロジックはほとんど書かないのですが、Figma を用いてコンポーネントベースでデザインを組むなら、props の型を定義しておいた方が安心できると思っています。
Vercel
Astro の公式ドキュメントでは最初に Netlify が紹介されているのですが、Vercel を選びました。
以前のポートフォリオで Netlify を使っていましたが、若干パフォーマンスが悪かったです。 最初はなんとなく感じた程度でしたが、調べると以下のような記事も見つかり、乗り換えることにしました。
- Netlify が日本からだと遅い - id:anatoo のブログ
- Netlify が遅いので Vercel に移行した | Lambdar
- 日本国内だと Netlify より Cloudflare Pages の方が速い! - Qiita
デプロイ周りは自分の知識がほとんどないため、有名なものやドキュメントが豊富そうなものを選ぶことしました。
そんな中、Vercel は Astro の公式ドキュメントで 2 番目に記載されているのと、Astro のスポンサーもしているので安心感があり選びました。
今後の展望
Transition API を使った画面遷移や、Instagram の投稿との連動などを実装したいと考えています。
2023 年 9 月 18 日追記:
Transition API を使って簡単な画面遷移を実装しました。