This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

JavaScript応用教材

Last updated at 2022-11-20Posted at 2022-03-30

JavaScript応用教材学習用フォルダ作成

フォルダ名：「make_folder」

JavaScript応用の学習を始める前に、教材学習用のJavaScriptフォルダを作成します。
VSCodeでProgrammingフォルダを開きましょう。
そして、textsフォルダをクリックして、フォルダ作成マークをクリックし、新しいフォルダを作成して、JS_ADVANCEDと名前を付けましょう。

これでJavaScript応用教材学習用のフォルダが完成しました。

JavaScript応用のレクチャーでは、今回作成したJS_ADVANCEDフォルダの下に、HTMLやCSS教材と同じようにレクチャーごとのフォルダの作成とindex.htmlの作成、さらにapp.jsというJavaScriptファイルを作成してください。
ファイル構成は、各レクチャーのフォルダ下(今回だとmake_folder)にindex.htmlとapp.jsがあるようにしてください。

以降のレクチャーでは、このJS_ADVANCEDフォルダ配下に各レクチャーごとのフォルダとそのフォルダの中にindex.html、app.jsを作成して下さい。

★検索ワード
・VSCode フォルダ開き方
・VSCode フォルダ作成方法
・VSCode ファイル作成方法

API

フォルダ名：「api」

まずは、textsフォルダ下のJS_ADVANCEDフォルダ内にレクチャー用のフォルダapiを作成して下さい。
次に、作成したapiフォルダ内にindex.htmlとapp.jsを作成して下さい。

それではまずはAPIの説明から行います。
APIとは、「Application Programming Interface」の頭文字をとったものであり、「アプリケーションとアプリケーションを繋ぐインターフェース」のことです。

少し難しい言葉になりましたが、APIとは「アプリケーションを繋ぐための決まり事」のことです。

例えば、住所入力フォームで郵便番号を入力すると、住所が自動的に入力されるフォームを見たことはありませんか？
あれはまさしくAPIで実装しています。

APIを実行するためにはURLを使用します。
試しにブラウザのURL入力欄に以下のURLを入力してください。
https://zip-cloud.appspot.com/api/search?zipcode=1070062

上記のURLを入力して、下記画像のような表示がブラウザにされればOKです。

これは〒107-0062の住所を取得するためのURLです。
このURLを実行すると、〒107-0062の住所情報がJSONというデータ構造で取得することができます。
このようにAPIを実行してJSONデータを取得することはよくあるので、ぜひ覚えておきましょう。

ちなみに、zipcode=1070062となっている部分をzipcode=1600002にすると、新宿区の住所が取得できます。
zipcode=郵便番号の郵便番号を変更すると、それに伴って取得できるデータも変わるということです。

★検索ワード
・APIとは
・郵便番号検索API

JSONデータ

JSONとは、「JavaScript Object Notation」の略で、「JavaScriptのオブジェクトの書き方を元にしたデータ定義」のことです。

簡単に言うと、「データ形式」のことです。

JavaScriptでは、オブジェクトを作成する際に{ }や[ ]などの括弧を使って記述しますが、JSONはその記法を元にしています。
もともとはJavaScriptで使用される想定で作成されたデータ構造ですが、現在ではPHPやPython、Javaなどの幅広い言語でも使用されており、言語間のデータのやり取りで使われることが多くなっています。

そのため、先ほど学んだAPIでもJSONデータが返却されるようになっていたということです。

少し難しく感じるかもしれませんが、中身はオブジェクトの作りそのままなので、受け取ったJSONデータからさらに情報を絞り込んで、その情報を画面に出力したりして使用します。

★検索ワード
・JSONとは
・Javascript JSON

非同期通信

非同期通信とは、コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式のことです。

少し難しい言葉だったので、非同期通信の対義語となる同期通信の説明をしてから、例を用いて説明していきます。

同期通信とは、クライアントからサーバーにリクエストを送信し、レスポンスが返ってくることのことです。

インターネット検索をしていると、URLをクリックして、次のページに遷移するまでに白い画面が表示されることがあるかと思います。
まさしくそれが同期通信をしている瞬間です。

同期通信では、ユーザーはURLをクリック(サーバーにリクエスト)してから、サーバーがレスポンスを返してくるまで、他の作業ができません。

