常連

注目の的

vueを localのyarn run serverで立ち上げ、chromeのデベロッパーツールを見ると
![![イメージ説明](c8e0f957b62d650adb887344cfcd0d43.png)](bdba2aafd5a8ba3461a965b679e96358.png)
画像のように src配下が見えてしまいます。

これを見えなくするようにはできますか？
他のvue.appを見てみるとこうはなっていないので気になりました。
ちなみにfirebaseで deployしても同じ感じでした。

dir構成は
```ここに言語を入力
|-- README.md
|-- babel.config.js
|-- dist
|-- firebase.json
|-- node_modules
|-- package.json
|-- postcss.config.js
|-- public
|-- src
|-- tailwind.config.js
`-- yarn.lock
```

こういう感じで、画像の赤で隠蔽しているところがこのdirectoryの名前になります。

vueを立ち上げると開発者モードでsrc以下の内容が見える

こんにちは。JavaScript初心者です。
クライアント側からajaxを使用し、JSONデータをPOST送信するも
サーバー側でJSONのbodyをログ出力しても空（{}）となり困っています。
サーバー側は、GoogleのCloud FunctionsでJavaScriptで実装しています。

空となる原因と対策を教えていただければと思います。

[クライアント側]
index.html　一部省略しています。
```html
    <script>
      var obj = {
          title: 'test title',
          description: 'test description',
          platforms: ['A', 'B'],
          million: false,
          releasedAt: '2018-05-01'
      }
      var json = JSON.stringify(obj);

      // 通信実行
      $.ajax({
          type:"post",                // method = "POST"
          url:"https://us-central1-<Cloud Functionsで作成したプロジェクト名>.cloudfunctions.net/addMemo",        // POST送信先のURL
          // data:JSON.stringify(data),  // JSONデータ本体
          data:json,  // JSONデータ本体
          contentType: 'application/json', // リクエストの Content-Type
          dataType: "json",           // レスポンスをJSONとしてパースする
          success: function(json_data) {   // 200 OK時
              alert(json_data, undefined, 4); // Chrome用
          },
          error: function() {         // HTTPエラー時
              alert("Server Error. Pleasy try again later.");
          },
          complete: function() {      // 成功・失敗に関わらず通信が終了した際の処理
              button.attr("disabled", false);  // ボタンを再び enableにする
          }
        });
      });
    </script>
```

[サーバー側]
index.js
```JavaScript
const functions = require('firebase-functions');

exports.addMemo = functions.https.onRequest((req, res) => {
  try {
    console.log("req.body :", JSON.stringify(req.body));
    res.status(200).send(req.body);
  } catch(error) {
    console.error( "エラー：", error.message);
  }
});
```

[サーバー側のログ]
以下の通り、空となっています。
```Log
2021-05-07T02:40:18.696ZaddMemosbt6cdnxq5im req.body : {}
```

ajaxにてCloud FunctionsへjsonデータをPOST送信するも、req.bodyが空となってしまう

### 前提・実現したいこと
Vue CLIでアンケート画面の作成をしています。

今回、実装したいことは一つ目の設問のラジオボタン「はい」もしくは「いいえ」が選択された時に
二つ目の設問が下からフェードインするような形で表示させたいです。

![イメージ説明](9cf36eca420c385c161032285040d4ff.png)


### 発生している問題・エラーメッセージ

アニメーションさせたい部分をtransitionタグで囲みCSSを設定したのですが、
ラジオボタンをクリックすると、ただ表示されるだけの状態になってしまいます（フェードインされない）

### 該当のソースコード

``` HTML
<template>
  <div>
    <div class="questionnaire-box">
      <div class="questionnaire-box-header">
        <span>STEP2</span>
        <h4>以下にお答えください</h4>
      </div>

      <form class="question-box">
        <p>現在、生命保険に加入されていますか？</p>
        <input type="radio" name="question" value="ok" id="a" v-on:click="change"/>
        <label for="a">はい</label>
        <input type="radio" name="question" value="no" id="b" v-on:click="change"/>
        <label for="b">いいえ</label>
      </form>

