TypeScript & React & Firebase で何かつくってみる1 環境構築

この記事は初心者向けには違いないが, よくある「熟練者が初心者に入門を語る」スタイルではなく, 「初心者が悪戦苦闘した道のりを語ってみる」話だ.

ただ,すべてが全くの初心者というわけではない.

・TypeScript: 小さいながらも VSCode拡張 の開発経験あり. ただし言語知識は節穴だらけ. 書きながらつまずいたところだけ調べた程度.

・React: 3年くらい前にコピペでサンプルコードに毛が生えた程度のものをつくった.

・Firebase: 完全に初心者

Firebase でプロジェクトをつくる

以下の記事を参考に概要を把握しつつ準備を進める.

ついにβ版となったCloud Functions、気になるその料金は？

少々古い. というかここに限らず, Web系の技術は進行が早く, ドキュメントが時代遅れになりがちだ.

ひとまず Firebase プロジェクト作成まではできた.

card-game-field は私がつけたプロジェクト名, Sparkプラン は無料プランのことらしい. ここではアプリの追加など適当に試してみる. まぁ,なんかおかしなことになったら作り直せばよい.

TypeScript 開発環境

create-react-app を使うと比較的簡単にセットアップできるらしい. 環境構築は嫌いなのでなるべく簡単に済ませたい. 何を参考にしたか失念してしまったが, [typescript react firebase] で検索すればいくらでも見つかる.

$ npx create-react-app card-game-engine --typescript
$ cd card-game-engine
$ yarn start

node.js の開発環境があるなら, 上の3行でTypeScriptのサンプルコードが動作する. 

npx は知らなかったが スクリプトの実行パスをなんとかしてくれるおまじないのようだ. 使わずに実行する説明もあるが, きっと実行パスがなんとかなっている環境なのだろう. ちなみに開発OSは Windows10 Home だ.

yarn は npm の代替らしい. どこかでオススメしていたので使ってみたが, npm と今どちらが主流かは知らない.

card-game-engine はこれから作るサンプルアプリ名だが, FIrebaseプロジェクト名と半端に似せてしまった. まぎらわしい. 今では後悔している.

あまり最初から張り切りすぎると続かないのでここまでとする.
一応連載の体を取ることで, 書き続けるモチベーションを高めようという意図だがどうだろうか.