BETA

Typescript+React+FirebaseでSPAを作ってみた

投稿日:2019-08-31
最終更新:2019-09-04
※この記事は外部サイト(https://syakoo.hatenablog.com/entry/2019/0...)からのクロス投稿です

はじめに

Typescript+React+Firebaseを使ってSPA(Single Page Application)を作ってみました。そのWebアプリの紹介と感想を残します。

魔法陣タイムアタック

作ったアプリはMagic Squareという魔法陣を解くタイムを競うアプリです。
リンクはこちら

ソースコード

ソースコードはこちらにあります。が、TypeScript+React+FirebaseでSPAを作る練習で作ったアプリなので、参考になるかは微妙です。

最新版は以下のリンクです。
Webアプリ: https://magic-square.firebaseapp.com
Git hub: https://github.com/syakoo/MagicSquare/tree/master

仕様(?)

Reduxは使わない(使えない)

そもそもTypeScriptもReactも触って一ヵ月くらいなので、Reduxまで勉強していたら目が回りそうだと思ったので使わない方針で作りました。今現在は使っておけばもっといいのが作れたなぁと後悔しています。

ReactHookを積極的に使う

ReactHookはクラスを使わなくてもstateなどのふるまいができる機能です。今回で初めて使ったのでできるだけ積極的に使うようにしました。

ログインさせない(できない)

SPAを初めて作るということで一番不思議に思ってたことは、「クライアントで動くのにセキュリティ大丈夫なのか?」ということです。当然そんなこと考える余裕が作成中にはなかったので、ログインしない方針にしました。個人的に一番大事な課題です。

手軽に参加しやすいアプリ(にしたかった)

タイムを競うので当然プレイ人数が多ければ多いほど熱くなると思ったので、手軽に参加しやすいようにを軸に考えて作成しました。具体的には

  • シンプルレイアウト
  • Noログイン
  • スマホ向けに対応

等です。レスポンシブデザインの大変さも学びました。

さいごに

もちろん、自分の力じゃあんな素敵なUIは作れません。相談に乗ってくれた友人に感謝しています。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@syakooのブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!