　　　　//フェードインで表示させたい部分
      <transition name="fade">
        <form class="question-box" v-if="show">
          <p>現在、入院中ですか。または、最近3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことはありますか？</p>
          <input type="radio" name="question" value="ok" id="c" />
          <label for="c">はい</label>
          <input type="radio" name="question" value="no" id="d" />
          <label for="d">いいえ</label>
        </form>
      </transition>

      <form class="question-box">
        <p>過去５年以内に、病気やけがで、手術をうけたことまたは、継続して７日以上の入院をしたことがありますか？</p>
        <input type="radio" name="question" value="ok" id="e" />
        <label for="e">はい</label>
        <input type="radio" name="question" value="no" id="f" />
        <label for="f">いいえ</label>
      </form>
    </div>

    <div class="page-transition-button">
      <button id="back-btn" class="back-btn">前へ戻る</button>
      <button id="next-btn" class="next-btn">次へ進む</button>
    </div>

  </div>
</template>
```
```  CSS
<style scoped>
//フェードインのCSS
.fade-enter {
    opacity:0;
    transform: translateY(20px);
}

.fade-enter-active {
    transition:0.5s;
}

.fade-enter-to {
    transform:translateY(0);
}

.questionnaire-box {
  width: 50%;
  margin: 50px auto;
  border: 1px solid #00ffc0;
  border-radius: 3px;
}

.question-box:nth-child(4) {
  margin-bottom: 20px;
}

.questionnaire-box-header {
  display: flex;
  background-color: rgba(0, 255, 186, 0.3);
}

.questionnaire-box-header > span {
  width: 11%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #1798da;
  border-radius: 3px;
}

.questionnaire-box-header > h4 {
  width: 37%;
  margin: 0 auto;
  padding: 10px;
  color: #565f5f;
  font-weight: normal;
}

.question-box {
  padding: 0 10px;
}

.question-box > p {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #4eaee0;
}

.next-btn,
.back-btn {
  position: relative;
  display: block;
  text-align: center;
  margin-right: 25px;
  padding: 10px;
  width: 150px;
  color: #fff;
  background-color: #0fe7a2;
  border: none;
  border-radius: 3px;
  letter-spacing: 1px;
}

.next-btn::after,
.back-btn::after {
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -3.5px;
  height: 7px;
  width: 7px;
  position: absolute;
  top: 19px;
  left: 125px;
  transform: rotate(45deg);
}

.page-transition-button {
  display: flex;
  justify-content: center;
}
</style>

```

``` JavaScript
<script>
export default {
  data() {
    return {
        show:false
    };
  },
  methods: {
      change:function() {
          this.show = true;
      }
  }
};
</script>
```

### 試したこと

試しにtransitionタグにappearを付けてみたのですが、特に変化はありませんでした。

原因がわからず先に進めない状況となっております。
ご教授いただけると幸いです????‍♂️

デベロッパーツールで確認したところ
```css
.fade-enter-active {
    transition:0.5s;
}

.fade-enter-to {
    transform:translateY(0);
}
```
は適用されてるみたいなのですが、
```css
.fade-enter {
    opacity:0;
    transform: translateY(20px);
}
```
は適用されてないみたいです。


--追記--
script直接組み込み挙動を確認したところ下からフェードインする形で表示されました。
現在VueCLIでの開発をしているのですが、VueCLIだと何故フェードインする形で表示されないのかが疑問なので、もし分かる方がいらっしゃったらご教授いただければと思います????‍♂️

--追記--
Vue2で新しくプロジェクトを作成して同じようにコンポーネントを作って実装してみたところしたからフェードインする形で表示されました。

ただ、Vue3だと同じようにはならないのは何故なのか？分かる方がいれば教えていただきたいです????‍♂️

Vue.jsで下からフェードインして表示されるようなアニメーションを付けたい。

Vue.jsでスタイルは同じで処理の内容だけ違うボタンを実装したくてボタンコンポーネントを作成しました。

```Vue
//App.vue
<template>
<Button buttonName="a" @click="A" />
<Button buttonName="b" @click="B" />
</template>

