常連

注目の的

自己紹介

### NULLと空文字のWHEREを簡潔に表記したいです
あるカラムが空欄のレコードを抽出するさいに
WHERE COL IS NULL OR COL=''
と表記しているのですが、どうもあか抜けない表現に思います。
もっとすっきりした洗練した表記方法はないでしょうか。
あるいはより高速になる表記方法はないでしょうか。
それともこの書き方が最高でしょうか。
ご教示ください。

NULLと空文字のWHEREを簡潔に表記したいです

Flutterにgoogle_mobile_adsを追加したところ、インタースティシャル広告をインスタンス化したタイミングでアプリがクラッシュするようになりました。
google_mobile_adsのバージョンを下げたり、gradleなどのバージョンを変えたりしましたが変化はありませんでした。
公式が出しているサンプルだと正常に動作しました。なのでFlutterのバージョンなど共有部分に問題はないと思います。

エラーは
```
E/AndroidRuntime(14135): FATAL EXCEPTION: main
E/AndroidRuntime(14135): Process: sample.com.app, PID: 14135
E/AndroidRuntime(14135): java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/ads/InterstitialAd;
E/AndroidRuntime(14135): 	at io.flutter.plugins.googlemobileads.FlutterInterstitialAd.load(FlutterInterstitialAd.java:70)
E/AndroidRuntime(14135): 	at io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.onMethodCall(GoogleMobileAdsPlugin.java:299)
E/AndroidRuntime(14135): 	at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:233)
E/AndroidRuntime(14135): 	at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/AndroidRuntime(14135): 	at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:819)
E/AndroidRuntime(14135): 	at android.os.MessageQueue.nativePollOnce(Native Method)
E/AndroidRuntime(14135): 	at android.os.MessageQueue.next(MessageQueue.java:336)
E/AndroidRuntime(14135): 	at android.os.Looper.loop(Looper.java:197)
E/AndroidRuntime(14135): 	at android.app.ActivityThread.main(ActivityThread.java:8125)
E/AndroidRuntime(14135): 	at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(14135): 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:496)
E/AndroidRuntime(14135): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1100)
E/AndroidRuntime(14135): Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.gms.ads.InterstitialAd" on path: DexPathList[[zip file "/data/app/sample.app-D8qloDBoh2S95AXFem7KnA==/base.apk"],nativeLibraryDirectories=[/data/app/sample.com.app-D8qloDBoh2S95AXFem7KnA==/lib/arm64, /data/app/sample.com.app-D8qloDBoh2S95AXFem7KnA==/base.apk!/lib/arm64-v8a, /system/lib64, /system/product/lib64]]
E/AndroidRuntime(14135): 	at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:196)
E/AndroidRuntime(14135): 	at java.lang.ClassLoader.loadClass(ClassLoader.java:379)
E/AndroidRuntime(14135): 	at java.lang.ClassLoader.loadClass(ClassLoader.java:312)
E/AndroidRuntime(14135): 	... 12 more

```
初期化やバナー広告は問題なく動作しますが、InterstitialAd及びPublisherInterstitialAdがインスタンス化する際にクラッシュします。
変数などの宣言は問題なくできます。

やったこと
google_mobile_adsのバージョン変更
gradleのバージョン変更
flutter clean
Pubのキャッシュを削除
realm-gradle-pluginの追加

[Flutter] AdmobでInterstitialAdを呼び出すとクラッシュする

### 前提・実現したいこと

flutter runしたときにsimulatorが起動しないです。
自分で調べてもどうにもできなかったので、力を貸してください。
何卒よろしくお願いします。

### 発生している問題・エラーメッセージ

