JavaScriptとは（Javaとは違う！）
JavaScriptは、Webページに「動き」を加えるためのプログラミング言語だよ。ボタンをクリックしたときの動作、スクロールに合わせたアニメーション、フォームの入力チェックなど、Webサイトで「動いている」部分のほとんどはJavaScriptで作られているんだ。
HTML・CSS・JavaScriptの役割分担
Webページは3つの言語で構成されていて、それぞれ役割が違うよ。
- HTML：ページの骨組み（見出し、段落、画像の配置など構造を決める）
- CSS：ページのデザイン（色、フォント、レイアウト、余白などの見た目を決める）
- JavaScript：ページの動作（クリックしたら何かが起きる、スクロールでアニメーションするなどの振る舞いを決める）
家に例えるなら、HTMLが柱や壁の構造、CSSが壁紙やインテリア、JavaScriptが電気や水道のスイッチ。スイッチを押したら照明がつく、蛇口をひねったら水が出る、そういう「操作に対する反応」を作るのがJavaScriptの仕事なんだ。
Java と JavaScript は全くの別物！
名前がめちゃくちゃ似ているけど、JavaとJavaScriptは完全に別の言語だよ。例えるなら「ハム」と「ハムスター」くらい違う。Javaはサーバーサイドやスマホアプリ開発に使われる言語で、JavaScriptはWebブラウザで動く言語。歴史的な経緯で名前が似ちゃっただけなので、混同しないように注意しよう！
JavaScriptで何ができるの？
具体的にJavaScriptでできることを挙げると、こんなにたくさんあるよ。
- ボタンをクリックしたらメニューが開く
- スクロールするとフワッと要素が現れる（フェードインアニメーション）
- フォームに入力された内容をリアルタイムでチェック（バリデーション）
- 画像のスライドショーやカルーセル
- ページ遷移なしでデータを取得・表示（Ajax通信）
- ダークモードの切り替え
- 無限スクロール（TwitterやInstagram風）
- 通知のポップアップ表示
ブログ運営で言えば、読者の利便性を上げるUI（トップへ戻るボタン、目次のスムーズスクロール、モバイルメニューなど）のほとんどはJavaScriptで実装されているんだ。つまり、JavaScriptが書ければブログのカスタマイズが自在にできるようになるよ。
基本構文を覚えよう
まずはJavaScriptの基本的な書き方を覚えよう。ここでは最低限知っておくべき構文を紹介するよ。
変数の宣言（let と const）
変数はデータを入れておく箱のようなもの。JavaScriptではletとconstを使って宣言するよ。
let userName = "腎臓ソーセージ";
userName = "じんぞう";
const siteName = "腎臓ソーセージがまとめる！";
関数（function）
関数は「処理をまとめたもの」。何度も同じ処理を書かなくて済むようになるよ。
function greet(name) {
return "こんにちは、" + name + "さん！";
}
const greet2 = (name) => {
return `こんにちは、${name}さん！`;
};
console.log(greet("ヘタリーマン"));
条件分岐（if文）
「もし〜なら〜する」という処理を書くときに使うよ。
const age = 25;
if (age >= 20) {
console.log("成人です");
} else if (age >= 18) {
console.log("18歳以上です");
} else {
console.log("未成年です");
}
繰り返し（for文）
同じ処理を何度も繰り返したいときに使うよ。
for (let i = 0; i < 5; i++) {
console.log(`${i + 1}回目のループ`);
}
const fruits = ["りんご", "みかん", "バナナ"];
for (const fruit of fruits) {
console.log(fruit);
}
配列とオブジェクト
複数のデータをまとめて管理する方法だよ。
const skills = ["HTML", "CSS", "JavaScript"];
console.log(skills[0]);
console.log(skills.length);
const user = {
name: "腎臓ソーセージ",
age: 30,
job: "ブロガー",
skills: ["HTML", "CSS", "JavaScript"]
};
console.log(user.name);
console.log(user.skills[2]);
ブログで使える汎用サンプルコード集
ここからは、ブログやWebサイトにそのままコピペで使えるサンプルコードを紹介するよ。全部解説付きだから、カスタマイズもしやすいはず！
1. スクロールでトップに戻るボタン
ページを下にスクロールすると右下に「上に戻る」ボタンが表示されるやつ。ほぼすべてのブログに実装されている定番機能だよ。
const scrollTopBtn = document.getElementById("scrollTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
scrollTopBtn.classList.add("visible");
} else {
scrollTopBtn.classList.remove("visible");
}
});
scrollTopBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
2. ハンバーガーメニュー（モバイル対応）
スマホ表示でよく見る三本線のメニュー。タップするとナビゲーションが開閉するやつだよ。
const menuToggle = document.querySelector(".menu-toggle");
const globalNav = document.querySelector(".global-nav");
menuToggle.addEventListener("click", () => {
menuToggle.classList.toggle("active");
globalNav.classList.toggle("open");
});
document.querySelectorAll(".global-nav a").forEach(link => {
link.addEventListener("click", () => {
menuToggle.classList.remove("active");
globalNav.classList.remove("open");
});
});
3. スムーズスクロール
ページ内リンク（目次など）をクリックしたとき、瞬間移動ではなくスーッと移動するようにする機能だよ。
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
4. 画像のLazy Loading
画面に表示されるタイミングで画像を読み込む機能。ページの表示速度が爆速になるよ。SEO的にも超重要。
const lazyImages = document.querySelectorAll("img[data-src]");
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute("data-src");
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
5. アコーディオン（FAQ開閉）
よくある質問（FAQ）でよく使われる、クリックすると回答が開閉する機能だよ。
document.querySelectorAll(".accordion-header").forEach(header => {
header.addEventListener("click", () => {
const content = header.nextElementSibling;
const isOpen = content.style.maxHeight;
document.querySelectorAll(".accordion-content").forEach(c => {
c.style.maxHeight = null;
});
if (!isOpen) {
content.style.maxHeight = content.scrollHeight + "px";
}
});
});
6. モーダルウィンドウ（ポップアップ）
画面の上にオーバーレイで表示されるポップアップ。お知らせやメルマガ登録フォームなどに使えるよ。
const modal = document.getElementById("modal");
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");
openBtn.addEventListener("click", () => {
modal.style.display = "flex";
document.body.style.overflow = "hidden";
});
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
document.body.style.overflow = "";
});
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.style.display = "none";
document.body.style.overflow = "";
}
});
7. 文字数カウンター
テキストエリアに入力した文字数をリアルタイムで表示する機能。お問い合わせフォームなどに便利だよ。
const textarea = document.getElementById("message");
const counter = document.getElementById("charCount");
const maxLength = 500;
textarea.addEventListener("input", () => {
const current = textarea.value.length;
counter.textContent = `${current} / ${maxLength}文字`;
if (current > maxLength) {
counter.style.color = "red";
} else {
counter.style.color = "#666";
}
});
8. コピーボタン（URLやコードをクリップボードにコピー）
ボタンをクリックすると、指定したテキストをクリップボードにコピーできる機能。コードブロックやURLの共有に便利！
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const toast = document.getElementById("toast");
toast.textContent = "コピーしました！";
toast.classList.add("show");
setTimeout(() => toast.classList.remove("show"), 2000);
}).catch(err => {
console.error("コピーに失敗しました:", err);
});
}
document.querySelectorAll(".copy-btn").forEach(btn => {
btn.addEventListener("click", () => {
const textToCopy = btn.getAttribute("data-copy");
copyToClipboard(textToCopy);
});
});
DOM操作の基本
DOM（Document Object Model）操作とは、JavaScriptでHTMLの要素を取得したり変更したりすること。上のサンプルコードでもたくさん使ったけど、ここで改めて整理しておこう。
要素の取得
const header = document.getElementById("header");
const firstButton = document.querySelector(".btn-primary");
const allButtons = document.querySelectorAll(".btn-primary");
イベントの追加
button.addEventListener("click", () => {
console.log("ボタンがクリックされました！");
});
window.addEventListener("scroll", () => {
console.log("スクロールされました！");
});
document.addEventListener("DOMContentLoaded", () => {
console.log("ページの読み込みが完了しました！");
});
クラスの操作
const element = document.querySelector(".target");
element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active");
if (element.classList.contains("active")) {
console.log("activeクラスがあります");
}
テキスト・HTMLの書き換え
const box = document.getElementById("output");
box.textContent = "こんにちは！";
box.innerHTML = "<strong>太字のテキスト</strong>";
DOM操作のコツ
DOM操作で一番大事なのは「まず要素を取得して、それに対して何かする」という2ステップの考え方。要素を取得する方法（getElementById, querySelector）と、取得した要素に対する操作（addEventListener, classList, textContent）を組み合わせることで、大抵のことはできるようになるよ。
JavaScriptを書くのに使えるアプリ
JavaScriptを書くためのツールを紹介するよ。無料で使えるものがほとんどだから、まずは試してみよう。
| ツール名 |
料金 |
特徴 |
おすすめ度 |
| Visual Studio Code |
無料 |
Microsoft製の最強エディタ。拡張機能が豊富で、コード補完・デバッグ・Git連携なんでもできる。プロのエンジニアもほぼ全員使ってる |
★★★★★ |
| Chrome DevTools Console |
無料 |
Chrome標準搭載。F12キーで開いてConsoleタブに直接コードを入力して即実行できる。ちょっとした動作確認に最適 |
★★★★☆ |
| CodePen |
無料（Pro版あり） |
ブラウザ上でHTML・CSS・JSを書いて即実行。インストール不要で初心者に最適。作ったものをURLで共有もできる |
★★★★☆ |
| Node.js |
無料 |
ブラウザの外でもJavaScriptを動かせる実行環境。サーバーサイド開発やツール開発にも対応。npmで豊富なパッケージが使える |
★★★★☆ |
| Cursor |
無料（Pro版あり） |
AI搭載エディタ。VS Codeベースで、AIがコードを自動生成・修正してくれる。「こんな機能を追加して」と自然言語で指示できる |
★★★★★ |
初心者にまずおすすめなのはVisual Studio Codeだよ。無料で使えて、日本語の拡張機能もあるし、世界中のエンジニアが使ってるから情報も豊富。「VS Code JavaScript」で検索すれば設定方法もすぐ見つかるよ。
もしインストールが面倒なら、まずはCodePenをブラウザで開いて遊んでみるのがおすすめ。何もインストールしなくても、すぐにJavaScriptのコードを書いて動かせるから、学習のハードルが一気に下がるよ。
初心者がやりがちなミス
JavaScript初心者がハマりがちなポイントをまとめたよ。事前に知っておくだけで、無駄な時間を大幅に減らせるはず。
=== と == の違いを知らない
これは初心者がほぼ確実にハマるやつ。JavaScriptには比較演算子が2種類あるんだ。
console.log(1 == "1");
console.log(0 == false);
console.log(1 === "1");
console.log(0 === false);
非同期処理（async/await）が理解できない
JavaScriptは「非同期」が多い言語。APIからデータを取得する場合、処理が完了するのを待たずに次の行が実行されちゃうんだ。
let data;
fetch("https://api.example.com/data")
.then(response => response.json())
.then(json => { data = json; });
console.log(data);
async function getData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
getData();
console.logデバッグに頼りすぎる
console.logでデバッグするのは手軽だけど、複雑なバグにはブラウザのデバッガ（Chrome DevToolsのSourcesタブ）を使おう。ブレークポイントを設定すれば、コードの実行を途中で止めて変数の中身を確認できるよ。
デバッグのコツ
Chrome DevToolsのConsoleタブではconsole.logの代わりにconsole.table（配列やオブジェクトを表形式で表示）やconsole.group（ログをグループ化）も使えるよ。知っておくとデバッグ効率が格段に上がる！
jQueryに逃げる（まずは素のJSを学べ）
jQueryはJavaScriptのライブラリで、少ないコードでDOM操作ができる便利なツール。でも今のJavaScript（ES6以降）は十分便利になっているから、まずは素のJavaScript（Vanilla JS）を学ぶべきだよ。
- jQueryは追加のファイル読み込みが必要 → ページ速度が落ちる
- 素のJSを知らないとjQueryの中身が理解できない
- React、Vue、AngularなどのモダンフレームワークはjQueryを使わない
- 新規プロジェクトでjQueryを使うケースは年々減っている
既存サイトの保守でjQueryが使われていることはあるけど、新しく学ぶなら素のJavaScriptから始めよう。基礎ができていれば、jQueryもフレームワークもすぐ覚えられるからね。
プログラミングを本格的に学ぶなら
独学に限界を感じたら、プログラミングスクールも検討してみよう。教育訓練給付金で受講料の最大70%が補助されるスクールもあるよ
プログラミングスクールガイドを見る
