常連

自己紹介

### 実現したいこと
#### 概要
useState()でstateの値が更新されないので、更新したい。

#### 詳細
useStateで`const [isStart, setIsStart] = useState(false);`を定義しています。
また`isStart`を更新する関数として、以下二つの関数を定義しています。
```js
    const startGame = () => {
        setIsStart(true);
    };
    const endGame = () => {
        setIsStart(false);
    };
```
私の想定では、スペースキーをクリックすれば、`isStart`がtrueに、escキーをクリックすれば、`isStart`がfalseになると思っているのですが、
スペースキーをクリックしても、case 32の`console.log(isStart)`ではfalseと出力されます。
その後、escキーを押しても`isStart`が更新されていないか、ifブロックに入ってくれません。

このコードでは、stateは更新されないのでしょうか？

### 発生している問題
useState()でstateの値が更新されない。

### 該当のソースコード

```js
import React, { useCallback, useEffect, useState } from 'react';

const Typing = () => {
    const [isStart, setIsStart] = useState(false);
    const startGame = () => {
        setIsStart(true);
    };
    const endGame = () => {
        setIsStart(false);
    };
    const onClickKey = useCallback((event) => {
        switch (event.which) {
            // スペースキーコードは32。
            case 32:
                console.log(isStart)  // falseと出る
                startGame();
                break;
            // エスケープキーコードは243。
            case 27:
                if (isStart) {
                    console.log(isStart)  // isStartがずっとfalseのためこのブロックに入らない
                    endGame();
                };
                break;
            default:
                break;
        }
    }, [isStart]);

    useEffect(() => {
        document.addEventListener("keydown", onClickKey, false);
    }, []);

    return (
        <div className="typing">
            <Timer
                isStart={ isStart }
            />
        </div>
    )
}

export default Typing
```

### 試したこと

useState()でstateが更新されないことをググってみたが、パッとした記事が見つかりませんでした。

useStateでstateが更新されない

例外処理初心者。Next.jsで開発中、エラーハンドリングのやり方がよくわからなかったので質問します。

例えば、非同期通信でデータベース操作を行うエンドポイントを叩く際、普段私は
```typescript
 const index = () => {
 let res = await axios.post("/api/user",{data:data}).catch(error =>{
//エラーを示すフラグをuseStateにセットし,モーダルに表示する等
} )
 if(res.data.success){
//成功を示すフラグをuseStateにセットする等
}else{
//失敗を示すフラグをuseStateにセットする
}
}
```
```Typescript
// /api/user エンドポイント
//省略多
export default async (req,res) => {
 const user = await prisma.user.create({
    where:{data:req.body}
 });

 if(user){ 
 return res.json({success:true});
 }
 return res.json({success:false});
 }
}
```
の様に実装しています。

ちなみにエンドポイントに渡すデータの型はフロント側で保障されています

＜疑問＞
１、この実装方法は正攻法なのか、例えばORMでデータベースにアクセスしている部分で何らかのエラーが生じた場合、axiosのキャッチの部分でしっかりの拾うことができるのか。!userとなる場合はすべてaxios側のcatchで拾われるため、{success:false}は冗長なのか
２，そもそも想定外のエラーが発生した場合、アプリケーションのユーザーに何らかの形で伝え、次の操作を促すようなメッセージを表示するのがスタンダードなのか。

フロント周りのエラーハンドリングのスタンダードなるものを学びたく、質問させていただいております。
上記の疑問にお答えいただけたらと思います。
よりよい実装方法がある場合は実際にコードで示していただけると助かります。

フロントエンド開発におけるエラーハンドリングについて(Next.js)

### 前提・実現したいこと

Nuxt.jsで、レスポンシブ対応を実現するために、SCSSファイルを作成しました。
作成したSCSSファイルをグローバルに適用させようとしたところ、エラーが発生して困っています。
エラーの解消方法を教えていただきたいです。

### 発生している問題・エラーメッセージ