一方で非同期通信では、リクエストを送っている間にも他の作業をすることができます。
例えば、住所入力フォームで郵便番号を入力すると自動で住所が入力されますが、その時にブラウザの更新はされるでしょうか？

答えは、ブラウザの更新はされません。
ブラウザの更新はされないので、真っ白な画面になることもありません。
これが非同期通信です。

★検索ワード
・同期通信とは
・非同期通信とは
・同期通信非同期通信違い

Ajax

フォルダ名：「ajax」

まずは、textsフォルダ下のJS_ADVANCEDフォルダ内にレクチャー用のフォルダajaxを作成して下さい。
次に、作成したajaxフォルダ内にindex.htmlとapp.jsを作成して下さい。

Ajaxとは、JavaScriptでサーバー側と非同期通信を行い、「動的にページの一部だけを書き換える手法」のことです
簡単に説明すると、JavaScriptで非同期通信をするための技ですね。

では、さっそくAjaxを使ってみましょう。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

app.jsを下記の通り編集してください。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

それではコードの解説をしていきます。

まず、JavaScriptで非同期通信するためにXMLHttpRequest()が提供されています。
なので、今回はそちらを使用して非同期通信を行っていきます。
そのコードが下記のコードです。

XMLHttpRequest()

let xhr = new XMLHttpRequest();

次に、「どんな方法」で「どのサーバー」に「いつデータを取得するのか」ということを指定していきます。

まずは、「どんな方法」と「どのサーバー」という2つを指定する方法を説明していきます。
その2つを指定するためには.open()を使用していきます。
.open()の使い方は下記の通りです。

openメソッド

xhr.open(【どんな方法】, 【どのサーバー】);

つまり、今回のコードの場合は下記のようになります。

通信の指定

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

どんな方法がGETで、どのサーバーがhttps://zip-cloud.appspot.com/api/search?zipcode=1070062になります。

「どんな方法」には、GETの他にもPOSTなども使うことができますが、今回はデータの取得をするので、GETを使用していきます。

データを取得したいときはGETを使用するということを覚えていただければ大丈夫です。
POSTに関しては、PHPを学習するときに学びましょう。

「どのサーバー」には、URLを記述しましょう。
今回はhttps://zip-cloud.appspot.com/api/search?zipcode=1070062というURLです。

これで、GETでhttps://zip-cloud.appspot.com/api/search?zipcode=1070062にリクエストを投げる準備ができました。

なので、次にxhr.send();と記述することで通信を開始しています。

そして、xhr.onreadystatechange = function() {}で、サーバーから取得したデータを受け取るための記述を{}内に設定していきます。

まずは、そもそも非同期通信の「通信が完了しているか？」「通信が成功したか？」などを条件分岐しながら確認する必要があります。

その条件分岐を記述しているのが、下記のコードです。

ステータス確認

if(xhr.readyState === 4 && xhr.status === 200) {}

readyStateの値は下記の表の通り、全部で5種類あります。

値	状態	解説
0	準備段階	まだ通信は行われていない状態
1	準備完了	通信を行う準備が完了している状態
2	通信開始	サーバーと通信が始まっている状態
3	受信中	サーバーから目的のデータを取得している状態
4	通信完了	データを取得して通信が終了している状態

つまり、上記の表から分かる通り、通信完了したことが確認できる「4」の場合にデータを取得していきます。
readyStateだけではサーバーとの通信状態のみ見ている状態でしたが、サーバーと通信した際に様々なエラーが起こることも少なくありません。

Web検索をしている最中に500ページや404ページというものを見たことはありませんか？
このようなエラーが出ている場合は正しくサーバーと通信できておらず、エラーが起こってしまっている状態です。
そのため、今回もサーバーと通信をするので、通信に成功したときのみデータを取得するようにするのが好ましいです。

それを判断するのがstatusです。
statusの主な値を表にまとめましたが、「200」がサーバーとの接続に成功した場合です。

値	状態	解説
200	成功	特に問題なく通信が成功した状態
403	エラー	アクセスが禁止されていて通信できない状態
404	エラー	情報が存在しないために通信できない状態
500	エラー	サーバー側の不具合で通信できない状態
503	エラー	サーバーに負荷がかかって通信できない状態

