← SEARCHABLE ARCHIVE
Web · 2026-07-06

ブログウェブ機能の整理

現在のブログが文を読み込んで表示する方法

INTERACTIVE READING MODE →

このブログのWeb機能のクリーンアップ

// data.js
//ブログのカテゴリと投稿リストを管理する
//categoryMapにはカテゴリ名を入れて、
//posts配列には、実際の記事のタイトル、要約、ファイル名、タグを入れる

const categoryMap = {
    'CPP': { name: 'C / C++' },
    'CS': { name: 'Computer Science' },
    'WEB': { name: 'Web' },
    'NTT': { name: 'Nand2Tetris' }
};

const posts = [
    {
        id: 110001,
        category: 'WEB',
        date: '2026-05-20',
        title: 'ブログウェブ機能の整理',
        summary: '現在のブログが文を読み込んで表示する方法',
        fileName: 'WEBBlogFeature.md',
        tags: ['Web', 'Blog']
    }
];
// app.js
//hash routeを使って画面を変える
//例:
//#home: ホーム画面
//#category/WEB/1:WEBカテゴリ1ページ
//#post / 110001:特定の投稿

function router() {
    const hash = location.hash || '#home';

    if (hash === '#home') {
        renderHome();
    } else if (hash.startsWith('#category/')) {
        renderCategory(hash);
    } else if (hash.startsWith('#post/')) {
        renderPost(hash);
    }
}
//投稿の読み込み方法
//posts 配列で fileName を探し、
//postsフォルダ内のMarkdownファイルをfetchにインポートして画面に出力する

fetch(`posts/${post.fileName}`)
    .then(response => response.text())
    .then(markdown => {
        document.querySelector('#content').innerHTML = marked.parse(markdown);
    });
<!-- 執筆方法 -->
<!-- 1. posts フォルダに Markdown ファイルを作成する -->
<!-- 2. data.jsのposts配列に投稿情報を追加する -->
<!-- 3. category, tags 値でカテゴリとタグフィルタが自動的に動作する -->

# タイトル

本文をMarkdownで作成します。

```cpp
//コードブロックも利用可能
int main() {
    return 0;
}
```