🍋

JavaScript入門

2024/07/04に公開

はじめに

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

JavaScriptとは

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

《例》

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

例:表示制御

例:条件判定制御

例:演算制御

JavaScriptの変数・データ型

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

JavaScriptの変数宣言

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

データ型:文字列

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

データ型:数値

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

(補足)式と演算子

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

データ型:配列

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

// 空の配列を作成
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 (条件) {
  case1:
    // 値1のときの処理
    break;
  case2:
    // 値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」とは

Coming Soon...

クエリパラメータを取得する

Coming Soon...

要素の情報を取得する

Coming Soon...

要素の表示制御を行う

Coming Soon...

Cookie/Session/LocalStorageを読み書きする

Coming Soon...

Discussion