以上のことから、サーバーが通信完了したことを確認するreadyStateの「4」とサーバーとの通信が無事に終了したことを確認するstatusの「200」のどちらも満たしているときにデータを取得するような条件分岐をしているのがif(xhr.readyState === 4 && xhr.status === 200) {}ということです。

そして、最後にxhr.responseTextとすることで、データを取得することができます。

なので、今回は取得したデータをコンソールに出力するようにconsole.log(xhr.responseText);と記述しています。

★検索ワード
・Ajax
・JavaScript XMLHttpRequest

JSONからデータを取得

フォルダ名：「output_json」

まずは、textsフォルダ下のJSES6フォルダ内にレクチャー用のフォルダoutput_jsonを作成して下さい。
次に、作成したoutput_jsonフォルダ内にindex.htmlとapp.jsを作成して下さい。
ここから先のレクチャーでは、フォルダ作成&ファイル作成指示は省略させていただきますので、皆さん自身で作成して下さい。

今回はJSONデータから実際にデータを出力する方法について説明していきます。

まず、郵便番号で住所を取得するAPIを実行してみましょう。
エンジニア界隈では、APIを実行することを「APIを叩く」などと言いますので、そちらも覚えておきましょう。

index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

app.jsを下記の通り編集してください。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

これで前準備はできたので、実際にJSONデータからデータを抽出する方法を見ていきましょう。

JavaScriptでJSON形式のデータを処理するためには、parseメソッドを使用します。
このparseメソッドを使用すると、JSONデータからJavaScriptのオブジェクト型へ変換されます。

使い方は以下の通りです。

JSON.parse()

JSON.parse(JSONデータ);

なので、今回のコードの場合は下記のようになります。
index.htmlはそのままで、app.jsを下記のように編集して下さい。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let objectAddress = JSON.parse(xhr.responseText);
        console.log(objectAddress);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

上記のようになっていれば、無事にJSON形式のデータをオブジェクト形式に変換できています。
もし下記のようになっていて、中身の確認ができない場合は、▶{message: null...となっている▶をクリックしてみて下さい。

今回取得したいデータはオブジェクトの中のresultsに入っています。
なので、まずはそちらをコンソールで確認してみましょう。

index.htmlはそのままで、app.jsを下記のように編集して下さい。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let objectAddress = JSON.parse(xhr.responseText);
        console.log(objectAddress.results);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

今回はresultsの中身をコンソールに出力するだけなので、console.log(objectAddress);をconsole.log(objectAddress.results);に変更するだけです。
オブジェクトのデータを抽出する場合は、.(ドット)で繋げることを思い出してください。

今回resultsは配列になっており、1つの要素が入っています。
配列の場合、1つ目の要素が0とインデックスされているので、resultsの中身を抽出するためには、results[0]としなければなりません。

さっそく実際にコンソールに出力してみましょう。
index.htmlはそのままで、app.jsを下記のように編集して下さい。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let objectAddress = JSON.parse(xhr.responseText);
        console.log(objectAddress.results[0]);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

今回は配列の要素を取得したかったので、.(ドット)でつなげるのではなく、[ ]を使用しています。

これで中身はオブジェクトになっているので、あとは.(ドット)でつなげていきましょう。

今回は「東京都」、「港区」、「南青山」、「1070062」という文字列をコンソールに出力してみます。
index.htmlはそのままで、app.jsを下記のように編集して下さい。

app.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://zip-cloud.appspot.com/api/search?zipcode=1070062');

xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let objectAddress = JSON.parse(xhr.responseText);
        console.log(objectAddress.results[0].address1);
        console.log(objectAddress.results[0].address2);
        console.log(objectAddress.results[0].address3);
        console.log(objectAddress.results[0].zipcode);
    }
}

HTMLファイルをブラウザで読み込み、下記画像のようにコンソールにデータが表示されていればOKです！

どうでしょうか？
このようにAjaxを使用してAPIを叩くと様々なことができるようになります。
今回使用したAPIは、郵便番号から住所を取得できるものでしたが、他にもたくさんのAPIが世の中には存在しています。
ぜひAPIを活用できるようになりましょう。

★検索ワード
・JavaScript オブジェクト値取得

JavaScript ES6とは

