Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイト
Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイトを技術的な観点で解説させて頂きます。
目次
2.Astro+Spline+React+TypeScriptの組み合わせのメリット
はじめに
私自身フリーランスとして活動するエンジニアにとって、Webサイトは自身のスキルや作品をアピールする重要なツールです。
特に、3D表現を取り入れたインタラクティブなデザインは、他のサイトとの差別化につながります。
本記事では、Astro + Spline + TypeScript を活用し、型安全かつメンテナブルな3Dウェブサイトを構築する方法を解説します。
Astro + Spline + React + TypeScript の組み合わせのメリット
型安全でメンテナブルなコード
TypeScript を導入することで、型の保証ができるため、コードの品質が向上し、長期的なメンテナンスが容易になります。
私がプログラミングを始めたのが、C言語です。変数の型を宣言する必要があったため、型の保証ができました。
Web系では、型やメモリを気にせずに作成して動作することができます。
型の保証ができないため、バグの原因が特定しにくく、デバッグが難しかったと感じました。
そのため、型の保証ができる TypeScript を導入することで、コードの品質が向上し、長期的なメンテナンスが容易になりました。
Astro によるパフォーマンス最適化
Astro は静的サイト生成(SSG)やサーバーサイドレンダリング(SSR)をサポートし、軽量なWebページを作成できます。これにより、
3D要素を含むサイトでも爆速に動作します。
Spline による直感的な3Dデザイン
Spline は、ノーコードまたはローコードで 3D モデルを作成できるツールです。
Blenderや、Unityなどの3Dツールを使うよりも、直感的に3Dモデルを作成できます。
Astro との統合により、ブラウザで動作する軽量な3Dアニメーションを簡単に組み込めます。
Splineの基本的な使い方
Spline の基本的な使い方
Spline で 3D モデルを作成する
Spline にアクセスし、アカウントを作成。
「New File」をクリックして新しいプロジェクトを作成。
左側のツールを使って 3D モデルを作成。
アニメーションやマテリアル（テクスチャ）を適用。
「Export」>「Code Export」を選択し、公開URLを取得。
Astro に Spline を組み込む
取得した公開URLを Reactでコンポーネントとして埋め込むことで、簡単に3DモデルをWebページに表示できます。
import Spline from "@splinetool/react-spline";
export default function SplineComponent() {
let objectToHide;
const onLoad = (spline) => {
objectToHide = spline.findObjectByName("speaker"); // Spline で設定したオブジェクト名
};
const toggleVisibility = () => {
if (objectToHide) {
objectToHide.visible = !objectToHide.visible;
}
};
return (
<>
<Spline scene="https://prod.spline.design/******/scene.splinecode" onLoad={onLoad} />
<button onClick={toggleVisibility}>表示/非表示</button>
</>
);
}
この方法なら、軽量かつスムーズに 3D モデルを埋め込むことができます。
3Dのオブジェクト名を取得することで、Astro側より表示・非表示の制御を行うことができます。
3Dが表示できるWebサイトの構築方法
Astro の SSR を活用する
通常、3Dコンテンツを含むサイトは JavaScript 依存度が高くなりがちですが、Astro の SSR 機能を活用することで、爆速なサイトを作成できます。
アイランド機能があるため、ページ全体を再読み込みせずに、特定のコンポーネントだけを更新することができます。
// src/pages/index.astro
---
import SplineComponent from "../components/SplineComponent.astro";
---
<html lang="ja">
<head>
<title>3D Portfolio</title>
<meta name="description" content="3Dポートフォリオサイト構築方法" />
</head>
<body>
<SplineComponent client:load />
</body>
</html>
コンポーネント(部品化)することで保守性向上します。
ポイント:
コンポーネント分割: Spline のコードを個別のコンポーネントにすることで、再利用性と可読性を向上。
Strict Mode の活用: TypeScript の厳密な型チェックを有効にしてバグを未然に防ぐ。
命名規則の統一: 変数や関数の命名を明確にして、可読性を高める。
パフォーマンス最適化 (Lazy Load & Code Splitting)
Spline の 3D モデルはリソースを多く消費するため、遅延ロードを活用することでサイトの読み込み速度を改善できます。
これにより、SEO に影響を与えずに 3D モデルを後から読み込むことができます。
まとめ
Astro + Spline + TypeScript を活用すると、 型安全でメンテナブルなコード が実現できる
3D Web サイト を作ることが可能です。
パフォーマンスを最適化しながら 3D 表現が可能です。
フリーランスのポートフォリオサイトや、企業のデモページとして活用することで、他のサイトと差別化できるでしょう。
3Dアニメーションを活用した Web サイト制作を検討している方は、ぜひ試してみてください。
参考文献とリンク
株式会社アマテック 公式サイト
※Tech ブログで記載されている内容です。