<script>
export default {
  name: "Button",
  props: {
    buttonName: {
      type: String,
      default: "null",
    },
  },
  methods: {
    A: function () {
      //省略
    },
    B: function () {
      //省略
    },
  },
};
</script>
```

```Vue
//Button.vue
<template>
  <button>
    <span>{{ buttonName }}</span>
  </button>
</template>
<script>
export default {
  name: "Button",
  props: {
    buttonName: {
      type: String,
      default: "null",
    },
  },
};
</script>
```

このような方法で試してみたのですが、ボタンを押しても反応しません。
v-onで処理する関数は{{ buttonName }}のようにコンポーネント側で変数として定義できるのでしょうか？

Vue.jsのボタンコンポーネントで個別の処理をする方法

CloudFormationはEC2やELBといったAWSリソースの環境構築を、設定ファイル（テン
プレート）を元に自動で作成できるサービスだと思うのですが、
逆に、すでに作成済みのEC2やELBなどの設定を設定ファイル（テンプレート）として自動でコード化(yamlまたはjson)することは可能でしょうか？
何卒よろしくお願い致します。

AWS CloudFormationのコード化について

async/awaitを使って通信を行っているのですが。
１ではサーバーに対してログインの情報を送りjwtが返ってきます。
この通信が完璧に終わってから2に移りたいのですがうまくいきません
書き方間違っていますか？
```JavaScript
コード
const asynchronous = useCallback(async() => {
    return userLogin({payload:{
      loginId: mail,
      password
    }
   })
  },[userLogin,mail,password])
  const login = useCallback(async() => {
    await asynchronous()　                ...1
    hideModal()　　　　　　　　　　　　　　　　...2
    history.push('/main')　
   },[asynchronous,hideModal,history])
```

async await の使い方　あってますか？

### 前提・実現したいこと

 

以下のサイトを参考、Vueの処理でasync/awaitを駆使して非同期処理を実行させておりますが
その時にnpm run buildを実行したところエラーが発生してしまい、これを解消したいです。
https://qiita.com/ryuone/items/13f5d450c3865709ba10

 

### 発生している問題・エラーメッセージ

 

buildを通すと以下のようなエラーが発生します。

 

```
ERROR in build.js from UglifyJs
Unexpected character '`' [./src/XXXXXXX.js:85,14][build.js:4107,13]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! ******* build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ******* build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\{ユーザ名}\AppData\Roaming\npm-cache\_logs\2020-10-30T01_07_43_526Z-debug.log
```

 


babel環境下でプロジェクトを構築しており、.babelrcを以下のように変更させると発生するエラーなのですが
非同期処理を実現する為には、.babelrcを変更前の状態に戻すと動作しない為、色々試しましたが手詰まりになってしまっております。
私の知識不足が原因だと思うのですが、有識者の皆様のアドバイスを頂けますとありがたいです。

 

変更前
.babelrc
```javascript
{
  "presets": [
    [ "env", {}
    } ]
  ]
}
```

 


変更後
.babelrc
```javascript
{
  "presets": [
    [ "env", {
      "targets": {
        "node": "current"
      }
    } ]
  ]
}
```

### 試したこと

 

./src/XXXXXXX.js内のエラーに該当されている記述をコメントアウトしたところ、また別のjsファイルの箇所でエラーが発生してしまい、

それをコメントアウトするとまた別のjsファイルで...というようにいたちごっこのようになっています。

.babelrcの内容変更に伴って別の何かをインストールする必要があるのでは、と思っているのですが

参考にできる文献が見当たらず、手をこまねいてしまっています。

 

XXXXXXX.js

```javascript


//    ACCIDENT: {
//        EVENT: "sample",
//        MSG: `msg
//        msgId：{0}
//        time：{1}`,
//    },

```

### 補足情報
"vue": "^2.6.12"
"babel-core": "^6.26.0"
"babel-loader": "^6.0.0"
"babel-preset-env": "^1.6.1"
"cross-env": "^5.1.1"

2020/11/04 追記
node.jsのバージョンはv12.18.3です。

webpackにてbuildを行っております。
以下にwebpack.config.jsの内容を追記します。

webpack.config.js
```javascript
var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  plugins: [new ExtractTextPlugin("main.css")],
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
```