SlackクローンをReact+Firebaseで作る 〜登録フォーム作成編〜

# Qiita初投稿
昨日、Udemyの講座を<a href="https://www.udemy.com/build-a-slack-chat-app-with-react-redux-and-firebase/learn/v4/overview" target="_blank">参考</a>にReact+Firebaseを使ってSlackクローンを作成しました。
一部分を抜粋して、復習がてら投稿していきたいと思います。ちなみに完成品は<a href="https://mamoru-slack-clone.firebaseapp.com/" target="_blank">こちら</a>です！
本格的に勉強して1ヶ月程度の実務未経験の人間でも、できることを証明したいと思います笑。

# Firebaseでのログイン機能の実装
さっそくFirebaseを使ってログイン機能を実装していきます。
「そもそもFirebaseとは？」と疑問を持たれた方は<a href="https://qiita.com/kohashi/items/43ea22f61ade45972881" target="_blank">こちら</a>をご参照ください。Firebaseの諸機能を詳細に説明して頂いております。

Googleアカウントをお持ちの方であれば<a href="https://qiita.com/kohashi/items/43ea22f61ade45972881" target="_blank">こちら</a>より下記のページに飛ぶかと思います。

![スクリーンショット 2018-10-03 13.33.03.png](https://qiita-image-store.s3.amazonaws.com/0/267002/4f15cc7d-61b7-db78-4b82-37aa26908c20.png)

右上の「コンソールへ移動」をポチッとし、下記の画面に移動します。
![スクリーンショット 2018-10-03 13.43.00.png](https://qiita-image-store.s3.amazonaws.com/0/267002/a67966a2-8a58-1145-f0d5-c5e1df152bab.png)


赤丸の「+プロジェクトを追加」ポチッとします。
![スクリーンショット 2018-10-03 13.46.47.png](https://qiita-image-store.s3.amazonaws.com/0/267002/4e9d26a1-1558-10a7-13ef-d67843b2ba46.png)



２箇所の赤丸「プロジェクト名（適当に）」及び「チェックマーク（無意識に）」を埋めると、プロジェクト作成のボタンが水色に点灯します。クリックしてみましょう。

![スクリーンショット 2018-10-03 13.52.11.png](https://qiita-image-store.s3.amazonaws.com/0/267002/e8388285-532f-3144-8eb9-dfdf40caf00b.png)

処理中の画面になり、少々お時間がかかるかと思います。

![スクリーンショット 2018-10-03 13.52.56.png](https://qiita-image-store.s3.amazonaws.com/0/267002/1adfcaa2-0694-9497-a24d-6ef81044cbd6.png)

プロジェクトの準備が完了し、下記の様な画面になったら、「次へ」をポチります。

![スクリーンショット 2018-10-03 13.53.10.png](https://qiita-image-store.s3.amazonaws.com/0/267002/10d5a3a6-04ab-deb1-3d05-db5ba0b309ac.png)

下記の画面に遷移します。

![スクリーンショット 2018-10-03 14.00.16.png](https://qiita-image-store.s3.amazonaws.com/0/267002/a962d227-26af-e45d-5e6b-d126852ac0fb.png)

赤丸の「</>」をポチると、下記の様な画面が現れます。

![スクリーンショット 2018-10-03 13.59.56.png](https://qiita-image-store.s3.amazonaws.com/0/267002/36cf27b3-a61f-8d0c-e2cf-ef7caec56804.png)

ここで使うのは、抜粋した以下の部分だけです。

```js:firebase①

  var config = {
    apiKey: "xxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx"
  };
  firebase.initializeApp(config);
```

この部分をコピペし、エディターで「firebase.js」っていうファイルを作成しコピペしたコードを貼り付けます。

```js:firebase.js
import firebase from 'firebase/app';
import "firebase/auth";
import "firebase/database";
import "firebase/storage";

  var config = {
    apiKey: "xxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx"
  };
  firebase.initializeApp(config);

// firebase.jsっていうファイルを「firebase」っていうモジュールをどっかに送る
export default firebase;

```

また、ログイン画面の実装は以下の通りです。

```js:Register.js
import React from 'react';
// 上記で作成したfirebase.jsのファイルを「firebase」っていうモジュールとして読み込んでる。
import firebase from '../../firebase';

import { 
  Grid, 
  Form, 
  Segment, 
  Button, 
  Header, 
  Message, 
  Icon 
} from 'semantic-ui-react';

// 「react-router-dom」っていうライブラリーからLinkコンポーネントを読み込んでいる。
import { Link } from 'react-router-dom';

class Register extends React.Component {
  state = {
    username: '',
    email: '',
    password: '',
    passwordConfirmation: ''
  }

// 空欄のフォームに入力された値が更新されてるのかな〜？
  handleChange = event => {
    this.setState({[event.target.name]: event.target.value});
  };

// フォームをSubmitされる時に実行される処理なのかな〜？
  handleSubmit = event => {
    event.preventDefault();
    firebase
      .auth()
      .createUserWithEmailAndPassword(this.state.email, this.state.password)
      .then(createdUser => {
        console.log(createdUser);
      })
      .catch(err => {
        console.error(err);
      })
  }

  render() {

    const { 
      username, 
      email, 
      password, 
      passwordConfirmation 
    } = this.state;

    return (
      <Grid textAlign="center" verticalAlign="middle" className="app">
        <Grid.Column style={{ maxWidth: 450 }}>
          <Header as="h2" icon color="orange" textAlign="center">
            <Icon name="puzzle piece" color="orange" />
            Register for DevChat
          </Header>
          <Form onSubmit={this.handleSubmit} size="large">
            <Segment stacked>
              <Form.Input 
                fluid 
                name="username" 
                icon="user" 
                iconPosition="left" 
                placeholder="Username" 
                onChange={this.handleChange}
                value={username}
                type="text"
              />

              <Form.Input 
                fluid 
                name="email" 
                icon="mail" 
                iconPosition="left" 
                placeholder="Email Address" 
                onChange={this.handleChange}
                value={email}
                type="email"
              />

              <Form.Input 
                fluid 
                name="password" 
                icon="lock" 
                iconPosition="left" 
                placeholder="Password" 
                onChange={this.handleChange}
                value={password}
                type="password"
              />

              <Form.Input 
                fluid 
                name="passwordConfirmation" 
                icon="repeat" 
                iconPosition="left" 
                placeholder="Password Confirmation" 
                onChange={this.handleChange}
                value={passwordConfirmation}
                type="password"
              />

              <Button color="orange" fluid size="large">登録</Button>
            </Segment>
          </Form>
          <Message>登録済みの方はこちら<Link to="/login">ログイン</Link></Message>
        </Grid.Column>
      </Grid>
    )
  }
}

export default Register;
```

もう少しFirebaseの設定を変更します。

![スクリーンショット 2018-10-03 14.51.17.png](https://qiita-image-store.s3.amazonaws.com/0/267002/53844a21-5877-b163-2279-3ec1b0667a66.png)

左ナブバーの「Authentication」をポチると次の様な画面が現れ、上の「ログイン方法」っていうバーをポチり、「メール/パスワード」の箇所にカーソルを合わせると右の赤丸の箇所にペンのアイコンが現れるので、ポチります。

![スクリーンショット 2018-10-03 14.52.00.png](https://qiita-image-store.s3.amazonaws.com/0/267002/b26f3a00-f190-358c-bf82-c914cc24607b.png)

デフォルトでは無効になってるの有効にして、保存をポチります。

![スクリーンショット 2018-10-03 14.52.17.png](https://qiita-image-store.s3.amazonaws.com/0/267002/09e4ba97-c2b4-8c4c-7578-375b8b5b13a4.png)

ステータスが有効になったのを確認し、「ユーザー」のページに戻ります。

![スクリーンショット 2018-10-03 14.52.31.png](https://qiita-image-store.s3.amazonaws.com/0/267002/75346f54-f126-83b6-43eb-04ca790f88d4.png)

以上でFirebaseの設定は終了です。

あとは、ターミナルでアプリを立ち上げて、フォームに情報を入力しログイン機能の確認してエラーが表示されなければ完了です。

画像を埋め込みまくってすいません；；