JavaScriptは、Webサイトやアプリ制作に欠かせないプログラミング言語ですが、そんなJavaScriptの学習を始めようと考えている方も多いでしょう。
本記事では、JavaScriptの基本的な使い方から応用的な使い方までを詳しく解説します。これからJavaScriptを学ぶ方や、JavaScriptをより深く理解したい方は、ぜひ本記事で使い方を学んでください。
JavaScriptとは
JavaScriptは、Webサイトに動きをつけたり、アプリ開発をしたりするためのプログラミング言語です。
例えば、ボタンをクリックするとメニューが開いたり、画像がスライドショーのように切り替わったりするような仕組みをJavaScriptでは作成できます。
また、Webサイトやアプリを作るには、JavaScript以外にもHTMLやCSSの知識が必要です。以下の表に、それぞれの役割を整理してみました。
| 言語 | 役割 | 具体例 |
| HTML | ページの構造を作る | 見出し、段落、ボタンなどを配置する |
| CSS | デザインを整える | 文字の色やサイズ、レイアウトを調整する |
| JavaScript | 動きを加える | ボタンをクリックしてメニューを表示したり、画像を自動で切り替えたりできる |
JavaScriptは初心者でも比較的学びやすい言語なので、基本の使い方を押さえれば、簡単なWebサイトやアプリを制作できるでしょう。
JavaScriptを使うための事前準備
JavaScriptを使うには、JavaScriptをHTMLに読み込ませる必要があります。JavaScriptのコードを読み込ませる方法は、以下の2つです。
- HTMLファイルに直接書く
- 外部ファイルを読み込む
それぞれの読み込み方法についてみていきましょう。
方法①HTMLファイルに直接書く
JavaScriptのコードをHTMLファイル内に直接記述する方法です。scriptタグを使い、HTMLファイルのheadタグ、もしくはbodyタグ内に記述します。
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script>
alert(‘アラートです’);
</script>
</head>
<body>
<script>
alert(‘アラートです’);
</script>
</body>
この方法は、HTMLファイルだけで完結するため、プログラムを手軽に記述できるのがメリットです。しかし、コードが長くなるとHTMLと混同して見づらくなるため、大規模な開発には向いていません。
方法②外部ファイルを読み込む
JavaScriptのコードを別のファイルとして保存し、それをHTMLファイルから読み込む方法です。
HTML内にscriptタグのsrc属性を使ってJavaScriptファイルを指定します。
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script src=”script.js”></script>
</head>
<body>
<script src=”script.js”></script>
</body>
この方法のメリットは、JavaScriptのコードをHTMLから分離できるため、管理がしやすくなる点にあります。
また、複数のHTMLファイルで同じJavaScriptを使い回せるため、メンテナンスの効率も向上します。
JavaScriptの基本的な使い方
JavaScriptでまず押さえておきたいのは、以下のような基本的な使い方です。
- 変数の宣言
- 条件分岐
- 繰り返し処理
これらの使い方についてみていきましょう。
基本的な使い方①変数の宣言
JavaScriptでは、データを格納するために変数を使用します。
変数を宣言する方法として、var、let、constの3種類がありますが、varは影響範囲が広くエラーの原因となりやすいので、現在はletとconstが推奨されています。
let age = 25;
const gender = “Man”;
letは変更可能な変数、constは変更できない変数です。それぞれの特徴を把握して、適切に使い分けましょう。
また、変数に値を入れ忘れると、undefinedが発生します。以下の記事では、JavaScriptのundefinedの発生条件や、判定方法などについて解説しています。
基本的な使い方②条件分岐
条件によって異なる処理を実行するためには、if文を使用します。
if (score >= 80) {
console.log(“合格です！”);
} else {
console.log(“再試験が必要です。”);
}
上記のコードでは、if文を使って、変数scoreの値が80以上なら「合格」、80以下なら「再試験が必要です。」と表示できるようにしています。
ifの後ろにある()の中に条件式を記述し、条件が当てはまらない場合の処理をelseの後ろにある{}の中に記述しましょう。
このように、条件を満たした場合の処理と、満たさなかった場合の処理を書くことで、自由に処理の分岐を行えます。
基本的な使い方③繰り返し処理
同じ処理を何度も実行する場合は、繰り返し処理を使います。繰り返し処理は、for文を使って行われます。
console.log(i + “回目の処理”);
}
上記のコードでは、iの値が1から5まで増えていき、その都度処理が実行されます。
forの後ろの()の中に、初期化の式と条件式、ループごとに実行する式を記述しましょう。
JavaScriptの応用的な使い方
JavaScriptの応用的な使い方の確認として、スクロールに応じて、画面内に入った要素を表示させるアニメーションを実装してみましょう。
HTML
<div class=”fade-in” id=”fade”>スクロールすると表示</div>
HTMLでは、スクロールする領域とスクロールしたら表示される領域をdivタグで指定しています。
CSS
height: 1000px;
}
.content {
height: 500px;
}
.fade-in {
opacity: 0;
transform: translateY(50px);
transition: all 0.5s ease;
background: lightblue;
padding: 20px;
}
.fade-in.active {
opacity: 1;
transform: translateY(0);
}
CSSでは、クラスfade-inをopacity: 0;とtransform: translateY(50px);で、初期状態では透明かつ下にずらしています。
そして、クラスfade-inにactiveクラスが付与されたら、正常の位置に戻す指定をしています。
JavaScript
const fade = document.getElementById(“fade”);
const rect = fade.getBoundingClientRect();
const windowHeight = window.innerHeight;
if (rect.top < windowHeight – 100) {
fade.classList.add(“active”);
}
});
JavaScriptでは、scrollイベントを使って、特定の領域に達したらクラスfade-inにactiveクラスを付与する指定をしています。
これらのHTML・CSS・JavaScriptを記述したうえで、ブラウザを更新すると、特定領域に入ると要素がアニメーションしながら表示されるようになります。
JavaScriptのおすすめ学習ロードマップ
以下は、JavaScriptを学習する際のおすすめロードマップです。
- HTML/CSSを学習する
- JavaScriptの基礎を学習する
- オリジナルのサイトやアプリを制作する
これらのロードマップについてみていきましょう。
ロードマップ①HTML/CSSを学習する
JavaScriptの学習の前に、まずHTMLとCSSの使い方を理解することが大切です。
HTMLはページの構造を作成し、CSSはデザインを整える役割を持ちます。
操作対象となるHTMLの構造や、デザインを調整するCSSの仕組みを知らなければ、JavaScriptの使い方の理解も難しいでしょう。
HTMLとCSSはWebサイトやアプリを作成するのに欠かせないので、初めに学習しておきましょう。
また、以下の記事では、HTMLとJavaScriptの関係について解説しています。
JavaScriptを使ってHTMLを動的に書き換える方法も紹介しているので、ぜひあわせてご覧ください。
ロードマップ②JavaScriptの基礎を学習する
HTMLとCSSの基礎を固めたら、JavaScriptの基本的な使い方について学びましょう。
書籍やオンラインセミナーを活用し、変数・条件分岐・繰り返し処理・DOM操作などの基本概念を押さえましょう。
実際に手を動かしながらサンプルコードを実行し、動作を確認しながら学習を進めることがポイントです。
ロードマップ③オリジナルのサイトやアプリを制作する
JavaScriptの基本的な使い方を習得したら、オリジナルのWebサイトやアプリを作成し、実践力を高めましょう。
簡単なToDoアプリや電卓など、小規模なプロジェクトから始めるのがおすすめです。
実際にコードを書くことで、エラーの対処やコードの整理方法を学べます。また、作成した作品はポートフォリオとして活用できるため、スキルの証明にもつながります。
JavaScriptの使い方についてのまとめ
今回は、JavaScriptの基本的な使い方から応用的な使い方まで解説しました。
JavaScriptはWebサイトに動きをつけるための重要な言語であり、スキルを身につけるには、変数の宣言・条件分岐・繰り返し処理などの基本的な使い方を押さえることが大切です。
JavaScriptの使い方をマスターし、魅力的なWebサイト・アプリの作成にチャレンジしましょう。
