記事のfetch

2025/02/10 API

取得元のサイトがWordPressを使っていない場合はスクレイピングします。

<div id='wrap'></div>

<script>
document.addEventListener('DOMContentLoaded', function(){
	fetch('https://xxx.com/wp-json/wp/v2/posts')
    	.then(response => response.json())
    	.then(posts => {
        	console.log(posts);
        	const wrap = document.getElementById('wrap');
        	posts.forEach(post => {
            	const div = document.createElement('div');
            	div.classList.add('post');
            	div.innerHTML = `
                	<h2>${post.title.rendered}</h2>
                	<time>${new Date(post.date).toLocaleDateString()}</time>
                	<a href='${post.link}'>see more</a>
            	`;
				wrap.appendChild(div);
        	});
    	})
		.catch(error => console.log('失敗したよ:' + error));
});
</script>

BACK