
開発環境を整えよう
それでは、実装に必要な開発環境を整えていきましょう。
開発環境は以下の通りです
- React:v18.2.0
- Next:v13.2.4 (pageRouter)
- Node.js:v18.20.4
- Volta:v1.1.1
今回はNext.js(React)というライブラリを使いますが、基本的にはThree.jsの解説をメインに進めます。 と言っても、useEffectというhookの中にほぼすべての処理を書いていくので不慣れな方も大丈夫かと思います。
NodeとVoltaは今回のシリーズでは省略します。他サイトの記事を参考にしてください。
ライブラリの解説
React.js
Reactはユーザインタフェースをコンポーネントと呼ばれる部品を使って構築します。コンポーネントは独立しているため、再利用性が高く、メンテナンス面で運用がしやすいです。だがしかし...!、正しくコンポーネントを設計しないと逆に不便になってしまうのでそこが注意ポイントです。
Next.js
Next.jsはザックリ表現するとWEBの何でも屋さんです。Reactをベースに、サーバーサイドの処理記述や画像の最適化など、WEB開発に必要な機能がほぼ全て詰まったライブラリです(何でもできる子)。しかし、何でもできる分少しだけ難しい言葉が出てきますが、今回はそれがわからなくても大丈夫です。(できれば違う会で解説します)
Node.js
Node.jsはクライアント側(あなたのPC)でJavascriptを実行するための開発環境で、OSとのセキュリティに関わるやり取りを仲介してくれます。今回はクライアント側で使用されますが、サーバーサイドで使用されるツールだったりします(何でもできる子)。
Volta
nodeのバージョンを管理するツールです。
ちなみに、nextにはAppRouterとPageRouterがあります。これはnextの中でページ遷移をどのように構成するかの今回の場合はAppRouterの恩恵をあまり受けないのでPageRouterを使います。
プロジェクトデータ
制作データはGithubに公開するので、以下のリンクからクローンして試してみてね。