```
 Failed to build iOS app
Error output from Xcode build:
↳
    ** BUILD FAILED **
Xcode's output:
↳
    ../../Developer/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.18.1/lib/src/picture_provider.dart:50:59: Error: No named parameter with the name 'nullOk'.
            context != null ? Localizations.localeOf(context, nullOk: true) : null,
                                                              ^^^^^^
    ../../Developer/flutter/packages/flutter/lib/src/widgets/localizations.dart:413:17: Context: Found this candidate, but the arguments don't match.
      static Locale localeOf(BuildContext context) {
                    ^^^^^^^^
    Command PhaseScriptExecution failed with a nonzero exit code
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'FMDB' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'leveldb-library' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'BoringSSL-GRPC' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'gRPC-C++-gRPCCertificates-Cpp' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'GoogleAppMeasurement' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'Flutter' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'Firebase' from project 'Pods')
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'FirebaseAnalytics' from project 'Pods')
Could not build the application for the simulator.
Error launching application on iPhone 12 Pro Max.

```

### 試したこと

下記のコマンドを試しましたが、解決しませんでした。
```
flutter clean
Delete Podfile.lock in iOS folder
pod install or pod install --repo-update
flutter run
```

### 補足情報（FW/ツールのバージョンなど）
Flutter version 2.0.4
Dart version 2.12.2
Xcode 12.4,
CocoaPods version 1.10.1

flutter doctor -vは問題ありませんでした。

<Flutter> flutter runしたときにsimulatorが起動しない

SPAがよく理解できません。
現在、nuxtのSSGモード(?)でサイトを構築しており、nuxt.configのgenerateのrouteでルーティングの設定をして、~~build~~ generateした時に静的なファイルを生成するようにしていますが、一方でSPAだと、静的なファイルを生成しなくとも、テンプレート的な .vueがあればそれをjsでレンダリングしてくれるのでしょうか？

と言うのも、訳あって静的なファイルのスラッグを伏せなきゃいけなくなってしまい（クイズのような問題サイトを制作しており、そのページの答えが、次の問題のページのスラッグになっていると言う仕様のため）、SSGだとソースコード見たときにバレてしまうなと今更気付きました。
全てのデータは定数管理ファイルに納めていて、アクセスしたページのスラッグからオブジェクトを取り出して読み込んでいます。

3Dオブジェクトをクリックするとページ遷移するようにしているので、<NuxtLink to="">なども使わないし、、
SPAだと、generateの設定を省けば大丈夫だったりするんでしょうか（そんなはずはないか..）、想像で質問してしまいごめんなさい。
どなたかご教授いただけると幸いです。

### 追記

yarn generate してdistファイルをコマンド http-server ./dist -o -p 8888 してローカルで確認してみましたが、configのgenerateの設定書かなくても任意のスラッグでアクセスしたらちゃんと表示されました。
しかしコンソールには404 Not Found エラーが出てしまいました。

それと、なぜかCSSやglbファイルが_nuxtの中にごちゃ混ぜに入っていました。

[Nuxt.js] SPAについての理解　SSGとの違い

() async => !await.〜〜の挙動がいまいち分かっていません。
async => await で処理を待つと思おうのですが、"!await"は待たないということでしょうか？
待たないのであればなぜこのコードが必要なのでしょうか？

### 該当のソースコード

```ここに言語名を入力
Widget build(BuildContext context) {
    return WillPopScope(
      ### この部分の挙動がわからない ###
      onWillPop: () async => !await navigatorKeys[_currentTab].currentState.maybePop(),
        child: CupertinoHomeScaffold(
      currentTab: _currentTab,
      onSelected: _select,
      widgetBuilders: widgetBuilders,
          navigatorKeys: navigatorKeys,
    ));
  }
```

!awaitの挙動とは

こんにちは！
いつもお世話になっております。

FlutterでiOS用にプラグインを作っているのですが、自作プラグインに書いたメソッドを呼び出す方法がわからず困っております。

具体的には`AppDelegate.swift`から`SwiftICloudNotePlugin.swift`に定義したメソッドを呼び出したいのですが、現在ディレクトリ構造が

