Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイト

 
      
# Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイト

Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイトを技術的な観点で解説させて頂きます。

## 目次
  [1.はじめに](#はじめに)

  [2.Astro+Spline+React+TypeScriptの組み合わせのメリット](#Astro+Spline+TypeScriptの組み合わせのメリット)
   
  [3.Splineの基本的な使い方](#Splineの基本的な使い方)

  [4.3Dが表示できるWebサイトの構築方法](#3Dが表示できるWebサイトの構築方法)

  [5.まとめ](#まとめ)

  [6.参考文献とリンク](#参考文献とリンク)

## はじめに
 私自身フリーランスとして活動するエンジニアにとって、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](https://spline.design/) にアクセスし、アカウントを作成。
 
 「New File」をクリックして新しいプロジェクトを作成。
 
 左側のツールを使って 3D モデルを作成。

 アニメーションやマテリアル（テクスチャ）を適用。
 
 「Export」>「Code Export」を選択し、公開URLを取得。

### Astro に Spline を組み込む
 
  取得した公開URLを Reactでコンポーネントとして埋め込むことで、簡単に3DモデルをWebページに表示できます。

```jsx
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 機能を活用することで、爆速なサイトを作成できます。

 アイランド機能があるため、ページ全体を再読み込みせずに、特定のコンポーネントだけを更新することができます。

```ts
// 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 サイト制作を検討している方は、ぜひ試してみてください。

## 参考文献とリンク
[株式会社アマテック 公式サイト](https://ama-tec.jp)
※Tech ブログで記載されている内容です。

 [Astro公式サイト](https://astro.build/)
 
 [Spline公式サイト](https://spline.design/)
 
 [TypeScript公式サイト](https://www.typescriptlang.org/)
 
 [React公式サイト](https://reactjs.org/)