はじめに

僕は実務で、WordPressのサイト運用や簡単なWebアプリの制作に関わっています。大抵の案件はディレクター担当なので、自分で実装する機会はほとんどありませんが、エンジニアとやり取りするうえでも、フロントエンドで使われる基本的な言語は知っておきたい。まずはコードを見て、「大体こんなことをしていそう」という程度の理解力を身につけ、必要な時はAIを使いながら自分でも実装できるレベルにはなっておきたいと思い、改めてJavaScriptを学んでみることにしました。

今回は、2012年に技術評論社から発行された『ノンプログラマのためのJavaScriptはじめの一歩』を参考に、JavaScriptの基本を整理していきます。内容が多いので前後編に分け、前編では変数やデータ型、条件分岐、繰り返し、関数についてまとめます。

JavaScriptとは

JavaScriptは、Webページに動きを加えるために使われるプログラミング言語です。ブラウザ上で動き、HTMLの文章や要素、CSSによる見た目を変えたり、ボタンのクリックに合わせて処理を実行したりできます。

また、現在のWeb開発でよく使われるTypeScriptやReact、Node.jsもJavaScriptと深く関わっています。こうした技術に触れるうえでも、JavaScriptの基本を学んでおいて損はないと思います。

基本的な文法

文の区切りとコメント

JavaScriptでは、以下のように文の終わりにセミコロン;を付けます。使い方としては句点と同様のイメージです。

const firstname = "太郎";
let lastname = "山田";

1行に複数の文をまとめたり、セミコロンを省略できる場合もありますが、この記事では「行末にセミコロンを付け、文ごとに改行」という形に統一します。

また、コードに説明を残したい時は「コメント」を使います。

const firstname = "太郎";
let lastname = "山田";
console.log(lastname + firstname); // 山田太郎

lastname = "鈴木"; // 結婚して婿に入った
console.log(lastname + firstname); // 鈴木太郎

この//は「行コメント」と言います。//から行末まではコメントとして扱われるため、その部分に処理を書いても実行されません。

複数行にわたってコメントを書きたい場合は、以下のように/*と*/で囲む「ブロックコメント」を使用します。処理を一時的に止めたい時は、対象箇所をコメントアウトする（コメントで囲む）ことで対処することもあります。

const firstname = "太郎";
let lastname = "山田";
console.log(lastname + firstname); // 山田太郎

/* 離婚しました
lastname = "鈴木"; // 結婚して婿に入った
console.log(lastname + firstname); // 鈴木太郎
*/

変数は値に名前を付けるもの

const firstname = "太郎";
let lastname = "山田";

この例の firstname や lastname のように、値に名前を付けておく仕組みを「変数」と言います。const 任意の名称 = 入れるもの; というように記述し、文字列や配列、関数などあらゆる型を変数に保存できます。

const で宣言した firstname には、後から別の値を代入できませんが、let で宣言した lastname は値を入れ直せます。以前までは変数を var で宣言するのが一般的でしたが、今では const や let が主流になりました。

値とデータの扱い方

文字列・数値

const name = "コーヒー";
const price = 500;
const taxRate = 0.1;
const message = '注文を受け付けました。';

この例のように文字列は引用符で囲みます。シングルクオート ' とダブルクオート " のどちらでも書けるので、コード内で書き方を統一するとより読みやすくなります。一方、数値には引用符を付けません。小数はピリオドで書きます。

"500" は文字列、500 は数値です。見た目が似ていても種類が違うので、用途に応じて間違えないように指定します。

演算子

console.log(10 + 3); // 13
console.log(10 - 3); // 7
console.log(10 * 3); // 30
console.log(10 / 2); // 5
console.log(10 % 3); // 1

数値の計算には、足し算の +、引き算の -、掛け算の *、割り算の /、割った余りを求める % が使えます。

const price = 500;

console.log(price >= 500); // true
console.log(price < 500);  // false
console.log(price === 500); // true

また、値を比べる時は比較演算子を使います。> は「より大きい」、>= は「以上」、< は「より小さい」、<= は「以下」、=== は「等しい」、!== は「等しくない」を表します。

比較した結果は、条件が成り立てば true、成り立たなければ false になります。

配列

値を順番に並べたいときは、配列を使います。以下のように角括弧 [] で囲み、値をカンマで区切ると配列になります。

