常連

自己紹介

### 前提・実現したいこと

React.jsでSPAなwebページを製作しています。
https://upliftfitness.jp/

webページの一部が描画されません。

ネットで調べたのですが、私の理解不足か有効な解決策がありませんでした。
ご教授いただけると幸いです。お願いいたします。

### 発生している問題・エラーメッセージ
以下のスクショのように途中部分（スクロールし始めの所）がレンダリングされません。ページを更新すると描画されるようになります。
この部分以下はちゃんとレンダリングされています。

エラーはありません。

![イメージ説明](b7d5d95f6a3d1fa3ac89cb0f384d63e3.png)

### 該当のソースコード
```React.js
const Top = ()=>{
  const classes = useStyles();

  return(
    <div className={classes.root}>
      <div className={classes.toolbar}/>
      <div className={classes.main}>
        <img alt="ssHome" src={ssHome} className={classes.ssHome}/>
        <div className={classes.mainBody}>
          <Typography align="center" noWrap className={classes.mainTitle}>理想のカラダを手に入れよう</Typography>
          <Typography align="center" noWrap className={classes.mainText}>必要なすべてのものがここにある</Typography>
        </div>
      </div>
      <div className={classes.area1}>
        <img alt="ssWorkout" src={ssWorkout} className={classes.screenshot}/>
        <div className={classes.areaBody}>
          <Typography color="secondary" align="center" variant="h5" className={classes.areaTitle}>自分にあったワークアウトが<Hidden smUp><br/></Hidden>見つかる</Typography>
          <div className={classes.example}>
            <div className={classes.exampleItem}>
              <img alt="workout1" src={workout1} className={classes.exampleImg}/>
              <Typography color="secondary" align="center" className={classes.caption}>ウエイトトレーニング</Typography>
            </div>
            <div className={classes.exampleItem}>
              <img alt="workout2" src={workout2} className={classes.exampleImg}/>
              <Typography color="secondary" align="center" className={classes.caption}>自重トレーニング</Typography>
            </div>
            <div className={classes.exampleItem}>
              <img alt="workout3" src={workout3} className={classes.exampleImg}/>
              <Typography color="secondary" align="center" className={classes.caption}>ヨガ</Typography>
            </div>
          </div>
          <Typography color="secondary" className={classes.areaText}>フィットネスと何年も真剣に向かい合ってきたプロのトレーナーやインフルエンサーによって作成されたワークアウト。経験や実力問わず、今の自分がレベルアップするためのメニューがここにある。意識すべきポイントや正しいフォームを動画で丁寧に説明してくれるから、初心者でも安心。「筋トレはじめたいけど何をすればいいのかわからない」UPLIFTを使えば、この言葉を口にすることはもうないだろう。</Typography>
        </div>
      </div>
      <div className={classes.area2}>
        <div className={classes.area2Content}>
          <img alt="ssArticle" src={ssArticle} className={classes.screenshot}/>
          <div className={classes.areaBody}>
            <Typography align="center" variant="h5"  className={classes.areaTitle}>最新の情報で<Hidden smUp><br/></Hidden>理想の自分に近づく</Typography>
            <div className={classes.example}>
              <div className={classes.exampleItem}>
                <img alt="article1" src={article1} className={classes.exampleImg}/>
                <Typography align='center' className={classes.caption}>トレーニング</Typography>
              </div>
              <div className={classes.exampleItem}>
                <img alt="article2" src={article2} className={classes.exampleImg}/>
                <Typography align='center' className={classes.caption}>栄養・ダイエット</Typography>
              </div>
              <div className={classes.exampleItem}>
                <img alt="article3" src={article3} className={classes.exampleImg}/>
                <Typography align='center' className={classes.caption}>注目のジムやスタジオ</Typography>
              </div>
            </div>
            <Typography className={classes.areaText}>トレーニング・栄養・コンディショニングに関する、プロのトレーナーや管理栄養士からの最新の情報が手に入る。また、地域別に注目のジム・スタジオ・パーソナルトレーニングの情報も発信されるため、自分にあったトレーニングができる場所がわかる。理想の自分に近づくための、知識と場所の情報はもう揃った。</Typography>
          </div>
        </div>
      </div>
      :
      :
      :
　　)
}
```

### 試したこと

画像サイズの縮小

Reactで制作したwebページの一部が描画されない

![イメージ説明](42f6d2b31ea6bab2cf2c54a7090ac805.png)

redux-formを使用し、上記画面を作成しているのですが、**"input1に移す"**のテキストボックスに値を入れ、**"form1に移す"**ボタンを押下した時に、上部のテキストボックスに値を移したいのですが、どう実装すれば良いでしょうか。

また、**"input1に移す"**のテキストボックスが空まま、"form1に移す"ボタンを押下した時に、エラーチェックを実施したいのですが、こちらもどのように実装すれば良いか教えていただけないでしょうか。

ソースを下記に記載します。

