JavaScriptサンプルコード集24選｜Webサイトで使える例

JavaScriptのサンプルコードを、ボタン・画像・メニュー・タブ・時計・フォームなど、Webサイトでよく使う機能ごとに24個まとめました。どのコードもHTMLファイルに貼り付けてブラウザで開くだけで動き、2026年9月時点のブラウザ（Chromeと同じエンジンのChromium）で動作を確認しています。まず「サンプルコードの動かし方」で準備をしてから、作りたい機能のコードを試してみてください。

コードは、今のWebサイト制作で使われている書き方（const・addEventListener・textContentなど）で統一しています。

サンプルコードの動かし方

JavaScriptは、ソフトをインストールしなくてもブラウザだけで動かせます。次の手順で試してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptサンプル</title>
  <style>
    /* CSSがあるサンプルは、ここに貼り付ける */
  </style>
</head>
<body>
  <!-- ここにサンプルのHTMLを貼り付ける -->

  <script>
    // ここにサンプルのJavaScriptを貼り付ける
  </script>
</body>
</html>

JavaScriptを動かす方法をもう少し詳しく知りたい方は「JavaScriptのインストールは不要？動かすために知るべきたった1つのこと」も参考にしてください。

JavaScriptでWebサイトにできること（サンプル一覧）

このページで紹介するサンプルを、用途別にまとめました。作りたい機能から探してください。

用途	サンプル	主に使う書き方
文字・ボタン	1. 文字を変える／2. 色と太さを切り替える／3. 入力した名前を表示／4. 文字数カウンター	textContent、classList、value
画像	5. 画像の切り替え／6. 拡大・縮小／7. 回転／8. スライドショー	src、style、setInterval
サイトのUI	9. ハンバーガーメニュー／10. タブ／11. アコーディオン／12. モーダル／13. ページトップへ戻る／14. ダークモード	classList、hidden、dialog、scrollTo、localStorage
日付・時間	15. 今日の日付／16. 時計／17. カウントダウン	Date、setInterval
フォーム	18. 入力チェック／19. パスワード表示切り替え	submitイベント、validity
ページ移動	20. 前のページに戻る／21. 再読み込み／22. 新しいタブで開く	history、location、window.open
作品例	23. おみくじ／24. ToDoリスト	Math.random、createElement

文字・ボタンのサンプル

まずは、ボタンを押したら文字や見た目が変わる基本のサンプルです。ほかのサンプルもすべて「要素を取得する→イベント（クリックなど）を登録する→中身や見た目を変える」という同じ流れでできています。

1. ボタンを押して文字を変える

ボタンをクリックすると、段落の文字が変わります。getElementByIdで要素を取得し、addEventListenerでクリックしたときの処理を登録します。

HTML

<p id="message">ボタンを押してください</p>
<button type="button" id="changeBtn">文字を変える</button>

JavaScript

const message = document.getElementById('message');
const changeBtn = document.getElementById('changeBtn');

changeBtn.addEventListener('click', () => {
  message.textContent = 'こんにちは、JavaScript！';
});

2. 文字の色と太さを切り替える

ボタンを押すたびに、文字の色と太さが切り替わります。見た目はCSSのclassにまとめておき、JavaScriptではclassList.toggleでclassを付けたり外したりします。

CSS

.highlight {
  color: #d93025;
  font-weight: bold;
}

HTML

<p id="text">この文字の見た目が変わります</p>
<button type="button" id="styleBtn">色と太さを切り替える</button>

JavaScript

const text = document.getElementById('text');

document.getElementById('styleBtn').addEventListener('click', () => {
  text.classList.toggle('highlight');
});

JavaScriptで直接指定する場合はtext.style.color = 'purple';、text.style.fontWeight = 'bold';のように書きます。CSSのfont-weightは、JavaScriptではfontWeight（ハイフンを消して次の文字を大文字）になる点に注意しましょう。