プログラミング言語にはそれぞれバージョンというものが存在することがほとんどですが、現在JavaScriptそのものにはバージョンが存在しません。
その代わり、JavaScriptの言語仕様としてECMAScriptというものがあります。
このECMAScriptは定期的に改定が行われており、2015年に大きな改定がありました。
正式名称はECMAScript 2015(ES2015)ですが、エンジニア界隈ではES2015が第6世代のバージョンなので、ES6(イーエスシックス)と呼ばれることがほとんどです。

つまり、今回学習していただくJavaScript ES6教材では、ES6で追加された便利な機能や構文などを学んでいくこととなります。

実は皆さんが使っているletやconstはES6の記述方法です。
ES6以前はvarを使用していました。
varを使用しても問題ありませんが、letとvarはほとんど同じであり、近年はletとconstが主流になっているので、letとconstに関しては先取りして使っていただいていたということです。

また、近年のモダンな開発ではなるべくconstを使用し、constが使用できない場面ではletを使用するということがほとんどです。

そのため、JavaScript ES6教材では主に変数にはconstを使用していきます。

ES6がどのようなものかわかったところで、さっそくES6で新しく追加された便利機能や構文などを学んでいきましょう。

★検索ワード
・JavaScript ES6
・JavaScript ECMAScript 違い

テンプレート文字列

フォルダ名：「template」

テンプレート文字列は、文字列の中で変数を展開するための記法です。

どのようなものかイメージしにくいので、実際にコードを記述してみましょう。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const name = "太郎";
const age = 28;
const message = `私の名前は${name}です。年齢は${age}歳です。`;

console.log(message);

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

テンプレート文字列を使う場合は、文字列を``(バッククオート)で囲み、${変数名}と記述することで文字列内に変数を展開することができるようになります。
変数が展開されると文字列連結と同じ結果になるので、最終的に私の名前は太郎です。年齢は28歳です。が出力されました。

★検索ワード
・JavaScript テンプレート文字列
・javascript 変数展開

アロー関数

フォルダ名：「arrow」

アロー関数は無名関数を省略して記述できる関数のことです。
無名関数という概念が初めて登場したので、まずはそちらから紹介します。

無名関数

無名関数は名前そのままの意味で、関数名がない関数のことを言います。

実際に書き方を見てみましょう。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const test = function (name) {
    return name;
}

console.log(test("太郎"));

HTMLファイルをブラウザで読み込み、コンソールに太郎が出力されていればOKです。

こちらのコードを見ていただいてもわかるように、関数には名前がありません。
その代わりに変数に関数が代入されています。
そのため、この無名関数を実行するにはtest("太郎")といったように、関数名の代わりに変数名と(引数)を記述して実行することになります。

このように、名前のない関数のことを無名関数と言います。

アロー関数の書き方

アロー関数は、この無名関数をより書きやすくしたものだと思ってください。

アロー関数は下記のように記述します。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const test = (name) => {
    return name;
}

console.log(test("太郎"));

HTMLファイルをブラウザで読み込み、コンソールに太郎が出力されていればOKです。
このようにfunctionと記述するのではなく、=>を使用して関数を作る方法がアロー関数です。

また、引数が1つの場合は下記の例のように( )を省略して記述することもできます。

引数が一つ

const test = name => {
    return name;
}

console.log(test("太郎"));

また、関数内が単一式の場合は{ }やreturnを省略することができます。

単一式の場合

const test = (num1, num2) => num1 + num2;

console.log(test(2, 5));

最初は慣れないかもしれませんが、現在では関数の代わりにアロー関数を使用するのがモダンJavaScript開発のスタンダードです。

少しずつ使っていき、アロー関数に慣れていきましょう。

★検索ワード
・JavaScript 無名関数
・JavaScript アロー関数

分割代入

フォルダ名：「destruct」

分割代入とは、オブジェクトや配列から値を抽出し、変数に値を代入することを指します。

オブジェクトの分割代入

まずはじめに、オブジェクトの分割代入から見ていきます。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const profile = {
    name: "太郎",
    age: 28
};

const { name, age } = profile;
const message = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message);

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

それではコードを見ていきましょう。

オブジェクト

const profile = {
    name: "太郎",
    age: 28
};

