SPARQL のお供に Chrome DevTools の Copy as fetch が便利

# はじめに

こんなかんじの SPARQL Endpoint の Web フォームで SPARQL を実行して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/d082dd7d-d457-a9f4-83ac-d85a9a59f49a.png)

こんなかんじで結果を確認する、というのは SPARQL を扱う人にはおなじみかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/0396e016-88f4-f207-18b1-44eb8461b4ba.png)

で、できあがった SPARQL を curl から使ったり HTML+Javascript から使ったりしようとするわけですが、 Accept ヘッダーに何書けばいいんだっけ？とか curl や javascript fetch で POST どうやるんだったっけ？など少なからずフリクションが発生します。面倒です。

# Copy as fetch

Chrome の DevTools を開いた状態で SPARQL を実行させてみましょう。こんなかんじで取得されたリソースが表示されていますね。この場合は `?default-graph-uri...` が SPARQL Response です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/fdf100dd-dc0f-07e5-d3cc-d3e23ee8debc.png)

ここで `?default-graph-uri...` を右クリックしてさらに `Copy` をクリックすると下図のようにいろんなメニューがあるのですが、ここで `Copy as fetch` をクリックすると、 javascript fetch のスニペットがクリップボードにコピーされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/e4bec836-e37b-612d-c042-cc641570f827.png)

## GET の場合

[Japan Search の SPARQL Endpoint](https://jpsearch.go.jp/rdf/sparql/) で実行した結果を `Copy as fetch` してみたところ、こんなかんじです。

```js

fetch("https://jpsearch.go.jp/rdf/sparql/?default-graph-uri=&query=select+distinct+%3FConcept+where+%7B%5B%5D+a+%3FConcept%7D+LIMIT+100&should-sponge=&format=text%2Fhtml&timeout=0&debug=on", {
  "credentials": "include",
  "headers": {
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "accept-language": "ja,en-US;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "pragma": "no-cache",
    "upgrade-insecure-requests": "1"
  },
  "referrer": "https://jpsearch.go.jp/rdf/sparql/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});
```

## POST の場合

[e-Stat の SPARQL Endpoint](https://data.e-stat.go.jp/lod/sparql/) で `describe` クエリーを送ってみた結果を `Copy as fetch` してみたのがこちらの例。

```js
fetch("https://data.e-stat.go.jp/lod/sparql/alldata/query", {
  "credentials": "include",
  "headers": {
    "accept": "text/turtle,*/*;q=0.9",
    "accept-language": "ja,en-US;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    "pragma": "no-cache",
    "x-requested-with": "XMLHttpRequest"
  },
  "referrer": "https://data.e-stat.go.jp/lod/sparql/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": "query=describe+%3Chttp%3A%2F%2Fdata.e-stat.go.jp%2Flod%2FsmallArea%2Fg00200521%2F2015%2FS141520340%2Fpolygon%3E%0A",
  "method": "POST",
  "mode": "cors"
});

```

あとは不要なプロパティやヘッダを削除すれば、簡単に HTML+JS に組み込めそうですね。

# Copy as cURL

`Copy as cURL (bash)` をクリックするとこんなこんなかんじです。

## GET の場合

```bash
curl 'https://jpsearch.go.jp/rdf/sparql/?default-graph-uri=&query=select+distinct+%3FConcept+where+%7B%5B%5D+a+%3FConcept%7D+LIMIT+100&should-sponge=&format=text%2Fhtml&timeout=0&debug=on'
-H 'Connection: keep-alive'
-H 'Pragma: no-cache'
-H 'Cache-Control: no-cache'
-H 'Upgrade-Insecure-Requests: 1'
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' 
-H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3' 
-H 'Referer: https://jpsearch.go.jp/rdf/sparql/' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: ja,en-US;q=0.9,en;q=0.8' 
-H 'Cookie: XXXXXXXXXX' 
--compressed
```

## POST の場合

```bash
curl 'https://data.e-stat.go.jp/lod/sparql/alldata/query' 
-H 'Pragma: no-cache' 
-H 'Origin: https://data.e-stat.go.jp' 
-H 'Accept-Encoding: gzip, deflate, br' 
-H 'Accept-Language: ja,en-US;q=0.9,en;q=0.8' 
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' 
-H 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8' 
-H 'Accept: text/turtle,*/*;q=0.9' 
-H 'Cache-Control: no-cache' 
-H 'X-Requested-With: XMLHttpRequest' 
-H 'Cookie: XXXXXXXXXX' 
-H 'Connection: keep-alive' 
-H 'Referer: https://data.e-stat.go.jp/lod/sparql/' 
--data 'query=describe+%3Chttp%3A%2F%2Fdata.e-stat.go.jp%2Flod%2FsmallArea%2Fg00200521%2F2015%2FS141520340%2Fpolygon%3E%0A' 
--compressed
```

こちらも手元に SPARQL Results をダウンロードする場合に役立ちそうですね。

# まとめ

`Copy as fetch` が導入されたのは 2018-04 の [Chrome 67](https://developers.google.com/web/updates/2018/04/devtools#fetch) とのこと。
地味な機能なので気付くまでにだいぶ時間がかかってしまいましたが、便利なので使っていきましょう。