1. JavaScriptを書いて動かしてみよう

JavaScriptとはウェブページに動きを与えるためのプログラム言語で、ブラウザ上で動作します。HTMLやCSSが主にウェブページの構造や見た目を担当するのに対し、JavaScriptはクリックやスクロール、フォーム入力などユーザーの操作に応じてページの内容を動的に変化させる役割を果たします。JavaScriptを使うことで、ユーザーがより使いやすく、楽しく操作できるインタラクティブなウェブサイトを作ることができます。

開発環境の準備については、こちらの記事「【初心者向け】プログラミングで副業・転職に挑戦！はじめの一歩ガイド」で解説しているので、ぜひご確認ください。

はじめてのJavaScriptコードを書いてみましょう。ここでは簡単なコード例として、ブラウザのコンソールにメッセージを表示するconsole.logと、ユーザーにポップアップでメッセージを伝えるalertを使ったコードを紹介します。まずはこれらのコードを実際に書いて動作を確認し、JavaScriptがどのように動くのかを体験してみましょう。

コード例で使用している関数の説明：

• console.log：ブラウザの開発者ツール内にあるコンソールという場所にメッセージを表示する関数。動作の確認やデバッグ時に便利。
• alert：画面上にポップアップ形式でユーザーに直接メッセージを伝える関数。注意喚起や確認を促すために使用。

コード例：

console.log('JavaScriptをはじめよう！');
alert('こんにちは、JavaScript！');

2. HTMLと組み合わせて使ってみる

JavaScriptとHTMLを組み合わせることで、静的なウェブページに動きを加え、ユーザーの操作に応じた動的な表現が可能になります。例えば、ボタンをクリックした際にメッセージを表示したり、フォーム入力時の内容をリアルタイムでチェックしたりすることができます。HTMLはページの構造を担当し、JavaScriptはその構造に動的な機能を付与する役割を持っています。

イベントハンドラー（onclickなど）を使って、ボタンをクリックした時などのユーザー操作に反応してJavaScriptのコードが実行される仕組みを体験しましょう。実際にコードを書きながら、イベントハンドラーを設定する方法や、それがどのように動作するかを理解できます。

※イベントハンドラーとは、特定のイベント（クリックやマウスオーバーなど）が起きたときに実行される関数のことです。JavaScriptを使うことで、ユーザーの操作に応じてウェブページ上で動的な動きを作り出すことができます。

よく使われるイベントハンドラーの例：

• onclick：要素がクリックされた時に実行
• onmouseover：マウスカーソルが要素の上に重なった時に実行
• onmouseout：マウスカーソルが要素から離れた時に実行
• onchange：フォーム要素の値が変化した時に実行
• onsubmit：フォームが送信された時に実行

コード例：

<button onclick="sayHello()">クリックして！</button>

<script>
function sayHello() {
  alert('ボタンがクリックされました！');
}
</script>

※ここで使っているsayHelloという関数は、自分自身で作成したオリジナルの関数です。このようにJavaScriptでは目的に応じて自由に関数を作ることができます。

3. 基礎的なJavaScriptの概念を理解する

変数とは何か？

• 値を保存し、後から繰り返し利用できる「入れ物」のような仕組み。
• letとconstの違い
  -let：値を後で変更できる変数。
  -const：値を一度設定したら変更できない定数。

関数とは何か？

• 関数は処理をひとまとめにし、呼び出すだけでその処理を実行できる仕組み。
• 関数を作るメリット
  -コードの再利用性を高める
  -コードを整理して読みやすくする

イベントとは何か？

• ユーザーがウェブページ上で行うアクション（クリックやフォーム入力など）を処理する仕組み。
• イベントハンドラーを使ってイベントを捕まえ、それに応じた処理を行う。

コード例：

// 変数を使う
let userName = 'Taro';
console.log(userName + 'さん、こんにちは！');

const PI = 3.14;
console.log('円周率の値は ' + PI + ' です');

// 関数を作る
function multiply(a, b) {
  return a * b;
}
console.log('3 x 4 = ' + multiply(3, 4));

// イベントの例（簡易的な説明）
document.addEventListener('click', function() {
  console.log('ページがクリックされました！');
});

4. 練習課題：自分でアレンジしてみよう

ここでは実際に自分でJavaScriptを使った動きを作りながら、さらに理解を深めていきます。次の課題を参考にして、自分なりにアレンジしながらコードを書いてみましょう。はじめから完璧なコードを書く必要はありません。実際に試行錯誤しながら、楽しみながら書くことで、実践的なスキルが身についていきます。

ここで示した基本コードを参考に、自分が作りたい機能を考えてアレンジしてみましょう。例えば、ボタンを押したときの色を変えたり、表示するメッセージを変えたり、あるいは複数の機能を組み合わせたりするなど、自由に試行錯誤することで、より深い理解とオリジナルのコードを作る力が身につきます。

課題コード例（背景色を変えるヒント）：

<button onclick="changeColor()">背景色を変える</button>

<script>
function changeColor() {
  document.body.style.backgroundColor = 'lightblue';
}
</script>

課題コード例（クリック回数を表示するヒント）：

<button onclick="countClicks()">クリック回数を表示</button>
<p id="clickCount">クリック回数：0</p>

<script>
let clicks = 0;
function countClicks() {
clicks += 1;
document.getElementById('countClicks').textContent = 'クリック回数：' + clicks;
}
</script>

まとめ

JavaScriptの基本を身につけるためには「書いて試す」ことが大切です。今回学んだ内容をしっかり復習し、自由にアレンジして練習を繰り返してみてください。次回はさらにフォーム操作やインタラクティブなウェブサイトの作成にチャレンジして、ウェブ制作スキルを一段とアップさせていきましょう！

5.最速でスキルを身につけたいなら「デジタルスキルアップサポート」

もっとスピードを上げたい、独学だけじゃ物足りない！という方はITスキルコーチングサービス「デジタルスキルアップサポート」がおすすめです。

プロのコーチがサポート
必要な学習を段階的に、一人ひとりに合ったカリキュラムで進めます。自分の力で問題を解決するための「考え方」も身につくので、将来どんな現場でも活躍できるように。

実践的な業務スキルもゲット
プログラミングだけでなく、実際の仕事の進め方や効率化のノウハウも同時に学べるから、副業や転職でいきなり活かせます。

完全オンライン対応
場所を選ばず学習できるので、忙しい社会人でもしっかり取り組めるのが魅力。