質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

使いまわしたいインスタンスはどうやって渡す?

honamin
honamin

総合スコア3

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

223閲覧

投稿2023/01/23 13:07

前提

JavaScriptのThree.jsというWebGLライブラリでゲームを作っています。
このライブラリでは、
const scene = new Scene()
でシーンを作成して、何かモデルを追加する場合は このsceneのaddメソッドを使用します。

scene.add(追加したいモデルオブジェクト)

問題

クラスごとにファイルを分けて作っているので、他のファイルでsceneを使うために、どうしてもこのsceneインスタンスをバケツリレーのように渡していかなければならなく、sceneの他にも似たように全体で使いたいインスタンスがいくつか出てきてしまい、他に良い手法が無いかと質問させていただきました。

考えついたこと

単純に、全体で使いまわしたいインスタンスは、以下のように export して、使いたい場所で import する、というのは、なにかアンチパターンに触れてしまうのでしょうか?

const canvas = document.querySelector('canvas.world')
const scene = new THREE.Scene();

export {
canvas,
scene,
...
}

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

単純に、全体で使いまわしたいインスタンスは、以下のように export して、使いたい場所で import する、というのは、なにかアンチパターンに触れてしまうのでしょうか?

それが、importでモジュールとして使用する想定の使い方です。
なので、むしろ正しい使い方です。
exportimport文は、JSでも、他の言語同様の使用感が可能となった仕様です。
(それでも違う部分は多々あるが)

他の方法といえば、ルートオブジェクトに、定数として定義する方法ですが、

javascript

1// ルートスコープ上 2 3Object.defineProperty(this, 'constValue', { 4 value: value 5});

こうすることによって、ルートのオブジェクト(ブラウザだと、ルートオブジェクトはwindowを指す)に対して、
定数を定義とできるので、
他の後読み込みのJSファイル上でも定数を取得できます。

ただ、上記は、使う必要がある場面に止め、
exportimport文を使用した方が、
モダンで保守性が高いプログラムになると思います。

投稿2023/01/23 17:49

miyabi_takatsuk

総合スコア9503

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。