---
App.js
```ここに言語を入力
import React from 'react';
import TestForm from './TestForm';
import { SubmissionError } from 'redux-form'


export class App extends React.Component {

  handleSubmit(values) {
    // 何も入力されていないのでエラー
    if (typeof values.testInput1 === 'undefined' || values.testInput1 == null) {
      throw new SubmissionError({
        testInput1: '入力してください。'
      })
    }
    window.alert(values.testInput1);
  }

  render() {
    return (
      <TestForm
        onSubmit={this.handleSubmit}>
      </TestForm>
    );
  }
}

```
---
TestForm.js
```ここに言語を入力
import React from 'react';
import { Field, reduxForm } from 'redux-form';

/*
const ErrorMessages = {
    required: '必須項目です。',
}
const required = value => (value || typeof value === 'number' ? undefined : ErrorMessages.required)
*/

class TestForm extends React.Component {
    handleMoveForm1() {
        // TODO 1 ここでtestInput2の値を取得したい!!!!!
        const input2 = 'aaaaa';
        // TODO 2 Input2の値が取得できない場合、エラーにする!!!!

        // input1に値を設定
        this.props.change('testInput1', input2);
        // input2の値を空にする
        this.props.change('testInput2', '');
    }

    renderField(field) {
        return(
            <div>
                <div>
                    <input {...field.input} placeholder={field.placeholder} type={field.type} />
                    {field.meta.touched && field.meta.error && <span>{field.meta.error}</span>}
                </div>
            </div>
        );
      }

    render() {
        const { handleSubmit} = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <div>
                    <label>input1</label>
                    <div>
                        <Field
                            name="testInput1"
                            component={this.renderField}
                            type="text"
                            //validate={required}
                            placeholder="test input1"
                            />
                    </div>
                </div>
                <div>
                    <label>input1に移す</label>
                    <div>
                        <Field
                            name="testInput2"
                            component={this.renderField}
                            type="text"
                            placeholder=""
                            />
                    </div>
                </div>
                <div>
                    <button type="submit">input1の値を表示</button>
                    <button type="button" onClick={this.handleMoveForm1.bind(this)}>from1に移す</button>
                </div>
          </form>
        );
    }
};

export default reduxForm({
  form: 'TestForm', // a unique identifier for this form
})(TestForm);

```
---
store.js
```ここに言語を入力
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';

const reducer = combineReducers({
  form: reduxFormReducer,
});
const store = createStore(reducer);

export default store;
```
---
index.js
```ここに言語を入力
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import { App } from "./App";

const rootEl = document.getElementById("root");

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    rootEl
);
```

redux-formのエラーチェック

#環境
Webサーバ: Nginx
フロントエンド: React
ルーティング: React-Router

#経緯
React-Routerを使っていても、Nginxの設定を何もしていないと、ホーム以外の場所でリロードしたりしたときに404エラーになります。なぜかというと、
1. `https://example.com/`にアクセス → サーバから`/index.js`を取得
2. `https://example.com/A`に移動
--ここでリロードする--
3. `https://example.com/A`にアクセス → サーバから`/A/index.js`を取得
→`/A/index.js`は存在しないので404

ということになるからです。なので、Nginxで`https://example.com/*`は全て`https://example.com/`にrewriteしています。

#問題
なぜかホーム以外がGoogleにインデックスされないので見てみると、
「ページにリダイレクトがあります」
という理由でインデックスがされていませんでした。

#必要な情報
`https://example.com/*`の全てのアクセスに`/index.js`を返すということと、Googleにインデックスされることの2つの条件を満たしたいです。

Nginxでリダイレクトではない方法で、全てのアクセスに対し同一のファイルを返す方法を教えていただきたいです。
`https://example.com/contents/12345`のように複数の階層と大量のパラメータがあるので、Webサーバに全てのディレクトリを用意するのは現実的ではないです。

とても困っています。よろしくお願いします。

SPAなのでNginxのrewriteを使った結果、Googleにインデックスされない

すいません。
教えてください。

await/asyncを利用して順番に処理が行われるようにしたいです。
しかし、どうやっても非同期処理となり処理結果がバラバラで返ってきます…。

どのようにすれば同期処理として実行する事が出来るのでしょうか？

■ デモ環境
[https://stackblitz.com/edit/angular-x2efpo?file=src/app/app.component.ts](https://stackblitz.com/edit/angular-x2efpo?file=src/app/app.component.ts)

■ 実際のソース
```TypeScript
  main = async () => {
    await this.one()
    await this.two()
    await this.three()
  }

  push() {
    this.main();
  }

  one() {
    setTimeout(() => {
      console.log('1つめの処理')
    }, 1000)
  }

  two() {
    console.log('2つめの処理')
  }

  three() {
    setTimeout(() => {
      console.log('3つめの処理')
    }, 1000)
  }
```
■ 実行結果
![イメージ説明](a18cc475ce2dc8f0e1ee955d33f9ce5c.jpeg)
どなたかご教示頂ければ幸いです。