プロデミア

Lesson4 JavaScript

01JavaScriptとは？

JavaScriptとは動的にコンテンツを更新したり、リッチなWebサイトを作成できるスクリプト言語です。
HTMLを家の骨組みに例えるとCSSは壁や屋根などの外観、装飾です。
その中でもJavaScriptは電気やガス、水道などのライフラインのイメージです。

JavaScript と Javaは全く異なる言語です

会議や面接などの場所で間違えた使い方をすると自分自身の評価を落としてしまいます。
また、JavaScriptはJとSが大文字で他は小文字、JavaはJのみが大文字ですのでチャットで送信するときも細かいことですが気にするよう心がけましょう。

1-1 JavaScriptの歴史

JavaScriptは、ウェブ開発の世界において中心的な役割を果たすプログラミング言語です。
その誕生から現在に至るまで、多くの技術革新がJavaScriptのエコシステムを豊かにしてきました。
本セクションでは、JavaScriptの主要な技術とその歴史、それらがウェブ開発に与えた影響について解説します。

・JavaScriptの誕生(1995年)

JavaScriptは1995年にNetscape Communications Corporationによって開発され、ウェブページに動的な要素を追加する能力を提供しました。これにより、静的だったウェブページがインタラクティブ(コンピューターやプログラムが人間の操作や指示に応じて、すぐに反応を返せるよう)になりました。

・ECMAScriptの標準化(1997年)

JavaScriptの普及に伴い、ブラウザ間の互換性問題が浮上しました。これを解決するため、1997年にJavaScriptの標準仕様であるECMAScriptがECMA Internationalによって制定されました。
ECMAScriptは、JavaScriptの核となる部分の挙動を決めている言語使用のことでプログラミング言語の仕様になります。
これ以降、ECMAScriptのバージョンの更新は続いています。

・jQueryの登場 (2006年)

jQueryは2006年にJohn Resigによって発表されました。この軽量なJavaScriptライブラリは、DOMの操作、イベントハンドリング、アニメーションの実装を簡単にし、クロスブラウザの問題を解決しました。jQueryの簡潔な構文により、開発者はより少ないコードでより多くのことを実現できるようになり、ウェブ開発が大幅に加速されました。

・Node.jsの革新(2009年)

2009年に登場したNode.jsは、JavaScriptをサーバーサイドで実行可能にしました。これにより、JavaScriptの使用範囲がクライアントサイドからサーバーサイドへと大きく拡張されました。

・TypeScriptの貢献 (2012年)

JavaScriptに静的型付けを導入したTypeScriptは、2012年にMicrosoftによって開発されました。型の安全性を提供することで、大規模なアプリケーションの開発と保守が格段に容易になりました。「Visual Studio Code」とも非常に相性が良く、近年人気が高くなっている言語の一つです。

・フロントエンドフレームワークの台頭(2013年〜)

2013年以降、React、Vue.jsなどのフロントエンドフレームワークがウェブ開発を一新しました。これらにより、開発者は迅速かつ効率的に、よりインタラクティブで使いやすいユーザーインターフェースを構築できるようになりました。フレームワークの進化は止まることなく続いており、ウェブアプリケーションの構築方法を常に改善しています。ウェブ開発を行う上で、フロントエンドフレームワークの役割はますます重要になっています。

JavaScriptの歴史を振り返ると、その誕生から現在に至るまで、ウェブ開発におけるその役割は絶えず進化し続けています。1995年の誕生から始まり、ECMAScriptの標準化、jQueryの登場、Node.jsによるサーバーサイドへの拡張、TypeScriptによる型の安全性の提供、そしてフロントエンドフレームワークの台頭に至るまで、JavaScriptはウェブ開発のあらゆる面に影響を与えてきました。

02Web開発におけるJavaScriptの役割

ウェブ開発でのJavaScriptの役割について説明します。JavaScriptを使うことで、以下のようなことが可能になります。

・ユーザーとのやり取りを向上させる

ユーザーがウェブページで行うクリックやマウスオーバーなどの動作に応じて、ページの特定部分を即座に更新できます。これにより、ページを再読み込みせずにスムーズな体験を提供することができます。

・情報をリアルタイムで表示

Ajax（Asynchronous JavaScript and XML）を利用することで、サーバーからデータを非同期に取得し、ページに動的にコンテンツを表示することが可能になります。これにより、ユーザーはリアルタイムで情報を得ることができます。

要するに、JavaScriptはウェブページに動きを加えることで、「ユーザーとのやり取りを改善」し、「情報をリアルタイムで更新する」ことを可能にします。これにより、ユーザーにとってより快適で使いやすいウェブ体験を提供するのが、JavaScriptの主な役割と言えます。

03使ってみよう

3-1使ってみよう(alert)

・JavaScriptファイルを作成して書き込む

HTMLの時は○○.html CSSの時は○○.css という風に拡張子を設定していたと思います。それと同様に○○.js と拡張子をつけてファイルを作成することでJavaScript用の環境を作成することができます。

・HTMLファイルの中で読み込む

JavaScriptの記述量が少ない場合や小規模な開発の場合HTMLファイルに記述する場合があります。以下のコードにあるようにbodyの閉じタグの直前に<script></script>を埋め込みそのタグの中にJavaScriptを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    
<script>
	// ここにJavaScriptを書く
</script>
</body>
</html>

それでは実際にコードを書いていきましょう。
まずはalert操作についてです。
Cloud9に「Lesson2_JavaScript」というディレクトリを作成し、その中に「start」というフォルダを作成してください。
「start」フォルダが作成できたらその中身にindex.html と main.js という２つのファイルを作成しましょう。

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="./main.js"></script>
</body>
</html>

下の写真のようになっていれば大丈夫です！

簡単なHTMLファイルの説明

・簡単なHTMLファイルの説明

<script src=”./main.js”></script>この部分でmain.jsファイルを読み込んでいます。
この記述がなければJavaScriptは実行されず画面は変化しません。

今回は主にCloud9を用いますが、他にもPhpStormやVSCodeといったエディタがあります。またCodeSandboxのようなWeb上で無料で利用できるエディタもあります。
【もしもVSCodeを使っている方がいたら、右下にGo Liveというタブがあるはずなのでクリックしましょう。自動でブラウザに表示してくれるはずです。】

・VSCodeとは

Microsoftが作成しているエディタのことで無料で使うことができます。
今後開発現場でも用いられることがあると思うのでダウンロードすることをお勧めします。
ダウンロードは以下から。

Visual Studio Code – コード エディター | Microsoft Azure

ダウンロードした後の手順は以下を参考に
①　上にあるメニューの中にある view→Extensions をクリックし出現した検索窓に「japanese」と入力し、
一番上に出てきたJapanese Language Pack for Visual Studio CodeをインストールしVSCodeを再起動しましょう。
日本語になっているはずです。
②　①同様に拡張機能検索窓に「live Server」と入力しLive Serverをインストールしましょう。

インストール後VSCodeを再び再起動する。

試しに簡単なJavaScriptを作成してみましょう。

以下のコードを作成したmain.jsに書き込み、index.htmlをブラウザで読み込みましょう。
【もしもVSCodeを使っている方がいたら、右下にGo Liveというタブがあるはずなのでクリックしましょう。自動でブラウザに表示してくれるはずです。】

main.js

alert('hello JavaScript');

上の画像が表示されればOKです。OKを押した後でも画面を読み込めば何度でも表示させることができます。
今回使用したalert()は()の中に書き込んだ内容がウィンドウに表示されます。このウィンドウのことをダイアログといいます。
実務内でもちょくちょく出てくる言葉なので覚えておきましょう。
またalertでは文字列だけでなく数値や算術演算子(+. -. %)なども用いることができます。
試しに実行してみましょう。

main.js

alert(200 * 3);

上記の様に表示されましたか？されていれば問題ありません。

もし200 * 3で表示されたらシングルクォーテーション(’’)もしくはダブルクォーテーション(””)で囲ってしまっていることが考えられます。クォーテーションで囲ってしまうと数値ではなく文字列として判別されるので計算されなくなります。

04デベロッパーツールの使い方

4-1 もっと簡単にJavaScriptを試してみる

これまでJavaScriptはmain.jsファイルを作成し、HTMLファイルを読み込み実行していました。
今後はデバッグや確認などで少しだけJavaScriptを試してみたいという場面が増えてくるかと思います。
そんなときに毎回ファイルを作成すると面倒ですよね。
そこでブラウザにはデベロッパーツールというものが存在します。ctrl + shift + j または右クリック→検証で表示することができます。
デベロッパーツールを開いたらConsoleというタブが上のほうに存在するはずです。Consoleをクリックしてみましょう。
以下の画像を参考に。

Consoleが開けたら以下のコードを入力してみましょう。

alert('hello JavaScript');

入力すると先ほどと同様にダイアログが表示されるかと思います。
ちなみに文字列の連結は以下のようにします。

alert('こんにちは' + '山田　太郎です');

4-2 console.logを使いこなそう

JavaScriptの機能の１つとしてconsole.log() という機能があります。(読み方：コンソールドットログ)　
console.logの役割は()に入れた文字列や変数、配列などをConsoleに出力してくれます。
今後実務においてこの変数には何が格納されているかな？正しく値が取れているかな？など確認の作業を必ず行います。
その時のこのconsole.logをもちいてデバッグを行います。
日頃からconsole.logでデバッグを行う癖をつけましょう。

デバッグとは？

コンピュータのプログラムの誤り（＝バグ）を見つけ、手直しをすることです。

早速、console.logを試してみましょう！

1-3と同様にConsoleにコードを入力してみましょう。

console.log("hello world");

Consoleが以下のようになればOKです。
alertとの違いはダイアログとしてウィンドウに表示されるか、Consoleに出力されるかです。

文字列と変数を連結する方法

①　+を使う方法
’こんにちは’ + name + ‘です。’