```
AppDelegate.swift           -> icloud_note/example/ios/Runner/AppDelegate.swift
SwiftIcloudNotePlugin.swift -> icloud_note/ios/Classes/SwiftIcloudNotePlugin.swift
```

このようになっています。そこで、`SwiftICloudNotePlugin.swift`の中身で

```swift
public class CloudKitNoteDatabase {
  public func handleNotification() {}
}
```

と定義してhandleNotificationメソッドをAppDelegate.swiftで呼び出す方法を知りたいです。初歩的な質問で恐縮ですが、ご助言いただけるとうれしいです！ぜひよろしくお願いいたします！

AppDelegate.swiftから上の階層にあるクラスのメソッドを呼び出す方法がわかりません

vue.jsでルーティングにvue-routerを使うとして

```
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Page2 from '../pages/page2.vue'


const routes =[
{
  path: '/page2',
  component: Page2
}
];

const router = new VueRouter({
  routes,
  base: process.env.BASE_URL,
  mode: 'history'
});

export default router;
```
以上の様なルーティングになっているとします。
`$router.push`等で`/api/v1/users/3"`に遷移しurl欄のurlも変化すると思います。
ただ実際これは非同期処理でDOMを書き換えているだけなので、
例えば直接パスを踏んだり、ブラウザの更新ボタン押したをするとサーバーサイドのルーティングを見に行ってしまうと思います。
例えばrailsのroutes.rbで
```
Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      root to: 'home#index'
      resources :users, only: [:index,:show, :update]
    end
  end
  get '/page2', to: 'api/v1/users#show'
end

```
この様に定義していたらこちらの`/api/v1/users/3`を見に行ってしまうという寸法です。
ユーザがブラウザの更新ボタンを押すということは至ってよくあることだと思うのですが、一般的にこれはどう対策すれば良いのでしょうか？(例えばrailsですと/users/show.html.erbを作成して、更新してもユーザからは同じページを表示してる様に見せるなど)
それとも更新を押してもusers.vueを呼び出す様ないい方法があるのでしょうか？
SPA周りがあまり詳しくなく疑問に思っています。よろしくお願いします。


###追記
```ここに言語を入力
js構成
javascript
-packs
|_pages2.js
|_application.js
-pages
|_pages2.vue
-router
|_router.js
```

```ここに言語を入力
//application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>PerformaApps</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```

(rails×vue)spaで作られたサイトはどの様にして直接アクセスの対策をしているのでしょうか？

### 準備
```
drop table nums;
create table nums (
	n int not null 
);
insert into nums values(1);
insert into nums values(2);
insert into nums values(3);
insert into nums values(4);
insert into nums values(5);
insert into nums values(6);
insert into nums values(7);
insert into nums values(8);
insert into nums values(9);
```
### 実現したかったこと
```
select 
	* 
from 
	(select * from nums where n % 3 = 0) as t1
where 
	n > (select avg(n) from t1)
;
```
レコードが1件のみで、値は9
という結果を期待した。

### 発生している問題・エラーメッセージ
```
ERROR:  リレーション"t1"は存在しません
LINE 6:  n > (select avg(n) from t1)
                                 ^
```

### 試したこと
```
--(1)where句にも同じ条件を記載
select 
	* 
from 
	(select * from nums where n % 3 = 0) as t1
where 
	n > (select avg(n) from nums where n % 3 = 0)
;--OK 9

--(2)一旦、テーブルを作ってそれを参照（共通テーブル式)
with m3(n) as (
	select * from nums where n % 3 = 0
)
select 
	* 
from 
	m3
where 
	n > (select avg(n) from m3)
;--OK 9
--(3)更に単純な例
select * from nums
where n > (select avg(n) from nums)
;--OK 6,7,8,9
select * from nums as t1
where n > (select avg(n) from t1)
;--NG リレーション"t1"は存在しません
```

### 補足
本当にやりたかったことはもっと複雑なテーブル＆もっと複雑な条件です。
質問用に簡易的なテーブルで再現させています。

