ポートフォリオについて

使用している技術

  • Astro
  • Figma
  • pnpm
  • Tailwind CSS
  • three.js
  • TypeScript
  • Vercel

このポートフォリオそのものも制作物の1つと捉えています。作った経緯や使用している技術、今後の展望などを記載します。

作った経緯

今のポートフォリオを公開する以前に、Gatsbyで作ったものがありました。
作った当時はReactの勉強を始めたいと思っていた頃で、ブログなどに適した Gatsby を選びました。

Gatsby自体はとても良いツールでReactの勉強にもなりましたが、自分の作りたいポートフォリオにはオーバースペックかもしれない、と思うように……。
新しい技術の勉強をしたかったのと、もっとシンプルなものを作りたいと思い、Astroで作り直すことにしました。

技術選定の理由

正直、技術選定というほど大仰なものではありませんが、それぞれを選んだ理由を記載します。

Astro

私が作ろうとしているものは、ほとんどブログサイトのようなものです。 記事や外部へのリンクがあるばかりで、動的に変化するような要素はほとんどありません。

そのため、ReactやVue、あるいはそれらを用いたフレームワークはオーバースペックだと考え、Astroを選びました。

直接的にAstroの話ではありませんが、Content Collections の機能ともあわせて、記事のスキーマも Zod で定義しています。

Figma

2023年現在のデザインツールとしてはFigmaがスタンダードだと考え、選んでいます。

またFriends of Figma Nagoyaというコミュニティのアドボケートをしたり、入門用の書籍を出版したりしています。 そのため、布教活動も含めて、ポートフォリオ制作でもFigmaを使うことにしました。

pnpm

2024年12月まではパッケージマネージャーにbunを使っていましたが、pnpmに変えました。 bunを使う以前はpnpmを使っていたので、一周回って戻ってきた結果となります。

以下のような理由でpnpmに戻しました。

  • bunはロックファイルがバイナリで差分が見れない
    • 解消もできるがいくらか設定が必要
  • pnpmにmanage-package-manager-versions機能がついた
    • corepackが廃止になるかもしれないので、パッケージマネージャー自体のバージョン管理を考える必要がある
    • ただしそこまで労力をかけたくない

Tailwind CSS

世間でかなり使われていることは認識していたのですが、日頃の業務や個人開発でなかなか使うことがありませんでした。

というのも、ちょっとした新規サービスなら1から書いた方が早く、既存のサービスでは新たに導入する決定には至らない、という状況だったからです。

これだけスタンダードになりつつある技術を触っていないのは問題かもしれないと思い、半ば強制的に導入することにしました。

ポートフォリオ制作においても、正直言ってAstroによるスコープ設定だけを活かした素のCSSを書く方が早かったのですが、ひとまず練習中です。

three.js

ここ最近はクリエイティブコーディングに興味があり、canvas関連のインプットをしていることが多かったです。

中でも、オンスクリーンにおけるノイズ表現は面白いと感じていて、それを活かして何か作りたいと思っていました。
デジタルコンテンツはムラや不均衡がなく非常に綺麗なのが魅力ですが、逆にそれが物足りないと感じることもあります。
特に最近はフラットデザインからの脱却が進んでいるように感じていて、その一環として動くノイズを実装してみました。

初めてシェーダーを自分で書いてみてもいます。

p5.jsを使っていた時期もあるのですが、公式ドキュメントや世の中での導入事例の多いthree.jsへ移行しました。

TypeScript

AstroにはデフォルトでTypeScriptのサポートが組み込まれているため、利用しない手は無いと考えました。

ロジックはほとんど書かないのですが、Figmaを用いてコンポーネントベースでデザインを組むなら、propsの型を定義しておいた方が安心できると思っています。

Vercel

Astroの公式ドキュメントでは最初にNetlifyが紹介されているのですが、Vercelを選びました。

以前のポートフォリオで Netlify を使っていましたが、若干パフォーマンスが悪かったです。 最初はなんとなく感じた程度でしたが、調べると以下のような記事も見つかり、乗り換えることにしました。

デプロイ周りは自分の知識がほとんどないため、有名なものやドキュメントが豊富そうなものを選ぶことしました。

そんな中、VercelはAstroの公式ドキュメントで2番目に記載されているのと、Astroのスポンサーもしているので安心感があり選びました。

今後の展望

Transition APIを使った画面遷移や、Instagramの投稿との連動などを実装したいと考えています。

2023 年 9 月 18 日追記:
Transition APIを使って簡単な画面遷移を実装しました。