②　(バッククォート(shift + @))を使う方法
`こんにちは${name}です。`
バッククォートを使い変数を${}で囲うことで+を使わずに変数を文字列の中で使うことができます。

4-3 デベロッパーツールのその他の機能

他にもデベロッパーツールには様々な機能があり、一部を紹介します。

  • Elements（エレメント）: HTMLやCSSをリアルタイムで編集し、スタイルの変更がページにどのように影響するかを確認できます。
  • Sources（ソース）: ページに含まれるリソースを閲覧し、ブレークポイントを設定してJavaScriptのデバッグを行うことができます。
  • Network（ネットワーク）: ページの読み込みに関するリクエストを監視し、パフォーマンスのボトルネックを特定できます。
  • Performance（パフォーマンス）: ページの読み込みや実行時のパフォーマンスを分析することができます。

デベロッパーツールを使用することでJavaScriptの開発を効率よく実施できるのでぜひ使用してみてください！

05データ型（数値、文字列、ブール値）

プログラミング言語JavaScriptを学ぶ上で、まず知っておくべき基本的な概念の一つが「データ型」です。JavaScriptでは、データにはさまざまな「型」がありますが、特によく使われる3つの型、「数値」、「文字列」、「ブール値」について説明します。

数値（Number）

数値は、算数で使われる数字そのものです。JavaScriptでは、整数や小数点を含む数値を直接記述できます。例えば、42、3.14などが数値になります。数値は足し算、引き算、掛け算、割り算といった算術演算に使用できます。

let age = 25; // 整数
let temperature = -3.5; // 小数点を含む数値
console.log(age + 5); // 出力: 30
console.log(temperature * 2); // 出力: -7

文字列（String）

文字列は、文字の並びを表します。JavaScriptでは、文字列をシングルクォーテーション（'）、ダブルクォーテーション（"）、またはバッククォート（`）で囲むことで表現します。文字列は、単語、文、あるいはそれ以上の長さのテキストを扱うのに使用されます。

let name = "Taro"; // ダブルクォーテーションで囲んだ文字列
let greeting = 'こんにちは、' + name + 'さん。'; // 文字列の連結
console.log(greeting); // 出力: こんにちは、Taroさん。

ブール値（Boolean）

ブール値は、true（真）またはfalse（偽）のいずれかの値をとります。これは、はい/いいえ、オン/オフ、真/偽などの二択の状態を表現するのに使われます。条件分岐やループなどの制御構造でよく使用されます。

let lightOn = true; // ライトがオンかどうか
let isAdult = (age >= 20); // 成人かどうか
console.log(lightOn); // 出力: true
console.log(isAdult); // 出力: true

これらのデータ型はJavaScriptプログラミングの基礎を形成します。数値、文字列、ブール値を理解し、使いこなすことは、プログラムを書く上で非常に重要です。これらの型を組み合わせることで、様々な情報を表現し、プログラムを通じて処理することができます。

06変数の使い方

JavaScriptをはじめとするプログラミング言語には変数という機能があります。繰り返し使ったり、長いデータを格納できます。

JavaScriptでは３つの宣言方法があります。

  • var
  • let
  • const

の３つです。
以下に、簡単に違いがわかる図を載せました。

再代入再宣言
var〇〇
let〇×
const××

詳しい違いや例を、これから一つずつ紹介します。

6-1 varについて

varは昔から存在し古いシステムでしばしば使用されています。宣言方法は以下のコードです。

var name = "山田　太郎";

console.log(name);
// >山田　太郎

上記の様にnameという変数の中に山田　太郎が格納されているためconsole.logでnameを表示させると山田　太郎が表示されます。

また、＝を用いていますが、これは数学的な意味の「等しい」という意味ではなくプログラムでは左辺に右辺の値を代入するという意味になります。

varでは上記の表にある通り再代入、再宣言が可能です。どういうことかというと、

var name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

上のように再代入が可能でnameに鈴木　一郎を入れるとname変数の中身が上書きされます。

また、再宣言に関しても、

var name = "山田　太郎";
var name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

という風になり再宣言もできるようになっています。

しかしこの「再代入」されるということは、何千行とコードが書かれているファイルの中でもしも変数名が被ってしまうと、もともとあった変数が上書きされてしまうということです。結果的にシステムが正常に動かなくなってしまう可能性があります。そのため現在ではvarはあまり用いられずlet か constが用いられます。

6-2 let について

letは再代入は可能ですが、再宣言はできません。

var と同様に再代入は以下の通りです。

let name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

name = "鈴木　一郎"の部分でnameを上書きしています。

一方でletを再宣言してみると、

let name = "山田　太郎";
let name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

上の通りUncaught SyntaxError: Identifier 'name' has already been declaredというエラーが出ます。
これはnameという名前の変数はもう定義してるよ。というエラーです。
何度も述べた通り、letは再宣言することができません。変数は基本的にletで宣言するようにしましょう。

6-3 constについて

constは再代入も再宣言もできません。

constの再代入は以下の通りです。

const name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ます。同様に再宣言も、

const name = "山田　太郎";
const name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ますね。constは再宣言も再代入もできないため定数などを宣言するときに用いられます。

07演算子（算術、比較、論理）

演算子には、算術演算子、比較演算子、論理演算子といった種類があり、それぞれ異なる操作を行います。

算術演算子

算術演算子は、数値の計算に使われます。加算（+）、減算（-）、乗算（*）、除算（/）、剰余（%）が基本的な算術演算子です。

let sum = 10 + 5; // 加算: 15
let difference = 10 - 5; // 減算: 5
let product = 10 * 5; // 乗算: 50
let quotient = 10 / 5; // 除算: 2
let remainder = 10 % 3; // 剰余: 1

比較演算子

比較演算子は、二つの値を比較し、その比較結果が真（true）か偽（false）かを返します。等しい（==）、等しくない（!=）、より大きい（>）、より小さい（<）、以上（>=）、以下（<=）などがあります。等価演算子（===、!==）は、値だけでなく型も比較します。

let isEqual = (10 == 10); // 等しい: true
let isNotEqual = (10 != 5); // 等しくない: true
let isGreaterThan = (10 > 5); // より大きい: true
let isLessThan = (10 < 20); // より小さい: true

論理演算子

論理演算子は、真偽値（trueやfalse）を操作するのに使います。AND（&&）、OR（||）、NOT（!）が基本的な論理演算子です。

  • AND (&&): すべての条件がtrueの場合にtrueを返します。
  • OR (||): いずれかの条件がtrueの場合にtrueを返します。
  • NOT (!): 条件がfalseの場合にtrueを返します。
let isAdultAndStudent = (age >= 20) && (isStudent === true); // 成人かつ学生か
let isAdultOrStudent = (age >= 20) || (isStudent === true); // 成人または学生か
let isNotAdult = !(age >= 20); // 成人ではないか

これらの演算子を理解し、使いこなすことで、JavaScriptでのプログラミングを効率的に行うことができます。

08条件分岐

8-1 if文の使い方

if文は、プログラム内で特定の条件が成り立っているかどうかを確認し、その条件に応じて異なる処理を行うための仕組みです。
JavaScriptだけでなく他のプログラミング言語にも使われている基本的な考えです。
では、JavaScriptでのif文の書き方を学んでいきましょう。

if(条件文){
  // trueだった場合の処理
} else {
  // falseだった場合の処理
}

ここで、if文の構造を見てみましょう。

if (条件) {：条件式が真の場合に実行されるコードブロックが始まります。
条件がtrueだった場合、{}の中にある処理が実行されます。
}：コードブロックの終わりを示します。

以下のサンプルコードを見てみましょう。

【例】

var num = 70;
if (num > 80) {
    console.log("numは80より大きいです。");
}else{
    console.log("numは80以下です。");
}

// >numは80以下です。

【　さらに詳しくifについて学ぶ　】

コード(条件文)結果備考
a == ba,bが同じならtrue型は参照しない
a === ba,bが型まで同じならtrue2と”2”は数値型と文字列型で違うためfalseになる

8-2 else

if文で指定した条件がfalseのときに実行したいコードブロックを指定するには、elseを使用します。

let score = 75;
if (score >= 80) {
console.log("素晴らしい！Aランクです。");
} else { console.log("もう少し頑張りましょう。"); }
// 出力: もう少し頑張りましょう。

この例では、スコアが80以上なら”Aランク”と出力し、そうでなければ”もう少し頑張りましょう”と出力します。

8-3 swith

複数の固定された条件を比較する場合、ifとelse ifの連鎖よりもswitch文の方が適していることがあります。switch文は、ある式の値に基づいて多くのケースの中から一つを実行します。

let color = "赤";
switch (color) {
case "赤":
console.log("止まれ");
break;
case "黄":
console.log("注意");
break;
case "緑":
console.log("進め");
break;
default:
console.log("無効な色です"); }
// 出力: 止まれ

この例では、色に応じて異なるメッセージを出力しています。switchの条件にマッチするcaseが実行され、break文によってswitch文から抜け出します。どのcaseにもマッチしない場合、defaultブロックが実行されます。

09ビルトイン（組み込み）オブジェクト

9-1 Stringオブジェクト

