3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

webサイトを制作していて、フロントエンドのコードとデータを分けて管理したい時ってありますよね?

  • プロフィールなどのちょっとしたデータのまとまりをページ内に表示したいけど、データベースを作るほどではない…
  • ブログページなどで、原稿を書く人とコーディングする人が別の場合、原稿に修正が入る度にコードも書き直さなければいけなくて面倒…
  • なるべく素のJavaScriptで処理したい(Node.jsのfsとかを使うほどではない...)

といった場合に、JSONやMarkdownファイルを直接HTMLファイルに読み込む方法を調べました。

JSONファイルを読み込む場合

まず、JSONファイルを読み込んでDOMに追加する場合のやり方です。
こんな感じのJSONデータをまとめたtigers.jsonファイルがあるとします。
(昨年阪神がアレしたときのスタメンです)

tigers.json
[{"打順":"1番","ポジション":"中堅","選手":"近本"},{"打順":"2番","ポジション":"二塁","選手":"中野"},{"打順":"3番","ポジション":"右翼","選手":"森下"},{"打順":"4番","ポジション":"一塁","選手":"大山"},{"打順":"5番","ポジション":"三塁","選手":"佐藤輝"},{"打順":"6番","ポジション":"左翼","選手":"ノイジー"},{"打順":"7番","ポジション":"捕手","選手":"坂本"},{"打順":"8番","ポジション":"遊撃","選手":"木浪"},{"打順":"9番","ポジション":"投手","選手":"才木"}]

このJSONデータを、index.htmlファイル内のid="exportJson"を持ったdiv要素内に、table要素として表示したいと思います。

index.html
<div id="exportJson">
    <!--ここに表形式で出力-->
</div>
script.js
//getElementByIdで出力先を指定
let exportJson = document.getElementById("exportJson");
let table = document.createElement("table");
table.innerHTML = "<thead><tr><th>打順</th><th>ポジション</th><th>選手</th></tr></thead>";
let tbody = document.createElement("tbody");
table.appendChild(tbody);

getElementById()メソッドで出力先を指定し、createElement()メソッドでtable要素を追加しておきます。

fetch()でJSONデータを取得

ここから、fetch()メソッドを利用して、tigers.jsonの内容をGETし、DOMに追加していきます。

script.js
fetch("tigers.json", {
    method: "GET",
}).then(response => response.json())
.then(json => {
    for (let key in json) {
        let tr = document.createElement("tr");
        tr.innerHTML = "<td>" + json[key]["打順"] + "</td><td>" + json[key]["ポジション"] + "</td><td>" + json[key]["選手"] + "</td>";
        tbody.appendChild(tr);
        table.appendChild(tbody);
        exportJson.appendChild(table);
    }
});

JSON内の各オブジェクトはjson[key]で取得でき、オブジェクトのプロパティにはjson[key]["打順"]のように指定してアクセスすることができます。
これで、index.html上にJSONデータを元にしたtableが表示されます。

json.png

Markdownファイルを読み込む場合

次に、Markdownファイルを読み込んでDOMに追加する方法です。
基本的な方法はJSONファイルの時と同じですが、MarkdownをHTMLに変換するために、Marked.jsというライブラリを利用します。

参考:marked.js

こんな感じのtigers.mdファイルがあるとします。

tigers.md
# 六甲颪

## 1番
六甲おろしに颯爽(さっそう)と

蒼天(そうてん)翔ける日輪の

青春の覇気麗しく

輝く我が名ぞ阪神タイガース

オウ オウ オウオウ

阪神タイガース フレ フレフレフレ

(...続く)

この.mdファイルの内容を、index.htmlid="exportMarkDown"を持ったdiv要素内に出力します。index.html上でmarked.jsも忘れずに読み込んでおきます。

index.html
<h2>Markdownを読み込む</h2>
<div id="exportMarkDown">
    <!--ここにMarkdownを出力-->
</div>

<!--Markd.jsの読み込み-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

そして、JavaScriptでJSONファイルの時と同様に、fetch()メソッドを利用してtigers.mdファイルを読み込みます。

script.js
//getElementByIdで出力先を指定
let exportMarkdown = document.getElementById("exportMarkDown");
fetch("tigers.md", {
    method: "GET",
}).then(response => response.text())
.then(text => {
    exportMarkdown.innerHTML = marked.parse(text);
});

HTMLへの出力の部分では、Marked.jsmarked.parse()メソッドを利用しています。
これで、index.html上にMarkdownファイルの内容がDOM要素として追加されます。

markdown.png

コードの全文はこちら(https://github.com/outsider-kithy/parseJSON_fetch)

参考:フェッチ API の使用

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?