はじめに

今更企画！コピペ４回でちょっとイケてる hello world を10秒。たった10秒で作成。9割自分向けのチートですがひひーーん。今すげーアイディア思い浮かんだ。新しい Node の空環境すぐに欲しい。public ディレクトリに index.html を設置してすぐ見れるようにしたい。そんな私の願いを私が叶えて見せます！Node.js や npm コマンドはインストール済みの前提で行きます！

express

bash

mkdir -p ~/IdeaProjects/sandbox-node-js
mkdir -p ~/IdeaProjects/sandbox-node-js/public
cd ~/IdeaProjects/sandbox-node-js
npm init --yes
npm install express

app.js

[bash]~/IdeaProjects/sandbox-node-js/app.js

cat << EOS > ~/IdeaProjects/sandbox-node-js/app.js
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(18080);
EOS

index.html

[bash]~/IdeaProjects/sandbox-node-js/public/index.html

cat << EOS > ~/IdeaProjects/sandbox-node-js/public/index.html
<!DOCTYPE html>
<html>
    <body>
        <div id='container' ></div>
        <h2 id='hello'>Hello World!</h2>
        <script src='https://rawgithub.com/mrdoob/three.js/master/build/three.min.js' ></script>
        <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
        <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>
        <script>
            const SCREEN_WIDTH=window.innerWidth
            const SCREEN_HEIGHT=window.innerHeight
            const renderer = new THREE.CSS3DRenderer()
            renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT)
            document.getElementById("container").appendChild(renderer.domElement)
            const camera=new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000)
            const hello = new THREE.CSS3DObject(document.getElementById('hello'))
            const scene=new THREE.Scene()
            scene.add(camera)
            scene.add(hello)
            camera.position.z=200
            controls=new THREE.TrackballControls(camera,renderer.domElement)
            function render(){
                requestAnimationFrame(render)
                renderer.render(scene,camera)
                controls.update()
            }
            render()
        </script>
    </body>
</html>
EOS

起動

bash

node app.js

表示

http://localhost:18080/
(これはコピペに含めない)

最後に

sandbox-node-js のフォルダは最後にお好みにリネームすると良いでしょう。