貧乏サラリーマンの学習　JavaScriptでQRコードジェネレーター作成

本日学習教材は　Code Tips　さんのYouTube動画です。

今まで学習してきて感じたこと
最近２度やってしまった間違い

今まで学習してきて感じたこと

昨年の12月くらいからHTML、CSS、JavaScriptを学習しています。

もう５ヶ月ほど経ちますがなかなか身につかない。

HTML、CSSあたりは何となくわかりますが、JavaScriptが意味がわからない。

まずはconst、letなどの変数、定数を使わずに長いコードを書いてから、まとめられるところは変数、定数にまとめる方法の方が今の私としては理解しやすい気がする。

例えば、下記の様なbtnですが、btnの関係性がよくわからなくなってしまいます。

document.querySelector(".btn").innerText = "読み込み中"

の様に変数、定数を使わなければbtnで迷子になることは無い気がします。

どの動画を見てもつらつらと変数、定数を使わずに書いている人は見たことがないので、

おそらく私の今の状況は非効率なのだと思います。

const container = document.querySelector(".container");
const qr = document.querySelector(".qr");
const btn = document.querySelector(".btn");
const input = document.querySelector(".input");
const qrCode = document.querySelector(".qrCode");

btn.addEventListener('click', ()=>{
    let url = input.value;
    if (!url) return;

    btn.innerText = "読み込み中"

    qrCode.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${url}`;

    qrCode.addEventListener("load", ()=> {
        qr.classList.add("active");
        btn.innerText = "QR生成"
        
    });
});

最近２度やってしまった間違い

scriptタグをhead内に書くときにdeferを入れないと、JavaScriptが動かないこと。

head内に書かない場合は、body内の一番下に書くこと。

今回はdeferが抜けており、コンソール表記がnullになってしまった。

私のChromeが悪いのかと思いましたが、私のコードが悪かった。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>
<body>
    <div class="container">
        <div class="head">
            <h1>QRジェネレーター</h1>
            <p>URLからQRコードを簡単に生成できます。</p>
        </div>
        <div class="form">
            <input class="input" type="text" placeholder="URLを入力してください" />
            <button class="btn">QR生成</button>
        </div>
        <div class="qr">
            <img  class="qrCode" src="" alt="">
        </div>
    </div>

    
</body>
</html>