ハッカソンで得たTips
本当に並べるだけ
ほぼスクラップの扱いです
技術構成: React Vite MapBox
ViteはNodeライブラリを標準で使えない
fsモジュールをDockerのSecretsの導入後に試したところうまく行かなかったのでドキュメントを読みに行ったらNode標準のライブラリの使用を禁止しているらしい
機密変数などを渡す場合の標準はVITE_プレフィクスの変数を.envに宣言してimport meta.env.VITE_<hoge>
Hooksはコンポーネントの最上位スコープでしか宣言できない->コンポーネントを切り出して適切に宣言しよう
MapboxGLのMaker機能を描画時に取得できる情報をもとに動的生成しようとしたときに､map式の中にuseRefを宣言した｡
この場合､Hooksはコンポーネントの最上位でしか宣言できないというものに反する｡
というか､だいたいこういう場合別にコンポーネント切り出しで対応できる｡
非同期関数とuseEffect
あやふやな理解だったので
(useEffectの適切な使用タイミングかはちゃんとわかっていないので一旦横に置きつつ)
APIの取得にfetchを使う→非同期関数
useEffect内で使う場合には一旦async関数でラップしてから呼び出す
JavaScriptの言語機能......というかブラウザの機能?
ここはまだ正直怪しい
localStorageやnavigatorなどを調べるタイミングがあったが､おもったよりJavaScriptの言語機能とブラウザで利用できるAPIが多いようで
import hogeみたいなので利用するわけではなく最初から使えるっぽい
git cherry-pick
特定のコミットを持ってくることができるのは知ってた
コミットの差分のみを引っ張ってくる(ログにコミットを含めない)場合は-nを使う
git reflogによる操作の巻き戻し
最終日発表3時間前くらいに基幹機能への大規模なコミットを間違った操作(具体的にはgit reset --hardでふっとばした 純粋に馬鹿)をした結果一気に失った｡
｢git reflogでどうにかなる｣といっていた噴水での一幕を思い出し調べてみたところ､基本的な操作履歴は残っており､git reflog単体でgit logのように操作履歴を見ることができる｡
今回消したいのは直近1回の｢git reset --hard｣ で､reflog上にはHEAD@{1}として記録されているので､git reset --hard HEAD@{1}する｡ 助かった......
Object.values()でキーは消える
すごい当たり前のことかもしれないけど､これで無いキーのデータを延々と探していた｡だめ
array.flat()で一次元配列に変換
DeveloperモードのReact拡張は便利
デバッグ時にComponentsタブでレンダリングされているコンポーネントをみる事ができる｡
コンポーネントの持つデータ(stateとか)も見ることができるので､そうしたデータはプリントデバッグしなくていい 便利~
個人的にJavaScriptにもっと触れることができたハッカソンになりました｡
思いつく得たTipsとして重要なものはこのあたりです｡またわたしが忘れたときにこの記事を見に来るでしょう｡でかした今日の私｡
Discussion