3. 入力した名前を表示する

テキストボックスに入力した名前を使って、あいさつ文を表示します。入力値はvalueで取り出せます。

HTML

<input type="text" id="nameInput" placeholder="名前を入力">
<button type="button" id="greetBtn">あいさつする</button>
<p id="greeting"></p>

JavaScript

const nameInput = document.getElementById('nameInput');
const greeting = document.getElementById('greeting');

document.getElementById('greetBtn').addEventListener('click', () => {
  const name = nameInput.value.trim();
  greeting.textContent = name ? `${name}さん、こんにちは！` : '名前を入力してください';
});

入力された文字を表示するときは、innerHTMLではなくtextContentを使います。innerHTMLに入力値をそのまま入れると、HTMLやスクリプトとして解釈されてしまい、セキュリティ上の問題（クロスサイトスクリプティング）につながるためです。

4. 文字数カウンター

テキストエリアに入力するたびに、文字数を表示します。inputイベントは、入力内容が変わるたびに実行されます。

HTML

<textarea id="comment" rows="4" maxlength="140"></textarea>
<p><span id="count">0</span> / 140文字</p>

JavaScript

const comment = document.getElementById('comment');
const count = document.getElementById('count');

comment.addEventListener('input', () => {
  count.textContent = comment.value.length;
});

lengthは、絵文字など一部の文字を2文字として数えます。SNSの投稿画面のような厳密な文字数が必要な場合は、数え方を調整しましょう。

画像のサンプル

画像の切り替え・拡大・回転・スライドショーのサンプルです。images/cat.jpgなどの画像パスは、手元にある画像のファイル名に書き換えてください。

5. ボタンで画像を切り替える

ボタンを押すたびに画像が切り替わります。src（画像のパス）と一緒にalt（画像の説明）も書き換えるのがポイントです。

HTML

<img id="photo" src="images/cat.jpg" alt="猫の写真" width="300">
<button type="button" id="swapBtn">画像を切り替える</button>

JavaScript

const photo = document.getElementById('photo');
const images = [
  { src: 'images/cat.jpg', alt: '猫の写真' },
  { src: 'images/dog.jpg', alt: '犬の写真' },
];
let current = 0;

document.getElementById('swapBtn').addEventListener('click', () => {
  current = (current + 1) % images.length;
  photo.src = images[current].src;
  photo.alt = images[current].alt;
});

%は割り算の余りを求める記号です。最後の画像の次は0番目に戻るので、画像を何枚に増やしても同じコードで順番に切り替わります。

6. 画像を拡大・縮小する

「拡大」「縮小」ボタンで、画像の幅を50pxずつ変えます。Math.minとMath.maxで、大きさを100〜600pxの範囲に収めています。

HTML

<img id="zoomImg" src="images/cat.jpg" alt="猫の写真" width="300">
<button type="button" id="zoomInBtn">拡大</button>
<button type="button" id="zoomOutBtn">縮小</button>

JavaScript

const zoomImg = document.getElementById('zoomImg');
let width = 300;

document.getElementById('zoomInBtn').addEventListener('click', () => {
  width = Math.min(width + 50, 600);
  zoomImg.style.width = `${width}px`;
});

document.getElementById('zoomOutBtn').addEventListener('click', () => {
  width = Math.max(width - 50, 100);
  zoomImg.style.width = `${width}px`;
});

7. 画像を回転させる

ボタンを押すたびに、画像が90度ずつ回転します。CSSのtransitionを付けると、回転がなめらかになります。

CSS

#rotateImg {
  transition: transform 0.3s;
}

HTML

<img id="rotateImg" src="images/cat.jpg" alt="猫の写真" width="200">
<button type="button" id="rotateBtn">90度回転</button>

JavaScript

const rotateImg = document.getElementById('rotateImg');
let angle = 0;