このコードでオブジェクトを変数profileに代入しています。

そして、const { name, age } = profile;のように記述していただくと、オブジェクトの中身を各変数に代入することができるようになります。

関数の引数とは違い、順番ではなく名称を一致させる必要があります。
むしろ、名称さえ合っていれば一部だけ取り出すことも可能です。

また、抽出した値(プロパティ)に別名をつけたい場合は、下記の例のように:コロンを使用することで任意の変数名で扱うことも可能です。

任意の変数名

const profile = {
    name: "太郎",
    age: 28
};

const { name: newName, age: newAge } = profile;
const message = `私の名前は${newName}です。年齢は${newAge}歳です。`;
console.log(message);

配列の分割代入

次に、配列の分割代入を学習していきましょう。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const profile = ["太郎", "28"]

const [name, age] = profile;
const message = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message);

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

それではコードを見ていきましょう。

配列

const profile = {
    name: "太郎",
    age: 28
};

このコードで配列を変数profileに代入しています。

そして、const [ name, age ] = profile;のように記述していただくと、配列の中身を各変数に代入することができるようになります。

オブジェクトの分割代入とは違い、名称ではなく順番を一致させる必要があります。
順番さえ一致していれば、任意の変数名を設定することができます。
こちらは関数の引数と同じ考え方ですね。

このように分割代入を使用すると、複数の値を一度に複数の変数に代入できるので、一つひとつ設定する必要がなくなります。

たくさんの変数を用意しなければいけない場面などでは積極的に使ってみましょう。

★検索ワード
・JavaScript 分割代入
・JavaScript 分割代入オブジェクト
・JavaScript 分割代入配列

デフォルト値

フォルダ名：「default」

デフォルト値とは、関数の引数やオブジェクトの分割代入時に使用することができます。
具体的には、引数やオブジェクトの値が存在しない場合の初期値を設定することができる機能です。

引数のデフォルト値

まず初めに引数の場合を見てみましょう。
下記のようなコードがあったとします。

引数なし

const sayHello = name => console.log(`${name}さん、こんにちは！`);

アロー関数を使用して、引数nameさん、こんにちは！という文字列を出力する関数です。

しかし、この関数を引数なしのsayHello();で実行したらどうなるでしょうか？
答えは、undefinedさん、こんにちは！となります。
もしこれをユーザーが見てしまった場合、undefinedなんて言葉はほとんどのユーザーはわからないので混乱してしまいます。

そこで、引数が設定されていなかったときのデフォルト値を設定してみます。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const sayHello = (name = "ゲスト") => console.log(`${name}さん、こんにちは！`);

sayHello();
sayHello("太郎")

HTMLファイルをブラウザで読み込み、コンソールにゲストさん、こんにちは！と太郎さん、こんにちは！が出力されていればOKです。

先ほどのデフォルト値を設定していないコードとの違いは、引数名の後ろに=でデフォルト値を設定しているところです。

今回は引数nameにゲストという文字列をデフォルト値に設定しているので、コンソールにはundefinedが出力されるのではなく、ゲストと表示されています。

もちろん、引数が正しく設定されている場合は、太郎と引数の値を出力しています。
※本来、引数が1つの場合は引数の()を省略できますが、デフォルト値を設定する場合は省略できないので気を付けましょう。

オブジェクト分割代入のデフォルト値

オブジェクトの分割代入にもデフォルト値を設定することができます。

index.htmlはそのままで、app.jsを下記の通り編集してください。

app.js

const profile = {
    age: 28,
}

const { name = "ゲスト" } = profile;
const message = `${name}さん、こんにちは！`;
console.log(message);

HTMLファイルをブラウザで読み込み、コンソールにゲストさん、こんにちは！が出力されていればOKです。

このようにデフォルト値を設定することで、思わぬバグを回避することができるようになります。

設定しておいて損はないので、積極的にデフォルト値は設定しておくといいですね！

★検索ワード
・JavaScript 分割代入

map関数

フォルダ名：「map」

map関数を使用すると、配列を順番に処理して、処理した結果を配列として受け取ることができます。

index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];