試したことの(1)は、可読性が悪く、ミスの混入しやすさ等を考慮して却下。
試したことの(2)は、いちいちテーブル作るのは後処理やトランザクションが面倒。
共通テーブル式は妥協できるレベルですが、割と新しい機能っぽいので、昔の人はどうしてたのかなと。。。
もっとスマートな方法があるはず！と思い、質問させていただきました。

from句で指定した別名がwhere句で参照できない！？

firebaseにてdisplayNameを取得しようとしているのですが、displayNameがnullになり、取得ができないです。
displayNameをfirebaseに登録する処理が間違っていると思うのですが、どこが間違っているかわからないです。ご教授よろしくお願いします。
```js
store.js


import Vue from 'vue';
import Vuex from 'vuex';
import firebase from './plugin/firebase.js';
import router from './router.js';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userName: '',
    email: '',
    password: '',
  },
  getters: {
    email(state) {
      return state.email;
    },
    password(state) {
      return state.password;
    },
    userName(state) {
      return state.userName;
    },
  },
  mutations: {
    setEmail(state, email) {
      state.email = email;
    },
    setPassword(state, password) {
      state.password = password;
    },
    setUsername(state, userName) {
      state.userName = userName;
    },
  },
  actions: {
    registerUser({ commit }, userInfo) {
      firebase
        .auth()
        .createUserWithEmailAndPassword(userInfo.email, userInfo.password)
        .then((response,userInfo) => {
          // commit('setUsername', user.userName);
          response.user.updateProfile({
            displayName: userInfo.userName,
            // displayName:state.userName
            // displayName:user.userName
          });
          console.log(response);
          const user = firebase.auth().currentUser;
          commit('setEmail', user.email);
          commit('setPassword', user.password);
          commit('setUsername', user.userName);
          router.push('/Home');
        })
        .catch((e) => {
          console.log(e);
        });
    },
    logIn({ commit }, userInfo) {
      firebase
        .auth()
        .signInWithEmailAndPassword(userInfo.email, userInfo.password)
        .then((response) => {
          const user = firebase.auth().currentUser;
          commit('setEmail', user.email);
          commit('setPassword', user.password);
          console.log(response);
          // router.push('/Home');
          console.log(firebase.auth().currentUser.displayName);
          // console.log(firebase.auth().currentUser.displayName);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
});

```

displayNameを表示させる
```vue
<template>
  <div>
    <p>{{userName}}さんようこそ!!</p>
  </div>
</template>

<script>
import firebase from '../plugin/firebase.js'
export default {
  data() {
    return {
      userName:firebase.auth().currentUser.displayName,
    }
  },
}
</script>

```

会員登録のコード
```vue
<template>
  <div>
    <div>
      <h1>新規登録画面</h1>
    </div>
    <form @submit.prevent="signUp()">
      <div>
        <label>ユーザ名</label>
        <input
          type="text"
          v-model="userInfo.userName"
          placeholder="userName"
          class="text"
        />
      </div>
      <div>
        <label>メールアドレス</label>
        <input
          type="email"
          v-model="userInfo.email"
          placeholder="E-mail"
          class="email"
        />
      </div>
      <div>
        <label>パスワード</label>
        <input
          type="text"
          v-model="userInfo.password"
          placeholder="Password"
          class="password"
        />
      </div>
      <button class="register" type="submit">新規登録</button><br />
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        email: '',
        password: '',
        userName: '',
      },
    };
  },
  methods: {
    signUp() {
      this.$store.dispatch('registerUser', this.userInfo);
    },
  },
};
</script>

<style scoped>
.text,
.email,
.password {
  border: 1px solid;
}
ul li {
  list-style: none;
}
.email {
  margin-right: 47px;
}
.password {
  margin-right: 18px;
}
label {
  text-align: center;
}
.register {
  border: 1px solid;
  background-color: white;
  color: blue;
  outline: none;
}
</style>

```
よろしくお願いします

