Electron を使って Vue3 から外部ファイル（jsonデータ）をaxiosで読み込む

# はじめに
デスクトップアプリでデジタルサイネージを作る際、設定ファイルを読み込んだり、他社からパソコンの指定の場所に出力されたファイルを読み込んだり、
株価やニュース、天気などの情報をWebから取得して画面に表示する、ということがよくあります。
今回は、そういった外部ファイル（Jsonデータ）を読み込む手順を書いていきたいと思います。
尚、使用するIDEはJetBrains社の[WebStorm](https://www.jetbrains.com/ja-jp/webstorm/)を使い、[Vue3](https://v3.ja.vuejs.org/)フレームワークでの使い方になります。

# 目次
1. Electron と Vue3 の準備
1. 外部ファイルを読み込む
1. ローカルファイルを読み込む
1. fsでの読み込み
1. 参考サイト

# 環境
- Windows 10 Pro 64bit
- WebStorm 2021.1
- Node.js v14.15.1
- Vue 3.0.0
- Electron 11.0.0
- axios 0.21.1

# 1.Electron と Vue3 の準備
まずは、Vue3 が Electron で動作する環境を作ります。
これは、[WebStormでVue3のElectronアプリを作る](https://qiita.com/kaluna/items/256d1e32fe73986dc266Vue3がElectron)を参考にセットアップしてみてください。
ここから先は、この環境が構築できたところからの解説になります。

# 2. 外部ファイルを読み込む
外部ファイルを読み込む、と言っても色々なシチュエーションがあると思いますが、
今回は僕がよく使っている以下の３パターンでの読み込み方法を説明します。

1. Web上にあるファイルを読み込む
1. localhostから下の階層にあるファイルを読み込む
1. パソコン内のどこかにあるファイルを読み込む

「1.」と「2.」の場合、Webサイトと同じイメージなので、HTTP通信が簡単にできるJavascriptのライブラリ`axios`を使って読み込みます。
「3.」については、パソコンのどこか、ということで、こちらはファイル操作が簡単にできるNode.jsのモジュール`fs`を使って読み込みます。
今回はaxiosを使った読み込みを行いたいと思います。

## 2-1. axiosのセットアップ
WebStormのプロジェクト画面から、`File` > `Settings...` を選択します。
![キャプチャ0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c26012d0-05b6-3a70-ab9a-d34d98824eb3.png)
Settings画面が開きますので、左のメニューから、`Languages & Frameworks` > `Node.js and NPM` を選択します。
真ん中の画面にインストールされているパッケージ一覧が表示されていますので、この一覧の左上にある `＋`をクリックして、パッケージ画面を開き、`axios`と検索して選択し、`Install Package`をクリックしてライブラリをインストールします。
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/0fc32d4d-e84d-856d-9e66-c06ff711dc45.png)

## 2-2. お天気情報のJsonファイルについて
axiosがセットアップ出来たので、次に読み込むファイルを決めます。
今回は情報を扱いやすい形式にまとめてくれている、Jsonファイルを読み込むことにします。
Web上には様々なJsonファイルが公開されていますが、とりあえず今回は、
気象庁が提供しているお天気情報を取得してみたいと思います。
データの取り扱いに関しては、以下にわかりやすくまとまっています。
[気象庁公式の天気予報API（？）が発見 ～Twitterの開発者界隈に喜びの声が満ちる](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1309318.html)

全国各地のお天気情報が取得できますが、今回は、東京都の概要を取得します。
取得するURLは
https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json
となります。この`130000`が東京都のコードになりますので、他の地域のコードを入れれば、それぞれ取得できるのかなと。この辺りは以下のサイトが参考になりそうです。
[新しい気象庁サイトからJSONデータが取得できる件](https://mindtech.jp/?p=1754)

ということで、このURLにアクセスすると、文字がわわーっと表示されていると思います。
基本的には、Object型でまとまってるので、名前と値に分かれている感じです。
今回のデータの場合、

| 名前 | 説明 | 値 |
|:-|:-:|:-|
| publishingOffice | 配信元 | デフォルトで「気象庁」 |
| reportDatetime | 発表日時 | 2021-05-14T04:46:00+09:00 |
| targetArea | 地域 | 東京都 |
| headlineText | 見出し | 天気に関する注意など |
| text | 内容 | 天気の動きや今後の予測みたいな説明 |

という情報が2021/5/14現在は取得できます。
## 2-3. Jsonファイルを読み込む
では早速、気象庁のJsonファイルを読み込んでいきたいと思います。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/02733e6f-0b62-4dc2-70cd-ffc0bd5d29a3.png)
プロジェクト内に作成された`App.vue`を開きます。
axiosを使えるようにします。

```vue:App.vue
<script>
import HelloWorld from './components/HelloWorld.vue'
const axios = require('axios') //<--追加
export default {
/** 省略 **/
}
```
次に、`export default`内にDOMが生成されてから読み込みを開始する
`mounted`とその中にaxiosの読み込みを追記します。

```vue:App.vue
<script>
import HelloWorld from './components/HelloWorld.vue'
const axios = require('axios')
export default {
  name: 'App',
  components: {
    HelloWorld
  },
/** ↓↓ここから追加↓↓ **/
  mounted() {
    axios.get('https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json')
    .then(response =>{
      console.log(response.data)
    })
    .catch((error)=>{
      console.log(error)
    })
  }
/** ↑↑ここまで↑↑ **/
}
</script>
```
読み込んだデータは`response`の`data`に入ってきますので、読み込まれているかどうかを確認します。
`electron:serve`の横の再生ボタンを押すと、コンパイラが実行されて、Electronが起動します。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/083d00a8-af93-d7f7-0181-2e1aa548db3b.png)
開発画面内の`Console`タブを選択すると`Object`が出力されていますので、
中身をみて、情報が取得されている事が確認できました。
### 2-4. Jsonファイルの表示
読み込みが出来たので、表側に表示していきます。
とりあえず、デフォルトのHelloWorldの部分を削除します。

