🌐 JavaScript 学習まとめ
今日は初めてJavaScriptについて学びました。
本日の内容についても自分なりにまとめみようと思います。
🔰 まずは基本のキ：JavaScriptの基礎文法
変数宣言
JavaScriptでは以下の3つの方法で変数を定義できます。
- var：古い。再宣言・再代入が可能
- let：再代用のみ可
- const：定数。再代入不可
let name = "Alice";
const age = 20;
出力とテンプレートリテラル
デバッグや動作確認でよく使うのが console.log()。
テンプレートリテラル（文字列${変数}）を使うと、文字列内に変数を埋め込めて便利。
console.log(`Hello, ${name}`);
条件分岐・ループ
if (age >= 20) {
console.log("成人です");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
📦 関数まわりの書き方いろいろ
関数宣言と関数式
function greet() {
return "Hello";
}
const sayHi = function() {
return "Hi";
};
アロー関数と即時関数
const add = (a, b) => a + b;
(function() {
console.log("即時実行される関数");
})();
🧱 オブジェクトとメソッド
JavaScriptではデータをオブジェクトとして扱うことが多いです。
const user = {
name: "Alice",
greet: function() {
return `Hi, I'm ${this.name}`;
}
};
🖼 DOM操作とイベント処理（ブラウザで動かす）
ブラウザでHTMLを操作したいときはDOM（Document Object Model）を使います。
###要素の取得
document.getElementById("main");
document.getElementsByClassName("box");
document.querySelectorAll(".item");
イベント処理
document.getElementById("btn").addEventListener("click", function() {
alert("クリックされました！");
});
その他便利なもの
- this：呼び出し元を指す
- innerHTML：HTMLの中身を取得/更新
- setAttribute, removeAttribute：属性の追加・削除
- debugger：開発者ツールで処理を止める（デバッグ用）
🔄 同期・非同期通信とAJAX
- 同期処理：上から順に処理。待ち時間があると固まる。
- 非同期処理：待ち時間の間に他の処理を実行。
📝 最後に
JavaScriptはとても柔軟で、学びやすく、奥が深い言語です。
1日でかなりの量をインプットしましたが、まずは「動かしてみる」ことが何より大事ですね。
これから実践で触れながら、少しずつ自分のモノにしていきたいと思います！