firebaseでdisplayNameを取得したい

いつもお世話になっております。
会社の労使管理に使うため、ウェブ上にlaravel6とVue2で打刻webアプリを構築しました。
要件は次の通りです。
- インターネット経由でwebアプリにアクセスすると、google maps apiを使って、社員の持つモバイル端末が会社敷地内に入っているかどうかを検出する
- 敷地内に入っている場合、打刻ボタンが出現する。
- 敷地外では会社までの距離が表示される。
- 打刻ボタンを押すと、Vueがlaravelで構築したweb apiを叩き、打刻情報としてdbに社員番号とタイムスタンプが記録される。

現在は社員が自分で社員番号を入力の上打刻しています。
しかし、この運用の問題点として、社員番号の打ち間違えや、従業員同士の共謀による代理打刻等ができてしまうことから、社員番号に代えて端末固有の識別情報をdbに保存することを検討しています。

しかし、色々調べてみたのですが、webアプリにおいて端末固有の識別情報を取得する方法が見つけられずにいます。
ほしい情報はAndroidIDやiphoneのudidのようなものをイメージしております。
VueやJavascriptで、端末固有の識別情報を取得する方法はあるのでしょうか。

ご存じの方がいらっしゃいましたら、ご助言いただけますと幸甚です。
よろしくお願い致します。

webアプリにおけるモバイル端末からのアクセス時のデバイス情報の識別について

### 新規登録ボタンを「クリック」と「Enterキー」で登録できるようにイベントを発火させたい。

現状、新規登録ボタンを押したら、signUpイベントが発火されるようにしているのですが、
Enterキーでも発火させるようにしたいです。
（要はクリックでもEnterでも同じ動きで登録できるようにしたいです。）

ネット上で調べたり、clickだけでなく、keydownを追加してみて実行してみたのですが、
上手く実装されませんでした。。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

### サインアップページ

```
◆singup.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>
```

新規登録ボタンを「クリック」と「Enterキー」で登録できるようにイベントを発火させたい。

### 前提・実現したいこと

Vue.jsとFirebaseを利用した開発の練習をしています。

Firebaseからデータ取得し、data内のthis.skillsに入れることが目的です。

下のコードに書いてあるように、querySnapshot内と外で、skillsが取得できるかどうかになぜ違いが出てくるのでしょうか。

どうぞよろしくお願い致します。

### 該当のソースコード

```vue.js
export default {
  data(){ return {
      skills: []
    }
  },
  created() {
    let skills = []
    firebase.firestore().collection("skills").get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
        skills.push(doc.data())
      })
      console.log("querySnapshot内で確認：" + skills) // 取得できる
    })
    .catch(function(error) {
      console.log("Error getting skills: ", error)
    })
    this.skills = skills
    console.log("createdの最後でskillsを確認：" + skills) // 取得できない
    console.log("createdの最後でthis.skillsを確認：" + this.skills) // 取得できない
  },
}
```

Vue.jsでのFirebaseのデータ取得がうまくいかない

vscodeで開発をしています。
vscodeを立ち上げると、cpu使用率が100%近くになってmacのファンが激しく回ってしまいます。
vscodeを終了するとrubyのcpu使用率も下がって落ち着きます。


### 発生している問題・エラーメッセージ
![![イメージ説明](006347cc6e43cb84d031e6dd76eafec5.png)](e2bf2f60ea0fe09533df9b0eccc7a194.png)

