常連

注目の的

拍手喝采

自己紹介

プログラミングをやったことがない初心者です。

配信サービス系のパトロンサイトに興味があります。サイトを構築する為に必要な言語でオススメの言語はありますか？

HTML、CSS、JavaScriptがサイト構築には最適らしいみたいですが、これらでパトロンサイトは実現可能ですか？他に色んな言語を習得しなきゃ実現できませんか？

パトロンサイトを構築する為には何を学べばいいですか？

```Typescript
const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const;
type Currency = typeof currencies[number]; // 'CNY' | 'EUR' | 'GBP' | 'JPY' | 'KRW' | 'USD'
```

上記のように定義する事で配列の値から型を生成する事ができます
これを動的に生成する方法はあるでしょうか？

```Typescript
interface AAAA {
  [key: string] : Array<string> | Array<boolean>;
}

type BBBB<T> = {
  [P in keyof T]: T[P] extends Array<string> ? string : boolean  // ★stringの場合 値から動的に型を生成したい
}

function func<T extends AAAA>(input : T): BBBB<T> {
     :
}

const result = func({
  str: ["aa", "bb"],
  bol: [true],
});
```

たとえば、上記のようにfuncを呼んだときの戻り値BBBB型は以下のようにしたいです

```Typescript
{
    str: 'aa' || 'bb',  //  ★ 現状はstringになるので値から型を生成したい
    bol: boolean,  
}
```

Array<string>の値から動的に型を生成する事は可能でしょうか？

セッションから $request->session()->get() で取得した値が配列であるのに対して
クエリビルダ $query->get() で取得した値はcollectionです。

これをforeachで回す際に、$data['item']で行いたいのですがクエリから取得した値では$data->itemとしないとエラーになってしまいます。
そのため、collectionを配列に変換したいと考え色々情報を探したところtoArray()メソッドが見つかり、$query->get()->toArray()　としたのですが

```ここに言語を入力
Collection {#703 ▼
  #items: array:1 [▼
    0 => {#702 ▼
      +"": ""
      +"id": "1"
      +"name": "aa"
      +"": null
    }
  ]
}
```
これが下のように変わるだけでした。

```ここに言語を入力
array:1 [▼
  0 => {#702 ▼
    　+"": ""
      +"id": "1"
      +"name": "aa"
      +"": null
  }
]
```
変換したい理想の形は、[""=>"","id"=>"1",......]になります
変換後ももちろん$data->itemの方でしか取得できません。toArrayの使い方がそもそも間違っているのでしょうか？
また、セッションの方をcollectにすべきなのか、この二つを同列に扱うことがおかしいのかご教授いただければと思います。宜しくお願い致します。

laravel　コレクションを配列に変換したい

### 聞きたいこと
下のような配列内のオブジェクトの値(`name`)を、バックエンドから取得した値を元に更新したいと思っています。

```
// nameは初期値は''です
const users = [
  { id: 'xxxx', name: '' },
  { id: 'yyyy', name: '' },
  { id: 'zzzz', name: '' },
]
```

そこで下のような処理を書いています。

```JavaScript
:

for (const user of users) {
  const response = await getUserDetail(user.id) // responseにはキーがid, nameのオブジェクトが入ります。
  user.name = response.name
}

:


```

処理自体は上で期待通りになっているのですが、Promise.allを使用する方法に置き換えたいと思っています。

そこで下のように置き換えましたが、エラーになってしまっています。

```

await Promise.all(users.forEach(async (user) => {
  const response = await getUserDetail(user.id)
  user.name = response.name  
})
```

エラーは下のとおりです。

```
undefined is not iterable (cannot read property Symbol(Symbol.iterator))
```

for文内部のasync/awaitで記述した処理に対してPromise.allで処理したい

下記の変数の型は、ElementHandle<string[]>になります。
```ここに言語を入力
const options = await page.$$eval('div > span.options', (options) =>
  options.map((option) => option.textContent)
);
```
しかし、options.lengthと記述すると「プロパティ 'length' は型 'ElementHandle<any[]>' に存在しません。」と表示されます。

