syakoo's Lab

技術ブログやちょっと気合の入った記事を残すブログ

TypeScript+React+FirebaseでWebアプリを作ってみる(#1 動作確認)

はじめに

今回は詳しく説明するというより、ブログぽく備忘録として残すのが目的です。

SPA(Single Page Application)をつくる

今回は今まで作ってみたかったSPA(Single Page Application)をTypeScript React Firebaseを使って作っていきます。SPAとは、言葉の通り単一のWebページから構成されるアプリです。

ja.wikipedia.org

サーバーの負担が少なくなるということが大きいメリットになると思います。

なんのアプリを作るかというと、最終的には魔法陣を使った簡単なゲームを作りたいと思います。

1. 環境構築(TypeScript+React)

まずは環境構築です。いつもここでかなり時間をかけていて大変なので今回はコマンドに頼ってちゃちゃっと作ります。作業フォルダに移動して次のコマンドを入力。

$ npx create-react-app magic-square --typescript

結構時間がかかりますが、これで環境構築してくれます。終了したら一旦動作確認をします。

$ npm start

これでlocalhostでReactのロゴが回転しているのを確認をします。

f:id:syakoo:20190825193826p:plain
動作確認(typescript+react)

2. Reactの動作確認

一応Reactが動いているのは確認できていますが、Reactっぽくないので少しコードをいじります。 以下のサイトを参考にしました。

qrunch.net

magic_square/srcCount.tsxIncrement.tsxを作成して以下のコードを記述。

magic_square/src/App.tsx

import React, { useState } from "react";
import "./App.css";

// 自作Componentのインポート
import Count from "./Count";
import Increment from "./Increment";

// 全体のComponent
const App: React.FC = () => {
  // ReactHookを使う
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <Count count={count} />
      <Increment count={count} setCount={setCount} />
    </div>
  );
};

export default App;

magic_square/src/Count.tsx

import React from "react";

// CountのComponent.今回は出力するだけ
const Count: React.FC<{ count: number }> = ({ count }) => {
  return <h1>{count}</h1>;
};

// Componentのエクスポート
export default Count;

magic_square/src/Increment.tsx

import React, { Dispatch } from "react";

// インクリメントボタンのComponent
const Increment: React.FC<{ count: number; setCount: Dispatch<number> }> = ({
  count,
  setCount
}) => {
  // インクリメント処理
  const clickEventHandler = () => {
    setCount(count + 1);
  };

  // インクリメントボタンのUI
  return <button onClick={clickEventHandler}>INCREMENT</button>;
};

// Componentをエクスポート
export default Increment;

動作確認をします。

$ npm start

ボタンをクリックしたらカウントアップしていれば大丈夫です。

3. Firebaseで動作確認

最後にFirebaseで動作確認します。Firebaseのコンソールに移動して、新しいプロジェクトを作成します。今回はMagicSquareという名前にします。

f:id:syakoo:20190825193941p:plain

そして、プロジェクトに入って</>のマークをクリックしてウェブアプリを作成します。すると、Firebase SDK snippetにコードがあるので、それをmagic_square/src/firebase.tsに記述。(firebase.tsは作成してください)

import * as firebase from 'firebase/app';
import "firebase/firestore";


const firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    databaseURL: "https://magicsquare-cb1cf.firebaseio.com",
    projectId: "magicsquare-cb1cf",
    storageBucket: "",
    messagingSenderId: "86021422730",
    appId: "1:86021422730:web:f2b6a3e8fe162731"
};

firebase.initializeApp(firebaseConfig);

export const fireStore = firebase.firestore();

いまはエラーが発生しているかもしれませんが、この作業フォルダにFirebaseを設定していないだけなので気にしないで大丈夫です。

次に、この作業フォルダにFirebaseを設定していきます。 まずはfirebase-toolsをグローバルにインストール

$ npm i -g firebase-tools

次に今入れたfirebaseにアカウントでログインします。

$ firebase login

そして作業フォルダでfirebaseを初期化します。

$ firebase init

次の内容で初期化しました。

  • DatabaseとHostingを使用
  • MagicSquare(作成したプロジェクト)を選択
  • SPA(Single Page Application)として作成
  • index.htmlは上書きしない

初期化が終わったら、firebaseをローカルにインストール

$ npm i firebase --save

これで先ほどのエラーはなくなったと思います。動作確認をしていきます。まずはビルドします。

$ npm run build

するとbuildファイルが作成されたことがわかります。次にmagic_square/firebase.jsonのpublicをbuildに変更。最後にデプロイする場合はfirebase deploy、ローカルで確認する場合はfirebase serveで動作確認をします。

f:id:syakoo:20190825194027p:plain
動作確認(typescript+react+firebase)

これで終わります。

おわりに

次は実際にアプリを作っていく予定ですが、ブログに残すかは微妙です。