🙄

便利すぎる！！templete生成器を作りました

2025/03/14に公開

 やりたいこと毎回も同じことを書きたくないので、template機能を作成する。

jsファイルを生成するのが、普通のものとは少し違うポイントです。

jsを指定するだけで、ほしいtempleteが呼び出せる形にしたい。

 方針templateを上下に分け、上、下で別々で登録する。

これを用いて、template作成用のjsを作成する。

あとは、出力されたjsコードを保存し、htmlから指定する。
テンプレ上 + body +テンプレ下という形で挟み込むことでテンプレを実現。

main_content要素以外をすべて登録し、コンテンツ部分のみを書くことで、保守性が高まることを期待しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テンプレート用JavaScriptコード生成ツール</title>
    <style>
        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
        }
        #generatedCode {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>

    <h1>テンプレート用JavaScriptコード生成ツール</h1>

    <label for="topHtml">上部に挿入するHTML:</label>
    <textarea id="topHtml" placeholder="上部に挿入するHTMLを入力してください"></textarea>

    <label for="bottomHtml">下部に挿入するHTML:</label>
    <textarea id="bottomHtml" placeholder="下部に挿入するHTMLを入力してください"></textarea>

    <button id="generateButton">コード生成</button>

    <h2>生成されたJavaScriptコード:</h2>
    <pre id="generatedCode"></pre>

    <script>
        // HTMLをエスケープする関数
        function escapeHtml(html) {
            return html
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        document.getElementById('generateButton').addEventListener('click', function() {
            const topHtml = escapeHtml(document.getElementById('topHtml').value);
            const bottomHtml = escapeHtml(document.getElementById('bottomHtml').value);

            // テンプレート用のJavaScriptコードを生成
            const generatedCode = `
// HTMLの読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', function() {
    // 上部に挿入するHTML
    const topHtml = \`${topHtml}\`;

    // 下部に挿入するHTML
    const bottomHtml = \`${bottomHtml}\`;

    // 既存のHTMLを取得
    const existingHtml = document.body.innerHTML;

    // DOMParserを使用してHTMLを解析
    const parser = new DOMParser();
    
    // 上部のHTMLをデコードして解析
    const topDoc = parser.parseFromString(decodeHTMLEntities(topHtml), 'text/html');
    const topElements = Array.from(topDoc.body.children);
    
    // 下部のHTMLをデコードして解析
    const bottomDoc = parser.parseFromString(decodeHTMLEntities(bottomHtml), 'text/html');
    const bottomElements = Array.from(bottomDoc.body.children);
    
    // 既存のコンテンツを一時的に保存
    const tempContainer = document.createElement('div');
    while (document.body.firstChild) {
        tempContainer.appendChild(document.body.firstChild);
    }
    
    // 上部の要素を追加
    topElements.forEach(element => {
        document.body.appendChild(element);
    });
    
    // 既存のコンテンツを戻す
    while (tempContainer.firstChild) {
        document.body.appendChild(tempContainer.firstChild);
    }
    
    // 下部の要素を追加
    bottomElements.forEach(element => {
        document.body.appendChild(element);
    });
});

// HTMLエンティティをデコードする関数
function decodeHTMLEntities(text) {
    const textarea = document.createElement('textarea');
    textarea.innerHTML = text;
    return textarea.value;
}
            `;

            // 生成されたコードを表示
            document.getElementById('generatedCode').textContent = generatedCode;
        });
    </script>

</body>
</html>

使用例としては、
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストページ</title>
    <link rel="stylesheet" href="samplepage.css">
</head>
<body>
テンプレ上がここに
   ここにコンテンツをかく
    <script src="test.js">//再度呼び出されたりしないのか？不安
テンプレ下がここにくる
</script>
</body>
</html>

jsを呼び出す以外は、必要なことはありません。
cssは、好きなものを読み込んでください。
body要素をすべて取得し、再度設定していますが、この時のscriptがどのような挙動をするのかの理解があいまいです。読み込み時に、一度だけ実行しているので、問題はないと思います。しかし、そこら辺のことに詳しくないので、適宜問題等ありましたら、コメントしてくださるとうれしいです。

 再配布はいくらでもしてください。また、もっとよくできる場合は、もっと良くしていただいて、配布してほしいです。

自分は力不足なので、できることに限りがあります。

このコードは配布していただいて構いません。

クレジットもいらないので、より良いものを作って発信してくださると、大変助かります。
AIがすべてやってくれる時代にはなりましたが、まだ500行以上のコードを破綻なく改良する能力はないと感じています。現状のAIによる開発は不確実性がまだまだ大きいので、こういったものを作ることにまだ需要はあるのかなと考えています。軽めなものは、AIはしっかり作ってくれるので、試作だったり、関数単位で作るのであれば、しっかり使えるのかなという印象です。調べる時間が、AIに置き換わったのが大きいですかね。デバッグで無限に時間が無くなるので、それはありがたいですね。
ここまで読んでいただきありがとうございます。

以上です。

やりたいこと

方針

再配布はいくらでもしてください。

Discussion