波括弧の働きはなんですか

Question

下記のコードのinit()の中に単に { } で囲まれた部分があります。関数でもなく変数に入れるわけでもなく、これは何のための { } なのでしょうか？ どのような働きがありますか？

    <script>
      // ページの読み込みを待つ
      window.addEventListener('load', init);

      function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: document.querySelector('#myCanvas'),
          antialias: true//アンチエイリアス 物体の輪郭がギザギザになることを抑える処理 動きが重たくなる場合がある
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        // レンダラー側で影を有効に
        renderer.shadowMap.enabled = true;

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        //平行投影を表現できるカメラです。このカメラには遠近感がないので、手前にある3Dオブジェクトも奥にある3Dオブジェクトも同じ大きさで表示されます
        //left, right, top, bottom, near, far
        const camera = new THREE.OrthographicCamera(-480, +480, 270, -270);

        // 光源を作成
        //色, 光の強さ, 距離, 照射角, ボケ具合, 減衰率
        {
          const spotLight = new THREE.SpotLight(
            0xffffff,
            4,
            2000,
            Math.PI / 5,
            0.2,
            1.5
          );
          spotLight.position.set(500, 300, 500);
          spotLight.castShadow = true; // 影を落とす設定
          spotLight.shadow.mapSize.width = 2048;
          spotLight.shadow.mapSize.height = 2048;
          scene.add(spotLight);
        }

        // 地面を作成
        {
          // 床のテクスチャー
          const texture = new THREE.TextureLoader().load('imgs/floor.png');
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // リピート可能に
          texture.repeat.set(10, 10); // 10x10マスに設定
          texture.magFilter = THREE.NearestFilter; // アンチエイリアスを外す

          const floor = new THREE.Mesh(
            new THREE.PlaneGeometry(1000, 1000),
            new THREE.MeshStandardMaterial({
              map: texture,
              roughness: 0.0,
              metalness: 0.6
            })
          );
          floor.rotation.x = -Math.PI / 2;
          floor.receiveShadow = true; // 影の設定
          scene.add(floor);
        }

        // マス目を作成
        {
          // 立方体のマテリアルとジオメトリを作成
          const material = new THREE.MeshStandardMaterial({
            color: 0x2299ff,
            roughness: 0.1,
            metalness: 0.2
          });
          const geometry = new THREE.BoxGeometry(45, 45, 45);

          // 立方体を複数作成しランダムに配置
          for (let i = 0; i < 60; i++) {
            const box = new THREE.Mesh(geometry, material);
            box.position.x = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
            box.position.y = 25;
            box.position.z = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
            // 影の設定
            box.receiveShadow = true;
            box.castShadow = true;
            scene.add(box);
          }
        }

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
          // 角度に応じてカメラの位置を設定
          camera.position.x = 500 * Math.sin(Date.now() / 2000);
          camera.position.y = 250;
          camera.position.z = 500 * Math.cos(Date.now() / 2000);
          // 原点方向を見つめる
          camera.lookAt(new THREE.Vector3(0, 0, 0));

          // レンダリング
          renderer.render(scene, camera);
          requestAnimationFrame(tick);
        }
      }
    </script>

Comments

[otn]

どれのことですか？

Answer 1

ブロックスコープを使うために書いています。{} 内でletやconstで宣言された変数などは、その {} 内部でのみアクセス可能です。

ブロック - JavaScript | MDN

今回のコードでは、scene.addするために一時的に用いられる変数(spotLightなど)が、他の部分からはアクセスできないようにしています。

Comments

[takahashi-one]

ありがとうございました

Answer 2

オブジェクトリテラルを表す{ }を知らないと思えないので、「光源を作成」「地面を作成」などの後のものですかね？

これは単なるブロックです。
書いている目的としては、const（やlet）で宣言した変数名のスコープをこのブロック内に限定するためでしょう。
例えば、spotLightという変数名はこのブロックの外では無効（未定義）です。

Comments

[otn]

長いプログラムの場合、囲んでないと、プログラムを読む人は「spotLightが後ろの方でもまた出てくるかも」という前提でプログラムを読む必要がありますが、囲まれていると、以降を読むときにspotLightの事は忘れて良くなります。頭の中に覚えておく情報が少なくて済むので、読み手に優しい。

関数として独立させるのも手です。

[takahashi-one]

ありがとうございました