【React Three fiber導入】ローカルでは動くのに本番環境では止まるときに確認してほしいポイントについて

こんにちは。プログラミング初心者のSarasaです。
Reactを使い慣れてくるとライブラリの豊富さに驚かされますよね。
やりたかったあの動作がこのライブラリなら簡単にできちゃう・・！

そろそろ3Dアニメーションに手を出したいな・・と思った頃、
**react three fiber**と出会ってしまいました。

※こちらは筆者がエラーコードに悪戦苦闘する様子を記載した記事となります。
「いや、そこ忘れちゃダメじゃない？？」と突っ込みたくなるポイントが出てくるかと思いますが、そこは、、さらっと流していただけると幸いです。オチはあります。

【開発環境】
＜フレームワーク＞
React ver. 18.2.0 (Create-react-app )

＜使用言語＞
JavaScript
CSS
HTML

# react three fiberって？？
JavaScriptライブラリのひとつであるThree.jsの記述を、React上で宣言的に記述することを可能としたライブラリ、それが**react three fiber**です。
記述量も少なく、読みやすく扱いやすいことも魅力のひとつです。
ではでは、[公式](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)に従い早速ライブラリをインストールしていきます。

``npm install three @react-three/fiber``


また、react three fiberの機能を補完してくれる**drei**もセットで入れてあげます。

``npm install @react-three/drei``



