泡沫記

備忘録あるいは自分の背骨

A5-K1復活

自分の記事によるとパソコンがフリーズして強制再起動したら起動できなくなったのは8月末らしい。あれから3週間以上経ったわけだが、ようやく完全復活した。復活してしばらくしたらまたしても不具合頻発、突然再起動したり、QRコード付きブルースクリーンが出たりして前兆あり。案の定フリーズして強制再起動でNo bootable device。NVMeを挿し直しても今度は復活せず。緊急処置として2.5 inch SSDをぶっ挿し、Windowsをインストールしてやり過ごす。強制再起動毎に差込口が使えなくなるから、てっきりマザーボードの回路でも切れたのかと思っていた。NVMeが使えないのは痛いので、修理に出そうとも思ったが、ダメになった原因切り分けのため、NVMe用外付けケースを購入、店のスタッフとこんな症状で…と相談したら、スロットやマザーボードが逝ったんじゃなくて、NVMeがダメになってますよ、とのこと。なら修理に出さなくても済むかもしれないと希望が見えた。実際、外付けケースに入れてパソコンに繋ぐとマウントはするが、中身は見れず。なるほどこれはNVMe逝ってるわ、とAmazonでSumsungの 1TBを購入、内蔵して無事認識するのを確かめ、OS・ソフト・諸々の設定が完了したのが今日。長かった。これでしばらくはだいじょうぶだろう。またフリーズ・強制再起動にならないことを祈る。2.5 inch SSDは緊急用として保管することに。こいつも1TBあるからもったいないけど。

こんなことがたまにとは言え、起こると仕事にならないので、バックアップ機・セカンドマシンは大切だなぁと。色々探したけれど、第1候補のThinkPadは最近良さが徐々になくなってきていて、カスタマイズとかメンテがしにくくなってきている感じ。キーボードも浅いタイピングになっているらしいし。理想としては速くて軽くてイジれるタフなやつが良くて、デュアルストレージでWindowsLinuxを共存させたかったのだけれど、デュアルストレージできる機種がない。軽さと薄さとのトレードオフだ。時代の流れなのかもしれないが、ちょっと寂しい。逆にこのゲーミングノートの方がデュアルどころかトリプルストレージも可能で、イジり甲斐があったりする。が、さらにもう1台ゲーミングノートが欲しいとも思わないし。Macも考えたけど、自分でカスタマイズしにくいしなぁと悩む日々。こうして決算セールの時期を逃し、購入を見送り、次回の年末セールで…と結局決断できない私であった。

アプリ進捗0831

8月27日

updateができない、できないと悩んで、ググり、動画を観て、そこに書かれてあるコードを参考に、小さなモデルで色々試す日々。せめて8月末までには何とかしたいと思う。ちょっとずつ知見が溜まっていく。ようやく小さなモデルではupdateができた。ずっと望んでいた挙動。最低限なゴールであるCRUDは、クリアすることができたとしよう。ただ、自分が作ったアプリ?にはまだ応用できず。成功したのはあくまで小さなモデルでの話だ。試行錯誤は続く。もっと整理してリファクタリングが必要か。どうせなら0からやり直したほうが最短なのか。まぁごちゃごちゃになって、ええぃやり直してしまえ!とちゃぶ台返しするくらいには試し尽くすことにしよう。

8月31日

うん、月末までにゴールに辿り着きたかったのだが、マシントラブルもあり、これは延期決定。が、前と違ってこうやればいいのかなというぼんやりとした光明は見えているので、試行錯誤しつつ自分が望む挙動になるよう実装したいと思う。望む挙動になるにはまだ2段階、3段階くらい壁がありそうだ。この方法がダメなら別の方法で、そしたらまた別の問題が発生して…と問題が連鎖するんだよな。ググった情報通りにコード入力して動いてくれれば世話ないのだが、試してみると動かない、挙動が違うということが連発。同じコード書いたなら同じように動いてくれよと思うのだが、結局自分で試してみないとわからないことが多いのだ。まぁ自分が成長するいい機会だからじっくり取り組もう。人と比べて成長が遅いと落ち込む必要もないだろう。