### 試したこと
[VS Codeでホームフォルダを開いただけでCPU使用率が上がる問題に対処](https://yaritakunai.hatenablog.com/entry/vscode-cpu-usage)
上記の記事の内容を試してみましたが解決しませんでした。

### 補足情報（FW/ツールのバージョンなど）
RSpecを実装してから今回の問題が起きるようになりました。

使用している拡張機能
![イメージ説明](85d836a7e72eb9e1fe9d5c45091bb984.png)

cpuを100％使用しているrubyプロセス
![イメージ説明](4322e2aa22170aee4f15b76a0e337d91.png)

よろしくお願いいたします。

Rubyのcpu使用率が100%になってしまう問題を解決したい

stateで何も定義していのにstore.state.◯◯が使えてしまうのは、勝手に自動生成でもしてくれているのでしょうか？

######例 
stateには何も定義していません

store.js
```
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  }
})
```

しかし定義していないtestが使えている？ようになります
これはただの変数として扱われたのでしょうか？
.Vue

```
this.$store.state.test = "テスト"
console.log(this.$store.state.test)
結果　テストと表示される
```

Vue.js store　定義していないのに

表題の通りですがvue.jsの特定のページでGoogleAnalyticsが使用できず困っています。

システムの構成としては
step1～step3 -> 入力フォーム画面
complete -> 上記入力フォームのstep3まで入力完了後遷移する画面
の様な構成となっておりvue routerを使用して各component（step1～step3及びcomplete）を
呼び出すシステムでしてこの中のcomplete画面でのみGoogle Analyticsを使用したいという内容となります。

試してみた事としましては、components>complete.vue内に以下の形でアナリティクスコードを埋め込みましたが反映されませんでした。

```vue.js
<template>
～コンプリート画面のHTML～
</template>
<script async src="https://www.googletagmanager.com/gtag/js?id=***"></script>
<script>
～gtag等アナリティクスコード～
</script>
```

又、その後いろいろ調べているとvue-tagというライブラリに出会ったものの
導入するとSPAの特性上全てのページにアナリティクスコードが埋め込まれてしまいます。。

vue及びGoogleAnalyticsに疎く恐れ入りますが
ご教示頂けますと大変助かります。
何卒よろしくお願い致します。

vue.jsで作成したSPAの一番最後のページ（Components）でGoogleAnalyticsを使用したい

### 前提・実現したいこと

現在、vue.jsにてポートフォリオを作成しております。
（プログラミング自体勉強し初めて約３ヶ月ほどと浅いため、ご了承のほどお願いします。。）

そこで現在、vueにてfirebaseと連携させて新規登録、ログイン、ログアウトの追加するところまでできましたが、
以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・。

①ログイン成功後、mypageに遷移するようにしておりますが、
ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。

```ここに言語を入力

※追記
header.vue

 return {
      authenticatedUser: "",
    };
```

上記の指定が抜けていたので、追加したらログアウトの挙動は、
ログイン状態では表示され、ログアウト状態では非表示になりました。

しかし、ログインのリンクは常に表示される形となっています。。

ログインボタンもログイン状態では非表示、ログアウト状態では表示させたいです。

②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。


### 該当のソースコード

```ここに言語名を入力

◆header.vue

<template>
  <header class="header">
    <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inemary</router-link
    >
    <div class="header-menu">
      <router-link to="/first" class="header-link">初めての方へ</router-link>
      <router-link to="/signup" class="header-link">新規登録</router-link>
      <router-link to="/signin" class="header-link">ログイン</router-link>
      <router-link to="/mypage" class="header-link">マイページ</router-link>
      <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
    </div>
  </header>
</template>

<script>
import firebase from "firebase";

export default {
  name: "signOut",
  methods: {
    signOut: function() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          alert("ログアウトしました。");
          this.$router.push("/signin");
        })
        .catch(() => {
          alert("ログアウトができません。");
        });
    },
  },
  mounted() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }
    });
  },
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");

.header {
  position: sticky;
  top: 0;
  background-color: #000000;
  padding: 1rem 3rem;
  z-index: 999;
  display: flex;
  align-items: center;
  &-ttl {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: "Roboto", sans-serif;
    &-color {
      color: grey;
      font-size: 2.5rem;
    }
  }
  &-menu {
    margin-left: auto;
  }
  &-link {
    color: #fff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    &:not(:first-child) {
      margin-left: 2rem;
    }
    &:hover {
      color: #bbb;
    }
  }
}

a.header-ttl:hover,
a.header-ttl:hover span {
  color: rgba(105, 104, 104, 0.623);
}
</style>


```
```ここに言語を入力

◆singin.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>


```
```ここに言語を入力

◆signup.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>

```
```ここに言語を入力

◆router.vue

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/main.vue";
import Signin from "../views/signin.vue";
import Signup from "../views/signup.vue";
import First from "../views/first.vue";
import Mypage from "../views/mypage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
  },
  {
    path: "/signin",
    name: "Signin",
    component: Signin,
  },
  {
    path: "/signup",
    name: "Signup",
    component: Signup,
  },
  {
    path: "/first",
    name: "First",
    component: First,
  },
  {
    path: "/mypage",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});


export default router;

```

vue.js × firebaseにてログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです

Rubyで作成したプログラムを、rubyをインストールしていない他のMacユーザーに配布して、使ってもらいたいのですが、どのような方法がありますでしょうか。

ちなみに、Nokogiriを使用したスクレイピングプログラムです。

いくつかご教授いただけますと幸いです。

Jruby + Rawrの方法は知っていますので、それ以外でお願いいたします。

Rubyプログラムを配布したい

### 前提・実現したいこと

１分おきに取得した温度データをデータベースに入れ、それをNode-REDでグラフ表示させています。
何らかの原因でセンサーが停止した場合、データを送らないようにファームウェア側は作っています。
レコードが更新されていなければデータを取得したくありません。

しかし、今のselect文だとデータを取得するたびにインクリメントさせている
id-_noのmaxを見ているので新しいデータが更新されていなくても値をひろってしまいます。

１度取得したレコードデータを取得せず、最新のレコードデータだけ取得するにはどう記述すればいいのでしょうか？

テーブル名：datatable
|id_no|temp|daytime|
|:--|:--:|--:|
|1|18.5|2021-03-15 16:30:00|


### 該当のソースコード

```SQL
select * from datatable where id_no = (select max(id_no) from datatable);
```

データベースから最新のレコードがなければ値を取得したくない

#　エラーの状況

- ruby2.6.5から、ruby 3.0.0にバージョンアップを試みたところ、「POST」ボタンを押した際に、非同期通信でメッセージが反映されるものの、内容部分が`undefined`になってしまう。（リロードすると、内容部分は反映される）
- 検証キーのエラーを確認したが、エラーにはなっていない。
- ログにおいても、「投稿ができた」ことになっており、エラーが出てこない。

![イメージ説明](cdf2e95cf6febf1572ca8dbfe766b5aa.png)

#　コード内容

```ruby
function post() {
    const submit = document.getElementById("submit_message");
    submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("self_compassion"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/troubles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.trouble;
      const list = document.getElementById("list_messages");
      const formText = document.getElementById("content_worry");
      if(document.querySelector("#trouble_message_type_trouble").checked) {
      const HTML_trouble= `
      <li class="message-left-side">
        <div class="pic-chat">
          <img src="/sad.png" alt="落ち込んでいる画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}　????ここが「undefined」になってしまう
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}　????ここが「undefined」になってしまう
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_trouble);
      formText.value = "";
      return false;
    } else (document.querySelector("#trouble_message_type_encouragement").checked)
      const HTML_encouragement= `
      <li class="message-right-side">
        <div class="pic-chat">
          <img src="/kind.png" alt="励ましている画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry} ????ここが「undefined」になってしまう
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}　????ここが「undefined」になってしまう
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_encouragement);
      formText.value = "";
      return false;
    };
    e.preventDefault();
  });
}
window.addEventListener('load', post);

```

