苦手なフロントエンド開発について学ぶ「目次」の記事から派生する「JavaScript編」になります。
自信のリスキニングを込めて記載していますが、「初心者にも理解しやすく」をモットーに記載していきます。
しかし、読んでいるうちに不明点や深堀してほしい箇所等あればコメントください！
「良いね・ストック」お願いします！
：当記事に示された意見はわたし個人のものであり、所属する組織を代表するものではありません。
JavaScriptとは？
JavaScript（JS）は、Webページに動的な機能を追加するプログラミング言語です。
HTMLが「ページの構造」、CSSが「デザイン」を担当するのに対し、JavaScriptは「動きやインタラクション」を担当します。
JavaScriptの役割（一例）
-
Webページの動的な操作
- ボタンをクリックするとメニューが開く
- 画像スライダーの切り替え
- スクロールに応じたアニメーション
-
フォームの入力チェック
- ユーザーが正しいメールアドレスを入力したか確認
- 必須項目が未入力なら警告を表示
-
非同期通信（Ajax）
- 画面をリロードせずにデータを取得（例：Google検索のサジェスト機能）
JavaScriptの基本記法
JavaScriptはブラウザで実行されるので、HTML内に直接書くことも、外部ファイルとして書くこともできます。
1. HTML内に直接記述
<!DOCTYPE html>
<html lang="ja">
<head>
<title>JavaScriptの基本</title>
</head>
<body>
<button onclick="alert('ボタンがクリックされました！')">クリック</button>
</body>
</html>
➡ ボタンをクリックすると「ボタンがクリックされました！」とアラートが表示される。
2. <script> タグで記述
HTMLの<script>タグ内にJavaScriptを書く方法。
<script>
function sayHello() {
alert("こんにちは！");
}
</script>
<button onclick="sayHello()">挨拶する</button>
➡ ボタンをクリックすると「こんにちは！」とアラートが出る。
3. 外部ファイルとして記述
外部の.jsファイルを作成し、HTMLから読み込む方法。
script.js（外部ファイル）
function sayHello() {
alert("こんにちは！");
}
index.html（HTMLファイル）
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="script.js"></script>
</head>
<body>
<button onclick="sayHello()">挨拶する</button>
</body>
</html>
➡ .jsファイルをHTMLに読み込むことで、JavaScriptを管理しやすくなる。
JavaScriptの基本構文
変数の宣言
- 手当たり次第
varにするのはやめましょう。スコープ（宣言した変数の有効範囲）を理解して宣言する事が大事！
基本letを使用する。
var name = "太郎"; // 旧式（推奨されない）
let age = 25; // ブロックスコープの変数（推奨）
const PI = 3.14; // 定数（変更不可）
条件分岐
let score = 80;
if (score >= 70) {
console.log("合格！");
} else {
console.log("不合格…");
}
繰り返し処理
for (let i = 0; i < 5; i++) {
console.log("回数: " + i);
}
関数の定義
function greet(name) {
return "こんにちは、" + name + "さん！";
}
console.log(greet("太郎"));
jQueryとは？
jQuery（ジェイクエリー） は、JavaScriptを簡潔に記述できるライブラリです。
JavaScriptのコードを短く、簡単に書けるため、多くのWebサイトで利用されています。
jQueryを使うメリット
-
コードがシンプル
- JavaScriptより短いコードで同じ処理が書ける
-
ブラウザ対応
- すべてのブラウザで安定して動作する
-
アニメーションやエフェクトが簡単
- フェードイン/アウト、スライド効果などが簡単に実装できる
jQueryの記法
jQueryを使うには、CDNからjQueryを読み込むか、ダウンロードする必要があります。
jQueryの読み込み
CDNを利用（簡単）
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
ダウンロードして利用
公式サイトからダウンロードし、jquery.min.js をプロジェクトに追加する。
<head>
<script src="jquery.min.js"></script>
</head>
jQueryの基本記法
1. $(document).ready()
ページの読み込みが完了してからスクリプトを実行する。
$(document).ready(function() {
alert("ページが読み込まれました！");
});
2. 要素の取得
$("#id名") // IDを取得
$(".class名") // クラスを取得
$("タグ名") // タグを取得
📌 JavaScriptとjQueryの比較
| 操作 | JavaScript | jQuery |
|---|---|---|
| ID取得 | document.getElementById("test") |
$("#test") |
| クラス取得 | document.getElementsByClassName("test") |
$(".test") |
3. クリックイベント
JavaScriptで記述
document.getElementById("btn").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
jQueryで記述
$("#btn").click(function() {
alert("ボタンがクリックされました！");
});
➡ jQueryの方が短くシンプル！
4. HTMLの変更
JavaScript
document.getElementById("text").innerHTML = "変更されました！";
jQuery
$("#text").html("変更されました！");
5. CSSの変更
JavaScript
document.getElementById("box").style.backgroundColor = "blue";
jQuery
$("#box").css("background-color", "blue");
6. アニメーション（フェードイン・フェードアウト）
JavaScript
document.getElementById("box").style.display = "none";
jQuery
$("#box").fadeOut(1000); // 1秒かけて消える
$("#box").fadeIn(1000); // 1秒かけて現れる
まとめ
JavaScript
- Webページの動きを作る言語
- 標準のコードは長くなりがち
- 柔軟で自由度が高い
jQuery
- JavaScriptを簡潔に書けるライブラリ
- 少ないコードで操作できる
- アニメーションやイベント処理が簡単
最近では、jQueryを使わずにJavaScript（Vanilla JS）で書くことも増えていますが、短く書けるメリットがあるため、まだまだ利用されています！
一緒に記載したのは現場のソースを見ていると同一ファイルで記法の異なる書き方が多く散見されたので合わせて記載しました。
初心者の方からしたら情報が倍になったかもしれませんが、この記法はJS独自、この記法はjQueryを正しく理解してもらうため記載しています。
※Vanilla JS：JSのライブラリを使わないで書いたJSをVanilla（バニラ） JSと呼ぶらしい