const arrayResult = arrayName.map(name => {
    const message = `私の名前は${name}です。`;
    return message;
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに['私の名前は山田です。', '私の名前は佐藤です。', '私の名前は小林です。', '私の名前は鈴木です。', '私の名前は小田です。']が配列で出力されていればOKです。

それではコードを見ていきましょう。
const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];で配列を変数arrayNameに代入しています。

次に、下記のコードでmap関数を使用しています。

map関数

const arrayResult = arrayName.map(name => {
    const message = `私の名前は${name}です。`;
    return message;
});

map関数の使い方は、配列名.map() という形で使用します。

そして( )の中にはアロー関数、もしくは無名関数を書きます。
関数は任意の名前を付けた引数を取ることができ、その引数に配列の中の値が一つひとつ入ってきます。

今回は名前を格納している配列なので、引数名をnameとしています。
そして各配列の要素を文字列の中で展開し、私の名前は引数nameです。という文字列を変数messageに代入します。
その変数messageを戻り値として返し、変数arrayResultに配列の要素として追加していきます。

そのため、変数arrayResultをコンソールに出力すると、['私の名前は山田です。', '私の名前は佐藤です。', '私の名前は小林です。', '私の名前は鈴木です。', '私の名前は小田です。']が配列で出力されます。

以上がmap関数の基礎ですが、map関数ではインデックス番号も引数にとることができます。

index.htmlはそのままで、app.jsを下記の通り編集してください。

app.js

const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];

const arrayResult = arrayName.map((name, index) => {
    const message = `${index + 1}人目の名前は${name}です。`;
    return message;
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに['1人目の名前は山田です。', '2人目の名前は佐藤です。', '3人目の名前は小林です。', '4人目の名前は鈴木です。', '5人目の名前は小田です。']が配列で出力されていればOKです。

配列のインデックス番号を取得するためには、例のように第2引数を記述することで配列の要素の番号を取得することができます。
1つ注意点は、インデックス番号は配列なので0から始まるということです。
なので、今回はindex + 1とすることで、1番目や2番目などを出力しています。

★検索ワード
・JavaScript map 使い方

filter関数

フォルダ名：「filter」

filter関数はmap関数と使い方はほとんど同じですが、returnに条件式を記述して、一致するもののみを戻り値として返す関数です。

index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const arrayNum = [3, 19, 25, 32, 40, 49, 53, 55, 73, 90, 100];

const arrayResult = arrayNum.filter(num => {
    return num % 5 === 0
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに[25, 40, 55, 90, 100]が配列で出力されていればOKです。

配列の中から特定の条件に一致するものを取得したい場合はfilter関数を使いましょう。

★検索ワード
・JavaScript filter 使い方

条件演算子(三項演算子)

フォルダ名：「ternary」

条件演算子は「if文」を簡略的かつ効率よく記述する方法です。
3つの値・式を必要とする特殊な演算子です。

初めに「if文」で書いたパターンを見てください。

if文

const num1 = 300;
const num2 = 200;

if (num1 > num2) {
    console.log("num1はnum2より大きい");
} else {
    console.log("num1はnum2より大きくない");
}

こちらのif文の場合、num1はnum2より大きいがコンソールに出力されます。

これを条件演算子で記述してみます。
index.htmlを下記の通り編集してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

app.js

const num1 = 300;
const num2 = 200;

num1 > num2 ? console.log("num1はnum2より大きい") : console.log("num1はnum2より大きくない");

HTMLファイルをブラウザで読み込み、num1はnum2より大きいとコンソールに出力されていればOKです。

条件演算子の使い方は下記の通りです。

条件演算子の使い方

条件式 ? Trueの場合の処理 : Falseの場合の処理

なので、今回の例のコードの場合、num1 > num2が条件式であり、その条件式がtrueだった場合はconsole.log("num1はnum2より大きい")が実行され、falseだった場合はconsole.log("num1はnum2より大きくない")が実行されます。

もちろん今回のコードの場合trueになるので、コンソールにはnum1はnum2より大きいが出力されます。

このように条件演算子はif文を1行で記述できるので、とてもコードがシンプルになります。
しかし、その反面if文よりも直観的ではなく読みにくいので、多用することは避けてください。
１文でも読みやすい条件式の場合は条件演算子を使ってみましょう！

★検索ワード
・JavaScript 条件演算子
・JavaScript 三項演算子

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up