【初心者向け】JavaScriptの基本と始め方 | 福岡LP(ランディングページ）ホームページ制作

1. JavaScriptとは？

JavaScriptは、Webページに動きを加えるためのプログラミング言語です。HTMLとCSSで作られた静的なページに、インタラクションや動的な要素を追加できます。

例えば：

ボタンをクリックしたときに動作を変える
フォーム入力のリアルタイム検証
ページをリロードせずにデータを取得（Ajax）

2. JavaScriptの基本構文

(1) 変数の宣言

JavaScriptでは、変数を使ってデータを保存します。

javascriptコードをコピーする// 変数の宣言
let name = "山田";
const age = 25;
var job = "エンジニア"; // 古い書き方（非推奨）

ポイント：

let：再代入可能な変数。
const：再代入不可の変数。
var：過去のバージョンから存在するが、スコープが曖昧なため非推奨。

(2) データ型

JavaScriptの基本的なデータ型には以下があります：

javascriptコードをコピーするlet number = 10;        // 数値型
let text = "こんにちは"; // 文字列型
let isTrue = true;      // 真偽値（Boolean）
let undefinedVar;       // undefined（未定義）
let nullVar = null;     // null（値がない）

(3) 配列とオブジェクト

データの集合を扱う場合に使用します。

javascriptコードをコピーする// 配列
let fruits = ["りんご", "バナナ", "みかん"];

// オブジェクト
let person = {
  name: "山田",
  age: 25,
  job: "エンジニア"
};

(4) 条件分岐

条件によって異なる動作を実行します。

javascriptコードをコピーするlet score = 80;

if (score >= 90) {
  console.log("Aランク");
} else if (score >= 70) {
  console.log("Bランク");
} else {
  console.log("Cランク");
}

(5) ループ処理

繰り返し処理を行うための構文です。

javascriptコードをコピーするfor (let i = 0; i < 5; i++) {
  console.log(`現在の値: ${i}`);
}

3. JavaScriptでできること

(1) DOM操作

JavaScriptを使えば、HTMLの要素を操作できます。

javascriptコードをコピーするdocument.getElementById("myButton").innerText = "クリックしてね！";

(2) イベントリスナー

ユーザーの操作に反応するコードを記述します。

javascriptコードをコピーするdocument.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

(3) 非同期処理（API連携）

外部サーバーからデータを取得してページに表示することが可能です。

javascriptコードをコピーするfetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

4. JavaScriptの開発環境

(1) 必要なツール

Webブラウザ: JavaScriptはブラウザで動作します。Google ChromeやFirefoxがおすすめ。
テキストエディタ: VS Codeなどのエディタを使用してコードを書きます。

(2) 初めてのJavaScriptコード

以下をHTMLファイルに記述すると、JavaScriptが動作します。

htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの例</title>
</head>
<body>
  <button id="myButton">クリック</button>

  <script>
    document.getElementById("myButton").addEventListener("click", function() {
      alert("こんにちは、JavaScriptの世界へ！");
    });
  </script>
</body>
</html>

5. JavaScriptを学ぶ際のコツ

(1) 小さなスクリプトから始める

初めは簡単な「Hello, World!」や、クリックで動作するスクリプトから始めるのがおすすめです。

(2) オンライン学習プラットフォームを活用

Progate: 初心者にやさしい解説と練習問題。
Udemy: 実践的なコースが豊富。
ドットインストール: 短い動画で学べる。

(3) 実際のプロジェクトに挑戦

簡単なWebアプリや、ポートフォリオページを作成しながら学びましょう。

6. JavaScriptのよく使うフレームワーク

JavaScriptは単体で使うだけでなく、以下のフレームワークやライブラリと組み合わせるとさらに強力です。

React: 高速なUI開発が可能。
Vue.js: 学びやすく柔軟性が高い。
Node.js: サーバーサイドJavaScriptのプラットフォーム。

まとめ

JavaScriptは、Web開発の基盤となる重要なスキルです。最初は難しく感じるかもしれませんが、簡単なスクリプトを書いて動かしてみることで、少しずつ理解が深まります。まずは基本を押さえ、徐々に応用へと進んでみてください！