🍋

非エンジニア向けのJavaScript入門

に公開
JavaScript
tech

はじめに

  • このJavaScript入門はエンジニア向けではなく、社内の新卒マーケターや新卒データアナリスト向けに最低限身に着けてほしいJavaScriptの知識に絞ってまとめています
  • エンジニアの観点だと物足りない情報も多々あると思いますのでご留意ください
  • HTML/JS/CSSは「実際に触ってみる」と覚えが早いと思うので後述のjsFiddleなどのサービスを活用しながら実際に手を動かしながらこの記事を読み進めることをお勧めします。

JavaScriptとは

JavaScriptとはブラウザを「動かす」ためのプログラム言語です。Web上の処理の動きを行うことができます。

《例》

  • カルーセルバナーの自動スクロール処理
  • ポップアップウィンドウの表示処理
  • グローバルナビゲーションメニューの開閉処理
  • FAQアコーディオンの開閉処理
  • 検索一覧画面におけるフィルタ条件に応じた検索結果の変化
  • 保険や携帯の料金シミュレーション

例：表示制御

例：条件判定制御

例：演算制御

JavaScriptの変数・データ型

JavaScriptの変数とは、プログラムで文字列や数値などのデータに名前をつけて繰り返し利用できるようにする機能です。変数は「値を入れる入れ物」のようなもので、名前のラベルが貼ってあり、プログラムの実行中にいつでも呼び出すことができます。

JavaScriptの変数宣言

JavaScriptで変数を利用するにはvar/let/const等を用いて変数の宣言を行う必要があります。

データ型：文字列