ERROR  in ./pages/HomeTop.vue?vue&type=style&index=0&id=077aef26&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
42 │ ┌   @include display_pc {
43 │ │     height: 80vh;
44 │ └   }
   ╵
  pages/HomeTop.vue 42:3  root stylesheet

### 該当のソースコード
```mixinscss
@mixin display_pc {
  @media (min-width: 600px) {
    @content;
  }
}
```
```commonscss
@import "./_mixin.scss";
```
```nuxtconfigjs
export default {
  css: ["./assets/styles/common.scss"],
};
```
```HomeTopvue
<style  lang="scss" scoped>
  @include display_pc {
    height: 80vh;
  }
/* 以下略 */
```
ディレクトリ及びファイル構造
|親|子|孫|
|:--|:--:|--:|
|assets|||
||styles||
|||_mixin.scss|
|||common.scss|
|pages|||
||HomeTop.vue||
|nuxt.config.js|||


### 試したこと

sass-loader及びnode-sassのバージョン変更。
@nuxtjs/style-resourcesのインストール。
nuxt.js公式サイトの確認。

### 補足情報（FW/ツールのバージョンなど）
```packagejson
{
  "name":,
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author":,
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0",
    "fibers": "^5.0.0",
    "sass": "^1.38.0",
    "sass-loader": "^10.2.0"
  }
}
```
OS：mac Catalina 10.15.7

nuxtjsでグローバルなSass(SCSS)を使いたい

### 前提・実現したいこと

Nuxt×firebaseを学習しております。

onAuthStateChangedで関数を呼び出す処理がしたいのですが、エラーが起きてしまいます。

vuexを使用しております。


### 発生している問題・エラーメッセージ

```
do not mutate vuex store state outside mutation handlers
```

### 該当のソースコード

```Vue
~省略~
    created() {
      firebase.auth().onAuthStateChanged(user => {
        if(user){
         //ログインされると、setLoginActionsを呼び出す。
　　　　//引数でユーザー情報を渡す。
          this.$store.dispatch('frame/setLoginActions', user)
        } else {
　　　　//ログアウトされると、deleteLoginActionsを呼び出す。
          this.$store.dispatch('frame/deleteLoginActions')
        }
      })
    },
~省略~
```

（抜粋）
```javascript

export const state = () => ({
  login_user: null,
})

export const actions = {
//setLoginMutationsを呼び出す。
  setLoginActions({ commit },user){
    commit('setLoginMutations', user)
  },
//deleteLoginMutationsを呼び出す。
   deleteLoginActions({ commit }) {
    commit('deleteLoginMutations')
  },
}

export const mutations = {
　//ユーザー情報を渡す。
  setLoginMutations(state,user){
    state.login_user = user
  },
  //ユーザー情報を削除する。
  deleteLoginMutations(state){
    state.login_user = null
  }
}
```

### その他
上記コードでは、エラーが起きてしまいます。原因が分かる方や、代替案が分かる方がいらっしゃいましたら、教えていただけないでしょうか。

よろしくお願いいたします。

onAuthStateChangedで関数を呼び出せないのか。

フロントを Vue や React などSPAで作り、でバックからログイン時にjwtを受け取ってそれを用いてバック側のAPIを叩く様な仕組みの際にjwtを local storage 等に保存するのはセキュリティ上良くない、その代わりとして　cookie　（httpOnly） に保存する方が良いというのはよく目にしますが、その場合、そのトークンの保存をする処理を実装するのはフロント側というよりバック側になるのでしょうか？

httpOnlyだとJSからアクセスできない、という事はそれを取得して投げるという処理をjavascript(VueやReact)側から行うのは無理なのでは？と思うのですがどうなのでしょうか？

