Closed24

React/Typescript/firebase 0->1

yarnを入れる
yarn initは必要なかったみたい。package.jsonがC:直下に生成されたけど、これは必要なさそう。
その後npxを使ってディレクトリ生成した際に一緒に作られるので。

https://qiita.com/senou/items/d939601e32c0005ebfe3
yarn
2016年にリリース。
npmと比べてインストールが速い、セキュリティが高い。セキュリティが高いというのは、インストール時にパッケージが不正に変更されていないかなどをチェックサムを用いて検証することができ、安全なパッケージのインストールが可能であるということ。
例えば、同じリポジトリの下で複数のパッケージを管理していて、それらがすべて個別のpackage.jsonファイルを持っている場合、リポジトリ内のすべてのパッケージの依存関係を一度にインストールすることができ、すべてのパッケージを簡単に更新することができる。npmの場合は、各パッケージフォルダ内でnpm installコマンドを手動で実行する必要がある。
オフラインキャッシュの仕組みを利用している。つまり、パッケージを初めてインストールすると、Yarnはそのパッケージを~/.yarn-cacheの下にあるキャッシュフォルダに追加する。これによりnpmと比較してYarnのパフォーマンスを大幅に向上させている。
yarn.lockというロックファイルを利用しているので、プロジェクトはすべてのチームメイトに対して正しく動作する。決定論的インストールアルゴリズムとも呼ばれている。
アプリケーションを開発する際のさまざまな場面で便利なライセンスチェッカーが組み込まれている。
npmとは異なり、Yarnはパラレルダウンロードと呼ばれるアプローチを採用している。これにより、Yarnはより多くのリソースを利用してビルドプロセスを高速化することができる。
Yarnは、HTTPリクエストに失敗した場合、自動的に再試行することができる。

環境構築

$ npx create-react-app kitamachi-web --typescript


$ cd kitamachi-web
$ yarn start


C:直下に.node_repl_history,,yarnrc,package.jsonが生成されていて役割がよく分からないandもしかすると間違って生成してしまったかもしれないが、そのまま置いておくことにした。
package.jsonは中の情報見る限りディレクトリ生成時に必要なものっぽいので削除してもいいかもと思ったけど、他は設定ファイルな気もした。

Webpackの導入

webpackとは
webpackとはCSSやJavaScript、画像などWebサイトを構成するあらゆるファイルを1つにまとめるモジュールバンドラーのことです。

webpackを利用して複数ファイルをバンドルすることは以下のような利点があります。

依存関係の解決
ファイル間の依存関係を解析し1つのファイルとしてまとめてくれる
リクエストの回数を減らす
ファイルを1つにまとめることで通信回数を減らすことができる
開発作業の分担がしやすくなる
機能ごとにファイルが分割されていると作業の分担やレビューがしやすくなる

SPAとは

SPAは、シングルページアプケーションの略になります。
単一ページのアプリケーションであり、リンクなどをクリックしてもブラウザでページの更新が発生しないのが特徴です。

ページロード時に全てのHTML、CSS、JSを取得し、以降はデータの受け渡しで画面を変更する仕組みです。
データが切り替わるとDOM操作でフロント側で画面を書き換えます。

SPAは初期ロード時に時間が掛かってしまいますが、以降はデータの受け渡しだけなので高速で動作します。

react-router-domとは

SPAはHTMLが1つであり、従来サーバ側で行っていたHTMLの振り分け作業ができません。
このままでは画面遷移が行えない状態です。

SPAで画面遷移相当の実装を助けてくれるのが、react-router-domになります。
正確にはDOM操作で画面遷移のようなことをしてくれるので従来の画面遷移より高速です。

ダメっぽい例

<Nav.Link href="/menu">Menu</Nav.Link>
これはNGなので

https://stackoverflow.com/questions/54843302/reactjs-bootstrap-navbar-and-routing-not-working-together
この記事を参考にして
boostrapのNav.Link 内でReact Link内では問題なく使えるはずのto="/"を使えるようにするために、
as={Link}を入れてみた。

yarn add firebase-toolsをしたけど、firebaseコマンドが叩けず
一度removeしてから再度npm install -g firebase-toolsをしてみたらいけた

自動でfirebaseへのログインが起動してスムーズにいけた

https://qiita.com/junara/items/74801923ca108b328b26
これを参考に作業した。
https://qiita.com/Alex_mht_code/items/e5cd95b8f2a2a3ce656f
こっちはyarn addで失敗した方だけどglobalにしたら行けたのかも。
多分npm-gyarnでのglobalなのかな

