React × TypeScript × Firebase on VSCode メモ
ameyoVSCodeのインストール
・VScodeはMicrosoftが開発している無償のコードエディタ。Visual Studio Code。
・Windowsはもちろん、MacOSやLinuxにも対応。
・拡張機能により様々な機能の追加ができる。
・Git連携も可能。
・IDEのように動作し、デバッグ機能などもある。
入手先
インストール
デフォルト設定で問題ないが
・エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
・エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する
にチェックをいれておくとより良い。
ameyoNode.jsのインストール
React開発上でnpm(Node Package Manager)は必須。
npmを使用するためにはNode.jsをインストール必要がある。
入手先 初心者は何も考えずにLTS版をダウンロード。
インストール
ライセンス合意にチェックしたのちはデフォルト設定で問題なし。
確認
インストール終了後、動作の確認を行う。
Windowsであればコマンドプロンプトを起動し、「node --version」と入力する。
インストールしたバージョンが表示されていればOK。
次に「npm --version」を入力。バージョンが表示されればOK。
ameyoReactをインストールする
Reactの作業フォルダを作成しフォルダを開く。
作業フォルダには大文字を含めることは出来ない。必ずすべて小文字にする。
Windows11の場合、フォルダ内でShift+右クリックし[Codeで開く]を選択するとVSCodeが起動する。
フォルダ作成者を信頼するか問われたときは「はい」を選択。
上部メニューの[表示]から[ターミナル]を表示する。
作業フォルダをアプリのカレントフォルダとする場合、次のコマンドを入力する。
npx create-react-app --template typescript .
最後に「Happy hacking!」と表示されればインストール終了。
エラー:ENOENT
ユーザのアプリフォルダ内にnpmのフォルダがないといったエラーが発生した。
[やってみたこと①]
Node.jsをアンインストールして再インストールしてみた。
特に変わりなくエラーを吐く。
[やってみたこと②]
npxの再インストールをしてみた。VSCodeのターミナル内で
npm i -g npx
と入力。その後、create-react-appコマンドが動作するようになった。
→npxの再インストール。強い。
reactが正常にインストール出来ているかを最後に確認する。
ターミナルに
npm start
を入力するとブラウザが立ち上がり、Reactのアイコンが回転する画面が表示される。
ファイヤーウォールなどが表示された場合は許可をする。
確認が終わったらばターミナルにフォーカスを合わせ、Ctrl+Cで終了する。
※Reactをインストールした直後のフォルダの中身
.gitignore: Gitというバージョン管理システムから除外するファイルを指定するもの。
package.json: モジュールをリスト化しているjsonファイル。
package-lock.json: モジュールの記録とバージョンが記載されている。
README.md: プロジェクトの説明やインストール方法が書かれている。Githubの最初に表示される。
tsconfig.json: tsファイルをjsファイルにコンパイルするための設定ファイル。
node_module: モジュールそのものを入れておくディレクトリ。
public: HTMLや画像、フォントなどを管理するディレクトリ
src: メインの開発ディレクトリ。
ameyoFirebaseをインストールする
Firebaseに登録を済ませ、プロジェクトの作成を行う。
①プロジェクト名の登録。
②Googleアナリティクスはとりあえず設定を外す。
プロジェクトが作成されたらばトップページの「</>」ウェブボタンをおす。
アプリのニックネームを入れてアプリを登録（Hostingはまだ設定しない）
firebaseのパッケージをreactに追加する。
VSCodeのターミナルに
npm install firebase
を入力して実行。
次に、firebaseのHostの設定を行う。
ameyoFirebaseのホストサービスを使い、Reactの初期ページをインターネットで表示する。
ターミナル内で
npm install -g firebase-tools
を入力。
インストールが完了したらばFirebaseに接続する。
ターミナルに
firebase login
を入力。情報収集に関して質問されるのでYを選択。ブラウザが起動し、ログインする。
次にプロジェクトの初期化を行う。
firebase init
を入力。
Are you redy to proceed? -> Yes
Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
今回は初めてのHosting設定なので、
[〇] Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
だけ選択してEnter。次に既存のプロジェクトを使用するか新しいプロジェクトを作るか聞かれるので、
->Use an existing project
を選択。次の選択して使用するプロジェクトを選択。
次にパブリックディレクトリを聞かれるのですが、ビルド後のフォルダである必要があるので、
-> build
を入力。
Configure as a single-page app
ReactはSPAとして動作するので、Yesを選択。デフォルトがNoなので、必ずYと入力してEnter。
Set up automatic builds and deploys with GitHub?
GithubのActionを使って流し込みたいのでもちろんYes。これもデフォルトはNoなので注意。
回答するとGithubへの認証を要求されるので認証を行う。
次にGitHubのアカウント名/リポジトリ名を入力。すると、Firebaseへデプロイするための設定が勝手に行われる。
GitHubでdeployする前にbuildを行う設定にするか聞かれる。これももちろんYESでデフォルトはNo。
npmを使用する場合はデフォルトでOK。
プルリクエストがマージされたときに本番サイトにマージするか聞かれる。Yes。
本番環境のブランチを聞かれる。masterにしておく。
GitとGithubの設定を先にやっておくべきだった・・・。