```html

????ソースコード上は以下のようになっています????

<main class="container_chat">
      <form id="self_compassion" action="/troubles" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="2QlUbuNswbHaCXDdC2+x3zxtu1Chovacki8t92klSxE9i+Bsu67nCdmqlnxUIf0UpoHUPhyujOpAB1Ns7hbikQ==" />
        <div class="form_chat">
          <div class="left_btn"><input type="radio" value="trouble" checked="checked" name="trouble[message_type]" id="trouble_message_type_trouble" />
            <label for="trouble_message_type_trouble">悩みをつぶやく</label>
          </div>
          <div class="right_btn"><input type="radio" value="encouragement" name="trouble[message_type]" id="trouble_message_type_encouragement" />
            <label for="trouble_message_type_encouragement">励ましの言葉をかける</label>
          </div>
          <div class="message_form_text"><input id="content_worry" placeholder="メッセージを入力" size="25" type="text" name="trouble[worry]" /></div>
          <div class="message_btn_text"><input type="submit" name="commit" value="POST" id="submit_message" data-disable-with="POST" /></div>
        </div>
</form>      <div id="list_messages">
        <ul class="messages">
        </ul>
      </div>
      <div class="index_area">
            <li class="message-right-side">
              <div class="pic-chat">
                <img src="/kind.png" alt="励ましている画像">
              </div>
              <div class="text-chat">
                <div class="post-content">
                  こんばんは
                </div>
                <div class="post-date">
                  投稿日時：2021年03月14日(日) 22時07分50秒 +0900
                </div>
              </div>
            </li>

ーー省略ーー
```