firebaseのコンソールからwebアプリを登録する

firebase initからいろいろ設定してやってみた

そのあと、firebase deployをやってももちろん設定されていないので設定してねとおこられた。

設定したらうまくいった?


でもURL叩いてもHTMLちゃんと返ってこないのでなにかまずいか?

firebase.jsonの中のhosting { public: をdefalutでpublicになっていたものをbuildにしたら表示された。

https://qiita.com/sifue/items/d78cfe57927dceb9754f
この記事に書いてあった

出力フォルダは、public ではなく リソースは build ディレクトリ を入力する。ここが一番重要。

これがほんとに重要で、rooterを使う場合はpublicにあるものだけデプロイしても正常に表示できない?感じみたい。buildにしたら必要ファイルが全てデプロイされて公開できた。

firebase-toolsのinstall はしてそのあとfirebase initはしたけど、npm install はしてなかった気がする。

npm じゃなくてyarnで入れればよかったけど、どっちも使えるらしいので、とりあえずOK。

これで問題なくfirebase/appが読み込めた

https://reffect.co.jp/react/react-firebase-auth
https://github.com/motoitanigaki/typescript-react-hooks-firebase_authentication-boilerplate/blob/simple/src/serviceWorker.ts

この方の記事を参考にしてみたけど、若干v8 -> v9の関係で書き方変わっている様子だった。
firebase.tsの初期化ができてない場合はエラーになるところは一度ハマったけど、大したことではなかった。

ログイン機能実装前にDBの読み込みをやっていく


バージョンの確認は、

npm list --depth=0
でできる。

React-bootstrapのバージョンアップをしたく

yarn upgradeを使おうとしたらうまくいかず、
結果的にyarn と npmでlockを二つ作ってしまったので注意された

どうするか。
今後は別で運用がいいのかもしれない?
最後にyarnを使ったのでyarn しか使わなければ問題なし?

https://qiita.com/teinen_qiita/items/18ca1fb433914e09c9e4

yarn upgrade-interactive 使う方がよさそう

firebaseへのデータ入力

動きは想定通り、さまざまな内容にうまく対応してくれるイメージ
値の取得もデータがなければ取れないだけなので、落ちることもなし。

react のselect内のvalueをNumberにしたい

html内ではできないらしい

https://teratail.com/questions/268212
https://qiita.com/Syy12345-Unity/items/0c86a527ba597e2519ad
const [resHour, setResHour] = useState<Number>(0);

    const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (ev) => {
        const number = Number(ev.target.value);
        setResHour(number);
    };

 return (
                        <Form.Group as={Col} controlId="formGridPassword">
                            <Form.Label>時間</Form.Label>
                            <Form.Select aria-label="Floating label select example" onChange={handleChange}>
                            <option value="0">予約時間を選択してください!</option>
                            <option value="1">18:00</option>
                            <option value="2">18:30</option>
                            <option value="3">19:00</option>
                            <option value="4">19:30</option>
                            <option value="5">20:00</option>
                        </Form.Select>
                        </Form.Group>
)

入力文字を取得したかった

react form control get valueやり方が全くわからずこれで検索したらいい感じのものがでた


    const [resComment, setResComment] = useState<String>("");

    return (
 <Form.Group className="mb-3" controlId="formGridAddress2">
                        <Form.Label>お店への伝言</Form.Label>
                        <Form.Control className="textFeedback"
                            as="textarea"
                            value={String(resComment)} 
                            onChange={e => setResComment(e.target.value)} 
                            placeholder="お店へのメッセージがあればご記入ください!" />
                    </Form.Group>
}

https://stackoverflow.com/questions/60917459/react-bootstrap-how-to-get-value-of-form-control

がそのままだと'string' はプリミティブですが、'String' はラッパー オブジェクトです。できれば 'string' をご使用ください。ts(2322) みたいな形で怒られたので

String()でやったらうまくいった。

FIrestoreのtimestampの扱いに苦労した

いろいろ参考にして

https://qiita.com/bohebohechan/items/a8b290df2da42f2a710c
https://stackoverflow.com/questions/52247445/how-do-i-convert-a-firestore-date-timestamp-to-a-js-date/52247484

これが一番参考になった

https://zenn.dev/arark/articles/9ef42ee801050e0f9b88

結果的に

 const q2 = query(collection(db, String("openDate")), orderBy('date', 'asc'), startAt(Timestamp.fromDate(today)), limit(3));
       

で希望通り三日分とれた

このスクラップは2ヶ月前にクローズされました
ログインするとコメントできます