document.getElementById('rotateBtn').addEventListener('click', () => {
  angle += 90;
  rotateImg.style.transform = `rotate(${angle}deg)`;
});

8. スライドショー（前へ・次へ・自動再生）

「前へ」「次へ」ボタンと、3秒ごとの自動再生があるスライドショーです。表示する画像の番号を1つの関数showSlideで管理しています。

HTML

<img id="slide" src="images/slide1.jpg" alt="スライド1" width="400">
<div>
  <button type="button" id="prevBtn">前へ</button>
  <button type="button" id="nextBtn">次へ</button>
</div>

JavaScript

const slides = ['images/slide1.jpg', 'images/slide2.jpg', 'images/slide3.jpg'];
const slide = document.getElementById('slide');
let index = 0;

function showSlide(n) {
  index = (n + slides.length) % slides.length;
  slide.src = slides[index];
  slide.alt = `スライド${index + 1}`;
}

document.getElementById('prevBtn').addEventListener('click', () => showSlide(index - 1));
document.getElementById('nextBtn').addEventListener('click', () => showSlide(index + 1));

// 3秒（3000ミリ秒）ごとに次のスライドへ
setInterval(() => showSlide(index + 1), 3000);

Webサイトでよく使うUIのサンプル

ハンバーガーメニューやタブ、モーダルなど、Webサイト制作でよく使う部品のサンプルです。見た目はCSSのclassで決め、JavaScriptではclassの付け外しだけを行う形にすると、コードが短くわかりやすくなります。

9. ハンバーガーメニューを開閉する

「メニュー」ボタンでナビゲーションを開いたり閉じたりします。aria-expandedは、読み上げソフトなどにメニューが開いているかを伝えるための属性です。

CSS

.nav {
  display: none;
}
.nav.is-open {
  display: block;
}

HTML

<button type="button" id="menuBtn" aria-expanded="false" aria-controls="globalNav">メニュー</button>
<nav id="globalNav" class="nav">
  <ul>
    <li><a href="#about">私たちについて</a></li>
    <li><a href="#service">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

JavaScript

const menuBtn = document.getElementById('menuBtn');
const globalNav = document.getElementById('globalNav');

menuBtn.addEventListener('click', () => {
  const isOpen = globalNav.classList.toggle('is-open');
  menuBtn.setAttribute('aria-expanded', isOpen);
});

10. タブを切り替える

タブをクリックすると、対応する内容だけが表示されます。どのタブがどの内容に対応するかは、HTMLのdata-target属性で指定しています。

CSS

.panel {
  display: none;
}
.panel.is-active {
  display: block;
}
.tab.is-active {
  font-weight: bold;
  border-bottom: 2px solid #1a73e8;
}

HTML

<div>
  <button type="button" class="tab is-active" data-target="panel1">概要</button>
  <button type="button" class="tab" data-target="panel2">料金</button>
  <button type="button" class="tab" data-target="panel3">よくある質問</button>
</div>
<div id="panel1" class="panel is-active">概要の内容</div>
<div id="panel2" class="panel">料金の内容</div>
<div id="panel3" class="panel">よくある質問の内容</div>

JavaScript

const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    tabs.forEach((t) => t.classList.remove('is-active'));
    panels.forEach((p) => p.classList.remove('is-active'));
    tab.classList.add('is-active');
    document.getElementById(tab.dataset.target).classList.add('is-active');
  });
});

11. アコーディオン（よくある質問の開閉）

質問をクリックすると答えが開き、もう一度クリックすると閉じます。hidden属性で答えの表示・非表示を切り替えています。

HTML

<div class="faq">
  <button type="button" class="faq-q" aria-expanded="false">JavaScriptは無料で使えますか？</button>
  <div class="faq-a" hidden>はい。ブラウザに最初から入っているので、追加の費用なしで使えます。</div>