[こちらのブログ](https://zenn.dev/marokanatani/articles/d0777a34641d22)ではReact × Expressの場合のjwtの保存について書かれていました。

こちらを参考にするとバック側（Express）の処理としてset-cookieを行ったりしていますが、基本的にはこの様にバック側でトークンの保存処理を実行するというのがjwtをcookieに保存する構成の実装方法として一般的なのでしょうか？

この辺りについて知見がない為ご教示いただけると幸いです。

SPAでjwtを扱う場合について

超初心者の質問で大変すみません、
以下codepenのポップアップ表示で、表示されたboxを次のboxが表示されるタイミングで消えるようにしたいです。
[https://codepen.io/intotheprogram/pen/WVMqpe](https://codepen.io/intotheprogram/pen/WVMqpe)

次のboxが表示されるタイミングに消す
or
ある地点で消す(この場合は前のboxが半分消えたら、、ぐらいのところでしょうか)

どうぞよろしくお願いします。

jQuery スクロールでフェードイン表示した要素を消す

最近`LibSass`から`Dart Sass`に変更したのですが、コメント表示についておかしな不具合？のようなものがあり質問させていただきました。
以前までの`@import`で読み込む形でしたら以下のようにコメントを書くことができました。
```scss
/* Foundation */
@import 'foundation/base';

/* Layout */
@import 'layout/header';
@import 'layout/footer';

/* Component */
@import 'component/btn';
```
コンパイルすると以下のようになり、コメントは適切な位置に表示されます。
``` css
/* Foundation */
html {}
body {}

/* Layout */
.header {}
.footer {}

/* Component */
.btn {}
```
これを`Dart Sass`で作成したところ、なぜかコメントが一番下に集まってしまいます。
```scss
/* Foundation */
@use 'foundation/base';

/* Layout */
@use 'layout/header';
@use 'layout/footer';

/* Component */
@use 'component/btn';
```
```css
html {}
body {}

.header {}
.footer {}

.btn {}
↓ 一番下にコメントが移動してしまう
/* Foundation */
/* Layout */
/* Component */
```
なぜ一体このようになるのでしょうか…
[公式サイト](https://sass-lang.com/dart-sass)をみてもコメント位置については特に何も書かれていないようでした。
個人制作のプロジェクトでしたらminify化してコメントを全部削除するのですが、クライアントワークの場合minify化せずにコメントをきちんとつけてほしいと言われることがあるので、どうすればいいか困っております。
一応今応急処置的に、見出しコメントだけのscssファイルを作って以下のようにしているのですが、こんなことは絶対やりたくないので、何とか解決する方法を探しています。
```scss
// Foundation ← こっちは表示させないようにする
@use "foundation/f-comment"; // 見出しコメント用
@use 'foundation/base';

// Layout
@use "layout/l-comment"; // 見出しコメント用
@use 'layout/header';
@use 'layout/footer';

// Component
@use "component/c-comment"; // 見出しコメント用
@use 'component/btn';
```
```scss
/* Foundation */
```
```scss
/* Layout */
```
```scss
/* Component */
```
```css
/* Foundation */
html {}
body {}

/* Layout */
.header {}
.footer {}

/* Component */
.btn {}
```
もし同じような問題を解決された方がいらっしゃいましたら、アドバイスいただけると大変助かります。
よろしくお願いいたします。

### 追記
Lhankor_Mhy様より他の環境では再現されないとの情報をいただきました。
そのためもしかしたらgulpのプラグインが原因じゃないかなと考えております。
問題が再現する簡単なgulpfileを作りましたので追記させていただきます。

```gulpfile
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', () => {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});
```
ディレクトリ構成
```
sass/
  ├ style.scss
  └ _hoge.scss
```
style.scss
```scss
/* Layout */
@use "hoge";
```
_hoge.scss
```scss
.hoge {
  color: red;
}
```
下記でインストールしてから
```
npm install --save-dev gulp sass gulp-sass
```
下記で実行します
```
npx gulp sass
```

Dart Sass のコメント位置がおかしい

### 前提・実現したいこと
ブラウザ画面にSVG画像を表示させたあとに、ターミナルからコマンドを叩いてブラウザ画面のSVG画像内にある要素(circle, rect, etc...)の操作(移動、削除, etc...)を行いたいです。
というのも、webサービスのAPIをユーザに提供したいと考えています。

前提事項
- 使用ケース: 同ユーザが同PC上で、自分の操作を自動化するためにブラウザをターミナルから操作する
- アプリケーションの想定ユーザ: PCの操作、プログラミングに熟達しているエンジニア
- ブラウザ：chrome
- PC: Mac
- アプリケーションのフレームワーク: フロントエンド React, バックエンド Flask(Python)

### 検討したこと
いくつか検討しましたが、個人的には案3（selenium）がもっとも現実的なのかと考えています。　もし同じ意見でも他の意見でもコメントいただけますと幸いです。

- 案1: http通信によって、webサーバからブラウザにリクエストを送る.  <- そもそもブラウザからwebサーバへという方向にしかリクエストは送れないため実現不可. ブラウザ内にサーバをたてて、http通信ができるようにする？
- 案2: webアプリではなくデスクトップアプリに変更して、サーバを起動できるようにする　<- 案１同様、実現できるか不明. 既存サービス例としてはslackなどが該当するかも？
- 案3: seleniumによる操作. 環境構築の手間などを考えると、ユーザーに優しくないためもっと手軽な構成にしたい
- 案4: 外部サーバのfile downloadを定期的に実行しておき、外部サーバのfileに操作コマンドを記載していく <- dropboxというファイル共有サービスが画面を更新する方法か？（推測）  PCの負荷が高くなってしまうかもしれない

### 補足
>「webサービスのAPIをユーザに提供したい」と「ターミナルからコマンドを叩いてブラウザの表示を変更したい」の繋がりが見えてこないのですが、どういう状況なのでしょうか？

アプリケーションの例としては、ダッシュボード作成ツール(power bi, tableau)を想定していただけると近いです。(そのような描画アプリを4月から開発していて、一年くらいかけて作ってみるつもりです。)　とくにこのようなアプリの使いにくさはスケールの難しさにあると思っています。　というのも、手作業での作業が必須であり1枚の成果物を作るためには１人の作業者を１日中張り付かせる必要があります。　同じような成果物を１０枚だとしてもプログラマの工数を10人日使わないといけないため、フロントエンドの開発状況はナンセンスな状況だと感じています。　
 そこで、その手作業を自動化するために作業をGUIベースではなくCUIベースで実行できたら良いのではないかと考えました。　　しかし、調査するにともないブラウザを操作するのは一般的ではないと感じ、力添えをいただきたく質問いたしました。


>ブラウザからサーバに送信してサーバ側で処理をして、それをブラウザに返せばよいのでは。

私個人のアプリ開発方針として、以下のように考えています。
"エンジニア、プログラマが使うソースコードのエディタや実行ツールは少ない方が良い"
---> よって、プログラムができる新しいインターフェースの提供を避けたい
---> よって、ターミナルやIDEからブラウザ（なんらか描画できるもの）へアクセスができるものが良い

ブラウザに表示済みのページを外部から変更することは可能でしょうか？

ReactのContextを利用しているんですが、なぜかレンダリング回数が減らせません。 レンダリング回数を減らすために、**参照系**と**更新系**を分けて`Provider`を作成しました。valueに値を渡すところで、`value={{ hoge }}`の形で渡すと、2つのコンポーネント両方でレンダリングが発生します。
`value={ hoge }`の形だと、`Count`コンポーネントのみがレンダリングされて期待した動作が確認できました。
なぜ、前者の書き方だとレンダリングが両方で発生するのでしょうか？


```ここに言語を入力
import React, { createContext, useContext, useReducer } from "react";
​
const CountStateContext = createContext<any>({});
const CountDispatchContext = createContext<any>({});
​​
function CountProvider({ children }: { children: any }) {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });

  return (
    <CountStateContext.Provider value={{ state }}>
      <CountDispatchContext.Provider value={{ dispatch }}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}
​
function Count() {
  console.log("render Count");
  const { state } = useContext(CountStateContext);
​
  return <h1>{state.count}</h1>;
}
​
function Counter() {
  console.log("render Counter");
  const { dispatch } = useContext(CountDispatchContext);
​
  return (
    <>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}
​
export default function App() {
  return (
    <CountProvider>
      <Count />
      <Counter />
    </CountProvider>
  );
}
```