WordPressも業務ではよく触っているが実際に自分で1から作るというようなことも今までなかったので(と言っても2025/03/22現在は無料テンプレートを使用しているのでこれからカスタマイズしていく予定)触ってみるついでにアウトプットです。
性格的にQiitaとかに間違った情報載せられないし個人的にわからない部分で検索した時に能力不足の記事に当たったら悲しいよね…という気持ちからここで記事を書いていくことにしました。
基本わたしの学習のバディはChatGPTです。
さて、本日学んだことは以下になります。
console.log(’コンソールに表示されるよ’)
document.getElementById(’choice’).textContent = 書き換えたい文字列;
例：
|
1
|
<p id='choice'>ここに日時が表示されるよ</p> |
document.getElementById(’choice’).textContent = newDate();
→ここに日時が〜の部分が日時に変換される
windowオブジェクト
window.alert(’上部の部分でアラートが表示されるよ’)
window.confirm(’アラートのメッセージ OKとキャンセルの2ボタンが表示される’)
→console.log(window.confirm(’アラートのメッセージ OKとキャンセルの2ボタンが表示される’))とした場合にはtrue/falseの値が返ってくる
if文と共に使う
|
1
2
3
4
5
6
7
8
|
<script> 'use strict'; if(window.confirm('ゲームを開始しますか？')) { window.alert('スタート'); } else { window.alert('あなや'); };</script> |
- if(true)の式
<script> if(true) { console.log('はじめよう'); } else { console.log('あなや')}; </script>この場合はコンソール内にtrueの結果が出力されるだけでアラートは出現しない また、条件がfalseの時にすることがなければ、elese以降は省略することもできる
window.prompt(’ヘルプを見ますか？’)
→()ないのテキストなどのメッセージと、ユーザーがテキスト入力できるテキストフィールドが一緒に表示されるようになっている
→このテキストフィールドに入力した内容はユーザーがOKをクリックした時にだけリターンとして返ってくる。キャンセルをクリックしても何も起こらない
その中でいろいろなことが気になってしまう性格でして（右京さん）
var(変数)との比較-なぜブロックスコープ（let・const）が重宝されるのか？について気になりChatGPTに聞いてみました。
varって確かあったよね…とか古いっていうのはなんとなく知っているレベルで
let/constはブロックスコープだからこそ良い！みたいなことを聞くけど、正直ブロックスコープ？となって理解できてなかった
varは関数スコープだから…って言われるけど関数スコープの方がブロック以上の範囲使えて便利じゃん！って個人的に思っていたけど、どうやら違くて。
逆にそれが
・どこでvarの変数宣言しているかわからない
・変数書き換えると全部変わっちゃう
とのことでコード書く時に色々危ういみたい。
だから保守性だったりコードを書く上での安全性を確保すると考えるとlet/constを使うのが正解みたい。へ〜〜〜〜って感じ。忘れないようにしなきゃ。
以下がChatGPT先生の解説です↓↓
いい質問！確かに var の 関数スコープ だと、広い範囲で変数を使えるから「便利そう」に見えるよね。
でも、逆にそれが バグの原因になりやすい んだ。
なぜブロックスコープ（let・const）が重宝されるのか？
① 予期しない上書きを防げる（安全性UP）
var は 関数スコープ だから、ブロック {} の外からもアクセスできてしまうんだ。
“`
var num = 10;
if (true) {
var num = 20; // 同じ変数名を使ってしまった！
}
console.log(num); // 20 （意図せず上書きされる）
“`
➡ これ、num を 上書きしたつもりがないのに上書きされちゃう んだ💦
➡ これが原因で バグを生みやすい から、ブロックスコープの let や const が好まれる。
“`
let count = 10;
if (true) { let count = 20; // これは別の変数（外の `count` には影響しない）
} console.log(count); // 10 （外の変数はそのまま！）
“`
➡ let や const を使えば ブロックごとに独立した変数を持てる から、安全にコーディングできる✨
② 変数の意図が明確になる
var だと どこで定義された変数か分かりにくくなる ことがある。
“`
function example() {
if (true) {
var x = 100; } console.log(x); // 100 （ブロックの外でも使えてしまう）
} example();
“`
➡ if の中だけで使いたい変数が、関数全体に影響を与えてしまう！😱
でも、let を使えば…
“`
function example() {
if (true) {
let x = 100;
} console.log(x); // エラー（ブロックの外では使えない！）
}
example();
“`
➡ 変数 x は ブロック内だけで使われることが明確になる から、バグを防げる👍
③ ホイスティングの問題を防げる
var の変数は ホイスティング（巻き上げ） されてしまうから、意図しない動作になりやすい。
“`
console.log(a); // undefined（エラーにならない）
var a = 5;
“`
➡ var は 宣言だけが関数の先頭に移動 するから、undefined になる。
でも、let や const を使えば 使う前にエラーを出してくれる から、バグを防げる！
“`
console.log(b); // エラー！（使う前に定義しないとダメ）
let b = 5;
“`
まとめ
🔹 var は便利そうに見えるけど…
❌ 意図せず上書きされる可能性がある
❌ どこで使われるのか分かりにくくなる
❌ ホイスティングでバグが発生しやすい
🔹 let や const なら…
✅ ブロックごとに変数を管理できる
✅ 変数のスコープが明確になる
✅ ホイスティングの問題が防げる
➡ だから、今は let や const を使うのが基本！ 🎉