はじめに
これから未経験エンジニアを目指すにあたって、学習の記録・アウトプット・復習の場としてQiitaを利用していこうと思います。
最初は投稿自体に慣れていきたいので、簡単なことから始めていこうと思います！
改めましてこんにちは！
未経験からエンジニアを目指して学習中のReoです。
今回は「JavaScriptの基本」を復習するために、クリックすると数字が増えるカウントボタンを作ってみました。
一度学んだことがあるので、スムーズに進むかなと思いますが、
「DOM操作って？」「変数の使い方は？」といった基礎を思い出しながら、改めて学んだことを記録していきます。
いざ実装！
まずは、HTMLのファイルを作成した後に、「!+tab」でHTMLの雛形を作成しました。
その後は、以下のタグを使用しかなり簡易的ではありますが、カウンターの見た目を作成しました。
<!-- ▼現在の数字を表示させる -->
<span id="count">0</span>
<!-- ▼カウント用のボタンを表示 -->
<button id="countBtn">カウントする<button>
注意点
idを指定することを忘れない！※忘れるとうまくjs側で要素を取得できない
次に、JavaScriptファイルを作成し、以下のコードを使用して、変数の定義や要素の取得、イベントの設定、要素の更新を行いました。
// ▼HTMLのcountBtn要素を取得
document.getElementById("countBtn")
// ▼イベント(クリック)した時の関数(1追加)の設定
.addEventListener("click",function(){
count++;
// ▼count要素を取得して、要素の更新
document.getElementById("count").textContent = count;
補足
document. は、JavaScriptで今表示しているWebページ（HTML）にアクセスするための入口
これで完成したと思うので、実際にカウントを実行してみることにしました。
しかし、上手くカウントされません。
原因はHTMLファイル側で読み込んでいなかったこと！
完全にうっかりしていました…。そりゃカウントされないわけです。
なので、HTML側に以下のタグを記載して完成！
<script src="main.js"></script>
注意点
・「src=」以降に必ず対応したファイル名を記載すること
・HTMLより後に読み込まれるように、bodyタグ直前に記載すること
完成品
これで無事、ボタンをクリックするとカウントされる簡易的なカウンターを作成することができました！
学んだこと・つまずいた点
対応するファイル名を間違えたり、スペルミスでうまく機能しないことに注意する！
また、そもそもJavaScriptファイルを読み込み忘れるなどの根本的なところも気をつけようと思いました。
まとめ
以前学習したことのある内容なのでスムーズにいくかと思いきや、忘れていることやうっかりミスなどがあったので、アウトプットと復習の重要性を思い知らされました…。
インプットした後は必ずアウトプットして、定着させるよう心がけたいと思います！
次回は、
今回作成してカウンターをReactを使って作成したいと思います！
そうすることで、JavaScriptとReactを使用した時の差をより実感できると思います１
最後まで読んでいただきありがとうございました！