# その他の情報


- Rails 6.0.3.5　（ruby 3.0.0で問題なければ、RailsもRails 6.1.3にバージョンアップしたいと考えていた）
- `yarn upgrade`や`bundle update`は実行ずみ。

# お聞きしたいこと

- [リリースされた内容](https://www.ruby-lang.org/ja/news/2020/12/25/ruby-3-0-0-released/)で、`XMLHttpRequest`が使えなくなってしまったのだろうかと検索しているのですが、解決方法が見当たりません。
- メソッドによるシンプルな呼び出しなのですが、どの部分がひっかかってしまっているのか分かりません。
- 「こういった部分が原因では」など方向性やヒントでも構いませんので、アイデアをいただけると嬉しいです。

どうぞよろしくお願いします。

 ## 追記　検証ツールについて
![イメージ説明](97120065ab04a5c5b437ebf2126d1a60.png)

`XMLHttpRequest`の中身が空なので、`sliceメソッド`は使えないというエラーが出ます。

```
console.log(`${item.worry}`)
```
`item`モデルから`worry`カラムの内容を取得しているのですが、これがエラーになってしまいます。

## 追記　コントローラーについて

```ruby

# app/controllers/troubles_controller.rbの内容

class TroublesController < ApplicationController
  before_action :authenticate_user!

  def index
    @troubles = current_user.troubles.all.order(created_at: :desc)
    @trouble = Trouble.new
  end

  def new
  end

  def create
    trouble = Trouble.new(trouble_params)
    render json: { trouble: trouble } if trouble.save
  end

  private

  def trouble_params
    params.require(:trouble).permit(:message_type, :worry).merge(user_id: current_user.id)
  end
end
```

Ruby3.0.0にバージョンアップしたところ「undefined」になってしまう

### 前提・実現したいこと

objectの代入をリアクティブにしたい

### 発生している問題・エラーメッセージ

consoleでは値がはいっているが、再描画されない

### 該当のソースコード

```ここに言語名を入力
<template>
  <p>{{ obj }}</p>
  <button @click="objHandler">click</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let obj = reactive({})
    const test = {name:"tom", id: "asdf"}
    const objHandler = () => {
      obj = { ...obj, ...test }
      console.log(obj)
    }

    return {
      obj, objHandler
    };
  },
};
</script>
```

reduceを使ってみましたが反映されませんでした。どうすればいいでしょうか？