</div>
<div class="faq">
  <button type="button" class="faq-q" aria-expanded="false">何から勉強すればいいですか？</button>
  <div class="faq-a" hidden>HTMLとCSSの基本を学んでから、このページのサンプルを動かしてみるのがおすすめです。</div>
</div>

JavaScript

document.querySelectorAll('.faq-q').forEach((question) => {
  question.addEventListener('click', () => {
    const answer = question.nextElementSibling;
    const isOpen = question.getAttribute('aria-expanded') === 'true';
    question.setAttribute('aria-expanded', !isOpen);
    answer.hidden = isOpen;
  });
});

単純な開閉だけなら、HTMLの<details>と<summary>を使うとJavaScriptなしでも作れます。

12. モーダルウィンドウを表示する

ボタンを押すと、画面の手前に小さなウィンドウ（モーダル）を表示します。HTMLの<dialog>要素を使うと、showModal()で開き、close()で閉じるだけで作れます。Escキーでも閉じられます。

HTML

<button type="button" id="openModal">詳細を見る</button>
<dialog id="modal">
  <p>ここにモーダルの内容が入ります。</p>
  <button type="button" id="closeModal">閉じる</button>
</dialog>

JavaScript

const modal = document.getElementById('modal');

document.getElementById('openModal').addEventListener('click', () => {
  modal.showModal();
});

document.getElementById('closeModal').addEventListener('click', () => {
  modal.close();
});

確認だけならalert('ボタンが押されました');や、OK／キャンセルを選べるconfirm()も使えますが、見た目を自由に変えられるのは<dialog>です。

13. ページトップへ戻るボタン

300px以上スクロールすると右下にボタンが表示され、クリックするとページの先頭までなめらかに戻ります。

CSS

.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

HTML

<button type="button" id="toTop" class="to-top" hidden>↑ トップへ</button>

JavaScript

const toTop = document.getElementById('toTop');

window.addEventListener('scroll', () => {
  toTop.hidden = window.scrollY < 300;
});

toTop.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

動きを確認するときは、スクロールできるくらい長いページに貼り付けてください。

14. ダークモードを切り替える（設定を保存）

ボタンでダークモードとライトモードを切り替えます。localStorageに設定を保存しているので、ページを開き直しても前回の設定が残ります。

CSS

body.dark {
  background-color: #121212;
  color: #f1f1f1;
}

HTML

<button type="button" id="themeBtn">ダークモードにする</button>

JavaScript

const themeBtn = document.getElementById('themeBtn');

function applyTheme(isDark) {
  document.body.classList.toggle('dark', isDark);
  themeBtn.textContent = isDark ? 'ライトモードにする' : 'ダークモードにする';
}

// 前回選んだ設定を読み込む
applyTheme(localStorage.getItem('theme') === 'dark');

themeBtn.addEventListener('click', () => {
  const isDark = !document.body.classList.contains('dark');
  applyTheme(isDark);
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

日付・時間のサンプル

日付や時刻はDateを使って取得します。月は0から数える（1月が0、12月が11）点に注意しましょう。

15. 今日の日付と曜日を表示する

実行環境のローカル日付と曜日を「2026年9月28日（月）」の形で表示します。利用者の地域が異なると、同じ瞬間でも表示される日付が異なる場合があります。

HTML

<p>今日は<span id="today"></span>です。</p>

JavaScript

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月は0から始まるので1を足す
const date = now.getDate();
const days = ['日', '月', '火', '水', '木', '金', '土'];
const day = days[now.getDay()];

document.getElementById('today').textContent = `${year}年${month}月${date}日（${day}）`;

16. リアルタイムの時計

1秒ごとに現在時刻を更新して「09:05:03」の形で表示します。padStartで、1桁の数字の前に0を付けて2桁にしています。

HTML

<p id="clock"></p>

JavaScript

const clock = document.getElementById('clock');

function updateClock() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2, '0');
  const m = String(now.getMinutes()).padStart(2, '0');
  const s = String(now.getSeconds()).padStart(2, '0');
  clock.textContent = `${h}:${m}:${s}`;
}

