常連

注目の的

社会貢献

質問力

拍手喝采

自己紹介

Reactを使ってログイン機能を作成しました。Firebaseなどは利用していません。

[初めてReactを触ってみたが、ログイン周りの決定打が見つからなかったので自分で書いてみた。](https://qiita.com/ginban22/items/a36d01b41deaeedd581e)
上記サイトを参考に、作ってみたのですが、ログインボタンが存在しなかったので、
自分で作成しようと考えたのですが、
肝心なログイン機能の部分がよくある「handle~」形式ではなく、以下のように、ayncを使ったものでした。非同期関数にしようとしたのですが、componentDidMountがあるせいか、エラーが出てしまって、できませんでした。(「;が必要です」というVSCodeの下部に出てきました。)

```JavaScript
async componentDidMount() {
    await User.logout();
  }
```
このような場合、どのように書き換えるべきなのでしょうか?ご教授頂ければ幸いです。よろしくお願い致します。

# 自分のコード
Auth.js
```JavaScript
import React from 'react';
import { Redirect } from 'react-router-dom';
import User from './User';

const Auth = props =>
  User.isLoggedIn() ? props.children : <Redirect to={ '/login' } />;

export default Auth;
```

User.js
```JavaScript
class User {
    isLoggedIn = () => this.get('isLoggedIn') === 'true';
  
    set = (key, value) => localStorage.setItem(key, value);
  
    get = key => this.getLocalStorage(key);
  
    getLocalStorage = key => {
      const ret = localStorage.getItem(key);
      if (ret) {
        return ret;
      }
      return null;
    };
  
    login = async (email, password) => {
      // ログイン処理
      // ログインエラー時には、falseを返してもいいし、returnを別の用途で利用したかったら
      // 例外を出しして呼び出し元でcatchしてもいいかと思います。
  
      this.set('isLoggedIn', true);
  
      return true;
    };
  
    logout = async () => {
      if (this.isLoggedIn()) {
        this.set('isLoggedIn', false);
  
        // ログアウト処理
        //　他に必要な処理があるのならこちら
      }
    };
  }
  
  export default new User();
```

Login.js
```JavaScript
import React, { Component } from 'react';
import { Form, Button, Container, Row, Alert } from 'react-bootstrap';
import { withRouter } from 'react-router-dom';
import User from './User';

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      errMessage: '',
    };
  }

  click = async () => {
    try {
      await User.login(this.state.email, this.state.password);

      this.props.history.push({ pathname: 'list1' });
    } catch (e) {
      this.setState({ errMessage: 'メールアドレスかパスワードが違います' });
    }
  };

  handleChange = e => {
    this.setState({ [e.target.id]: e.target.value });
  };

  render() {
    return (
      <Container className="center">
        <Row className="justify-content-md-center">
          <Form>
            {this.state.errMessage && (
              <Alert variant="danger">{this.props.message}</Alert>
            )}
            <p>
              <b>ログイン</b>
            </p>
            <Form.Group controlId="email">
              <Form.Label>メールアドレス</Form.Label>
              <Form.Control
                type="email"
                placeholder="メールアドレスを入力してください"
                onChange={this.handleChange}
                value={this.state.email}
              />
            </Form.Group>
            <Form.Group controlId="password">
              <Form.Label>パスワード</Form.Label>
              <Form.Control
                type="password"
                placeholder="パスワードを入力してください"
                onChange={this.handleChange}
                value={this.state.password}
              />
            </Form.Group>
            <Button variant="primary" type="button" onClick={this.click}>
              ログイン
            </Button>
          </Form>
        </Row>
      </Container>
    );
  }
}

export default withRouter(Login);
```

Logout.js
```JavaScript
import React, { Component } from 'react';
import { Container, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import User from './User';

export default class Logout extends Component {
  async componentDidMount() {
    await User.logout();
  }

  render() {
    return (
      <Container className="center">
        <Row className="justify-content-md-center">
          <div>
            <h2>ログアウトしました</h2>
            <div className="text-center">
              <Link to="/login">ログイン画面へ</Link>
            </div>
          </div>
        </Row>
      </Container>
    );
  }
}
```

List1.js
```JavaScript
import React, { Component } from 'react';
import { Container } from 'react-bootstrap';

export default class List1 extends Component {
  render() {
    return (
      <div>
        <Container className="center">Hello Login app list1</Container>
      </div>
    );
  }
}
```

App.js
```JavaScript
import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';

import Auth from './Auth';

import Login from './Login';
import Logout from './Logout';
import List1 from './List1';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/login" component={ Login } />
          <Route exact path="/logout" component={ Logout } />

          <Auth>
            <Switch>
              <Route exact path="/list1" component={ List1 } />
              <Redirect from="/" to="/list1" />
            </Switch>
          </Auth>
        </Switch>
      </Router>
    );
  }
}
```

【React】ログアウトボタンを作りたいのですが...

画像を横に3つ並べて表示しているのですが、ウィンドウ幅が1160pxを超えると3つ目の画像が下に落ちてしまいます。

1160px未満
https://gyazo.com/ae9ba5579888b2be1373c9f177d1f6e0

1160px以上
https://gyazo.com/d8ba71ff4cd7edfb6986dcb23fd4e25c

どのようにすれば改善できるでしょうか。
下記ｃｓｓのコードです。
```
.img-menu li {
  float: left;
  list-style: none;
  width: 33%;
  text-align: center;
  height: 200px;
  font-size: 50px;
  transition: all 0.6s ease 0s;
  /*background: center center;*/

}

.img-menu li:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}

.img-menu li a {
  text-align: center;
  line-height: 0.95em;
  font-weight: bold;
  color: #FFF;
  text-shadow: 0 0 0.10em #2962FF,
  0 0 0.15em #2962FF,
  0 0 0.80em #2962FF,
  0 0 1.00em #2962FF;
}

#wrapper {
  background-image: url("images/top.png");
  background-size: cover;
  text-align:center;
}

.kumo1 {
  background-image: url("images/kumo1.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  background-position: center;
}

.kumo2 {
  background-image: url("images/kumo2.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  /*margin-top: 200px;*/
  background-position: center;
}

.kumo3 {
  background-image: url("images/kumo3.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 100px;
  background-position: center;
}

```

ウィンドウ幅を広げると画像の配置が崩れる

IDEでIntelJを使っているのですが、Junitが実行できません。
libraryを追加するところに置いているのですが、どこに置くべきなのでしょうか。
![](ff68633242e4938f5db63d81d2827632.png)

回答お願いします。

IntelliJでjunitが実行できない

### 前提・実現したいこと
ある時間間隔で測定したIRスペクトル(波数,強度のラインプロット)を3Dで表示させたい。
イメージとしては以下の画像のような感じです。
![イメージ説明](03d1ba40a74af7b42032704c969fc9f3.png)
元データはcsvファイルです。
![イメージ説明](3d888590b4047c14c2bf57fb5acb36cd.png)
データの構成をまとめると以下のような階層になっています。
![イメージ説明](4a96623bd0fcc6a0d8f61fe0041349e5.jpeg)
プログラミング初心者ですが、dataframe等の取扱はある程度理解し、できるようになってきました。

### 発生している問題・エラーメッセージ
X, Y, Z
時間, 波数, 強度
のdataframeを作成して
plotしても、すべてのラインプロットがつながってしまいます。
for文を使って時間ごとに
強度を切り分けるような作業が必要だと調べると書いてあるのですが、
具体的なコードに直せない状況です。

アドバイスや例示をいただけると幸いです。

Pythonを使って、複数の2Dのグラフを3Dで表示させることはできるでしょうか？