常連

注目の的

社会貢献

質問力

自己紹介

あるWebサービスの通信障害について調査しており、通信が飛んでいるかは以下のようにして確認しておりました。

・ChromeのDeveloper Toolsのネットワークをウォッチ
・ロードバランサー上でtcpdumpをウォッチ(接続元IPは絞り込み)

稀に、Developer Tools > Network > Timingに以下のように表示され、接続エラーとなることがあります。

CAUTION: request is not finished yet!

この場合、バランサーのtcpdumpにログが乗ってこないようでした。

PCはWifiで接続しております。

上記から考えられることは「Wifiの状況が悪くて、外のネットワークまで出ていない」というのが妥当でしょうか。


確認したい点は次の2点です。


1. 「CAUTION: request is not finished yet!」の意味はどちらでしょうか。
 A. サーバにリクエストが届いていない
 B. サーバにリクエストは届いており、レスポンスが返却されていない

2. サーバにリクエストが到達した場合は、必ずtcpdumpに出力されるのでしょうか。
 例えば、iptablesでDropされるパケットもtcpdumpに乗るのか、サーバの接続がいっぱいで新しいTCPセッションが作れないときは？といったケースについて教えていただけると大変助かります。


何卒よろしくお願いいたします。

Developer Toolsに表示されるCAUTION: request is not finished yet!の意味は？

```vue
<template>
  <div>
    {{ my_dear_name}}　さんへ
  </div>

  <slot />

  <div>
    {{ my_name}} より
  </div>
</template>

<script>
export default {
  props :{
    my_dear_name,
    my_name
  }
}
</script>
```

こんな感じのノリでコンポーネントを生成したいのですが、vueのテンプレートは当たり前ですが、ルート要素は一つしか取れません。
それは理解したうえで、なんとか複数のルート要素をもったコンポーネントを生成したいと思っています。

Reactであれば、

```jsx
import React from 'react'

export const = ({ my_dear_name, my_name, slot }) => {
  return <React.Fragment>
    <div>
      {{ my_dear_name}}　さんへ
    </div>

    { slot }

    <div>
      {{ my_name}} より
    </div>

  </React.Fragment>
}
```
のようにすれば複数のルート要素を持つことができるのですが、Vueではどのようにすれば可能となるのでしょうか。

Vueで複数のルート要素をとる

tableでmargin-rightが効きません。

tableの両端に10pxの余白をとりたくて margin: 0 10px と指定しましが，左端にしかmarginの余白が入りません。

なぜ，margin-rightが効かないのでしょうか？

### 該当のソースコード
HTML
 ```ここに言語を入力
<h2>あいうえお</h2>
  <table>
    <tbody>
      <tr>
        <th>2010年4月</th>
        <td>ABC設立</td>
      </tr>
      <tr>
        <th>2012年8月</th>
        <td>株式会社になる</td>
      </tr>
      <tr>
        <th>2015年11月</th>
        <td>○○○支店開設</td>
      </tr>
      <tr>
        <th>2019年2月</th>
        <td>インスタントアプリ○○○と△△の無償提供を開始する</td>
      </tr>
    </tbody>
  </table>
```
CSS
```
h2 {
  margin: 0 0 0 10px;
  padding-top: 20px;
  padding-bottom: 12px;
  font-size: 1.375rem;
}

 table {
  width: 100%;
  margin: 0 10px; 
  padding-left: 0;
  border-collapse: collapse;
  font-size: 0.75rem;
}

th, td {
 margin: 0;
 padding: 20px 10px 20px 0;
 border-top: 1px solid #ddd;
}
tbody {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}
```

tableでmargin-rightが効きません。なぜ？

### 聞きたいこと
WebアプリのフロントをVue.jsで実装しているのですが、コンポーネント全体で使用する変数(定数)の定義場所に困っています。
現状AjaxでAPIサーバーからデータを取得する際に、APIサーバーのホスト名を変数にしていますが、`computed`や`methods`の各メソッド内ですべて宣言・代入をしています。

```
<script>

 :
 export default {
 :

    methods: {
      getRowCount (items) {
        return items.length
      },
      async onChange() {
        let host
        if (process.env.NODE_ENV === "development") {
          host = "localhost"
        } else {
          host = "APIサーバー"
        }

        this.sessions = await axios
          .get(`http://${host}/api/hub/${this.selected}/session`)
          .then(response => response.data)
      },
      async deleteSession (sessionName) {
        let host
        if (process.env.NODE_ENV === "development") {
          host = "localhost"
        } else {
          host = "APIサーバー"
        }
        await axios
          .delete(`http://${host}/api/xxx/`, {
            headers:
              {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
          })
      },
    },
    watch: {
      months: function (newVal) {
        this.onChange(newVal);
      }
    }
  }
