本題:
VScodeで初歩的なカウントアプリを作って学習中に、次の問題に直面した。
Live Serveer機能でHTMLを記述したファイルを表示しようとしても表示されなくなってしまった。
※最初の投稿かつ備忘録としての書きなぐりためいろいろと多めに見てください。
昨日、HTMLを勉強中は表示されていたのにGo Liveのボタンを押しても表示されずファイルとしてダウンロードされてしまう。
対処法がよくわからなかったため最初にclaudeに投げていくつか対処法を出してもらい実践してみた。
まずは試したことをあげてみる。
1.そもそも<head></head>がないからうまく読み込めないのではないか？
カウントアプリを練習として作成するだけの練習として新しく作ったファイルなので<head></head>はいらないかなと勝手に思い込み書かずに飛ばしていた。
結論としては結果は変わらなかったが本当に絶対必要なタグなのか後で調べようと思う。
2.右クリックで直接"Open with Live Server"で飛ぶ
次に指示されたのはVScodeの左側に並べられているファイルを右クリック→"Open with Live Server"で直接飛ぶというもの。
結果としてホームディレクトリに飛ばされうまくいかなかった。
何が間違いだったのか
claudeに聞いても(スクショも貼った)回答が出なかったため、Live Serverを再インストールしたりディレクトリの構造をいじったりしてもうまくいかなかったのだが決定的な間違いを見つけてしまった。
なんとファイルに拡張子”.html"がついていなかったのである。開かないのは当たり前だった。
この経験から学んだこと
1.拡張子はファイル作成時に忘れないように気を付けたい。おそらくベテランのエンジニアであれば当たり前のように感じるかもしれないが、駆け出しの初学者エンジニアだからこそ起こりうるであろうミスだった。
2.AIですぐに解決できないエラーもある。スクショまでして解決策をClaudeとこねくり回していたのに結局Claude側も拡張子の不備には気づかなかった。