```vue:App.vue
<template>
</template>

<script>
const axios = require('axios')
export default {
  name: 'App',
  mounted() {
    axios.get('https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json')
    .then(response =>{
      console.log(response.data)
    })
    .catch((error)=>{
      console.log(error)
    })
  }
}
</script>
```
`jsonData`変数を作って読み込んだJsonデータを入れます。

```vue:App.vue
<script>
const axios = require('axios')
export default {
  name: 'App',
  data(){
    return{
      jsonData:{}
    }
  },
  mounted() {
    axios.get('https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json')
    .then(response =>{
      console.log(response.data)
      this.jsonData = response.data
    })
    .catch((error)=>{
      console.log(error)
    })
  }
}
</script>
```
`<template>`タグ内にJsonデータを表示するために、タグを追加します。

```vue:App.vue
<template>
  <dl>
    <dt>配信元</dt>
    <dd>{{jsonData.publishingOffice}}</dd>
    <dt>発表日時</dt>
    <dd>{{jsonData.reportDatetime}}</dd>
    <dt>地域</dt>
    <dd>{{jsonData.targetArea}}</dd>
    <dt>見出し</dt>
    <dd>{{jsonData.headlineText}}</dd>
    <dt>内容</dt>
    <dd>{{jsonData.text}}</dd>
  </dl>
</template>
```
これで実行すると、表示はされるのですが、センター合わせになってて見えにくいので、
`css` 内の `text-align` を `center` から `left` に変更します。
ついでに、改行コード（\n）が入っている箇所がありますので、これを改行として扱うCSSも追加して、見た目を整えます。Javascriptで`<br />`に変換しても良いと思います。

```vue:App.vue
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  text-align: left;
  margin-top: 60px;
  white-space: pre-line;
}
</style>
```
これで実行してみます。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/41fbc181-ab31-1168-a104-d1dd258e1700.png)
無事表示されました。ただ、`見出し`に何も表示されていませんが、これはJsonファイル内の該当データが空のためです。

# 3. ローカルファイルを読み込む
さて、次にこのJsonファイルをパソコン内に保存して読み込んでみます。
まずは、Jsonファイルを `public` フォルダに `130000.json` として保存します。
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/bc7d1af2-7e89-1479-74a5-4a36cfa4a025.png)
１行で表示されてしまっているので、見にくいですね。
ここで、`Ctrl + Alt + L` とすると、見やすくなります。
![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/19ca1e38-ed4b-7359-dfe6-7f2843645ad8.png)
ついでに、ローカルファイルのデータとわかるように、headlineTextに値を入れてみてます。
次に、先ほどの `axios` で指定したURLを、このJsonファイルに変更します。

```vue:App.vue
<script>
/** 省略 **/
    axios.get('130000.json')
/** 省略 **/
</script>
```
実行してみると、無事読み込まれているのが確認できました。
![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5de6dc4d-8fb8-3f46-324a-ee24c0039a49.png)

# 4. fsでの読み込み
記事が長くなってしまったので、本当は`fs`を使った読み込みも書く予定でしたが、
こちらは次回に続きます。

# 5. 参考サイト
- [axiosでJSONを取得する](https://noumenon-th.net/programming/2019/03/01/axios/)
- [axiosライブラリを使って、柔軟にHTTP通信を行う](https://www.yoheim.net/blog.php?q=20170801)
- [気象庁の天気予報JSONファイルをWebAPI的に利用したサンプルアプリ](https://anko.education/apps/weather_api)
- [Electronをセキュアな設定の状態で、jsのrequierを行う](https://qiita.com/Quantum/items/4841aa18643b8ef1fc11)