webbingstudio/microcms_get_posts.js

## microcms_get_posts.js
var mcMakePost = function( obj, title_tag = 'h2' ) {

    var item = "";
    for( var i = 0; i < obj.length; ++i ){

        item += "<article class=\"c-post\">";

        item += "<div class=\"c-post-object\"><div class=\"m-thumbnail\"><img src=\""
        item += obj[i].post_image.url
        item += "\"></div></div>";

        item += "<div class=\"c-post-contents\">";

        var pd = new Date(obj[i].post_date);
        item += "<time class=\"c-post-date\" datetime=\"";
        item += pd.toUTCString();
        item += "\">";
        item += pd.getFullYear() + "-" + ( ( "0" + (pd.getMonth() + 1 ) ).slice(-2) ) + "-" + ( ( "0" + pd.getDate() ).slice(-2) );
        item += "</time>";

        item += "<" + title_tag + " class=\"c-post-title\">";
        item += obj[i].post_title;
        item += "</" + title_tag + ">";

        item += "<div class=\"c-post-body\">";
        item += obj[i].post_body;
        item += "</div>";

        item += "</div></article>";
    }

    return item;

}


var mcPostAll = function( title_tag = 'h2' ) {

    fetch('https://yoursubdomain.microcms.io/api/v1/post?limit=99', {
        headers: { 'X-API-KEY': '0000-0000-0000' }
    })
    .then(res => res.json())
    .then(result => {

        var output = "";
        output = mcMakePost( result.contents, title_tag );

        document.getElementById('mc-post-all').innerHTML = output;
    });

}


## microcms_test.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>microCMSのテスト</title>
    <script src="/js/jquery-2.2.4.min.js"></script>
</head>
<body>

<div id="mc-post-all"></div>
<script>
$(function(){
    mcPostAll();
});
</script>

<script src="/js/microcms_get_posts.js"></script>
</body>
</html>
	var mcMakePost = function( obj, title_tag = 'h2' ) {

	var item = "";
	for( var i = 0; i < obj.length; ++i ){

	item += "<article class=\"c-post\">";

	item += "<div class=\"c-post-object\"><div class=\"m-thumbnail\"><img src=\""
	item += obj[i].post_image.url
	item += "\"></div></div>";

	item += "<div class=\"c-post-contents\">";

	var pd = new Date(obj[i].post_date);
	item += "<time class=\"c-post-date\" datetime=\"";
	item += pd.toUTCString();
	item += "\">";
	item += pd.getFullYear() + "-" + ( ( "0" + (pd.getMonth() + 1 ) ).slice(-2) ) + "-" + ( ( "0" + pd.getDate() ).slice(-2) );
	item += "</time>";

	item += "<" + title_tag + " class=\"c-post-title\">";
	item += obj[i].post_title;
	item += "</" + title_tag + ">";

	item += "<div class=\"c-post-body\">";
	item += obj[i].post_body;
	item += "</div>";

	item += "</div></article>";
	}

	return item;

	}


	var mcPostAll = function( title_tag = 'h2' ) {

	fetch('https://yoursubdomain.microcms.io/api/v1/post?limit=99', {
	headers: { 'X-API-KEY': '0000-0000-0000' }
	})
	.then(res => res.json())
	.then(result => {

	var output = "";
	output = mcMakePost( result.contents, title_tag );

	document.getElementById('mc-post-all').innerHTML = output;
	});

	}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>microCMSのテスト</title>
	<script src="/js/jquery-2.2.4.min.js"></script>
	</head>
	<body>

	<div id="mc-post-all"></div>
	<script>
	$(function(){
	mcPostAll();
	});
	</script>

	<script src="/js/microcms_get_posts.js"></script>
	</body>
	</html>