Vanillaなコードでjinjaができる事をやりたかった（初心者向け）

HTMLで同じ内容の繰り返しをどうするか？

最近のモダンなフレームワークであるnext.jsやReactでは共通部品を作って使い回すってのは一般的みたいなんだが、ヴァニラなHTMLの場合はそれができない。これから書くのはそれをどうやって楽チンに対処するかって話です。

Pythonならできたのに

PythonのWebサービス構築フレームワークであるDjangoやFlaskではjinjaっていうテンプレートエンジンが採用されており、そいつは使いまわしができる部分と要求毎にレンダリングしなきゃならない部分を分けて、クライアントへ送信する時点で合体させるって技が使えてとても便利だった。なので、ヴァニラなHTMLでも同じような事ができないかなぁなんて考えてたら、突然「javascriptを使えばいいじゃないか」って思いつき、そいつを生成AIに相談したらあっさりとコードを書いてくれたので実装したらすんなりうまく行ったって話です。

具体的になにを実現したのか？

一般にWebサイトの場合、画面の先頭と最後は同じ表示があるのが一般的だと思っとります。で、ヴァニラな場合はHTMLごとに全く同じ内容を記述するってのが一番単純なやり方ですね。WordPressではブロックっていうおしゃれな考え方が採用されてそれに対応しているみたいだけど、同じ事をやりたかったわけです。

例えば下の画像にあるヘッダやフッタの部分ですね。

で生成AIが書いてくれた実際のコードがこれ。

/**
 * 共通のヘッダーとフッターを生成し、DOMに挿入する関数。
 */
function generateCommonParts() {
    // 1. ヘッダーのHTMLを生成
    const headerHtml = `
        <div class="container">
            <h1 class="logo">
                <img src="/statics/img/inchiki_studio.webp" width="80">
                <a href="/index.html">INCHIKI STUDIO inc.</a>
            </h1>
            <nav class="main-nav">
                <ul>
                    <li><a href="/index.html#about">事業概要</a></li>
                    <li><a href="/company.html">会社紹介</a></li>
                    <li><a href="/works.html">事例</a></li>
                    <li><a href="/post.html">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    `;

    // 2. フッターのHTMLを生成
    const footerHtml = `
       <div class="container">
                <a href="https://x.com/" target="_blank" rel="noopener noreferrer">
                    <img src="/statics/img/logo-white.webp" width= 25 style="margin: 10px; alt="Icon 2" /></a>
                <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
                    <img src="/statics/img/instagram_icon.webp" width = 25 style="margin: 10px; alt="Icon 3" /></a>
                <br>
            <p>&copy; 2025 INCHIKI STUDIO inc. All rights reserved.</p>
            <p>これは架空の会社紹介サイトです。</P>
        </div>
    `;

    // 3. ヘッダーを挿入
    const headerElement = document.querySelector('.site-header');
    if (headerElement) {
        headerElement.innerHTML = headerHtml;
    }

    // 4. フッターを挿入
    const footerElement = document.querySelector('.site-footer');
    if (footerElement) {
        footerElement.innerHTML = footerHtml;
    }
}

// ドキュメントが完全に読み込まれた後に実行
document.addEventListener('DOMContentLoaded', generateCommonParts);

こいつを各HTMLのscript句に仕込んでおいて、HTMLではbody句の先頭あたりへdiv句のidにsite-headerやscript句の前あたりにsite-footerなどと記述しておけばどこのページを開いても全く同じものを表示してくれました。

ふとこれを思いついてとには「ワシって天才か！」って思いましたが、まあ界隈の歴戦の皆さんやモダンフレームワークをグリングリンと使いこなしている皆様には「けっ、いまさらかい」って思われるかもしれません。が、ちょっと嬉しかったことと、後々思い出せるようにメモとして残して送って次第です。

以下のリンクは実際に架空の会社紹介サイト作ってやっていた事例っす。ちなみにお知らせなどはヘッドレスCMSの無料枠を使ってますんで、特にデザインにはこだわらない、とりあえず情報発信したいって会社があれば、Cloudflareなどの無料枠がある配信サービスを利用すればこれくらいのことを実現するのはそんな難しいことじゃありませんし。JavascriptでゴニョゴニョやってたりするとSEO対策としては不利な部分もあるかもしんないって考えて生成AIくんに色々と相談したけれど、metaタグやJSON-LDをきっちり書いて、コード自体も構造化を考慮してりゃまあだいじょうぶなんじゃないすかねって回答だったから、顧客獲得や売上増大にしのぎを削る大企業じゃなけりゃ、これでもまあ大丈夫じゃないかってことです。（下のリンク先サイトはJSON-LDと構造化っぽいことは試みているけど、metaタグは書いてません。まあお試しサイトなのでそこらへんは思いつきでやってるもんでテキトーです）

(リンク先Webページ掲載されている画像や文章はすべて生成AIが作ってくれたもので、すべて架空の内容です)

ではみなさん、また今度。