[ElementHandle型の詳細はこちら](https://pptr.dev/#?product=Puppeteer&version=v10.4.0&show=api-class-elementhandle)

どのように表記すれば、コンパイルエラーを出さずに参照出来るのでしょうか？

型が参照出来ない原因がわかりません。

一人ですが勉強のためgit-flowを入れて作業してます。

git自体もまだ理解が乏しいため的外れな質問してたらすみません。

バグ対応が終わったので
```ここに言語を入力
git flow hotfix finish xxxx
```
しました。

これにより自動で以下が行われました。
・developブランチにcheckout
・xxxxブランチをマージ
・xxxxブランチの削除

早速リリースしようと思うのですが、ここで分からなくなりました。
いったんreleaseブランチにうつってからリリースするのか？
それともこのままリモートへpushして良いのか？

自分なりに考えてみたのですが
releaseブランチにうつる必要性があるのは、チーム開発などQAが必要な場合でしょうか？

私の場合は一人なのでこのままリモートへpushして良いでしょうか？
その場合、現在developブランチなのですがmainブランチに移動し、tagを作ってから、というのが一般的でしょうか？

先輩方教えていただけると幸いです。
宜しくお願い致します。

hotfix終了後のリリース手順について

```typesctipt
interface AAAA {
  [key: string] : Array<string> | Array<boolean>;
}

type BBBB<T> = {
  [P in keyof T]: string | boolean
}

function func<T extends AAAA>(input : T): BBBB<T> {
     :
}

const result = func({
  str: ["aa"],
  bol: [true],
});
````

上記のように定義した時funcの戻り値BBBB型は以下のようになります

```typescript
{
    str: string | boolean,
    bol: string | boolean,
}
```

これをAAAA型のArray<T>のT型部分を動的に取得して以下のようにする事は可能でしょうか？

```typescript
{
    str: string,  // Array<string>なのでstring型にしたい
    bol: boolean,  // Array<boolean>なのでboolean型にしたい
}
```

Array<T>型のT型を動的に取得する事はできるでしょうか？

カードゲームのようなものを開発しています。
カードの情報をまとめたCardクラスのインスタンスはどの画面でも使っています。
そこで画面ごとに都度生成するのではなく、予め全カード(103種類）のインスタンスを作っておき、どの画面でも使いまわせるようにしたいと思いました。（なお、カードの内容は使用上、上書きされることはありません。setterもありません。）

イメージとしては以下のような配列をどの画面でも使いたいです。
どのようにすれば、どの画面でも使いまわせるようにできるでしょうか？
```php
$cardInstanceList = [
   "a" => new Card("a"), // 1
   "b" => new Card("b"), // 2
   // 以降 103まで
];
```

インスタンスの使い回しについて

http://hogehoge.co.jp/topにアクセスするとします
①hogehoge.co.jpに対応するipアドレスをDNSサーバから取得
②取得したipアドレスへ、http(GETメソッド)を行う
といった流れになるかと思います。


IPアドレスって概念を無くし、サーバにホスト名をそれぞれ割当てるとします。そしえ、①の名前解決なんてせずに直接hogehoge.co.jpにアクセスする方が、効率的だと思ってきました。

どうしてIPアドレスなんてあるのでしょうか?
文字だとtcpパケットのサイズが大きくなるからでしょうか？

IPアドレスが必要な理由を教えてください

下記のコードの結果をVScodeのコンソールで確認することを実施しておりますが、コンソールが表示されません。
言語モードを設定するところまで終わりました。

次はコマンドパレットで、quokka.jsを起動することを試しています。
初心者のため手順ご教示いただきたく、よろしくお願いします。

![現在の画面を添付します。](1ee17f6df8f20f29d94f8b29517e9565.png)



```Jacascript
const str = `When you send the email, the reservation will be finalized.

Appointments:

ゴミデータ
1/2/2020 3:44-5:6 (+ USB port expansion)


Name: ふく04/28/2020 02:30-11:00 (ダミーデータ)

Phone number: 090-8765-4321`; //セミコロンでは無く、バッククォートで囲ってあります

//余計なものまで拾うNGパターン
var sample1 = str.match(new RegExp(/\d{1,2}/\d{1,2}/\d{1,4}\s+\d{1,2}\:\d{1,2}\-\d{1,2}\:\d{1,2}/, "g"));
console.log('sample1', sample1); //  sample1 [ '1/2/2020 3:44-5:6', '04/28/2020 02:30-11:00' ]

//Appointments: 〜 日時フォーマット 〜 スペース以降全て の内、日時フォーマット
var sample2 = str.match(new RegExp(/^.*Appointments:\s*.*?(\d{1,2}/\d{1,2}/\d{1,4}\s+\d{1,2}\:\d{1,2}\-\d{1,2}\:\d{1,2})\s*.*/, "s"))[1];
console.log('sample2', sample2); // sample2 1/2/2020 3:44-5:6

//Appointments: 〜 日フォーマット、時フォーマット 〜 スペース以降全て の内、日フォーマットと時フォーマットを分ける
var sample3 =  str.match(new RegExp(/^.*Appointments:\s*.*?(\d{1,2}/\d{1,2}/\d{1,4})\s+(\d{1,2}\:\d{1,2}\-\d{1,2}\:\d{1,2})\s*.*/,"s"));
const [date, time] = [sample3[1], sample3[2]];  //V8ランタイムにしたら、分割代入可能‥なハズ
console.log('sample3',date, time); // sample3 1/2/2020 3:44-5:6
```

コードの結果をVScodeのコンソールで確認する方法

### やりたいこと
子コンポーネントのpropsの型を指定したい（それぞれのkeyにstringを型指定したい）

### 困っている点
型の指定の仕方がわからない


```
子コンポーネント.vue

export default Vue.extend({
  props: [
    'items'
　]
});
```

```
親コンポーネント.vue

  data () {
    return {
      items: [
        {
          name: 'taro',
          gender: 'men',
        },
        {
          name: 'hanako',
          gender: 'woman',
        },
        {
          name: 'noname',
        },
      ],
    }
  },
```

### 補足
親コンポーネントの「items（オブジェクト）」 → 子コンポーネントの「item props」に渡ってきます。

＜Typescript：Vue.extends＞propsの型を指定する方法がわかりません。

お世話になります。
新しいサイトをGithub Pagesで運用しようかと考えています。

色々ググってみたのですが、『これからはGithub Pagesと静的サイトジェネレーターがカッコイイ』みたいな情報はたくさん見つかるのですが、そのデメリットについて描かれている記事はあまりないようです。

以下のようなデメリットもあると私は想像するのですが、認識は正しいでしょうか？

もし、「そんなことない。こういう解決策がある」という方はご教示いただければと思います。

**デメリット**
* Githubなので、当然フォークされうる。自分のサイトデータのコピーが他人の手にわたってしまうことが嫌な人には抵抗があるかも（個人的には許容範囲ですが、ただ、心理的にコピーさせるのが抵抗のあるデータ部分もあるにはあるんですよねぇ…）。

* フォークされると、再配布が禁止されている素材を使っているページの場合、素材の再配布がフォークと同時に行われることとなり、権利上問題が生じる。

* Github Pages には環境変数が設定できない。よって、BaaSなどのサービスを併用する場合、そのアクセス情報などを一体どこに保存すればいいのか？（全体がパブリックなので、隠しようがないのでは？）

だいたい、こんな感じなのですが、他にもまだデメリットがある、という場合はご教示ください。また、こういう回避策がある、という場合もぜひ教えていただきたく思います。

よろしくお願いいたします。

Github Pagesのデメリットについて

実際にNuxt.jsを使ったアプリケーションを作成したことがある人に質問です。

Nuxt.jsではディレクトリ構造などある程度規約がありますが、それでも実際に作るときはどうするか結構悩んでしまいます

例えばコンポーネント分割をどうするかで、ちょっとした身内用ツールを作る時にatomic designまで取り入れるのはわりとやりすぎかなとは思うのですがかといってページ毎にページコンポーネント1つにコンポーネントが2〜3程度だと1コンポーネントあたりの処理量が多くなってしまいます
特に入力フォームとかだと下手に分割するとコンポーネント間連携が面倒で結局まとめて書いてしまい長くなってしまいます

何かほど良いコンポーネント設計方法はないでしょうか？
できればそういったことを解説しているサイトやプレゼンなどの資料のリンクを貼って頂けると助かります

Nuxt.jsの設計について

Vuetifyのデータテーブルで、ヘッダー行と一番左の列を固定して、スクロールしても表示するようにしたいです。

公式のサイト（https://vuetifyjs.com/ja/components/data-tables/）を見たのですが、やり方が分かりません。

方法をご存知でしたら教えていただけると助かります。

Vuetify テーブルのヘッダーと列を固定させる方法について

Vue.js最近を触り始めた、プログラミング初心者です。
「vue-js-toggle-button」というスイッチボタンを実装するライブラリ(https://github.com/euvl/vue-js-toggle-button?ref=kabanoki.net)を見つけて試してみたのですが動いてくれません。ブラウザ上にはエラーメッセージも表示されず真っ白な状態です。
(npm install vue-js-toggle-button --save)←これでインストールしました。
表示される方法ご存じの方がいらしたら教えていただけるとありがたいです！


```vue
<template>

<div>
  <toggle-button @change="onChangeEventHandler"></toggle-button>
  <toggle-button v-model="myDataVariable"></toggle-button>  
</div>
</template>

<script>

import ToggleButton from 'vue-js-toggle-button'


export default {
    components: {
    
    },
      data: {
    myDataVariable: ''
   },
   methods: {
    onChangeEventHandler: function(){
      console.log('onChangeEventHandler');
    }
    }
    
  
};

</script>
```

Naxt.jsでインストールしたライブラリが使用できません。

### 解決したいこと
Vue.jsには`created`や`mounted`などのライフサイクルフックと呼ばれる関数があります。
こちらの記述の形が、公式では下記の通りです。

```vue
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` は vm インスタンスを指します
    console.log('a is: ' + this.a)
  }
})
```

ただ、下記のように記述しても動きます。
```vue
created() {}
```

こちらはJavaScriptのどういった部分を勉強すれば、使い分けと言いますか理解できるのでしょうか。それともVue特有の記述になるのでしょうか。

素朴な疑問にはなりますが、気になって仕方がなかったのでこの場でご質問させていただきました。
ご教示いただけますと幸いです。

ライフサイクルフックの宣言に関して

チェックボックス を３つ以上選択させないようにするには、どのように書けば良いのでしょうか・・・！

vue.jsを使用しているのでvue使用だとありがたいです。

現在のコードですが、checkboxの機能を持つコンポーネントをimpoortして親コンポーネントで使用しているので、:checked.syncを使用しています。




よろしくお願いします涙



追記
checkboxを表示している部分 ()
```ここに言語を入力
<div class="detail-areas">
                    <span>地域を選択してください（最大3つ）</span>
                        <ul class="detail-area-list">
                            <li class="detail-area" v-for="(selectedArea, i) in selectedAreas" :key="i">
                                <ls-check-box-field :text="selectedArea.name" :checked.sync="selectedArea.checked"/>
                            </li>
                        </ul>
 </div>
```

checkboxを3つ以上選択させない

お世話になっております。
今回はNuxt.jsのAPIとの接続に関する質問です。
よろしくお願い致します。
### 前提・実現したいこと
現在Nuxt.jsとrailsAPIでアプリをdocker-composeにて開発しております。普段はnuxt.jsをlocalで、railsAPIを$docker-compose runで立ち上げています。

そこで、
$docker-compose up
でアプリを立ち上げたらフロントエンドとバックエンドが通信できませんでした。

Nuxt.jsはhttp://0.0.0.0:3000
railsAPIはhttp://0.0.0.0:3001
です。

### 発生している問題・エラーメッセージ
######ターミナルのエラーメッセージ
```
front_1  |  ERROR  Request failed with status code 504
front_1  |
front_1  |   at createError (node_modules/axios/lib/core/createError.js:16:15)
front_1  |   at settle (node_modules/axios/lib/core/settle.js:17:12)
front_1  |   at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:236:11)
front_1  |   at IncomingMessage.emit (events.js:327:22)
front_1  |   at IncomingMessage.EventEmitter.emit (domain.js:485:12)
front_1  |   at endReadableNT (_stream_readable.js:1218:12)
front_1  |   at processTicksAndRejections (internal/process/task_queues.js:84:21)
```

### 該当のソースコード
######nuxt.config.js
```ここに言語名を入力
// const config =
export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#00448c' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    'bootstrap-vue/nuxt'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      pathRewrite: {
        '^/api': ''
      }
    }
    // ここにプロダクションの時のかけばいける。書かんでもlocalhostでいけるかも
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
}

```
######index.vue
```
<template>
  <div class="container">
    <h2>Users</h2>
    <ul class="users">
      <li v-for="user in users" :key="user.id">
        <NuxtLink :to="'/users/' + user.id">
          {{ user.name }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const users = await $axios.$get('/api/api/users')
    return {
      users,
      title: 'users list'
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
.users {
  list-style-type: none;
}
.users li a {
  display: inline-block;
  width: 200px;
  border: 1px #ddd solid;
  padding: 10px;
  text-align: left;
  color: #222;
  text-decoration: none;
}
.users li a:hover {
  color: orange;
}
</style>
```

######api/users_controller.rb
```ここに言語を入力
lass Api::UsersController < ApplicationController
  def index
    users = User.all
    render json: users
  end
end
```

######front/Dockerfile(Nuxt.js)
```ここに言語を入力
FROM node:14-buster

ENV LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    APP=/usr/src/app

ENV HOST 0.0.0.0

WORKDIR $APP

COPY package.json $APP
COPY yarn.lock $APP
RUN yarn install


COPY . $APP

CMD ["yarn", "run", "dev"]

```
######back/Dockerfile(railsAPI)
```ここに言語を入力
FROM ruby:2.6.3
RUN apt-get update -qq && apt-get install -y nodejs && \
    apt-get clean
ENV TZ=Asia/Tokyo

ENV APP /usr/src/app
WORKDIR $APP
COPY Gemfile* $APP/

RUN bundle install -j4
COPY . $APP

# Add a script to be executed every time the container starts.
COPY docker-entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]
EXPOSE 3001

# Start the main process.
CMD ["rails", "server", "-p", "3001", "-b", "0.0.0.0"]

```

### 試したこと

- localのNuxtとdockerのrailsAPIは問題なく通信可能。
- docker-compose upで立ち上げた場合に、通信不可能。
- 最近dockerをアップデートしたので、ダウングレードしてみました。効果なし。
- フロントのbaseImageを更新してみました。効果なし。
- docker-compose up時にlocalから $curl http://localhost:3001/api/usersを投げるとユーザー一覧が返ってきました。
- docker-compose up時にNuxtのシェルからpingを送信したら、応答がありました。
- docker-compose up時にNuxtのシェルからcurl http://localhost:3001/api/usersを投げると失敗して、下記が返ってきました。

```ここに言語を入力
# curl http://localhost:3001/api/users
curl: (7) Failed to connect to localhost port 3001: Connection refused
```
他にも以下を試しました。
- docker-compose.ymlではrailsAPIの名前をbackにしていたので、Nuxtのシェルから $ curl back:3001/api/usersを投げたところ、railsAPIのdevelopment.rbにconfig.hosts << "back"を追加しろ、と出てきたので追加して再度curlを投げたらユーザー一覧が返ってきました。
次に、Nuxtのproxyでターゲットをlocalhost:3001からback:3001に変えてみましたが500エラーが返ってきました。（指定方法に自信がありません）。　railsのdev環境ではデフォルトでlocalhostと0.0.0.0からの通信が許可されているので、backを指定しなくても問題ないはずだと考えております。
- axiosのリトライ回数を3にしてみましたが、効果なし。
- GETだけじゃなく、ユーザー登録でPOSTでの通信(axios使用)を試しましたが、やはり通信不可能。このことからindex.vueは問題ではないと考えております。

試したのは以上です。
初学者ゆえ無知で申し訳ございませんが、アドバイスよろしくお願い致します。

- proxyを使わずに以下のようにフルパスで指定してみたところ、504errorが消えECONNREFUSED127.0.0.1:3001が出ました。
```ここに言語を入力
  async asyncData({ $axios }) {
    const res = await $axios.$get('http://localhost:3001/api/users')
#localhostでなく、0.0.0.0にしても同じ結果でした
```

- railsAPIのコンテナの内部IPを調べてproxyにそれを入れたらとりあえず無事に通信できました。

```ここに言語を入力
  proxy: {
    '/api': {
      target: 'http://172.22.0.3:3001'
    }
  },
```

他の方はlocalhostでやっているようなので、その方法を引き続き求めております。

### 補足情報（FW/ツールのバージョンなど）

Nuxt.jsのbaseImageはnode:14-buster
Nuxt 1.0.0
@nuxtjs/proxy@1.3.3
@nuxtjs/axios@5.9.7

docker-compose up時にNuxt.jsがAPIと通信できない

rails(API)と、vue.jsとwebpackerで、CRUD処理のアプリを作っています。
ローカルに保存している画像をtemplate側で表示したいのですが、表示されません。
「Vue 画像　表示されない」等と調べて、v-bindをつけてみましたがそれでもダメでした。
どのようにすれば画像が表示されるか、ご教示いただけないでしょうか。
画像は、app/assets/images/play.png　のパスになります。

```
    <img v-bind:src="require('../../assets/images/play.png')">
    <img src="../../assets/images/play.png" >
```
![イメージ説明](6b7c38ee2aea7695377f90326a21cc3e.png)

vue.jsで、画像が表示されない

### 前提・実現したいこと

Nuxt.jsを使って、Webサイトの開発をしています。
ブラウザから、外部APIを叩く必要があり、CORS対策のため、@nuxtjs/proxyを使うことにしました。APIとの通信には、axiosを使っています。

APIとの通信時に/hogeというpathだったら、`https://fuga.com/fuga?t=${Date.now()}`に遷移するように設定しました。
ここで、実際に実行した際に、バインド先のURL(`https://fuga.com/fuga?t=${Date.now()}`)をコンソールで確認したいです。というのも、nuxt.config.tsに書いた${Date.now()}このコードが、APIと通信するごとに変化しているのかと言うのを確認したいためです。
/hogeのURLは確認できるのですが。。
※proxyでの処理がうまく動作していることは確認済みです

### 該当のソースコード

* nuxt.config.ts
```nuxt.config.ts
  proxy: {
    '/hoge': {
      target: `https://fuga.com/fuga?t=${Date.now()}`,
      pathRewrite: { '^/hoge': '' }
    }
  },
  axios: {
    proxy: true,
    debug: true
  },
```

### 試したこと
* developerツールのネットワークタブで、該当のURLの確認
-> バインド先のURLは確認できず
* nuxt.config.tsのaxiosの設定にdebug: trueを追記する
-> /hogeは確認できるが、バインド先のURLは確認できず
* terminalにでているログを確認
->バインド先のURLは確認できず

### 補足情報（FW/ツールのバージョンなど）
node 13.8.0
yarn 1.22.0
type 2.8.1
@nuxtjs/proxy 1.3.3