Open
34

Reactの練習記録

初めは環境構築を省略してstackbritzで開発を行おうとしていたが、stackbritzから作成されたプロジェクトはgithub経由で他のユーザーのstackbritzに読み込んで共同開発ができないことがわかり、今後のことも考えて環境構築を行うことにした。

端末がm1マックなので、ターミナルをロゼッタ経由で起動してnode.jsをインストール。

配置場所に関連していくつかエラーメッセージが出てきたが、メッセージをそのまま検索したら解決策がすぐに出てきて解決。

create-react-appでプロジェクトの生成はできたが、開発はtypescriptを使って行いたかったのでcreate-react-app template typescriptで生成し直した。

Reactのチュートリアルをtypescriptに置き換えてやってみようとしたが、序盤で型チェックが解決できなくなった。

class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {this.props.value}
        </button>
      );
    }
  }
  
  class Board extends React.Component {
    renderSquare(i:number) {
      return <Square value={i}/>;
    }

これらのvalueが型エラーを起こす。

return <Square value={i}/>;の部分が完全に不要だった。ここだけ明らかに型が違う。

諦めてjavascriptでチュートリアルを進めることにした。

xIsNextをチュートリアル通りに置いても定義されていないとエラーが出てしまう。

仕方ないので

handleClick(i) {
    const squares = this.state.squares.slice();
    let xIsNext;

として解消した。

しかし、想定通りにXとOが入れ替わらない。再宣言することで毎回、xIsNex=trueになっているのかもしれない。

xIsNext: !xIsNext, => xIsNext: !this.state.xIsNext,とすることで想定通りにXとOが入れ替わった。ついでにlet xIsNextをとってもエラーが出なくなった。

xIsNextの値を管理しているthis.stateから呼ばずにxIsNextを書いてたらエラーが起きるのも当然だった。

firestoreで設定したデータをreactから呼び出して表示するところまでできた。

typescriptで型が合わないと叱られても直しかたが分からなくて結局any型を使ったり長々とした型を作ったりするあたり理解が足りない。

add()やset()を使ってfirebaseにデータを追加するところまでできた。

入力フォームで入力した内容をfirebaseに追加することができた。

削除実装

  const handleClickDeleteButton = async () => {
    const db = firebase.firestore();
    db.collection('users').doc('1').delete().then(function () {
      console.log('削除実行')
    }).catch(function (error) {
      console.log('エラー発生', error)
    });
  };

今日の目標 CloudFunctionまでやる。

Cloud Function でできること。

  • WEB APIの実行
  • 定期実行
  • イベントトリガー

指示通りfirebase initをコマンドで実行するとこんな感じで怒られる。

Error: Failed to authenticate, have you run firebase login?

プラン変更でFirebase SDK snippetが変わっているのかと思い、もう一度コピペしたが差分は出なかった。

エラーメッセージで検索したら同じ現象がたくさん出てきた。

stackoverflowを参考にした。

https://stackoverflow.com/questions/37526358/firebase-login-failed

おそらく、さっき触っていたAWSのインスタンス立ち上げが悪さをしたのだと思う。
firebase logoutfirebase loginで上手くいった。

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

npm run deployを実行したら

Error: functions predeploy error: Command terminated with non-zero exit code2

が出てきた。

Deploy complete!とは表示されたが、一箇所missingになった。ダッシュボードからも確認ができない。

functions: missing required API cloudbuild.googleapis.com. Enabling now.

もう一度やり直したら上手くいった。原因不明。エラーは出ないがダッシュボードにも表示されない。

ダッシュボードへのAPI追加に成功。最初のエラー回避でfunction以下を削除したのがよくなかった。
なぜ再表示した際に成功したのかは不明。

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.

Running command: npm --prefix "$RESOURCE_DIR" run build

> build
> tsc

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (83.71 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: creating Node.js 12 function helloWorld(us-central1)...
✔  functions[helloWorld(us-central1)]: Successful create operation. 

✔  Deploy complete!
ログインするとコメントできます