それにしてもWindows11・wslにubuntu入れてVScodeで開発してたら、なぜかフリーズ、完全に固まってどうしようもないから電源長押の再起動、すると黒い画面でno bootable deviceと表示され、やっちまったと思った。こんな状態は今まで何度もやらかしていたので、まだ焦っていなかったが、UEFIがイマイチわからず、起動ディスク自体が選択できないことがわかって焦り始める。旧BIOSなら慣れててわかるんだけど。いろいろ見ながら、どうやらディスク自体を認識していないぽいことがわかる。もし回路が逝っちゃってたら大泣きだ。10年使い続けるつもりが、半年で壊してしまったら立ち直れない。分解して裏蓋開けて、NVMeを空きスロットに付け替えたらあっさり普通に起動した。アレ?データも無事。…助かった。次は大丈夫なようにすぐに起動ディスクを作成した。つぎはアレだな、NVMeかSSD増設してLinux入れたいな。やっぱりWSLだといざというとき不安定で怖いわ。

アプリ進捗0820

8月12日

urlをどうしていいか詰まったので、Django Rest Frameworkのtutorialをざっと眺めてコードをgit cloneして解読中。3歩進んで2歩下がるって感じ。それもまぁいいだろう。何となくイメージはつかめたけど、こっからまたaxiosとReactの連結でもう1段階壁がありそうだ。それでも自分で使いこなせるように本質を掴まえとかないとね。

8月13日

何とか仕事が休みの盆休み中に自分が定めたゴールまでたどり着きたい。昨日読んだDRF tutorialを自分の小さいモデルで実験中。いやこれここまで自動的にやってくれるのすごいな。確かに面倒くさい作業がない。でもそっから細かなカスタマイズをどうするか、自分が望む結果にするにはどうすればいいのかだ。そこの深さがまだ足りない。単純な実装はできるかなとは思った。 イヤイヤちょっと待て。今まで書いた自分のコードはaxios+react-router-domでどうルーティングするか、に対して今やっているのはDRFでどうルーティングするか、を一生懸命やってる。アレ?自分が望む挙動をするためには幾つも道はあるけれど、違う道を進んでるんじゃなかろうか。そんな疑問が湧いている。

8月14日

まわり道は無駄ではない。ようやく仕組みが体感できるようになった。DRFでルーティング、エンドポイントをつくる。axiosでデータを取ってきて、react-router-domでfrontend側のルーティングを設定すると。結局どの知識が欠けてもたどり着けなかたんだなと思う。結局useEffectのけたらmapも上手くいった。useStateだけで表示は事足りた。ということはuseEffectを本当には理解していないということだ。どんなときに必要なのか。いつもいつもmapで上手くいかない理由は何なのか。いつのタイミングで副作用が起きているのか。要勉強。ゴールまであともう少しだと思う。さて次はCRUDだよなぁ。

8月20日