updateClock();
setInterval(updateClock, 1000);

17. イベントまでの残り日数（カウントダウン）

指定した日まであと何日かを表示します。日付どうしを引き算するとミリ秒の差が出るので、1日のミリ秒（1000×60×60×24）で割って日数にします。

HTML

<p>イベントまであと<span id="daysLeft"></span>日</p>

JavaScript

const eventDate = new Date(2026, 11, 24); // 2026年12月24日（12月は11）
const today = new Date();
today.setHours(0, 0, 0, 0); // 今日の0時にそろえる

const daysLeft = Math.round((eventDate - today) / (1000 * 60 * 60 * 24));

document.getElementById('daysLeft').textContent = Math.max(daysLeft, 0);

イベントの日付はnew Date(年, 月-1, 日)の形で書き換えてください。当日と過ぎた日は0日と表示されます。

このカウントダウンは、実行環境のローカル日付を基準にした簡易例です。夏時間がある地域では1日の経過時間が24時間とは限らず、日本時間を固定の基準にする仕様にもそのままは対応していません。入力日が前日になる、UTCへ変換すると日付が変わる場合は、JavaScriptの日付ずれとタイムゾーンの実例で、日付だけの値と日時の扱いを確認してください。

フォームのサンプル

お問い合わせフォームなどで使う、入力チェックとパスワード表示のサンプルです。

18. フォームの入力チェック

送信ボタンを押したときに、メールアドレスが空でないか、形式が正しいかをチェックしてメッセージを表示します。type="email"の入力欄は、ブラウザが形式（「@」があるかなど）を判定し、その結果をvalidity.validで受け取れます。

CSS

.form-message {
  color: #d93025;
}

HTML

<form id="contactForm" novalidate>
  <label for="email">メールアドレス</label>
  <input type="email" id="email">
  <button type="submit">送信</button>
  <p id="formMessage" class="form-message"></p>
</form>

JavaScript

const contactForm = document.getElementById('contactForm');
const email = document.getElementById('email');
const formMessage = document.getElementById('formMessage');

contactForm.addEventListener('submit', (event) => {
  event.preventDefault(); // サンプルなので実際には送信しない

  if (email.value.trim() === '') {
    formMessage.textContent = 'メールアドレスを入力してください';
  } else if (!email.validity.valid) {
    formMessage.textContent = 'メールアドレスの形式が正しくありません';
  } else {
    formMessage.textContent = '入力OKです（サンプルのため送信はしません）';
  }
});

ブラウザ側のチェックは、入力ミスを防ぐためのものです。実際にデータを受け取るサーバー側でも、同じようにチェックする必要があります。

19. パスワードの表示・非表示を切り替える

ボタンを押すと、パスワード欄の文字を表示したり隠したりできます。入力欄のtypeをpasswordとtextで切り替えています。

HTML

<input type="password" id="password">
<button type="button" id="toggleBtn">表示する</button>

JavaScript

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
  const isHidden = password.type === 'password';
  password.type = isHidden ? 'text' : 'password';
  toggleBtn.textContent = isHidden ? '隠す' : '表示する';
});

ページ移動・リンクのサンプル

前のページに戻る、再読み込みする、新しいタブで開くといった、ページ全体に関わる操作のサンプルです。

20. 前のページに戻るボタン

history.back()で、ブラウザの「戻る」と同じ動きをします。1つ先のページに進むときはhistory.forward()を使います。

HTML

<button type="button" id="backBtn">前のページに戻る</button>

JavaScript

document.getElementById('backBtn').addEventListener('click', () => {
  history.back();
});

ほかのページから移動してきたときに動きます。ページを直接開いた場合は、戻る先がないので何も起きません。

21. ページを再読み込みするボタン

location.reload()で、今のページを読み込み直します。

HTML