# おしゃれなデザインに仕上がってわくわく！のはずだったのに・・？
コードの書き方は[こちら](https://www.youtube.com/watch?v=J9t9Vmw6xSQ)を参考にしました。いつもわかりやすく素敵な動画をありがとうございます・・！！

ちょうど趣味の写真を紹介するサイトを作っていたため、おしゃれなページで写真を紹介できれば・・！と思いコードを書いてみました

```photoanime.js
/** @jsxImportSource @emotion/react */
import {css }  from '@emotion/react'
import Header from './compornent/header';
import Footer from './compornent/footer';
import Sidebar from './compornent/sidebar';
import { Image, Scroll, ScrollControls } from '@react-three/drei'
import { Canvas, useThree } from '@react-three/fiber';



function Images() {
  const {width,height}=useThree((state)=> state.viewport)
  return (
    <>
    <group>
      
        <Image url="./1.jpg" scale={[1,height,1]} position={[0, 0, 1]} />
        <Image url="./2.jpg" scale={[1,6,6]} position={[1.6, 0, 3]} />
        <Image url="./3.jpg" scale={[1,3.5,1]} position={[2 ,-height, 2]} />
        <Image url="./4.jpg" scale={[1.4, 2, 1]} position={[-1.3,-height,3.2]} />
        <Image url="./5.jpg" scale={[1, 1, 1]} position={[-1,0,4]} />
       
    </group>
    </>
  );
}


function Photoanime() {
    return (
      <>
      <div css={size}>
      <Sidebar/>
      <Header/>
      
      <Canvas>
        <ScrollControls pages={2} damping={3}>
          <Scroll>
           
          
        <Images/>
      
        </Scroll>

        <Scroll html>
          <div css={font}>
            <p>街が、</p>
            <p>私の世界を</p>
            <p>広げてくれた</p>
          </div>
        </Scroll>
        </ScrollControls>
    
      // </Canvas>
    
      <Footer/>
        </div>
      </>
    )
  }

  const size =css({
    backgroundColor:'aliceblue',
    width:'100vw',
    height:'100vh',
    margin:'0',
    padding:'0',
    display: 'flex',
    flexFlow: 'column',
     minHeight: '100vh'
  
  })

  const font =css({
    fontFamily: 'Noto Sans JP',
    fontSize: '4em',
    fontWeight: '400',
    letterSpacing: '0.1em',
    lineHeight: '0.5em',
     margin: '0',
     padding: '0',
     position:'absolute',
     top:'30vh',
     left:'1.5em',
     flexFlow: 'column',
     display: 'flex',
     whiteSpace: 'nowrap',
    
  })
  
  

export default Photoanime
```
また、今っぽく「Now Loading・・」も入れたかったので、
![NowLoading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/52d9bcc4-d0c3-9e71-db9f-b9958cf2868e.png)
の後にPhotoanime.jsで作成した下記
![表示させたいサイト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/c84b14dd-5ccf-9c98-66b1-232103085923.png)
が表示されるようCompornantを組み合わせていきます（この過程は本当にわくわくが止まらない・・！！
``npm start``でローカル上での動作を確認したのち、``npm run build``して本番環境に移行します。

# 恒例の真っ白ページ
過去の記事を読んでくださった方はお察しかと思いますが、またしても真っ白ページに出くわします。。

しかも今回は困ったことに
![NowLoading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/3778050e-dfec-474a-4178-c086fe53ad81.png)
が表示されてからの真っ白ページだったので、[私を悩ませたRouter](https://qiita.com/SarasaMorita/items/ee3a42f074ef38d9773e)のせいではないようです。

ルーティングに問題がないということは、react three fiber周辺が原因になっているはず。ひとまず、
* 「Now　Loading・・」と「Hello world!」のみのCompornentを繋げてみる
→表示される
* 「Hello world!」を直接Routerに繋ぐ→表示される
* ``Photoanime``を直接Routerに繋ぐ→表示されない
これらの検証の結果、仮設の通りreact three fiber周辺に問題があることがわかりました。また、ローカルではきちんと表示されていることから、buildの過程に問題があることは言うまでもありません。

そこで、buildの過程を観測できる[Vercel](https://vercel.com/home)を活用してみることにしました。

# おや？インストールされていないライブラリが・・？
それでは、Vercelでbuildの過程を見てみます。
![warning.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/cc1410b7-1e34-8bd5-27bd-46b316bdc733.png)
warningしかありませんね。
そりゃあbuild失敗するわけだ。。

react three fiber周辺に着目してみると、
![warning切り抜き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/df706084-2f03-5879-0554-6576799f4804.png)
three@・・？そういえばこの子はまだimportしていなかったような・・？

ここはひとまずpakage.jsonを確認してみます。

```pakage.json
"dependencies": {
    "@emotion/react": "^11.10.4",
    "@react-three/drei": "^9.32.4",
    "@react-three/fiber": "^8.8.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-responsive": "^9.0.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.4",
    "react-spring": "^9.5.4",
    "web-vitals": "^2.1.4"
  },
```
たしかにthreeが見当たらない。。
ん？？でも以前``npm install three @react-three/fiber``をした気がしたのだけれど、、、。

念のためターミナルを確認します。
![three余計じゃん.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/5631b31d-381e-aede-bee7-13b3281fd3ad.png)
一見うまくいっているような、、
![エラー祭り.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/83e006e4-ff0a-0e50-61fc-a92114b36864.png)
**うまくいっていませんでした。**

`` @react-three/fiber``、 ``@react-three/drei``はインストールされているので、
``npm install three``を試してみます。
えい！

![threeのみインストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/5660396c-8c12-3b70-50dc-d1dd6d88f0ab.png)
![完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/74406d36-f5a5-4885-d351-694108a6d755.png)
ちゃんとインストールできたよ・・！

念のためpakage.jsonを再度確認します。

```pakage.json
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@react-three/drei": "^9.32.4",
    "@react-three/fiber": "^8.8.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-responsive": "^9.0.0",
    "react![NowLoading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/0383158f-0dee-a95e-3506-f6b725e7c374.png)
-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.4",
    "react-spring": "^9.5.4",
    "three": "^0.145.0", //threeが追加されました//
    "web-vitals": "^2.1.4"
  },
```
ちゃんと追加されています。
改めて``npm run build``してみます。

![NowLoading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/dd5d1e41-7c80-a0a1-4e57-6ffbd41e2792.png)
そこまで表示されるのはわかっているんだ。。
さあ。。
![表示させたいサイト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/2ed93b71-e3cc-87d6-e3cf-02ab5e88f582.png)
**きました。**
さようなら真っ白ページ・・！！

# なぜthreeがインストールされていなかったのか？？
これについては検証中なのですが、恐らくCreate-react-appで環境構築していたのが原因なのではないか？？と考えています。コマンドひとつで簡単に環境構築できるものの、webpackと比較すると自由度が低い部分があるようなのです。

今回は``npm install three @react-three/fiber``を**公式からコピペしたのでうまくいくはず、という思い込み**がハマってしまった最大の原因でした。また、いずれのサイトも``three.js``、`` @react-three/fiber``、 ``@react-three/drei``がセットでインストールされていて、``three.js``がベースとなっている知識が完全に抜け落ちていました。
「面白そうだから導入しよう！！」だけではなく、それぞれのライブラリの歴史をきちんと勉強する必要があったみたいです。

また、ターミナルの**エラー表示をきちんと確認せずに**開発を進めてしまった部分も反省すべきポイントだと考えています。

今まで通り「とりあえず手を動かす→ハマる→仮説・検証・調査→成功→反省」は継続しつつ、基礎部分もきちんと固めていければと思っています。



# 参考ページ
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた
https://liginc.co.jp/587025

Reactで3D表現！react-three-fiberを使ってみよう
https://tamalog.szmd.jp/react-three-fiber/

React-three-fiber is a React renderer for three.js.
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

React×Three.jsで3Dスクロールウェブサイトを作ってみよう(react three fiber)
https://www.youtube.com/watch?v=J9t9Vmw6xSQ

Vercel https://vercel.com/home