</script>
```

共通変数を使用している箇所が多くなればなるほど、変更が必要になった際に大変になるので、どこかで一元管理したいと思っています。

[Vue] 全コンポーネントで使用する変数(定数)の管理方法

nuxtにhtml2canvasを導入しようとしているんですが下記のエラーが出てしまいます。

![イメージ説明](b3cc2efb5037b1e309e221350d21be07.png)

onloadがまずいのか,がまずいのかエラーの意味がよくわからず。。。コード自体は下記を対象のpages/index.vueに記述しています。こちらのhtml2canvasについて書かれた記事を参考にしてnuxtに導入しようとしています。

https://qiita.com/youwht/items/8b681a856f59aa82d671

```
<script>
import Header from '~/components/Header.vue'

export default {
  name: 'Reveal',
  components: {
    Header
  },
  data: () => ({
    menuVisible: false,
    event_name1: '',
    selectedDate1: '',
    event_name2: '',
    selectedDate2: '',
    event_name3: '',
    selectedDate3: ''
  }),

  //ロードされた際の処理として実施：
  window.onload = function(){
    //HTML内に画像を表示
    html2canvas(document.getElementById("target"),{
      onrendered: function(canvas){
        //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
        var imgData = canvas.toDataURL();
        document.getElementById("result").src = imgData;
      }
    });
    //ボタンを押下した際にダウンロードする画像を作る
    html2canvas(document.body,{
      onrendered: function(canvas){
        //aタグのhrefにキャプチャ画像のURLを設定
        var imgData = canvas.toDataURL();
        document.getElementById("ss").href = imgData;
      }
    });
  }

}
</script>
```

nuxtにhtml2canvas導入時のエラー

html5とJavaSprictでレーダーチャートを用いたグラフを作成しています。
あらかじめhtmlで項目ごとのテキスト入力欄を作り、そこに入力された数字がレーダーチャートに反映されてグラフが変化するようにしたいです。
テキスト入力→グラフに反映までの過程を教えていたただきたいです。
おそらく値を配列に入れ替えてから、chart.jsに戻すのではないのかと思うのですが…
なにかサンプルがあればと、藁をもすがる思いです。
現在ランダムにレーダーチャートを生成することは可能です。
よろしくお願いいたします。

テキスト入力によるデータをグラフに反映させるコード

現在vue.jsを使用してPC・スマホ両対応のWEBアプリを作成していまして、UIフレームワークに[Element-ui](http://element.eleme.io/#/en-US)を使用しようと考えています。

Elementの使用方法自体は公式サイトを見てなんとなく理解出来ましたがヘッダーの作成方法だけがいまいちよく分かりません。

```html
<el-container>
  <el-header>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-submenu index="2">
        <template slot="title">Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
    </el-menu>
  </el-header>
  <el-main>
    <p>メインコンテンツ</p>
  </el-main>
</el-container>
```

公式サイトのソースそのままですが、上記の様に書けば一応ヘッダー自体は作成出来ますが、ホバーした際の背景色などをCSSで指定する方法が分からず、リファレンスを見ても設定項目が無いように思います。

また、公式サイトのソースそのままではレスポンシブデザインではないようで、レスポンシブ化しようとしたら恐らく色々と設定をしなくてはならないのだと思います。
それならいっそのこと、Bootstrapを使用してヘッダを作成してしまえばいいのでは？とも考えたのですが、ヘッダーのためだけにJqueryとpopper.jsを入れるのもどうかと思い調べてみると、[Bootstrap-vue](https://bootstrap-vue.js.org)というものがあることが分かりました。


UIフレームワークを２つ入れてもコンポーネント名が違うので競合等は恐らくないかと思いますが、用途に合わせて2種類、またはそれ以上のUIフレームワークを使用することはよくあることなのでしょうか？

また、Element-uiでのヘッダー作成が上手く行けばBootstrap-vueを使用することもなくなると思うので、Element-uiの使い方に詳しい方いましたらヘッダー作成のアドバイスを頂けないでしょうか？
よろしくお願いいたします。