React/Typescript/firebase 0->1
yoshitakanode.js をいれる
yoshitakayarnを入れる
yarn initは必要なかったみたい。package.jsonがC：直下に生成されたけど、これは必要なさそう。
その後npxを使ってディレクトリ生成した際に一緒に作られるので。
yarn
2016年にリリース。
npmと比べてインストールが速い、セキュリティが高い。セキュリティが高いというのは、インストール時にパッケージが不正に変更されていないかなどをチェックサムを用いて検証することができ、安全なパッケージのインストールが可能であるということ。
例えば、同じリポジトリの下で複数のパッケージを管理していて、それらがすべて個別のpackage.jsonファイルを持っている場合、リポジトリ内のすべてのパッケージの依存関係を一度にインストールすることができ、すべてのパッケージを簡単に更新することができる。npmの場合は、各パッケージフォルダ内でnpm installコマンドを手動で実行する必要がある。
オフラインキャッシュの仕組みを利用している。つまり、パッケージを初めてインストールすると、Yarnはそのパッケージを~/.yarn-cacheの下にあるキャッシュフォルダに追加する。これによりnpmと比較してYarnのパフォーマンスを大幅に向上させている。
yarn.lockというロックファイルを利用しているので、プロジェクトはすべてのチームメイトに対して正しく動作する。決定論的インストールアルゴリズムとも呼ばれている。
アプリケーションを開発する際のさまざまな場面で便利なライセンスチェッカーが組み込まれている。
npmとは異なり、Yarnはパラレルダウンロードと呼ばれるアプローチを採用している。これにより、Yarnはより多くのリソースを利用してビルドプロセスを高速化することができる。
Yarnは、HTTPリクエストに失敗した場合、自動的に再試行することができる。
yoshitaka環境構築
$ npx create-react-app kitamachi-web --typescript
$ cd kitamachi-web
$ yarn start
yoshitakaC:直下に.node_repl_history,,yarnrc,package.jsonが生成されていて役割がよく分からないandもしかすると間違って生成してしまったかもしれないが、そのまま置いておくことにした。
package.jsonは中の情報見る限りディレクトリ生成時に必要なものっぽいので削除してもいいかもと思ったけど、他は設定ファイルな気もした。
yoshitakaWebpackの導入
webpackとは
webpackとはCSSやJavaScript、画像などWebサイトを構成するあらゆるファイルを1つにまとめるモジュールバンドラーのことです。
webpackを利用して複数ファイルをバンドルすることは以下のような利点があります。
依存関係の解決
ファイル間の依存関係を解析し1つのファイルとしてまとめてくれる
リクエストの回数を減らす
ファイルを1つにまとめることで通信回数を減らすことができる
開発作業の分担がしやすくなる
機能ごとにファイルが分割されていると作業の分担やレビューがしやすくなる
yoshitakaBootstrap導入
yoshitakaReact Routerの導入
yoshitakaSPAとは
SPAは、シングルページアプケーションの略になります。
単一ページのアプリケーションであり、リンクなどをクリックしてもブラウザでページの更新が発生しないのが特徴です。
ページロード時に全てのHTML、CSS、JSを取得し、以降はデータの受け渡しで画面を変更する仕組みです。
データが切り替わるとDOM操作でフロント側で画面を書き換えます。
SPAは初期ロード時に時間が掛かってしまいますが、以降はデータの受け渡しだけなので高速で動作します。
react-router-domとは
SPAはHTMLが１つであり、従来サーバ側で行っていたHTMLの振り分け作業ができません。
このままでは画面遷移が行えない状態です。
SPAで画面遷移相当の実装を助けてくれるのが、react-router-domになります。
正確にはDOM操作で画面遷移のようなことをしてくれるので従来の画面遷移より高速です。
ダメっぽい例
<Nav.Link href="/menu">Menu</Nav.Link>
これはNGなので
この記事を参考にして
boostrapのNav.Link 内でReact Link内では問題なく使えるはずのto="/"を使えるようにするために、
as={Link}を入れてみた。
yoshitaka
yarn add firebase-toolsをしたけど、firebaseコマンドが叩けず
一度removeしてから再度npm install -g firebase-toolsをしてみたらいけた
自動でfirebaseへのログインが起動してスムーズにいけた
これを参考に作業した。
こっちはyarn addで失敗した方だけどglobalにしたら行けたのかも。
多分npmの-gはyarnでのglobalなのかな
firebaseのコンソールからwebアプリを登録する
firebase initからいろいろ設定してやってみた
そのあと、firebase deployをやってももちろん設定されていないので設定してねとおこられた。
設定したらうまくいった？
でもURL叩いてもHTMLちゃんと返ってこないのでなにかまずいか？
firebase.jsonの中のhosting { public: をdefalutでpublicになっていたものをbuildにしたら表示された。
この記事に書いてあった
出力フォルダは、public ではなく リソースは build ディレクトリ を入力する。ここが一番重要。
これがほんとに重要で、rooterを使う場合はpublicにあるものだけデプロイしても正常に表示できない？感じみたい。buildにしたら必要ファイルが全てデプロイされて公開できた。
yoshitakafirebase-toolsのinstall はしてそのあとfirebase initはしたけど、npm install はしてなかった気がする。
npm じゃなくてyarnで入れればよかったけど、どっちも使えるらしいので、とりあえずOK。
これで問題なくfirebase/appが読み込めた
この方の記事を参考にしてみたけど、若干v8 -> v9の関係で書き方変わっている様子だった。
firebase.tsの初期化ができてない場合はエラーになるところは一度ハマったけど、大したことではなかった。
yoshitakaログイン機能実装前にDBの読み込みをやっていく
yoshitakafirebaseでデータ読み込みの無限ループ発生
mogaさんに指摘してもらい が原因だと分かった。
yoshitakaBoostrapのForm.selectが認識されなかったので、
これやったら直った。
yoshitakaバージョンの確認は、
npm list --depth=0
でできる。
yoshitakaReact-bootstrapのバージョンアップをしたく
yarn upgradeを使おうとしたらうまくいかず、
結果的にyarn と npmでlockを二つ作ってしまったので注意された
どうするか。
今後は別で運用がいいのかもしれない？
最後にyarnを使ったのでyarn しか使わなければ問題なし？
yarn upgrade-interactive 使う方がよさそう
yoshitakafirebaseへのデータ入力
動きは想定通り、さまざまな内容にうまく対応してくれるイメージ
値の取得もデータがなければ取れないだけなので、落ちることもなし。
yoshitakareact のselect内のvalueをNumberにしたい
html内ではできないらしい
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>
}
がそのままだと'string' はプリミティブですが、'String' はラッパー オブジェクトです。できれば 'string' をご使用ください。ts(2322) みたいな形で怒られたので
String（）でやったらうまくいった。
yoshitakaランダムID生成
Math.random().toString(32).substring(2)
yoshitakatypescriptの使い方をもうちょう深堀必要
この記事を参考にして
いれてみるか
yoshitakadaysjsが使えない？
この記事の内容コピペで使った
dayjsの間違えだった。途中までインストールできたのは謎
yoshitakaReactの細かい使い方確認
useStateの型と使い方
yoshitakaFIrestoreのtimestampの扱いに苦労した
いろいろ参考にして
これが一番参考になった
結果的に
const q2 = query(collection(db, String("openDate")), orderBy('date', 'asc'), startAt(Timestamp.fromDate(today)), limit(3));
で希望通り三日分とれた
yoshitakamacに移行したらyarn startでエラーが出た
この二つの記事と同じ状態になったが、node_moduleとyarn.lockを一度削除して、yarn installしたら直った。
yoshitakachakra UIを使ってみる
まずは、
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
問題なくインストール完了
App.tsxで下記対応
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)
}
と思ったらindex.tsxに書けってことなので
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.render(
<ChakraProvider>
<div>
<App />
</div>
</ChakraProvider>
,
document.getElementById('root')
);
こんな感じか