シングルクォーテーション(')またはダブルクォーテーション(")で全体を囲んで表します。

// 「こんにちは」という文字（文字列）をxの変数に代入
var x = "こんにちは";

データ型：数値

123や-2といった数値を変数に入れる場合はクォーテーションで括る必要はありません。

// 123という数値をxの変数に代入
var x = 123;

（補足）式と演算子

数値は四則演算などを行うことが可能です。

データ型：配列

データをリスト形式で保持するためのデータ構造です。
配列は、複数の値を一つの変数にまとめて格納することができます。

// 空の配列を作成
let emptyArray = [];

// 数値を含む配列を作成
let numberArray = [1, 2, 3, 4, 5];

// 文字列を含む配列を作成
let stringArray = ["apple", "banana", "cherry"];

// 異なる型の要素を含む配列を作成
let mixedArray = [1, "hello", true, null];

データ型：論理値（真偽値）

論理値には true または false のどちらかを取ります。クォーテーションで括る必要はありません。

JavaScriptオブジェクト（location）

JavaScriptのLocationオブジェクトは、現在表示されているウェブページのURLを抽出したり、別のページへ遷移する場合などに便利なオブジェクトです。URLや、ホスト名・パス・プロトコルなどの情報を得ることが出来ます。

前述の自身らで定義をする変数とは異なり、デフォルトで様々な情報が格納されています。

location.href

URL全体を取得します。location.hrefを任意の値に変更するとそのURLに遷移します。

<p id="location_href" class="item"></p>
<a id="location_href_link" href="#" target="_blank">Googleにリンクします</a>
<script>
	//pタグ（id=location_href）にlocation.hrefの値を挿入
	$("#location_href").text(location.href); //表示しているURLをpタグに挿入
	
	//クリックした時にイベント発火
	$("#location_href_link").click(function(){
		location.href = "https://google.co.jp"; //aタグ押下時にGoogleにリンク
	});
</script>

location.host

現在のURLのホスト名を取得します。（例：https://test.com/の【test.com】）

<p id="location_host" class="item"></p>
<script>
	//pタグ（IDはlocation_host）にlocation.hostを挿入
	$("#location_host").text(location.host);
</script>

location.pathname

現在のURLのパス部分を取得します。（例：https://test.com/aaa/の【/aaa/】）

<p id="location_pathname" class="item"></p>
<script>
	//pタグ（IDはlocation_pathname）にlocation.pathnameを挿入
	$("#location_pathname").text(location.pathname);
</script>

location.protocol

現在のURLのプロトコルを取得します。（例：https://test.com/aaa/の【https:】）

<p id="location_protocol" class="item"></p>
<script>
	//pタグ（IDはlocation_protocol）にlocation.protocolを挿入
	$("#location_protocol").text(location.protocol);
</script>

JavaScriptオブジェクト（document）

documentオブジェクトはブラウザ上で表示されたドキュメント情報を取得できます。

document.title

現在のURLのページタイトルを取得します

<p id="document_title" class="item"></p>
<script>
	//pタグ（IDはdocument_title）にdocument.titleを挿入
	$("#document_title").text(document.title);
</script>

JavaScriptの制御文

JavaScriptの制御文は、プログラムの流れをコントロールするための文です。例えば、「もし～ならば」という条件を使うif文や、同じことを何度も繰り返すfor文やwhile文があります。これらを使うと、状況に応じてプログラムを制御することができるようになります。

《用途例》

  • 偶数行と奇数行で処理を分けて制御したい
  • チェックボックスを押した状態でボタンクリックした場合に制御したい
  • 最下層までスクロールした場合に処理を実行したい場合に制御したい
  • ECサイトにて商品数を閾値まで選択した場合に制御したい

if文

if文は、Webサイトでユーザーの行動や状態に応じて異なる動作をさせるために使われます。下記ではユーザーが入力した年齢に応じて異なるメッセージを表示するケースを紹介します。

if (条件1) {
  // 条件1が真のときの処理
} else if (条件2) {
  // 条件2が真のときの処理
} else {
  // どの条件も偽のときの処理
}

switch文

if文と同様にJavaScriptなどのプログラミング言語で使用される制御構文の一つで、特定の変数や式の値に基づいて、複数の異なる条件の中から1つを実行します。複雑な条件や範囲指定ができるif文と違い、switch文はシンプルに並列の条件分岐を記述したい時に便利です。

switch (条件) {
  case 値1:
    // 値1のときの処理
    break;
  case 値2:
    // 値2のときの処理
    break;
  // 必要なだけcaseを追加できる
  default:
    // どのケースにも当てはまらないときの処理
}

for文

for文では指定した回数だけ繰り返し処理を行うことができます。

for (初期化式; 条件式; 変化式){
  実行する文1;
  実行する文2;
  ...
}

例えば下記のように0を初期値とし、1ずつ変化（増加）、条件は3未満となると0⇒1⇒2⇒3と4回処理が動くことになります。

for (let i = 0; i < 3; i++){
  console.log("i = " + i);
}

JavaScriptの関数

function（関数）

関数は、特定のタスクや計算を利用できるためのコードの"まとまり"です。再利用可能で、必要なときに呼び出して使うことができます。関数を使うと、コードを整理し、重複を避けることができます。

function 関数の名前(引数) {
  // 実行する内容
  return 戻り値;  // 必要な場合
}

JavaScriptライブラリ「jQuery」とは

jQueryはJavaScriptの利用を補助するライブラリ（≒便利な部品セット）で、HTMLの操作・アニメーション動作、ボタンクリック等のイベント処理、外部サービスとの通信を簡単に実装することができます。短いコードで処理できるため、初心者でも扱いやすいとされています。

実際にjQueryなどのライブラリを用いないJavaScriptの書き方とjQueryの書き方を比較したものを下記で紹介します。

// ネイティブ（標準）JavaScriptの書き方
document.getElementById("calcButton_A").addEventListener("click", function() {
    const num1 = parseFloat(document.getElementById("num1").value);
    const num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("result").textContent = "結果: " + (num1 + num2);
});

// jQueryの書き方
$(function(){
    $(document).on("click", "#calcButton_B", function(){
        const num1 = $("#num1").val();
        const num2 = $("#num2").val();
        $("#result").text("結果: " + (num1 - num2));
    });
});

以降、ライブラリやフレームワークを用いないjsと比較して、jQueryが特に有効な活用シーンをいくつか紹介します。特に通常のコーポレートサイトやECサイト・会員サイト上で良く活用シーンを踏まえ、jQueryが有効なケースを解説します。

画面操作（アニメーション含む）／イベントハンドリング

  • 画面操作（アニメーション含む）
    画面上の要素が表示されたり消えたりすることがあります。少しずつ消えていくとか移動するといった、アニメーションに富んだ挙動もjQueryで簡単に記述できます。

  • イベントハンドリング（クリックやマウスオーバーといったイベントの検知）
    マウスの移動やクリックといった操作に応じて何かしらのデータを送受信したり、前述の画面操作を行うというケースも多いです。これもjQueryで簡単に記述できます。

例）画面操作・イベントハンドリング

要素の情報を取得する

$("#id名").text() や $("#id名").val() を用いて、ID要素のテキストや入力値を簡単に取得できます。これにより、ECサイトの商品情報の表示、フォームの入力データ取得、動的更新など、インタラクティブな機能を簡潔に実装できます。

要素の情報を書き換える

要素の情報を取得するだけでなく、要素の書き換えも可能です。下記のサンプルコードでは入力された値を取得し、ボタンをクリックすると挨拶メッセージを表示する処理を実装しています。

外部サービスとの通信（ajax）

APIなどを用いて外部サービスとデータを送受信するような処理もjQueryは得意です。

例）外部サービスとの通信（ajax）

jQueryのメソッド

jQueryには便利なメソッドが用意されており、これらを駆使して効率的にjavascriptの処理が記載できます。ここでは主要なメソッドについて解説していきます。

《主なjQueryメソッド》

メソッド 使い方 主な用途
text() .text() / .text("新しいテキスト") 要素のテキストを取得・設定
val() .val() / .val("新しい値") フォームの入力値を取得・設定
css() .css("プロパティ") / .css("プロパティ", "値") CSSの取得・設定
show() / hide() / toggle() .show() / .hide() / .toggle() 要素の表示・非表示
addClass() / removeClass() .addClass("class名") / .removeClass("class名") クラスを追加・削除
on() .on("クリック等のイベント", "セレクタ", function(){}) イベントを拾う
each() .each(function(){ ... }) 複数の要素をループ処理

text()｜要素のテキストを取得・設定

text() は、HTML要素のテキストを取得したり、書き換えたりするときに使います。

// HTML要素のテキストを取得したい場合
$("セレクタ").text();

// HTML要素のテキストを任意に書き換えたい場合
$("セレクタ").text("挿入したい文字");

// 例：ID「test」に"これはテストです"というテキストを挿入
$("#test").text("これはテストです");

val()｜フォームの入力値を取得・設定

val() は、フォームの入力値を取得したり、設定したりするときに使います。

// フォームの入力値を取得したい場合
$("セレクタ").val();

// フォームの入力値を任意に設定したい場合
$("セレクタ").val("挿入したい文字");

// 例：ID「test」のテキストフィールドに"これはテストです"というテキストを挿入
$("#test").val("これはテストです");

css()｜CSSの取得・設定

css() を使うと、HTML要素のスタイルを取得/変更できます。

// HTML要素のスタイルを取得したい場合
$("セレクタ").css("文字色など任意のCSSプロパティ");

// HTML要素のスタイルを任意に設定したい場合
$("セレクタ").css("文字色など任意のCSSプロパティ","変更したい設定");

// 例：ID「test」の要素の文字色を赤色に変更（red or #ff0000どちらも可）
$("#test").css("color","red");

show() / hide() / toggle()｜要素の表示・非表示

show() / hide() / toggle() は、要素の表示・非表示を切り替えます。

$("セレクタ").show(); // 要素を表示
$("セレクタ").hide(); // 要素を非表示
$("セレクタ").toggle(); // 要素が表示・非表示を切り替え

// 例：ID「test」の要素を非表示にする
$("#test").hide();

addClass() / removeClass()｜クラスを追加・削除

動的にclassを追加削除したい場合に使います。

// クラスを追加したい場合
$("セレクタ").addClass("追加したいクラス名");

// クラスを削除したい場合
$("セレクタ").removeClass("削除したいクラス名");

// 例：ID「test」の要素にactiveというクラス名を付与する
$("#test").addClass("active");

on()｜イベントを動的に設定

$(document).on("イベント名", "セレクタ", function(){
    実行する文（thisで要素を参照可能）
});

// 例：ID「test」の要素をクリック時に赤にする
$(document).on("click","#test",function(){
    $(this).css("background","blue"); 
});

each()｜複数の要素をループ処理

each() は、複数の要素を順番に処理したいとき に使います。
例えば、リストの中のすべての <li> 要素を取得して、1つずつ処理することができます。

$("セレクタ").each(function(){
    実行する文（thisで"順番"に要素を参照可能）
});

Discussion