const items = ["コーヒー", "紅茶", "ジュース"];

console.log(items[0]); // コーヒー
console.log(items[1]); // 紅茶
console.log(items[2]); // ジュース
console.log(items.length); // 3

配列の位置を表す番号をインデックスと呼びます。インデックスは「0」から数えるため、例のように要素が3つある配列でも、最後の要素のインデックスは「2」になります。items[0] のように配列名の後に角括弧 [] でインデックスを指定することで値を取り出せます。また、length では配列の長さを取得できます。

オブジェクト

1つの商品について、名前や価格などをまとめたい場合はオブジェクトが便利です。オブジェクトでは、名前と値の組を「プロパティ」と呼びます。波括弧 {} の中に名前と値をコロンで区切って書き、プロパティ同士はカンマで区切ります。

const item = {
  category: "飲み物",
  name: "コーヒー",
  price: 500,
};

console.log(item.category); // 飲み物
console.log(item.name); // コーヒー
console.log(item.price); // 500

この category や price はプロパティ名です。item.name のように、オブジェクト名とプロパティ名をドットでつなぐと値を取り出せます。配列は「順番で取り出す」、オブジェクトは「名前で取り出す」と考えると、違いをつかみやすいかもしれません。

基礎構文

条件分岐の「if文」と「else文」

「金額が一定以上なら送料を無料にする」といったように、条件によって処理を変えたい場合にはifとelseを使います。

const total = 3200;

if (total >= 3000) { // 「total >= 3000」が条件式
  console.log("送料無料です"); // 条件式がtrueなら実行される
} else {
  console.log("送料がかかります"); // 条件式がfalseなら実行される
}

条件式の結果は true または false になります。trueならifの処理が、falseならelseの処理が実行されます。この例では、total に入っている値が3000以上なので、ifの処理が実行されます。

繰り返しの「for文」と「while文」

同じ処理を回数を決めて繰り返し実行したい場合はforを使います。

for (let i = 0; i < 3; i++) { // 「i = 0」が初期化式、「i < 3」が条件式、「i++」が更新式
  console.log(i); // 0、1、2の順に表示される
}

この例では i = 0 から始めて、i < 3 という条件が成り立つ0、1、2の間は処理が実行され、 i = 3 になった時点でループが終了します。更新式の i++ は、iを1ずつ増やしていく i = i + 1 と同じ意味で「インクリメント」と呼ばれます。逆にiを1ずつ減らしていく i-- は「デクリメント」と呼ばれます。

同じようなループ処理でも、条件を基準にしたい場合はwhileを使います。以下の例文はfor文の例とまったく同じ出力結果になります。

let count = 0;

while (count < 3) { // 「count < 3」が条件式
  console.log(count); // countが3未満の間は実行される
  count++;
}

処理をまとめる「function」

何度も使う処理には名前を付けて「関数」としてまとめられます。例えば、価格と数量から税込金額を計算する処理を関数として扱う場合、以下のようになります。

function calculateTotal(price, quantity) { // 引数を受け取って実行
  const subtotal = price * quantity; // 2つの引数を掛ける
  const total = Math.round(subtotal * 1.1); // さらに1.1を掛けて整数へ丸める
  return total;
}

const result1 = calculateTotal(1000, 3); // calculateTotal関数に「1000」と「3」を渡して呼び出す→「3300」が返ってくる
console.log(result1); // 3300
const result2 = calculateTotal(200, 35); // calculateTotal関数に「200」と「35」を渡して呼び出す→「7700」が返ってくる
console.log(result2); // 7700

price と quantity は、関数に渡した値を受け取る「引数」になります。total に保存された計算結果を「戻り値」として return で返しています。関数へ渡す引数の値によって、戻り値が変動することが分かります。

さいごに

新卒のころにGASを触っていたこともあり、JavaScriptの基本的な書き方はそれほど難しく感じませんでした。GASもJavaScriptだったと知って、書き方に見覚えがあった理由にも納得しました。

改めて学んでみても、基本的な書き方は複雑ではない気がします。あとは実際にコードを読み書きし、場数をこなして慣れていくしかなさそうです。後編では、今回整理した書き方を使って、Webページの操作をまとめていきます。

参考サイト

• 外村和仁『ノンプログラマのためのJavaScriptはじめの一歩』　技術評論社, 2012年