プログラム関係の日記

 今日も仕事終わってから作業。 開発スピードが遅いけど、一つずつエラーを解消したりしながら作業している。 今日は firebase.js 内にある以下の記述を .env.local という環境変数に移行した。 よし！出来た！と思い、Next.jsのサイトをみると、エラーが💦 1つずつ確認しながら作業すると、１つ気が付いた。 projectId : の部分だけ、.env.local に移すことが出来なかった。 これは仕様なのか、それともどのプロジェクトのkeyかをわかりやすくする為？とか思ったけど、どうなのだろう？ projectId : 以外は.env.localから読み込むようにした。 なぜこんなメンドイ事するのか？ それは他の人(第三者)に、写真の情報が漏洩してしまうと、他人がこのkeyを使い、僕のサイトに書き込みが出来る権限を与えてしまうからだ。 解りやすく言うと、他人に、自分の自宅のカギを渡した状態ｗ それは嫌だよね？ だからこんなめんどくさい防犯対策をしている。  

 仕事から帰ってきた後、やる事を終えた後、ずっとPCの前でエラーと睨めっこしてた。 エラーの原因は、単純な入力間違いがほとんどだった。 今日はデーターベースへ接続が出来、データーベース上で保存した情報をWEB上に表示できた。 進捗としてはだいぶと進んだように見えるけど、まだまだだ。 データーベース接続後、開発者モードをみると、KEYを設定しろ！とNext.JS側に怒られる。 適当にキーを設定してもいいけど、重複してしまった時がやばいので、最初は日付でミリセカンドまでをkeyに使用しようと思ったんだけど、とても便利なパッケージがnpmで公開されているので、それを使用した。 それとは　UUIDだ。 $ npm install uuid でインストールして、 import { v4 as uuidv4 } from 'uuid' ; でインポートして、 uuidv4 ( ); で使用するだけ。 これだけで使えちゃうのってすごい。そして固有の番号をランダムで割り振ってくれるので、ダブる事もない。 keyの重要さを思い知った気がした。 課題として残っている事をTODOリスト的に挙げると、 画像のアップロード機能の追加 WEBサイトのレイアウト(CSS) フォームの入力情報をデーターベースへ保存する事。 データーベースの編集や削除が出来るようにする事。 だ。

 最近はYouTubeとかUdemyとか、プログラムについて学べる機会が増えてきた。 色んな人がプログラム教えてて、Udemy講師というw もっとスラスラとコード書きたいよ。 useState は毎回レンダリングするから、更新してほしくないページとかはuseeffect を使う方が良いみたい。 まあ、自分のサイト作成にはなんら影響ないけど。

  やはり何かを作りながら出ないと、なかなかわかりにくいから。 Reactの書籍も４冊目だわ。。 今理解できている部分としては、 microCMSのAPIへの接続の方法 import して使っていく事 詰まっている事 Reactの記述が凄くとっつきにくくて大変。 慣れている人からすれば、こんなの当たり前だよｗと思う話も、初心者からしたら苦痛しかない。。 例えば、下記の様なぱっと見は、簡単そうに見えるんだけど、どういう仕組みで、この数行の記述で収まっているか？ ＜App /＞ ↑これがミソだろうと思う。 App.jsの中身を表示するよって事。