<button type="button" id="reloadBtn">ページを更新する</button>

JavaScript

document.getElementById('reloadBtn').addEventListener('click', () => {
  location.reload();
});

22. リンクを新しいタブで開く

リンクを新しいタブで開くだけなら、JavaScriptは不要です。HTMLのtarget="_blank"を使います。JavaScriptで開く場合はwindow.openを使います。

HTML

<!-- HTMLだけで新しいタブを開く -->
<a href="https://kredo.jp/media/" target="_blank" rel="noopener noreferrer">KredoBlogを新しいタブで開く</a>

<!-- JavaScriptで開く -->
<button type="button" id="openTabBtn">新しいタブで開く</button>

JavaScript

document.getElementById('openTabBtn').addEventListener('click', () => {
  window.open('https://kredo.jp/media/', '_blank', 'noopener');
});

noopenerは、開いた先のページから元のページを操作されないようにするための指定です。なお、window.openはクリックなどの操作から呼び出さないと、ブラウザにポップアップとしてブロックされることがあります。

作品例：組み合わせて作るミニアプリ

ここまでの書き方を組み合わせると、小さなアプリも作れます。学習の成果として作品にしやすい2つの例です。

23. おみくじ

ボタンを押すと、ランダムにおみくじの結果を表示します。Math.random()で0以上1未満の数をつくり、配列の番号に変換しています。

HTML

<button type="button" id="omikujiBtn">おみくじを引く</button>
<p id="omikujiResult"></p>

JavaScript

const results = ['大吉', '中吉', '小吉', '吉', '末吉', '凶'];

document.getElementById('omikujiBtn').addEventListener('click', () => {
  const index = Math.floor(Math.random() * results.length);
  document.getElementById('omikujiResult').textContent = `結果は「${results[index]}」です`;
});

24. ToDoリスト（追加・完了・削除）

やることを入力して追加し、文字をクリックすると完了（取り消し線）、「削除」ボタンで消せるToDoリストです。createElementで新しい要素を作ってリストに追加しています。

CSS

.done {
  text-decoration: line-through;
  color: #888;
}

HTML

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="やることを入力" required>
  <button type="submit">追加</button>
</form>
<ul id="todoList"></ul>

JavaScript

const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

todoForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const text = todoInput.value.trim();
  if (!text) return;

  const li = document.createElement('li');

  const label = document.createElement('span');
  label.textContent = text;
  label.addEventListener('click', () => li.classList.toggle('done'));

  const deleteBtn = document.createElement('button');
  deleteBtn.type = 'button';
  deleteBtn.textContent = '削除';
  deleteBtn.addEventListener('click', () => li.remove());

  li.append(label, ' ', deleteBtn);
  todoList.append(li);
  todoInput.value = '';
});

サンプル14のlocalStorageと組み合わせれば、ページを閉じてもリストが残るように改造できます。自分で機能を足していくと、ポートフォリオに載せられる作品になります。

フォーム・配列・画面更新を組み合わせた作品に進むなら、保存と編集ができる学習記録アプリの制作課題を試してみてください。完成コードを動かし、30分を45分へ編集して再読み込み後も残るか、IDとlocalStorageの仕組みを追って学べます。

古いサンプルコードを見るときの注意点

ネット上のJavaScriptのサンプルには、今はおすすめされない書き方のものも残っています。次のような書き方を見かけたら、右の列の書き方に置き換えて考えましょう。

古い書き方	問題点	今の書き方
document.write()	MDNで使用が強く非推奨とされている。ページの内容が消えるなど予想外の動きをすることがある	textContent、createElementとappend
<script language="JavaScript">	language属性はHTMLの仕様で廃止された書き方	<script>だけでよい
HTMLにonclick="関数名()"を書く	HTMLとJavaScriptが混ざり、管理しにくい	addEventListener('click', ...)
navigator.appVersionやnavigator.platformでブラウザ・OSを判別	MDNで「信頼できず、推奨されない」とされている	必要な機能が使えるかを直接調べる（機能検出）
varで変数を作る	同じ名前で作り直せてしまい、ミスに気づきにくい	変えない値はconst、変える値はlet
全角の引用符（” ’）が混ざったコード	JavaScriptでは文字列の記号として認識されず、エラーになる	半角の'か"で囲む

