はい、M10iです。
今回はJavascript、ESモジュールを使ってる時に便利なVScodeのアドオンをご紹介。
まずESモジュールとはなんぞやってところですね。
ESモジュール（ESM, ECMAScript Modules）とは
import / export 文で読み書きする形式のJSモジュール。
いわばmoduleで動かさないといけないjsのライブラリのことです。
Javascriptを参照したhtmlをローカルで開くと(file://C:\index.html)
動いてくれない時がありますよね？ちゃんと同じフォルダにjsファイルも置いているのに
「CORSエラー」が出てしまう・・・
実はESモジュールはブラウザで <script type="module"> を使う場合、ローカルファイル（file://）では読み込めず、HTTP(S) サーバ経由で提供する必要があるんです。
なのでESモジュールのサンプルなどダウンロードしたのをそのまま開くと「CORSエラー」で止まっちゃう。
理由は、ブラウザが CORSやパス解決などのセキュリティルールを file:// に対して厳しくしているからなんです。たいていはCDN（Content Delivery Network）が公開されているのでそっち使うと解決できることも多いかと思います。
え、でもこのjsファイル参照したいんだけど？？？って事もありますよね。
ではどうするのかというとVSCode環境構築して設定されたローカルサーバを起動するなど方法はあるのですが、ようはHTTP(S) サーバをローカル環境に立ててあげないといけない。
※言語や環境によって方法は多種多様。
でもこれはちょっとひと手間ですよね。特に初心者さんの心を折ってきます。
ってことで、今回タイトルの便利アドオンLiveServerのご紹介です。
まずVScodeの拡張機能を選んで検索窓に「LiveServer」と入れてインストール。
これだけです。では早速、おためしコードです☆
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Three.js ESM Sample</title>
</head>
<body>
<script type="module">
import * as THREE from './three.module.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
参照しているのは黄色字の部分、threejsです(相対パスにしてます)
お手軽に3Dオブジェクトのアニメーションが扱えます。
キャラクターに踊ってもらったり簡単な3Dゲーム作ったり、用途はいろいろ。
今回は緑の立方体がクルクルするだけのサンプルコードです。
早速開いてみましょう。
まずはローカル。ちゃんと同じフォルダにライブラリファイルも置いていますね？
開いた結果は・・・・この通り。
CROSが出ていて、ページが真っ白ですね・・・
では、LiveServerから実行してみましょう。
VScodeの画面から同じファイルを右クリックで開く。これだけで・・・・
ブラウザが起動して・・・・この通り！
内部的にサーバを立ち上げてくれるのでファイルを開くだけでＯＫ。
これだけでサーバ起動してくれるので、わざわざ環境作らなくていいの便利ですよね。
昔はフォルダを用意してIISに入れて・・・といろいろしてたのが便利になったなぁと
ちょっと懐かしく思うM10iでした☆ではでは
