検証環境を用意しようとした経緯

iOSエンジニアですが、アーキテクチャーやライブラリなど、フロント(Javascript)経由の技術が多いので簡単にデバックできるサーバーを作成してみようと思いました。ご自由にお使いください。

実行環境(MacとNode.js)

Mac環境であればNode.jsをインストールすれば実行可能です。

構築ステップ

Node.jsをインストール
node-v14.xx.x.pkgをダブルクリックしてインストールします。
(node-v14.17.4.pkgを使用しました)
https://nodejs.dev/download/
Githubよりnode-jsをチェックアウトする。
リポジトリ: https://github.com/rwakizaka7/node-js
Node.jsでexpressなど使用するライブラリをインストールする。package.jsonにライブラリの設定があります。

チェックアウト方法

$ cd [チェックアウト先フォルダ]
$ git clone https://github.com/rwakizaka7/node-js

Node.jsでライブラリインストール

$ cd node-js
$ npm install package.json

実行方法

node-js/htmlにブラウザからアクセスするHTMLを入れます。
HTTPサーバーを起動します。
http://localhost:3000 にアクセスし、ブラウザの内容を表示します。

HTTPサーバーの起動

$ node html-loader.js

使い方

Javascriptでゲームを作成するphaser3のチュートリアルを入れてみました。
ブラウザからファイルをたどれます。
Javascriptゲームの実行

ソースコード

node-js/html-loader.js

const express = require('express')
const os = require('os')
const fs = require('fs')
const ejs = require('ejs')
const app = express()
const scheme = 'http://'
const domain = getLocalIpAddress()
const port = 3000
const baseUrl = scheme + domain + ':' + port

const htmlFolderPath = '/html'
const indexTemplatePath = '.' + htmlFolderPath + '/index.html'

app.all(/^\/.+$/, express.static(__dirname + htmlFolderPath))

app.all(/\/$/, (req, res) => {
    const path = req.url.slice(0, -1)
    const top = path == ''
    const accessUrl = baseUrl + path
    const readingPath = '.' + htmlFolderPath + path
    getUrlAndTitleList(top, accessUrl, readingPath, (urlAndTitleList) => {
        const html = ejs.render(fs.readFileSync(indexTemplatePath, 'utf8'), {
            accessUrl: accessUrl,
            readingPath: readingPath,
            urlAndTitleList: urlAndTitleList
        })
        res.send(html)
    })
})

app.listen(port, () => {
    console.log('html-loader')
    console.log('Refer to ' + baseUrl)
    console.log('Ends in [control + C]')
})

function getLocalIpAddress() {
    var nis = os.networkInterfaces()
    nis = Object.keys(nis)
    .flatMap((key) => nis[key])
    .filter((ni) => ni.family == 'IPv4' && !ni.internal)
    
    var address
    if (nis.length > 0) {
        address = nis[0].address
    }
    
    return address
}

function getUrlAndTitleList(top, accessUrl, readingPath, complete) {
    fs.readdir(readingPath, (err, fileList) => {
        function createUrlAndTitleList(file) {
            return {href: accessUrl + '/' + file, title: file}
        }
        
        var _fileList = []
        
        if (!top) {
            _fileList.push('..')
        }
        
        if (fileList) {
            _fileList = _fileList.concat(fileList)
            _fileList = _fileList
            .filter((file) =>
                    indexTemplatePath != readingPath + "/" + file
                    && (file == '..'
                    || file.match(/^(?!\.).*$/)))
        }
        
        let urlAndTitleList = _fileList
        .map((file) => createUrlAndTitleList(file))
        
        complete(urlAndTitleList)
    })
}

node-js/html/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>html-loader</title>
    <style type="text/css">
        body {
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 13px;
        }
        hr.style1 {
            border-top: 2px dashed blue;
        }
    </style>
</head>
<body>
URLアクセス = <%=accessUrl%><br/>
アクセスフォルダ = <%=readingPath%><br/>
<hr class="style1"/>
<%
    const list = urlAndTitleList
    for(var i in list) {
%>
<a href="<%=list[i].href%>"><%=list[i].title%></a><br/>
<% } %>
</body>
</html>