サンプルコードを自分のスキルにする練習方法

サンプルは、貼り付けて動かすだけでは身につきにくいものです。次の順番で手を動かすと、自分で書ける力につながります。

練習用の学習サイトを探している方は「JavaScriptの学習・練習ができるサイトまとめ」も参考にしてください。

入力欄や保存機能を組み合わせたら、正常な値だけでなく、空欄・0・上限を超える値も試してみてください。学習時間メモで練習するアプリのテスト方法では、12ケースの確認結果と修正前後の教材を公開しています。

英語でプログラミングを学ぶという選択肢

このページのコードに出てくるaddEventListener（イベントの聞き手を追加する）、textContent（文字の中身）、classList.toggle（classを切り替える）は、どれも英語の意味がそのまま名前になっています。エラーメッセージや公式ドキュメントも英語が中心なので、英語がわかるとコードの意味もエラーの原因もつかみやすくなります。

Kredo IT留学は、フィリピン・セブ島でITレッスンをすべて英語で受ける留学です。1日8時間（英語のマンツーマンレッスン4時間＋ITのグループレッスン4時間）で、英語とITを同時に学びます。公式サイトによると、受講生の92%が英語もITも未経験です（2026年9月時点の掲載）。

サンプルを動かしてみて「もっと本格的に作れるようになりたい」と思ったら、まずは無料カウンセリングで、自分に合う期間やコースを相談してみてください。

Kredo IT留学の無料カウンセリングを予約する

IT留学について詳しく知りたい方は「IT留学とは？AI時代の費用・おすすめ国・選び方」をご覧ください。

JavaScriptのサンプルコードについてよくある質問

サンプルコードをコピペしても動きません。

よくある原因は、(1)<script>が要素より前にあり、要素がまだ読み込まれていない、(2)HTMLのidとJavaScriptのgetElementByIdの名前が違う、(3)全角の記号やスペースが混ざっている、の3つです。開発者ツールのConsoleに出るエラーの行番号を確認しましょう。

JavaScriptを別のファイルに分けるには？

JavaScriptを「script.js」などのファイルに保存し、HTMLの<head>内に<script src="script.js" defer></script>と書きます。deferを付けると、HTMLを読み込み終わってから実行されます。

JavaScriptとJavaは同じものですか？

いいえ、名前は似ていますが別のプログラミング言語です。JavaScriptは主にブラウザで動き、Webページに動きを付けるために使われます。

JavaScriptで作れる作品の例は？

このページのおみくじやToDoリストのほか、時計、クイズ、タイマー、簡単なゲームなどがよく作られます。まずは小さな作品を完成させ、機能を少しずつ足していくのがおすすめです。

jQueryを使ったサンプルとの違いは？

このページのサンプルは、ライブラリを使わない素のJavaScript（Vanilla JavaScriptとも呼ばれます）で書いています。今のブラウザでは、querySelectorやclassListなど、jQueryでよく使われていた機能の多くを素のJavaScriptで書けます。

写真風表紙と水彩図は、説明用にAI生成したイメージです。実在の受講生・授業や、コードの実行画面を示すものではありません。

まとめ：サンプルを動かし、変えて、自分のコードにしよう

JavaScriptのサンプルコードは、「要素を取得する→イベントを登録する→中身や見た目を変える」という同じ流れでできています。まずは気になるサンプルを1つ動かし、数字や文言を変えて、どこが何に対応しているのかを確かめてみてください。いくつかを組み合わせれば、自分だけの作品も作れます。