本当は盆休みが終わる8月15日までにゴールに辿り着きたかったのだが…。Createできた。Readできた。Deleteできた。React-Routerの仕組みも70%くらいは理解できて使えるようになった。Updateだけができない((泣)フォームの中にデータを反映させるところまではこぎつけた。ここまで来るのも相当に苦労した。で、最後のPUTができない。cannot read properties of null (reading 'id')が出て止まってしまう。やはりuseEffectの問題なのか?設定してあるはずにnullになるってどういうことだ?ゴール直前で足踏みしている。あと1歩なのに…。

アプリ進捗0807

8月7日

詳細画面のReact表示も試行錯誤の末、成功。これも非常に手こずる。DRFからのjsonがネストになっており、それをどう表示するかが問題になっていた。ネスト部分のみ別の変数に入れ、それをmapで取り出すという形で治める。これが正しいやり方なのかどうかわからない。現在自分が知ってるスキルでできるのがコレということだ。ただそのmapも一苦労。結局これは初期値に表示データと同様の項目を変数でまとめて入れてやったら表示された。表示させることだけで2週間位かかったんじゃないか?壁を突破したらまた壁が現れて、コツコツ砕きながら突破して、また立ち塞がって。ああでもないこうでもないという試行錯誤の回数だけ経験値は増す。知識が血肉になる。その手応えだけは感じている。今度はAPIを叩いてCRUD実装なんだろうが、ちょっと疲れたので、毛色を変えてBootstrapで装飾編に移行したいと思う。

ともあれ現在までの知見をまとめておきたい。

  • useStateの初期値って大切なんだなと。ただの配列じゃダメだった。表示させたい項目を空""でいいから、設定してやること。ネスト項目部分は空配列[]を設定すること。配列内部は項目を設定しなくても大丈夫だった。
  • mapは初期値を設定すればcannot read properties of undefined (reading 'map')は見なくて済む。この表示を何度目にしてどんだけ苦労したことか…。
  • map内の関数はreturnを明記したほうが良い。なかったらなぜか上手くcompileできなかった。これオレ環?
  • react-bootstrapをインストールしてApp.jsにimport 'bootstrap/dist/css/bootstrap.min.css';追加。<link...をどこに追加するかわからず。別ファイルでボタンだけ作成しimportしてみたが、compileは上手く行っても、すべて表示されず真っ白。原因不明。App.js内にButtonが入ってる関数を記入、return内に含めると成功。その違いがよくわからん。別ファイルにReactコンポーネント作成し、それをimportしたボタンは上手く表示される。これもなぜだ?が、成功する方法はわかったので良しとしよう。

ある程度Bootstrapで飾り付けできたら、API叩いてCRUD実装したい。Django+Bootstrapのみならここまで苦労しなかったはず。React使ってみたかったからこそ、DRF経由し、非常に回り道をしている。何のためにこんなことしてんだろう、機能的にはDjangoのみですでに足りてるのにと悪魔の囁きもあったのだが、知見が深まり非常に勉強になっていることは否めないので、最後までゴールできたら、自分を褒めてやりたい。

アプリ進捗0802

8月2日

ここ2〜3日アタマを悩ませてドハマりしていた問題がようやく解決した。django上手く行った。Django Rest Framework上手く行った。が、axiosで引っ張ってきたjson objectがReact上でどうしても表示できない…。console.logでは表示されているのに、どうしてもreact上に出てこない。エラーばかり頻発している。何故だ?実行タイミングがダメなのか、asyncがuseEffect内に必要なのか、.mapがfunctionじゃないとかどういうことだ?とググって試して失敗ばかりしていた。作業中、ふと思いついたことを試したら、上手くいくではないか!!!何だよソレ。単に初期値を" "じゃなくて[ ]にすれば良かったのか!!!そりゃobjectじゃないって言われるよなぁ。上手く行った喜びと同時にバカさ加減に腹が立つ。ああああああっ!!!これで次の段階にようやく進める。detail画面をどう出すか、アドレスをどう解決するか、ReactでUIをどう作っていくか。まずは乾杯!

アプリ進捗0730

7月29日

しばらく、ああでもないこうでもないとコードをイジって試していたが、上手く行かず。結局今の自分に足りないのはReactの知識だということがわかる。半端に理解してるものの何をどうして良いかがわかっていなくて、アタマの中がこんがらがってしまう。寝る間際にReactの公式ドキュメントを眺めていたら、内容がアタマにすらすら入っていくので、ちょっと驚いた。コレだという確信。色々かじりつつ回り回って本当のスタートラインにたどり着いた感じだ。しばらくReact公式ドキュメントに取り組もうと思う。

学んでいること

Reactを使う環境構築で、最小限のモノは、

  1. HTMLにDOMコンテナを追加する
  2. scriptタグを追加する
  3. Reactコンポーネントを追加する

以上3ステップで、できると。なんだ。そうだったんだ。 DOMコンテナって<div></div>要素で囲んだモノ。 scriptタグは以下の3つ

  • <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>

  • <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  • <script src="like_button.js"></script>

で、別ファイルを作り、コードを書くと。ただし<!-- Note: when deploying, replace "development.js" with "production.min.js". -->とのこと。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>このタグを追加し、任意の <script> タグに type="text/babel" 属性を持たせることで、その <script>タグの中では JSX が使えるようになると。じゃあ、JSXってbabelで変換するための目印という理解でいいか。公式ドキュメントにはJSXはReact"要素"を生成しますとある。タグで囲んだ全体がJSXと理解。

ここから引用ばかりになるけれども琴線に触れたところをピックアップしていく。若干のコメント添えて。

この中にあるもの全てが React DOM によって管理されることになるので、“ルート” DOM ノードと呼ぶことにしましょう。

React だけで構築されたアプリケーションは、通常ルート DOM ノードをひとつだけ持ちます。既存のアプリに React を統合しようとしている場合は、独立したルート DOM ノードを好きなだけ持つことができます。

ルートDOMノード単位で大まかな構成を考えることができるはず。

React 要素をルート DOM ノードにレンダーするには、まず ReactDOM.createRoot() に DOM 要素を渡し、root.render() に React 要素を渡します

React要素、DOM要素、ちゃんとどんな形で、何を意味するのか、区別しよう。例では以下のメソッドを渡していた。React要素の方はJSXで定義した変数を渡していた。

概念的には、コンポーネントJavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

任意の入力を受け取ってReact要素を返すのがコンポーネント。ホンマに関数じゃないか。

React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。

属性と子要素は例での中では{name: 'Sara'}として出てくる。これがpropsとして渡されている。

典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。しかし、既存のアプリに React を統合する場合は、Button のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよいでしょう。

ノードから考えるんじゃなくて、ボトムアップでいった方がいいのか?自分のアプリの場合。

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。

心しておかないと、すぐ忘れそう。

アプリ進捗0724

7月19日

ようやくimport-exportに成功した。何が原因でimportできなかったのか、イマイチ良くわかっていないものの、成功したので良しとする。小さいdjangoアプリを新たに作ってmodelを変えたり、データベースリセットしたりしながら試行錯誤。ちょっとずつ挙動がわかって何とか成功。idの処理をどうすればいいのかわからず、とどのつまり、id_numprimary_key=Trueに設定、 Foreign keyをid_numと紐付けるためにto_field="id_num"と設定してしてやったことが大きな改善点か。Accessの紐づけのイメージがずっと残っててそれが理解に邪魔をしてたような気がする。親のどこのfieldに紐付けられてるかで悩んでたから。本当に自分の仮説が合っているのかどうか、もう一度アプリを作り直したときにわかるだろう。

7月24日

backend側はこれで何とかなったとおもうので、次なる挑戦はfrontend作成へと入る。最終的にReactを使って整えたい。まずはDjangoRestFramework(DRF)を使ってjsonfileを出力、Reactとくっつける。これは意外とすんなり完了。詳しい手順はまた後ほどまとめるとして、今日は大まかな感想だけ。このあたりまでは2年前の秋に嗜んだ経験があって役に立った。当時は途中で諦めたもんだが、経験値は貯まっているんだなぁとしみじみ。で、今日挑戦したのはDRFでForeignkey使ったモデルをどう表示するのかという課題。似たようなコトをやっているブログをググってそのコードを参考に試したもののダメ。結局、公式ドキュメントをちまちま読んで、ちょこちょこ試して、自分に必要なものを探し出した方が早かったという。Djangoが優れているんだろうが、まわりくどく考えるよりも、シンプルに書いたらできちゃった感あり。成功したらあまりのあっさり感に拍子抜けするくらいだ。じゃ次はいよいよReactで飾り立て?か。