また初歩的な所で躓くおっさん。

久しぶりにまたReactの勉強再開っすか。
そんなおっさんですが、いきなり躓きました。

あれ?動かなくなってる…

以前に試していたReactチュートリアルを開いてチョロチョロと変更を加えてみようかと。
思い出す為にもVSCodeで開いて早速F5キーをポチッと。

…あれ?ブラウザは開くけど動かない?何で??前はF5で検証できてたじゃん??

悩む。
分からん。
そういえば、PHPのデバッグに挑戦した時、launch.jsonとかいうのでデバッグ構成をゴニョゴニョしてたな。
launch.jsonを開いてみる。

{
    "configurations": [
        {
            "type": "pwa-chrome",
            "name": "http://localhost:3000",
            "request": "launch",
            "url": "http://localhost:3000"
        }
    ]
}

なるほど、分からん。
でも多分コレ、デフォルトのままっぽいすね。

サーバー(Node.jsだっけ?)が動いてないとかじゃね?
PHPデバッグの時に触ったデバッグの構成をクリックして見ると「Node.js…」ってのを発見。
それを選択するとコマンドパレットに「Run Script:start」とか「Run Script:build」とかが出てきました。
…これかな?
「Run Script:start」を選んでみるとターミナルにゴニョゴニョ表示されブラウザが起動して…動いた!
デバッグの構成も「launch.json」じゃなく「Run Script:start」が選ばれており、F5を押すだけでデバッグ出来るようになりました。

…前回やった時、絶対にこんな事して無かったんだけどな…と思ってチュートリアルを見直してみました。

これでプロジェクトフォルダ内で npm start を実行し、ブラウザで http://localhost:3000 を開くと、空の三目並べの盤面が表示されるはずです。

https://ja.reactjs.org/tutorial/tutorial.html

コレか。
先にサーバーを起動してたから、F5を押すだけで良かったんやね。
で、今はサーバー止まってるからF5押しただけじゃ駄目だったと。

まとめ

ふぅ…なんとかデバッグ出来るようになりました。
こうやって躓いては解決を繰り返して覚えていかないと駄目なんでしょうね。
問題はおっさんの記憶力…と、ヤル気か。

しかしデバッグの仕方を調べてて正直思った。
tasks.jsonとかlaunch.jsonの内容…書ける気がせん!
何あの内容!
みんなこんなの覚えてるの?
おっちゃん、無理だよ!
viの設定みたく、みんな雛形か何か用意してるモンなのかなぁ…。

追記
まったく関係ないけど300GBのデータベースをメモリ32GBのサーバーで動かすのって普通なんかなぁ…。
ちょくちょく面倒みてるサービスが最近ちょくちょく重くなってて困ってます。
「どんだけデータが溜まってもサービスに問題が発生したらそれはプログラムの不具合や!」
って言われてそんな無茶な…ってブルーな気分です。w
十数年前の自分、そんなデータ量になるなんて想定もしてなかったわw

コメント

タイトルとURLをコピーしました