明日から動かせる！JavaScript基礎～変数・関数・オブジェクトでWebページ操作

「JavaScriptでプログラムを作りたいけれど、何から手を付ければいいのかわからない」「Webページに動きを加えたいけれど、どう記述すればいいのか迷ってしまう」こうした悩みを持つ方は少なくありません。

初めてプログラムを書くとき、文法や構造、変数や関数の使い方など、覚えることが多く、つい立ち止まってしまうことがあります。数字や文字、ボタンや画像など、Web上の要素を自由に扱う力を手に入れたいのに、何から始めればよいのかが見えないのです。

しかし、JavaScriptの基礎を理解し、変数やデータ型、演算子、関数、オブジェクトの基本的な使い方を押さえるだけで、プログラム作成の迷いは大きく減ります。最初は小さなコードを書き、動作を確認するだけでも、Webページを自在に操作できる感覚を得られます。

本記事では、JavaScriptを初めて学ぶ方に向け、具体例を交えながら、基礎から実際の記述方法までをわかりやすく解説します。

数字・文字・真偽値も自在！変数とデータ型入門

JavaScriptでプログラムを書くとき、まず理解しておきたいのが変数とデータ型です。変数とは、データを一時的に保存する入れ物のようなものです。数値や文字列、真偽値などのデータ型を扱えることで、計算や条件判定が可能になります。

例えば、Webページに表示するユーザーの年齢を管理する場合、次のように変数を宣言できます。


      let age = 25; // 数値型
      let userName = "田中太郎"; // 文字列型
      let isMember = true; // 真偽値

変数にデータを代入したら、さっそくブラウザで確認してみましょう！


      console.log(age, userName, isMember);

計算も条件判定もOK！演算子の基本

変数に格納したデータを操作するための演算子を学びます。演算子には、算術演算、比較演算、論理演算などがあります。

例：割引計算と条件判定


        let purchaseAmount = 1200;
        let discount = 0;

        if (purchaseAmount > 1000) {
          discount = purchaseAmount * 0.1; // 10%割引
        }

        console.log("割引額:", discount);

例：文字列の結合や複数条件


        let firstName = "太郎";
        let lastName = "田中";

        console.log("氏名: " + lastName + " " + firstName);

        let age = 25;
        let isMember = true;

        if (age > 20 && isMember) {
          console.log("割引対象です");
        }

コードを整理して再利用：関数の基本

同じ処理を何度も書くのは非効率です。そこで関数を使います。関数は処理のかたまりに名前を付けて再利用できます。


      function greetUser(name) {
        console.log("こんにちは、" + name + "さん！");
      }

      greetUser("田中太郎");
      greetUser("山田花子");

戻り値を使った関数


        function calculateDiscount(amount) {
          if (amount > 1000) return amount * 0.1;
          return 0;
        }

        console.log(calculateDiscount(1200)); // 120
        console.log(calculateDiscount(800));  // 0

複雑なデータも整理可能：オブジェクト入門

複数の情報をまとめて管理したい場合、オブジェクトを使います。オブジェクトは「キー」と「値」の組み合わせでデータを整理できます。


      let user = {
        name: "田中太郎",
        age: 25,
        isMember: true,
        orders: [1000, 2000, 1500] // 購入履歴
      };

      console.log(user.name);       // 田中太郎
      console.log(user.orders[1]);  // 2000

クリックで体験！Webページ操作の基本

JavaScriptは、Webページに動きをつけるクライアントスクリプトとしても活躍します。

例：ボタン押下でメッセージを表示


        document.getElementById("myButton").addEventListener("click", function() {
          document.getElementById("message").textContent = "ボタンが押されました！";
        });

HTML例：


        <button id="myButton">押してね</button>
        <p id="message"></p>

さっそくブラウザで動かしてみましょう！

小さなコードで体験！明日から始めるJavaScript

初めての学習では、完璧なコードを書く必要はありません。まずは変数や演算子、関数、オブジェクトを使った簡単なコードを書き、ブラウザで動作を確認するだけでも大きな一歩です。少しずつ処理を組み合わせ、Webページ上で結果を確認することで、「自分の手で動くプログラムを作れる」という実感が得られます。

毎日少しずつコードを書き、実際にWebページに反映させる習慣を作ることで、JavaScriptの理解は着実に深まります。まずは小さな成功体験を積み重ねることが、学習を継続する最大のコツです。

JavaScript基礎研修（２日間）

プログラミング言語を学んだ経験がない方でも、JavaScript文法の基礎をわかりやすく学ぶことができる研修です。代表的なJavaScriptのライブラリであるjQueryとJavaScriptが広く利用されるきっかけとなったAjaxについても学んでいただきます。JavaScriptを使うことで、動的なWebページ作成やWebAPIを使ったWebアプリケーション開発をするうえでの基礎を身につけることができます。

JavaScriptを使うことで、動的なWebページ作成やWebAPIを使ったWebアプリケーション開発をするうえでの基礎を身につけることができます。

※本研修はHTMLとCSSの知識が必須です

＞公開講座の詳細はこちら