JavaScriptにおいて文字列（String）を定義する場合には、シングルクォート（’）、ダブルクォート（”）、またはバッククォート（`）を使います。これらは文字列のプリミティブ型(最も基本的なデータ型)を生成しますが、JavaScriptではプリミティブ型の文字列に対しても、Stringオブジェクトのメソッドを使用することができます。これはJavaScriptの自動的な型変換（ボックス化）によるものです。

このオブジェクトにはいくつか便利なプロパティやメソッドが存在します。

lengthプロパティ

文字列の長さ（文字数）を取得します。

console.log("こんにちは".length); // 出力: 5

charAtメソッド

指定された位置にある文字を返します。

console.log("こんにちは".charAt(2)); // 出力: に

indexOfメソッド

指定された値が最初に出現するインデックスを返します。値が見つからない場合は-1を返します。

console.log("こんにちは、世界".indexOf("世界")); // 出力: 6

sliceメソッド

文字列の指定された部分を抽出して新しい文字列として返します。

console.log("こんにちは、世界".slice(0, 5)); // 出力: こんにちは

toUpperCaseメソッドとtoLowerCaseメソッド

文字列をそれぞれ大文字や小文字に変換します。

console.log("Hello".toUpperCase()); // 出力: HELLO
console.log("WORLD".toLowerCase()); // 出力: world

replaceメソッド

文字列内の指定された値を別の値に置換します。

console.log("Apple".replace("A", "a")); // 出力: apple

splitメソッド

文字列を指定された区切り文字で分割し、配列として返します。

console.log("りんご,みかん,ばなな".split(","));
// 出力: ['りんご', 'みかん', 'ばなな']

これらのプロパティやメソッドを使うことで、文字列の様々な操作を簡単に行うことができます。

JavaScriptでプログラミングを行う際には、これらの便利な機能を積極的に利用してみてください。

9-2 Arrayオブジェクト

配列(Arrayオブジェクト)は、複数の値を一つの変数で管理するための便利なツールです。
これにより、複数の名前や番号などを順番に並べて保存し、必要に応じてそれらにアクセスしたり操作したりすることができます。
Arrayオブジェクトを定義する基本的な方法は、角括弧[]を使用して配列リテラルを作成することです。配列内の各アイテムはコンマで区切られます。

const fruits = ['りんご', 'バナナ', 'メロン'];
console.log(fruits[0]); // 出力: りんご
console.log(fruits[1]); // 出力: バナナ
console.log(fruits[2]); // 出力: メロン

Arrayオブジェクトにもいくつか便利なプロパティやメソッドは存在します。

length

配列の長さ（要素の数）を取得します。

let fruits = ['りんご', 'バナナ', 'メロン'];
console.log(fruits.length); // 出力: 3

push()

配列の末尾に一つ以上の要素を追加し、新しい長さを返します。

fruits.push('オレンジ');
console.log(fruits); // 出力: ['りんご', 'バナナ', 'メロン', 'オレンジ']

pop()

配列の末尾から要素を取り除き、その要素を返します。

let lastFruit = fruits.pop();
console.log(lastFruit); // 出力: オレンジ
console.log(fruits); // 出力: ['りんご', 'バナナ', 'メロン']

shift()

配列の先頭から要素を取り除き、その要素を返します。

let firstFruit = fruits.shift();
console.log(firstFruit); // 出力: りんご
console.log(fruits); // 出力: ['バナナ', 'メロン']

unshift()

配列の先頭に一つ以上の要素を追加し、新しい長さを返します。

fruits.unshift('ストロベリー');
console.log(fruits); // 出力: ['ストロベリー', 'バナナ', 'メロン']

indexOf()

指定された要素を配列で検索し、そのインデックスを返します。見つからない場合は-1を返します。

let index = fruits.indexOf('バナナ');
console.log(index); // 出力: 1

slice()

配列の一部をコピーして新しい配列オブジェクトとして返します。

let citrus = fruits.slice(1, 3);
console.log(citrus); // 出力: ['バナナ', 'メロン']

splice()

配列の既存の要素を削除または置換し、新しい要素を追加して、変更された配列を返します。

fruits.splice(2, 0, 'キウイ');
console.log(fruits); // 出力: ['ストロベリー', 'バナナ', 'キウイ', 'メロン']

concat()

現在の配列に一つ以上の配列を結合した新しい配列を返します。

let moreFruits = fruits.concat(['パイナップル', 'マンゴー']);
console.log(moreFruits);
// 出力: ['ストロベリー', 'バナナ', 'キウイ', 'メロン', 'パイナップル', 'マンゴー']

join()

配列のすべての要素を連結して、一つの文字列として返します。

let allFruits = fruits.join(', ');
console.log(allFruits); // 出力: ストロベリー, バナナ

forEach()

配列の各要素に対して与えられた関数を実行します。

fruits.forEach(function(item, index) { console.log(index, item); }); // 出力:
// 0 りんご
// 1 バナナ
// 2 メロン

map()

配列内のすべての要素に対して与えられた関数を呼び出し、その結果から新しい配列を生成します。

let lengths = fruits.map(function(item) { return item.length; });
// 出力: [3, 4, 2]

filter()

テスト関数を満たすすべての要素からなる新しい配列を生成します。

let longFruits = fruits.filter(function(item) { return item.length > 5; });
// 出力: []
// 注意: この例では、'りんご', 'バナナ', 'メロン' のいずれも5文字以下なので、出力は空の配列になります。

より詳細な説明は次のセクションで行います。

10オブジェクトと配列

10-1 オブジェクトの基本

JavaScriptのオブジェクトは、キーと値のペアで構成されるデータ構造です。
様々なタイプのデータを格納し、操作するのに使用されます。
以下の例では、person という名前のオブジェクトを作成し、name と age の2つのプロパティを持たせています。name の値は “太郎”、age の値は 25 です。

let person = { name: "太郎", age: 25 };

定義されたオブジェクトのプロパティにアクセスするには、ドット記法またはブラケット記法を使用します。

// ドット記法を使用して name プロパティにアクセス
console.log(person.name); // 出力: "太郎" これはドット記法の例です
// ブラケット記法を使用して age プロパティにアクセス
console.log(person["age"]); // 出力: 25 これはブラケット記法の例です

また、プロパティを追加・削除する際は以下のようにします。

// 追加

person.job = "プログラマー";
console.log(person.job);
// 出力: プログラマー これはドット記法でプロパティを追加した例です。ブラケット記法でも、person["job"] = "プログラマー";のようにして追加可能。

// 削除

delete person.job;
console.log(person.job);
// 出力: undefined これはドット記法でプロパティを削除した例です。ブラケット記法でも、delete person["job"];"のようにして削除可能。

オブジェクトに対してメソッドを追加することも可能です。

let person = {
name: '太郎',
greet: function() {
console.log('こんにちは、' + this.name + 'です！');
}
};
person.greet(); // 出力: こんにちは、太郎です！

上記のようにJavaScriptのオブジェクトは柔軟なデータ構造であり、関数、配列、他のオブジェクトなど、あらゆる種類の値を格納することができます。

10-2 配列の操作

10-2-1 配列の宣言

配列の作成方法は大きく２つあります。

main.js

// 配列コンストラクタ
let array1 = new Array('朝', '昼', '晩');
// 配列リテラル
let array2 = ['朝', '昼', '晩'];

console.log(array1);
console.log(array2);

//  array1 ['朝', '昼', '晩']
//  array2 ['朝', '昼', '晩']

new Array or [] を用いると配列を作成することができます。

注意

let array1 = new Array(3);
let array2 = [3];
console.log(array1);
console.log(array2);
// array1 [空 × 3] // array2 [3]

配列コンストラクタの場合、引数に数値を入れた場合、数値分の空配列ができてしまうので基本的には配列リテラルを用います。

配列の初期化は以下のように記載しましょう。

let array = [];

10-2-2 配列の宣言

【 配列に要素を追加する方法 】

先頭に追加する(unshift)

let array = ['赤', '青'];

array.unshift('緑');
console.log(array); 

// ['緑', '赤', '青']

末尾に追加する(push)

let array = ['赤', '青'];

array.push('緑');
console.log(array); 

// ['赤', '青', '緑']

【 配列の要素を削除する方法 】

先頭を削除(shift)

let array = ['赤', '青'];
array.shift();
console.log(array); 

// ['青']

末尾を削除(pop)

let array = ['赤', '青'];

array.pop();
console.log(array); 

// ['赤']

10-2-3 配列にアクセスする方法

配列の中身を表示させる方法をご紹介します。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

配列の中身を見る場合はインデックス番号を指定します。

普通ならば左から１，２，３という風に数えていきますが,
配列の場合、はじめは０から始まります。

よってひまわりを取得したい場合は、flower[0]とすると取得することができます。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

console.log(flower[0]);
// ひまわり
console.log(flower[1]);
// あさがお
console.log(flower[2]);
// チューリップ
console.log(flower[3]);
// どくだみ
console.log(flower[4]);
// undefined

flower[4]は配列の中身が存在しないためundefinedとなります。
また、ループを用いることによって配列の中身を表示させることもできます。

10-3 JSONとオブジェクト

JSON（JavaScript Object Notation）は、JavaScriptのオブジェクト構造を文字列で表すときに使う表記法でデータ交換のフォーマットとして広く使用されています。
JavaScriptのコード内では、オブジェクトや配列の形式でデータを管理することが多いですが、それらをそのままサーバーに対して送信することはできません。
JSONを使用することで管理しているデータを1つずつリクエストパラメータとして設定せずに、まとめて送信することができます。

10-3-1 JSONの表記法

JSONは、JavaScriptのオブジェクトリテラル表記法に似ていますが、以下のような重要な違いがあります：

  • キーは必ずダブルクォーテーション（”）で囲む必要があります。
  • 文字列の値もダブルクォーテーション（”）で囲む必要があります。
  • 数値、ブーリアン値（true/false）、配列、オブジェクト、nullはJavaScriptと同様に記述できます。

以下は有効なJSONの例です：

{
   "name": "太郎",
   "age": 25,
   "isStudent": false,
   "hobbies": ["読書", "映画"],
   "address": { "city": "東京", "country": "日本" }
}

10-3-2 JSON文字列の生成

JavaScriptでオブジェクトからJSON文字列を生成するには、JSON.stringify()メソッドを使用します。このメソッドは、JavaScriptのオブジェクトや値をJSON文字列に変換します。

let person = { name: "太郎", age: 25, isStudent: false };
let jsonString = JSON.stringify(person);
console.log(jsonString);
// 出力: {"name":"太郎","age":25,"isStudent":false}

10-3-3 JSON文字列からオブジェクトの生成

逆に、JSON文字列からJavaScriptのオブジェクトを生成するには、JSON.parse()メソッドを使用します。このメソッドは、JSON文字列を解析してJavaScriptのオブジェクトや値に変換します。

let jsonString = '{"name":"太郎","age":25,"isStudent":false}';
let person = JSON.parse(jsonString);
console.log(person);
// 出力: { name: '太郎', age: 25, isStudent: false }

このように、JSON.stringify()とJSON.parse()を使用することで、JavaScriptのオブジェクトとJSON文字列の間で相互に変換することができます。
これにより、Web APIの使用やサーバーとのデータ交換など、様々なシナリオでのデータの扱いが容易になります。

11ループ

11-1 for文の使い方

for (変数宣言; 繰り返し回数定義; どう繰り返すのか) {
  繰り返し処理
}

forを使って配列をループで取得すると以下のようになります。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

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

//  ひまわり
//  あさがお
//  チューリップ
//  どくだみ

11-2 forEach文の使い方

forEachメソッドを用いると、上より簡単に配列の中身を取り出すこともできます。

let flowers = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

function getFlower(flower){
  console.log(flower);
}

flowers.forEach(getFlower);

//  ひまわり
//  あさがお
//  チューリップ
//  どくだみ

11-3 for…of

「for…of」は「反復可能オブジェクト」を一つずつ取り出して、処理を行うために使います。ここでいう反復可能オブジェクトとは、配列やMap、Setなどのことを指します。

それでは、これらのオブジェクトに対してどのように「for…of」が使用できるのか実際に見てみましょう。

配列: 複数の値を順序づけて格納するために使用します。

const numbers = [1, 2, 3, 4, 5]

for (const number of numbers) {
  console.log(number);
}

> 1
> 2
> 3
> 4
> 5

Map: キーと値のペアを格納するために使用します。setの際にkey, valueの形で格納されます。

const map = new Map();
map.set("apple", "りんご"); 
map.set("banana", "バナナ");

for (const row of map) { 
  // 配列の0番目にキー、1番目に値が格納されている 
  console.log(row[0], row[1]);
}

> apple りんご
> banana バナナ

また、Mapの場合は「分割代入」のように任意の変数名でキーと値を受け取り、ループ内で使用もできます。

const capitals = new Map();
capitals.set('日本', '東京');
capitals.set('アメリカ', 'ワシントンD.C.');

for (const [country, capital] of capitals) { 
  console.log(`${country}の首都は${capital}です。`);
}

> 日本の首都は東京です。
> アメリカの首都はワシントンD.C.です。

Set: 重複しない値を格納するために使用します。配列と似ているが各要素がユニークです。

const uniqueNumbers = new Set();
uniqueNumbers.add(1); 
uniqueNumbers.add(2); 
uniqueNumbers.add(3); 
uniqueNumbers.add(2); // 重複する値は無視されるため、uniqueNumbersの中身は「1, 2, 3」

for (const number of uniqueNumbers) { 
  console.log(number);
}

> 1
> 2
> 3

以上が「for…of」の使用方法になります。
この構文は、データの集まりを一つずつ取り出して処理する際に、非常に役立ちます。

11-4 for…in

「for…in」はオブジェクトのすべての列挙可能なプロパティを通じてループするために使われます。
これはオブジェクトのキー（プロパティ名）を取得するのに便利です。

構文:

for (const key in obj) {
  オブジェクトの各プロパティに対する繰り返し処理
}

key: オブジェクトのプロパティが1つずつ渡されます。
obj: オブジェクトや配列を設定します。

例:

const fruits = { apple: "りんご", banana: "バナナ", orange: "オレンジ" };
for (const key in fruits) {
  console.log(`キー[${key}] 値:[${fruits[key]}]`);
}

> キー[apple] 値:[りんご]
> キー[banana] 値:[バナナ]
> キー[orange] 値:[オレンジ]

「for…in」は配列に対しても使用できますが、渡される要素の順番が担保されていないため配列に対しては「for」文や「for…of」を使用するのが推奨されています。
「for…in」と「for…of」は似ていますが、それぞれ使用する目的が異なります。

for…in: オブジェクトのプロパティ(キー)を列挙するために使用。
for…of: 反復可能オブジェクトの要素に繰り返しアクセスするために使用。

上記のことを意識して使い分けることを推奨します。

12関数とスコープ

12-1 関数の定義

上記のことを意識して使い分けることを推奨します。

function 関数名(){
  // ここに処理を書く
}

上のように関数を作成することができます。
関数名を考えるときは以下のことを意識しましょう。

  1. 関数に中身が想像できる名前を付ける
  2. 日本語はできるだけつけない
  3. 命名規則に沿った名前を付ける 

命名規則については、以下の3つのルールがあります。

  • キャメルケースcamelCaseのように単語の先頭だけ大文字にする
  • スネークケースsnake_caseのように単語間を＿でつなげる
  • ケバブケースkebab-caseのように単語間を-でつなげる

この３つのうちどれかを使用します。このレッスンではキャメルケースを用いますが、今後チーム開発が始まった場合は周りのコードを見てどのケースにするかを考えましょう。周りのコードはキャメルケースなのに自分だけスネークケースを使うなどということはやめましょう。
また２の日本語についてはどうしても日本語じゃないと伝わらないときは日本語にしましょう。
たとえば支払調書などの名前を組み込みたいとき英語にするとPayment Recordと一目で支払調書とはわからない英文になってしまいます。

12-2 関数の呼び出し

先ほど3-1で関数の作成方法を学びましたが関数を書いただけでは実行はされません。
たとえば

main.js

function helloAlert(){
  alert('hello');
}

上にhelloAlert()というダイアログを表示するだけの自作関数を作成しました。
これをブラウザで読み込んでみるとなにも起こらないはずです。なぜなら関数を作成しただけで関数を呼び出せていないからです。
関数を呼び出すにはhelloAlert();という１文を追加しないといけません。
追加するとコードは以下のようになります。

main.js

function helloAlert(){
  alert('hello');
}

helloAlert();

この状態でファイルを実行してみてください。
無事にダイアログに’hello’が表示されているはずです。
また、関数を２回呼び出したいときはfunctionを２回書く必要はなく、helloAlert()を２回書くだけで２回実行されます。余裕があればやってみてください。

12-2-1 関数に引数を設定する

これまでの関数には引数がありませんでしたが、場合によっては関数に引数が設定される場合があります。
たとえば足し算する関数を用意しました。

main.js

function addNumber(num1, num2){
  let result = num1 + num2;
  return result;
}

console.log(addNumber(1, 5));
// >6
console.log(addNumber(17, 23));
// >40

今回は足し算する値は関数外から取得するので引数にnum1とnum2を設定します。
もしもnum1とnum2が関数内で設定されている場合は以下となります。

function addNumber(){
  let num1 = 5;
  let num2 = 10;
  let result = num1 + num2;
  return result;
}
console.log(addNumber());
// >15

しかしこれでは5 + 10しかできない関数になってしまうので意味ないですよね。
足し算に必要な値は必ず外部から取得し計算に用いられる値も異なるはずです。
よって外部の値が必要な時は必要な数だけ引数に変数を指定するようにしましょう。

また、作成した関数に返り値を求める場合必ずreturnを設定します。
今回は足し算の結果であるresultの値が欲しかったのでreturn result;としました。

たとえば、DBに保存するだけで終わり、などの関数は見返りを求めないのでreturnの設定はいりません。しかし、電話番号のハイフンを除く関数であればハイフンが除かれた後の電話番号が見返りとしてほしいはずです。
そういう場合はreturnを必ず使用します。

JavaScriptにおける関数

JavaScriptには大きく２つの関数が存在します。

  1. 自作関数自ら作成したhelloAlert()のような関数のこと
  2. デフォルト関数これはalert()やconfirm()などのもともとJavaScriptに備わっている関数

コラム: 無名関数

無名関数は名前の通りfunctionの後に関数名を指定しなくてもよい関数です。
たとえば先ほどのhelloAlert関数を無名関数に直すと下のようになります。

const helloAlert = function(){
  alert('hello');
}

helloAlert();

変数を利用することで無名関数を作成することができます。
無名関数を呼び出すときは関数名ではなく変数名を利用して呼び出します。

自作関数を無名関数の大きな違いは関数の呼び出す場所が異なる点です。

自作関数ではどこで呼び出しても関数が実行されましたが無名関数では定義後でないと呼びだすことはできません。

実際に確認してみましょう。

main.js

helloAlert();

function helloAlert(){
  alert('hello');
}

helloAlert();

// 2回helloAlertが呼び出される

helloAlert();

const helloAlert = function(){
  alert('hello');
}

helloAlert();

// Uncaught ReferenceError: helloAlert is not defined

無名関数のほうでは関数定義前に関数を呼び出してしまうと上のようなUncaught ReferenceError: helloAlert is not definedというエラーが出て実行されません。
よって無名関数の時は関数宣言後に関数を呼び出すようにしましょう。

main.js これが正解となります。

const helloAlert = function(){
  alert('hello');
}
helloAlert();

12-3 クロージャ

クロージャはJavaScriptにおける重要な概念で、関数が自身が作成された時の環境（レキシカルスコープ）へのアクセスを保持する能力を指します。
つまり、関数が定義されたスコープ内の変数に、その関数がどこで実行されてもアクセスできる状態のことです。
これにより、関数外部からはアクセスできないプライベートな変数を作成することが可能になります。クロージャを使う主な理由は、データのカプセル化や状態の保持などです。
クロージャの理解を深めるために、より具体的な例を見てみましょう。ここでは、特定のメッセージを記憶する挨拶関数を生成する関数を考えます。

例:

function createGreeting(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
    };
}

const greetHello = createGreeting("Hello");
greetHello("John"); // 出力: Hello, John
const greetHola = createGreeting("Hola");
greetHola("Pedro"); // 出力: Hola, Pedro

説明

1.関数の生成

createGreeting関数が異なる挨拶メッセージ（”Hello”や”Hola”）で呼び出されます。この関数は、引数greetingに基づいた挨拶を行う新しい関数を返します。

2.クロージャの作成

createGreeting関数は、引数として受け取ったgreetingメッセージを含む匿名関数（無名関数）を返します。この匿名関数は、createGreeting関数のgr

3.関数の実行

greetHelloやgreetHolaといった変数に代入された関数を呼び出すと、それぞれの関数はcreateGreetingによって「記憶」された挨拶メッセージを使用して出力します。この時、各関数は自身が作成された環境（createGreetingが呼び出された時のgreetingの値）にアクセスできます。eeting変数への参照を保持しています。これがクロージャです。

この例からわかるように、クロージャは関数が定義された時のスコープに存在する変数へのアクセスを可能にします。これにより、関数がそのスコープ外で実行された場合でも、その変数へアクセスできるようになります。クロージャはプログラミングにおいて強力なツールであり、データを隠蔽し、プライベート変数を作成するために役立ちます。

初学者に取っては難しい概念になるので、クロージャは関数が自分が作られた環境を記憶して、その環境外からでも変数にアクセスできるJavaScriptの機能ということを頭に入れておいてください！

12-4 スコープの概念

スコープとは、変数や関数がアクセス可能な範囲のことを指します。主に、グローバルスコープ、ローカルスコープ（関数スコープ）、ブロックスコープの3種類があります。

12-4-1 グローバルスコープ

グローバルスコープにある変数は、スクリプトのどこからでもアクセス可能です。

var message = "こんにちは、世界！"; // グローバル変数
function showMessage() {
console.log(message); // "こんにちは、世界！" を出力
}
 
showMessage();
console.log(message); // "こんにちは、世界！" を出力

12-4-2 ローカルスコープ（関数スコープ）

関数内で宣言された変数は、その関数内でのみアクセス可能です（ローカルスコープまたは関数スコープ）。
varキーワードで宣言された変数はこの関数スコープのルールに従いますが、letやconstで宣言された変数も、同様に関数内でのみアクセス可能となります。

function greet() {
var greeting = "こんにちは、世界！"; // ローカル変数
console.log(greeting); // "こんにちは、世界！" を出力
}
greet();
// console.log(greeting);
// エラー: greeting は関数の外からはアクセスできない

12-4-3 ブロックスコープ

ブロックスコープとは、変数がその定義されたブロック（{}で囲まれた範囲）内でのみアクセス可能であるというスコープ（変数の有効範囲）のことです。
letやconstで宣言された変数はこのブロックスコープのルールに従い、宣言されたブロック内でのみアクセス可能となります。
一方で、varで宣言された変数はブロックスコープを形成せず、関数スコープまたはグローバルスコープに従います。

if (true) {
let blockScopeVariable = "ブロックスコープの変数です";
console.log(blockScopeVariable); // "ブロックスコープの変数です"
}
// console.log(blockScopeVariable);
// エラー: blockScopeVariable はブロックの外からはアクセスできない

JavaScriptのスコープを理解することは、変数がどこで有効であるかを把握し、予期しない値の変更やエラーを防ぐ上で重要です。

13DOM操作

13-1 DOMとは？

「Document Object Model」の略で、Web上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。
もう少し噛み砕いて説明すると、JavaScriptを用いてHTMLの要素を操作するための仕組みです。
DOMを利用することで、特定の目印を付けているHTMLの要素に対して、「こういう事をしたい」という処理が可能となります。

これまで学んできたように、HTMLは階層構造で記述を行います。 DOMも同様に、オブジェクトが以下のような階層構造を取ります。

ツリーを構成する個々の要素のことを「ノード」といいます。 ノードは「オブジェクト指向言語におけるオブジェクト」と同様に、それぞれ「メソッド」「プロパティ」といった属性を持っています。

また、階層構造の上位に位置するノードを「親ノード」、親ノードの下位に属するノードを「子ノード」と呼びます。

13-2 要素の選択と操作

それでは、いくつか具体的な例を見てみましょう。 「Lesson3_JavaScript」フォルダに新しく「dom」フォルダを作成し、その中に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>
    <input type="text" name="input_name"></input>
    <input type="button" id="button" value="押してみて！">
    <ul class="list_class" type="circle">
        <li>listA</li>
        <li>listB</li>
        <li>listC</li>
    </ul>
    <script src="./main.js"></script>
</body>
</html>

main.js

var button = document.getElementById('button');

button.addEventListener('click', () => {

// ①セレクターを指定して要素を取得：querySelector()
var input_name = document.querySelector("input[name='input_name']");
console.log(input_name.value);

// ②子要素を取得
var list = document.querySelector('ul');
var child_nodes_count = list.childElementCount; // 子要素の数を取得

for(var i = 0; i < child_nodes_count; i++) {
console.log(list.children[i].textContent);
}

// ③子要素を追加：appendChild()
var li = document.createElement('li')
li.textContent = 'listD';
list.appendChild(li);

// ④属性値の取得と更新：getAttribute()/setAttribute()
var button = document.getElementById('button');
var button_value = button.getAttribute('value');
console.log(button_value);
button.setAttribute('value', 'click me!');

});

よく使われるメソッドを紹介します。

①セレクターを指定して要素を取得：querySelector()

指定されたセレクターまたはセレクター群に一致する、文書内の最初の要素を返します。 セレクターとは、任意のエレメントをDOMから選び出すための書式です。 例では「input_name」というname属性があるinput要素を指定しています。 セレクターの詳細はLesson4のjQueryの講座で説明します。

②子要素の取得

querySelector()で取得した要素に含まれる子要素を取得しています。 list.childrenに子要素が配列で格納されているので、for分を用いてループして1件ずつ出力しています。

③子要素を追加：appendChild()

ulタグに新しく「listD」のliタグを追加しています。 appendChile()は子要素の最後尾に追加するメソッドとなります。

④属性値の取得と更新：getAttribute() / setAttribute()

button タグのvalue 属性を取得、更新しています。 今回はボタンをクリックすることで、ボタンの表記を更新しています。 value 属性以外にも使用することができるメソッドです。

13-3 HTML・CSS操作

13-3-1 HTMLを操作する

JavaScriptはHTMLやCSSなどの要素を書き換えたり、削除追加したりできます。
まずはinputタグの取得を例として説明していきます。
「Lesson2_JavaScript」フォルダに新しく「operation」フォルダを作成し、その中にindex.htmlとmain.jsを新しく用意し以下のコードをコピーしてください。

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>
    <input type="hidden" name="hello" id="hello" value="こんにちは">
    <script src="./main.js"></script>
</body>
</html>

main.js

let hello = document.getElementById('hello').value;
console.log(hello);

実行するとConsoleに”こんにちは”と表示されるはずです。
document.getElementById(‘hello’).value;この部分について順を追って説明します。

① documentについて

documentは表示されているブラウザのオブジェクトのことをいいます。
これは決まり文句みたいなところがあるのでそうなんだくらいで大丈夫です

② getElementById(’id名’)について

HTMLのなかでidが設定されている場合対象のidの名前を（）に入れることによって対象の要素を取得できます。
今回であれば<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>が取得できています。

③ valueについて

valueは文字通り取得した要素のvalueを取得します。
document.getElementById(‘hello’).valueで<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>のvalueである”こんにちは”が取得できます。

まとめると、document.getElementById(‘hello’).valueというコードは、ブラウザの中にあるidがhelloの要素を取得してその中のvalueをとってくるという意味になります。

メソッドチェーン

JavaScriptでは「.」でメソッドや要素を繋げます。これをメソッドチェーンといいます。 メソッドチェーンは、オブジェクトのメソッドを連続して呼び出す手法です。 これにより、コードが読みやすく、効率的になります。
今回の例では、「document」「getElementById」「value」が
メソッドチェーンにより連続で呼び出されているということになります。

13-3-2 HTML要素を追加してみる

「Lesson2_JavaScript」フォルダに新しく「html」フォルダを作成し、その中に以下のように新しくindex.html と main.js を用意し、ひな形をコピーしてみてください。

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>
    <div id="text-area"></div>
    <script src="./main.js"></script>
</body>
</html>

main.js

document.getElementById('text-area').textContent = "こんにちは";

document.getElementById(‘text-area’)の部分は先ほどと同じです。ブラウザの中にあるidがtext-areaである要素を取得します。

textContent は対象の要素に対してHTMLを差し込むというメソッドです。
なので今回はidがtext-areaの要素に対し”こんにちは”という文章を差し込んでいます。

上のようにブラウザで表示されたらOKです。

13-3-3 クリックイベント

クリックイベントはJavaScriptの中でもトップレベルに使うことが多いです。
ボタンが押された時の処理などを制御することができます。
「Lesson2_JavaScript」フォルダに新しく「click」フォルダを作成しその中に新しくindex.html と main.js を作成しひな形をコピーしてください。

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>
    <input type="button" id="button" value="押してみて！">
    <script src="./main.js"></script>
</body>
</html>

main.js

const button = document.getElementById('button');

button.addEventListener('click', () => {
  alert('ドカーン！爆発した');
});

JavaScriptのaddEventListenerメソッドを使うと特定のイベントが起きるたびに呼び出される関数を設定することができます。

第一引数にイベントの種類（今回はクリックイベント）そして、第２引数にイベントが実行されたときに動く関数を設定します。

イベントの種類
①　クリックイベント
②　changeイベント　inputなどの値が変わったときに発生するイベント
③　submitイベント　フォームに値が送信された時のイベント
④　mouseenterイベント　マウスポインターが乗ったときに発生するイベントなど

もっと見たい方はこちらを参照してください　→　https://javascript.programmer-reference.com/js-list-event/

13-3-4 CSSを操作する

JavaScriptはHTML要素だけでなくCSSも操作することができます。
たとえば押されたら背景色が変わるボタンや画像や要素を回転させたりできます。
実務でもしばしばJavaScriptでCSSを操作するタイミングがあります。ここでマスターしましょう。
「Lesson2_JavaScript」フォルダに新しく「css_operation」フォルダを作成し、その中に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 id="body">
    <input type="button" value="赤" onclick="changeBackgroundColor('#eb4034')">
    <input type="button" value="青" onclick="changeBackgroundColor('#6473f5')">
    <input type="button" value="緑" onclick="changeBackgroundColor('#2bb559')">
    <script>
        function changeBackgroundColor(color){
            document.getElementById('body').style.backgroundColor = color;
        }
    </script>
</body>
</html>

ブラウザで読み込んでみるとボタンが３つ出現するはずです。
自由に押してみてください。ボタンに書かれた色に背景色が変化するはずです。

以下、コードの説明をします。

今回はscriptタグをHTMLの中に記述しました。
JavaScriptではchangeBackgroundColorという関数を作成しています。中身を見てみましょう。

document.getElementById(‘body’).style.backgroundColor = color;この部分の説明をします。
document.getElementById(‘body’)はブラウザの中からbodyというidのついた要素を取得します。
今回はこれでbodyタグが取得できています。
そしてstyleプロパティは要素のスタイル(CSS)を設定、取得するために使用します。
これでCSSをいじれるようになりました。
最後にbackgroundColorを指定することで背景色を設定できるようになりました。
さらに今回はaddEventListenerを用いないクリックイベントを利用しています。このことについても説明します。
HTMLのinputタグの中にonclick=”changeBackgroundColor(‘#eb4034’)”を記述しています。
タグの中にonclick=””を指定することで要素がクリックされたときに””の中に指定された関数を実行することができます。

流れは以下のとおりです。
ボタンが押される→onclickが発火しchangeBackgroundColorが実行される

また今回は引数に色コードをしているため、たとえば赤のボタンが押されたときは引数が”#eb4034”と設定されておりcolorに代入されます。
そして省略.backgroundColor = color部分で背景色に#eb4034が設定され色が変わります。
以下二つをこのセクションで学びました。

①JavaScriptでCSSを操作するときに用いるstyleプロパティ
②addEventListener以外のクリックイベント

14localstorage

JavaScriptにおけるlocalStorageは、Webページのデータをブラウザに長期間保存するための機能です。
これにより、ユーザーがブラウザを閉じた後やコンピューターを再起動した後でも、データを保持することができます。
localStorageはキーと値のペアでデータを保存し、そのデータは同じオリジン（同じプロトコル、ドメイン、ポート）のページ間で共有されます。

localStorage.setItem('userName', '太郎');

格納された値はデベロッパーツールで確認することができます。

14-1 基本的な使用方法

localStorageにデータを保存する際、主に以下のメソッドが使用されます。

setItem(key, value)

localStorageにデータを保存します。keyにはデータを識別するための名前を、valueには保存したいデータ（文字列形式）を指定します。

localStorage.setItem('userName', '太郎');

getItem(key)

localStorageからデータを取得します。keyには取得したいデータの名前を指定します。該当するキーが存在しない場合、nullが返されます。

let userName = localStorage.getItem('userName');
console.log(userName); // 出力: 太郎

removeItem(key)

localStorageから特定のデータを削除します。keyには削除したいデータの名前を指定します。

localStorage.removeItem('userName');

clear()

localStorageに保存されているすべてのデータを削除します。

localStorage.clear();

14-2 利用できるメソッド(その他)

  • key(n):localStorageに保存されているn番目のキーを取得します。これは、localStorage内のすべてのキーをループ処理する際に便利です。
  • length:localStorageに保存されているキー/値ペアの総数を取得します。

14-3 注意点

  • localStorageに保存できるデータは文字列形式のみです。オブジェクトや配列を保存する場合は、JSON.stringify()を使用して文字列に変換する必要があります。逆に、取得したデータをオブジェクトや配列として扱いたい場合は、JSON.parse()を使用して元の形式に戻します。
  • localStorageの容量は、ブラウザによって異なりますが、一般的には5MB〜10MB程度です。
  • セキュリティの観点から、機密情報はlocalStorageに保存しない方が良いです。

localStorageは、ユーザー設定の保存や、セッション間でのデータ保持など、さまざまな用途に役立ちます。ただし、データの量やセキュリティの制限を考慮しながら利用することが重要です。

15エラー処理

JavaScriptでプログラミングを行う際、何か問題が発生すると、通常はエラーが発生します。JavaScriptのエラーオブジェクトは、これらのエラーの詳細情報を提供するための特別な種類のオブジェクトです。
簡単に言うと、エラーオブジェクトはプログラムがなぜ停止したのか、どのような問題があったのかを教えてくれる「ヘルパー」のようなものです。

エラーオブジェクトの基本

エラーオブジェクトには、主に次のような情報が含まれています：

name

エラーの種類を示します。例えば、「TypeError」、「ReferenceError」などがあります。

代表的な例外の種類

  • ReferenceError: 未定義の変数や関数を参照しようとした場合に発生します。
  • SyntaxError: 記法に間違いがある場合に発生します。
  • TypeError: 主に、メソッド実行時に期待された方ではなかった場合に発生します。

message

人が読める形式でエラーの詳細を説明します。

stack(オプション)

エラーが発生した時のプログラムの呼び出しスタックを示します。これは、エラーがどこで発生したかを追跡するのに役立ちます。

実際にはtry…catch文と組み合わせて使用されることが多いです。
これらを組み合わせることでプログラムの特定の部分でエラーをキャッチ（捕捉）し、エラーオブジェクトに基づいて適切な処理を行うことができます。
また、finallyを組み合わせることで例外の発生有無にかかわらず実行したいコードを実行することができます。
実行タイミングは、「tryブロックの終了後」または「catchブロックの終了後」になります。

例1: エラーオブジェクトを作成し、throw文で例外を発生させる場合

try {
  // エラーオブジェクトを作成
  throw new Error('このエラーをテストします');
  console.log('これはエラー発生により実行されない')
} catch (e) { // eはErrotオブジェクト
  // エラーが発生した場合の処理
  console.log(e.name); // 出力: "Error"
  console.log(e.message); // 出力: "このエラーをテストします"
} finally {
    console.log('finallyブロック: エラーの有無に関わらず実行されます');
}

例2: 存在しない関数を実行し、エラーを発生させる場合

try {
  // 存在しない関数を実行
  notExistingFunction();
  console.log('これはエラー発生により実行されない')
} catch (e) { // eはErrotオブジェクト
  // エラーが発生した場合の処理
  console.log(e.name); // 出力: "ReferenceError"
  console.log(e.message); // 出力: "notExistingFunction is not defined"
} finally {
 console.log('finallyブロック: エラーの有無に関わらず実行されます');
}

16非同期処理

この章では非同期処理に関して解説していきます。
まずはそれらに関連するスレッド・通常の処理(同期処理)について説明します。

スレッドについての基本

スレッドとは、コンピュータプログラムがタスクを実行する際の実行流(プログラムの開始から終了までの一連の処理)の単位です。
一般に、プログラムはスタートからエンドまでの指示（コード）に沿って実行されます。この一連の指示を実行するのが「メインスレッド」です。
プログラムが単一のメインスレッドのみを使用する場合、これをシングルスレッド実行環境と呼びます。

通常の処理(同期処理)

JavaScriptのようなシングルスレッド環境では、コードは上から下へと順番に実行されます。
一つの処理が始まると、その処理が完了するまで次の処理は待たされます。
このような処理の流れを「同期処理」と呼びます。同期処理では、ある処理の完了を必ず待ってから次の処理に移ります。

非同期処理の導入

しかし、すべての操作がすぐに終わるわけではありません。
データの読み込みや外部APIへのリクエストなど、時間がかかる処理が存在します。これらの処理をメインスレッドで同期的に行うと、処理が完了するまでアプリケーションが応答しなくなります。
これを避けるために、「非同期処理」が用いられます。非同期処理を利用すると、時間がかかるタスクをメインスレッドから切り離し、その完了を待たずに次の処理に進むことができます。
タスクが完了すると、コールバック関数やPromise、async/awaitを通じて結果を処理できます。

16-1 コールバック関数

コールバック関数は、他の関数に引数として渡される関数です。渡された関数（コールバック関数）は、外側の関数（親関数）の内部で、特定のタイミングで実行されます。

この特性を利用して、JavaScriptでは非同期処理の完了時に特定の動作を実行するためにコールバック関数を使用します。

JavaScriptの実行環境では、メインスレッドがシングルスレッドであるため、時間のかかる操作（例えば、ネットワークリクエストや大きなファイルの読み込み）を非同期に処理することが推奨されます。

これにより、その操作が完了するのを待っている間も、アプリケーションは他のタスクを実行し続けることができます。

コールバック関数は、このような非同期処理の完了時に呼び出されることで、非同期操作の結果に基づいた処理を実行するための機構を提供します。

例えば、Web APIを使用してサーバーからデータをフェッチする際(データをサーバーから取得するとき)、データの取得が完了したら特定の処理を行うためにコールバック関数を使用します。

以下の例では、showMessageAfterTimeout関数が「メッセージを表示する」という簡単な「データ取得」のような操作を模擬しています。

この関数は2つの引数を取ります：表示したいメッセージと、メッセージが表示された後に実行したい処理を定義したコールバック関数です。関数を実行すると、まず3秒間待ちます。

その後、指定されたメッセージ（ここでは「こんにちは、世界！」）がコンソールに表示され、その直後にコールバック関数が呼び出されて、「メッセージが表示されました」というメッセージがコンソールに表示されます。

例: 

function showMessageAfterTimeout(message, callback) {
setTimeout(() => {
// 3秒後にこの関数内のコードが実行されます
console.log(message); // コンソールにメッセージを表示
callback(); // コールバック関数を呼び出す
  }, 3000); // 3000ミリ秒 = 3秒
}
showMessageAfterTimeout('こんにちは、世界！', function() {
//無名関数
console.log('メッセージが表示されました'); // メッセージ表示後に実行される
});

この例では、showMessageAfterTimeout関数が「メッセージを表示する」という簡単な「データ取得」のような操作を模擬しています。この関数は2つの引数を取ります：表示したいメッセージと、メッセージが表示された後に実行したい処理を定義したコールバック関数です。

関数を実行すると、まず3秒間待ちます。その後、指定されたメッセージ（ここでは「こんにちは、世界！」）がコンソールに表示され、その直後にコールバック関数が呼び出されて、「メッセージが表示されました」というメッセージがコンソールに表示されます。

16-2 Promise

PromiseはJavaScriptの強力なツールで、将来的に発生する値を扱いながら非同期処理を簡潔に記述できます。
これにより、非同期操作の成功結果や失敗理由を明確に表現し、コードのネストが深くなることなく可読性を高めることが可能になります。
Promiseは以下の3つの状態のいずれかを持ちます。

  • Pending（保留中）:非同期操作がまだ完了していない状態。
  • Fulfilled（履行済み）:非同期操作が成功し、Promiseが値を持っている状態。
  • Rejected（拒否）:非同期操作が失敗した状態。

Promiseを使う基本的な方法は、new PromiseでPromiseオブジェクトを作成し、その中で非同期処理を行うことです。
非同期処理が成功したらresolveを呼び出し、失敗したらrejectを呼び出します。
以下の例では、new Promiseで新しいPromiseオブジェクトを作成し、その処理が成功するかどうかに基づいてresolveかrejectを呼び出しています。
その後、.thenメソッドで成功時の処理を、.catchメソッドで失敗時の処理を定義しています。

例: 

let myPromise = new Promise(function(resolve, reject) {
  // 何かの非同期操作
  let isSuccessful = true; // 例として、操作が成功したとします
  if (isSuccessful) {
    resolve('操作が成功しました');
  } else {
    reject('操作が失敗しました');
  }
});

myPromise.then(function(value) {
    console.log(value); // 成功した場合に実行される。出力: 操作が成功しました
}).catch(function(error) {
    console.log(error); // 失敗した場合に実行される。出力: 操作が失敗しました
});

また、.finallyメソッドを使用して非同期処理が完了した後に必ず行いたい処理を定義することもできます。
.finallyは成功でも失敗でも関係なく、Promiseの処理が終わった後に実行される処理を設定するのに便利です。
これは、例えばリソースのクリーンアップなど、成功失敗に関わらず共通して行いたい後処理がある場合に特に有効です。

例:

myPromise
  .then(function(value) {
    console.log(value);
  })
  .catch(function(error) {
    console.log(error);
  })
  .finally(function() {
    console.log('非同期処理が完了しました');
  });

このように、Promiseとそのメソッド（.then, .catch, .finally）を使うことで、非同期処理の結果に基づいて処理を分岐させたり、処理が完了した後のクリーンアップ作業を行ったりすることができます。

次に実践的な例を見てみましょう。
また以下のコードは、Promiseを用いた疑似的にWeb APIからデータを取得するシナリオを模倣したものです。

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
// 擬似的なデータ取得処理
let data = "Web APIから取得したデータ";
resolve(data); // 成功した場合
}catch (error) {
reject("データ取得中にエラーが発生しました"); // 失敗した場合
}
}, 2000); // 2秒後に結果を返す
});
}
fetchData().then((data) => {
console.log(data); // 成功した場合の処理
}).catch((error) => {
console.error(error); // 失敗した場合の処理
});

fetchData関数では、new Promiseを用いてPromiseオブジェクトを生成し、非同期処理の成功時にresolveを、失敗時にrejectを呼び出すことで、非同期操作の結果を扱っています。
この関数内でsetTimeoutを使用し、2秒後に擬似的なデータ取得を完了させる非同期処理を模倣しています。
非同期操作が成功した場合、.then()メソッドで取得データを処理し、失敗した場合には.catch()メソッドでエラーハンドリングを行います。
Promiseを活用することにより、非同期処理を直感的かつ効率的に管理でき、複雑な処理フローも柔軟に扱えるため、Web開発において重要な技術となっています。

16-3 Async/Await

JavaScriptのasync/await構文は、非同期処理をより簡潔で読みやすく記述するための機能です。この機能は、Promiseベースの非同期処理を、まるで同期処理のように直感的に扱うことができるようにします。
asyncとawaitを使うことで、コールバック関数や.then()チェーンを使うことなく、非同期処理の流れを簡単に追跡できます。

async関数

  • asyncを関数の前に置くことで、その関数はasync関数になります。
  • async関数は、常にPromiseを返します。関数内でreturnされた値は、Promiseによって解決される値となります。
  • 関数内で発生した例外は、Promiseによって拒否される理由となります。

await演算子

  • await演算子は、async関数内でのみ使用できます。
  • awaitは、Promiseが履行（fulfill）または拒否（reject）されるのを待ちます。
  • Promiseが履行されると、その解決値を返します。拒否されると、例外を投げて処理を中断します。

async/awaitの例

以下の例は、async/awaitを使用して非同期にデータを取得する簡単な関数を示しています。

// 非同期にデータを取得するダミー関数
function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve("データ取得完了！"), 2000));
}

// async/awaitを使った非同期処理
async function getData() {
  console.log("データ取得を開始します...");
  const data = await fetchData(); // fetchDataが解決されるまで待つ
  console.log(data); // "データ取得完了！"
}

getData();

この例では、fetchData関数がPromiseを返し、2秒後に解決します。getData関数内では、awaitを使ってfetchDataの完了を待ち、その結果をdata変数に格納しています。fetchDataからの解決値（ここでは”データ取得完了！”）は、awaitの後の行で利用可能になります。
async/await構文により、非同期コードを書く際の複雑さが大幅に減少します。これにより、非同期処理を含むコードが、同期処理を使用する場合と同じくらい簡単に理解しやすくなります。
async/awaitを使い始めることで、JavaScriptにおける非同期処理の管理がずっと扱いやすくなリます。

次に実践的な例を見てみましょう。
非同期処理を行う実践的なサンプルコードとして、外部APIからデータを取得して表示する関数をfetchAPIとasync/awaitを使用して実装します。
この例では、公開されている無料のAPIを使って、特定の情報（例えば、JSONPlaceholderからの投稿）を取得します。
以下のコードは、JSONPlaceholderの偽の投稿データを取得してコンソールに表示するシンプルな例です。
JSONPlaceholderはテスト用のREST APIを提供しており、非同期処理の練習に最適です。

async function fetchPosts() {
  try {
    // JSONPlaceholderから投稿データを取得
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('データの取得に失敗しました。');
    }
    let post = await response.json(); // レスポンスのボディをJSONとして解析
    console.log(post);
  } catch (error) {
    // エラーハンドリング
    console.error('エラーが発生しました:', error);
  }
}

// 関数を呼び出して投稿を取得
fetchPosts();

17開発者を支援する機能

JavaScriptを書く際に開発者を支援するためには、様々なツールや機能があります。これらはコードの品質を向上させ、効率的な開発をサポートするために設計されています。以下に、主要な機能を紹介します。

17-1 エディターとIDE（統合開発環境）

  • エディター: テキストエディターはコードを書くための基本的なツールです。Visual Studio CodeやAtomなどのエディターは、シンタックスハイライト（コードの構造に応じて色分けをしてくれる機能）やコードの自動補完など、JavaScriptのコーディングを助ける機能を提供します。
  • IDE: IDEはエディターの機能に加え、デバッグツールやコードのリファクタリングツールなど、より高度な機能を備えた環境です。WebStormなどのIDEはJavaScript開発に特化した機能を提供し、開発プロセスを大幅に助けます。

17-2 Linter（リンター）とフォーマッター

  • リンター (ESLintなど): コードに潜在的な問題がないかチェックし、文法的な誤りや一貫性のないコーディングスタイルを指摘してくれます。リンターを使用することで、早い段階でコードの問題を発見し修正することができます。
  • フォーマッター (Prettierなど): コードの書式を自動的に整えてくれるツールです。インデントやスペース、改行などを一貫したスタイルに整形してくれるため、コードの読みやすさが向上します。

17-3 バージョン管理システム (Git)

  • Git: コードの変更履歴を管理するシステムです。複数の開発者が同じプロジェクトに取り組む際に、互いのコードを上書きしてしまうことなく、効率良く作業を進められます。GitHubやGitLabなどのオンラインプラットフォームと組み合わせて使用されることが多いです。

17-4 パッケージマネージャ (npm, Yarn)

  • パッケージマネージャ: JavaScriptのライブラリやフレームワークを管理するツールです。プロジェクトに必要な外部ライブラリを簡単にインストール、更新、削除することができます。これにより、開発に必要な依存関係の管理が容易になります。

17-5 ビルドツールとトランスパイラー (Webpack, Babel)

  • ビルドツール (Webpackなど): 複数のJavaScriptファイルを一つにまとめたり、最適化するツールです。これにより、ブラウザの読み込み速度を改善することができます。
  • トランスパイラー (Babelなど): 新しいJavaScriptの構文（ES6/ESNext）を、古いブラウザでも動作するように変換してくれるツールです。これにより、最新のJavaScriptの機能を使いつつ、互換性を保つことができます。

17-6 AIによるコード補助 (GitHub Copilotなど)

  • AIによるコード補助ツール: 最近の開発ツールの中で特に注目されているのが、AIを利用したコード補助ツールです。GitHub Copilotのようなツールは、AIが過去の大量のコードデータベースから学習し、開発者が書こうとしているコードを予測して提案してくれます。たとえば、コメントから関数のコードを自動生成したり、既存のコードを基にして新しいコードの提案をしてくれるなど、開発者のコーディングを大きく助けます。また、学習用のコード例としても活用できるため、プログラミングスキルの向上にも役立ちます。

JavaScript開発をサポートするツールと機能は多岐にわたり、コードの品質向上や効率的な開発プロセスに役立ちます。
今回は特に、Linter（リンター）とフォーマッターに焦点を当てて説明します。

17-7 Linter（リンター）

リンターは、プログラミングコードを分析して、様々な問題点を指摘してくれるツールです。これには、文法の誤り、潜在的なバグ、コーディングスタイルの一貫性の欠如などが含まれます。
リンターを使用することで、開発者は早い段階でこれらの問題を発見し、修正することができます。これは、特に複数の人がコードに触れるプロジェクトにおいて、一貫したコーディングスタイルを維持し、読みやすいコードを保つのに役立ちます。
例えば、JavaScriptの有名なリンターには「ESLint」があります。
以下はESLint の導入方法の一例になります。(npmが入っている前提)
※ ご自身の端末状況により手順が変わってきますのであくまで一例になります。

  1. npm install -D eslintでeslintをインストール
  2. node node_modules/eslint/bin/eslint –initで初期設定を行う。
    EsLintの使用目的や実行環境・フレームワークを使用しているか等が聞かれるのでご自身の環境に適したものを選択してください。
  3. node node_modules/eslint/bin/eslint [対象のJavaScriptファイル]

以下は実行例になります。

対象コード

var name = "John Doe";
function testFunc() {
console.log("Testing");
}
testfunc();

ESLintの結果

1:5 error 'name' is assigned a value but never used no-unused-vars
3:10 error 'testFunc' is defined but never used no-unused-vars
7:1 error 'testfunc' is not defined no-undef

上記のように、ESLintを用いることで簡単にコード解析を行い、問題を発見できます。さらに、様々なルールを追加してカスタマイズすることが可能です。
これにより、チームやプロジェクト特有のコーディングスタイルを守りつつ、潜在的なエラーや非効率なコードを早期に識別できます。
また自動修正機能を使えば、一部の問題を迅速に解決し、開発プロセスをさらに効率化できます。
開発する際はぜひ活用してみてください。

17-8 コードフォーマッター

コードフォーマッターは、コードの書式を自動で整えるツールです。これにより、インデント（段落の字下げ）、スペース、改行などが一貫したルールに基づいて自動調整されます。
コードフォーマッターを使用する主な利点は、手動でコードスタイルを修正する手間を省き、すべてのコードが統一されたフォーマットで書かれるようにすることです。
これは、コードの可読性を向上させるだけでなく、開発者間でのコードの共有やレビューを容易にします。
JavaScriptでよく使われるコードフォーマッターには「Prettier」があります。
Prettierの導入も非常に簡単です。npmが入っているプロジェクトのディレクトリで以下のコマンドを実行するだけで、Prettierをインストールし設定することができます。(こちらもあくまで1例です)

npm install --save-dev prettier

インストール後、package.jsonにスクリプトを追加することで、プロジェクト内のすべてのファイルに対してPrettierを実行することができます。

"scripts": { "format": "prettier --write ." }

実際に例を見てみましょう。
対象コード

// フォーマット前のコード
function greet(name){
console.log('Hello, '+name+'!');
} greet('World');

Preitterの実行

npm run format

結果

function greet(name) {
  console.log("Hello, "+name+"!");
}
greet("World");

フォーマット後のコードは、インデントやスペースが一貫しており、読みやすくなっています。
このスクリプトを実行することで、Prettierがプロジェクト内のすべてのファイルを自動的にフォーマットします。
また、Prettierは.prettierrcファイルを通じて設定をカスタマイズすることが可能です。
このファイル内で、インデントのサイズ、行の幅、シングルクオートの使用など、多くのオプションを設定できます。

コードフォーマッターの利点

コードフォーマッターを利用することで、コードを統一的に美しく保つことができます。これは、読みやすさが向上し、バグの発見が容易になることを意味します。また、チーム内でコードのスタイルが統一されるため、開発の効率が大きく向上します。

開発プロセスとツールの併用

開発プロセスにおいて、Linterとコードフォーマッターを併用することで、コードの品質を保ちながら、効率的な開発を行うことができます。これらのツールは非常に有用であり、開発の初期段階から積極的に利用することをお勧めします。
Vscodeでは、設定でコードを保存する際にLinterとコードフォーマッターを実行することが可能なので是非設定をしてみてください。

18 課題

18-1

Lesson2_JavaScriptフォルダの中に「kadai」フォルダを作成してください。
その中に「kadai_1.html」ファイルを作成し、以下の課題の回答を記述してください。
confirm() を用いて(自分で検索)以下の条件に沿うようなコードを作成してください。
①　ファイルを読み込むとダイアログに”あなたは20歳以上ですか？”というメッセージを表示させる。
②　OKを押した場合ダイアログに”お酒を飲めますね！”というメッセージを表示させる。
③　キャンセルが押された場合はダイアログに”20歳まで我慢しましょう！”というメッセージを表示させる。
完成例は以下のとおりです。

18-2

「kadai」フォルダ内に新しくJS-kadai6というフォルダを作成しその中にindex.htmlファイルとmain.jsファイルを作成しましょう。
下のindex.htmlをコピーし仕様書に沿ってJavaScriptを作成してください。

index.html

<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>JavaScript課題</title>
<style>.box {width: 200px;height: 200px;background-color: #333;color: #fff;text-align: center;line-height: 200px;font-weight: bold;font-size: 30px;margin: 20px auto;}

input{ font-weight: bold; font-size: 21px; background-color: rgb(234, 249, 255); border: #6473f5 solid 5px; border-radius: 999px; padding: 10px 30px; } </style>
</head>
<body> <div class="test_area"> <div class="box_wrapper"> <div id="target" class="box"> 写真とか </div> </div> <div class="input-area" style="text-align: center;"> <input type="button" value="右へ90度回転" onclick=""> <input type="button" value="左へ90度回転" onclick=""> </div> </div> <script src="./main.js"></script> </body>
</html>

【　仕様書　】
① onclick or addEventListenerどちらかを使う
② 90度回転ボタンが押されたら「写真とか」の黒正方形が回転するようにする
③ 回転に関するCSSは「CSS transform」で検索し自分で調べる
④ 関数名についても自分で命名を考える

以下を参考にしてください！

// degreeの初期値
let degree = 0;

function changeDeg(x) {
		//　target要素を取得する
    let target = ;
		//　現在の角度に引数で得た角度を足しdegreeに再代入する
    degree  = ;
		//　角度をCSSに追加する
    target = "rotate(" + + "deg)";
}
target.style.transform = "rotate(" + degree + "deg)";

18-3

DOMの操作に使用するメソッドは、本講座で取り上げたメソッド以外にも数多く存在します。

8-2で使用したHTMLとJavaScriptに対して、ボタンをクリックした際に以下の操作を行うために必要なメソッドを調べて、実装してみてください。

  1. リストの白丸アイコンを、四角アイコンに変更する ※Document.getElementsByClassName()を使用
  2. リストの「listC」を削除する
  3. リストの上に、赤文字で「リスト一覧」と書かれたpタグを追加する
  4. input要素に入力された内容を、リストの一番上に追加する

18-4 

電卓を作成してみましょう！
「kadai」フォルダの中にJS-kadai7という名のフォルダを作成しindex.html と main.jsを作成しindex.htmlをコピペしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Kadai</title>
  </head>
  <body>
    <div>
      <input type="text" id="num1">
      <input type="text" id="num2">
    </div>
    <button type="button" id="button-add">+</button>
    <button type="button" id="button-sub">-</button>
    <button type="button" id="button-mul">*</button>
    <button type="button" id="button-div">/</button>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

【　仕様書　】
①　フォームから値を受け取りボタンにあった計算結果をid=”box”のdivタグの中に表示させてください。
②　読みやすいコードを意識してください。
③　関数を用いてください。
④　7 ÷ 0など計算できない値は「正しい値を入力してください」とHTMLに差し込んでください。

18-5 

Consoleに出力されているエラーをすべて解消し、フォームに名前を入力しアラートを出すボタンを押すと「私の名前は○○です。」とアラートで表示されるようにしましょう。
エラー、間違いは合計で５つ存在します。
コードをよく見てJavaScriptの文法や規則を今一度確認しましょう。
また、Consoleにエラーが出ていなくても正常に動かない場合があります。どこかがまだ間違っているのでしっかりとコードを見直しましょう。
「kadai」フォルダ内にJS-kadai-final1というフォルダを作成しその中にindex.htmlとmain.jsを作成し以下コードをコピペしましょう。

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>
    <input type="text" id="text" />
    <input type="submit" id="submit" value="アラートに出す" />
    <script src="./main.js"></script>
  </body>
</html>

main.js

const submit = document.getElementById('text');

submit.addEventListener('click', () => {
    const name = document.getElementById('text').value
    alertMessage();
    const alertMessage = function(){
        alert('私の名前は${name}です。');
    }
)

正解の画像はこちら

18-6 

フォームに入力されたハイフン付きの電話番号を取得しハイフンを取り除いた後、１つずつ配列に格納してください。

例）
012-3456-7899と入力されたら[‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘9’]と配列に格納される。

【　仕様書　】
①　確かめるボタンが押されたらConsoleに配列が表示されるようにしてください。
②　フォームには012-3456-7899を入力してください。Consoleに[‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘9’]が表示されたら正解です。
③　split()は使用せず繰り返し処理を用いてください。

「kadai」フォルダ内にJS-kadai-final2という名のフォルダを作成しindex.html と main.jsファイルを追加し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>
    <input type="text" id="tel">
    <button id="confirm-btn">確かめる！</button>
    <script src="./main.js"></script>
</body>
</html>

以上で終わりです！お疲れさまでした！

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です