**JavaScript（読み方：ジャバスクリプト）は、Webサイト上で主にWebページに動きをつけるために使用されるプログラミング言語です。**例えば、動きのあるバナー広告やページ内での写真のスライドなどを可能にしています。

JavaScriptが登場するまでのWebページは動きがなく、例えると電子ブックのような姿をしていました。そのWebがTVのように動きのあるものに変わったのは、JavaScriptによる功績が大きいと言えます。

JavaScriptは主にWebで用いられるプログラミング言語ですが、Webサイト側とWebサービスの相互連携を円滑にするためにも活用されています。

【参考】：[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)

JavaScriptの始まりは20年以上前まで遡ります。*JavaScriptは、1995年にイギリス人プログラマのブレンダン・アイク氏が創り出しました。*当時ブレンダン氏は、Webブラウザで有名なネットスケープコミュニケーションズ社に在籍していました。

このネットスケープ社が開発したブラウザソフトの『Netscape Navigator』（通称ネスケ）に実装されていたのがJavaScriptでした。

JavaScriptの名前の由来ですが、同じくプログラミング言語であるJavaから来ているようです。JavaScriptはJavaの開発から4年ほど遅れて登場し、当時は「LiveScript」と命名されていましたが、Java人気にあやかったのか、JavaScriptに改名しました。

以降、Webページに動きを与えるJavaScriptは注目を浴び、Webページの作成にはHTMLと共に必要不可欠の言語として浸透しました。2010年以降にはサーバサイド側の実行環境の整備が行なわれ、現在ではWebサイトに動きを加えるためだけではなく、バックエンドのシステムやアプリ開発などでも使用することが可能です。

*JavaScriptとJavaはプログラミング言語という点では同じですが、全く異なる性格を持つ言語です。*名前がよく似ているため、同じファミリーのように思われがちですが、この2つは別ものであり、親戚関係にもありません。

**JavaScriptは主にWebサイトの画面で文字や画像にさまざまな動きを与えるフロントサイドで活用しますが、Javaは主にシステムの土台を作る裏方を担当するサーバサイドで活用します。**Javaはあらゆるマシンで動く汎用言語で、会社の業務システムの構築やAndroidアプリなどもJavaによって作られています。

なお、前述の通り元々JavaScriptはLiveScriptという名で開発が始められ、その後名称が現在の「JavaScript」に変更されたため、JavaScriptを略す場合はJavaではなく「JS」を用いることが多いです。

JavaScriptとJavaの違いは？質問されたときの説明方法

## JavaScriptにはどんな特徴・メリットがある？

プログラミング言語にはさまざまな種類があり、開発したいものや目的に合わせて適切な言語を選ぶ必要があります。では、このJavaScriptにはどのような特徴やメリットがあるのでしょうか。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

### ブラウザで動きを加えられる唯一の言語

**JavaScript最大の特徴は「ブラウザで動きを加えることができる唯一のプログラミング言語」であることです。**

ブラウザで動きを加えられるということは、ユーザのアクションに応じて内部処理が行えるということになります。この機能はWebサービスを運用していく上で欠かせません。JavaScriptは、現代のWebサービスにとって最も重要な役割の1つを担っていると言えるでしょう。

なお、*JavaScriptの使い方ですが、単独で使うのではなく、HTMLやCSSなどと組み合わせて使います。*JavaScriptがHTMLやCSSに指示を出すという形で、Webブラウザ上でアニメーションのような動きのある動作を可能にします。

### ブラウザで実行できるため環境構築が必要ない

プログラミング言語を利用するには、環境構築を必要とする場合がほとんどでしょう。しかし、JavaScriptは環境構築が不要なので、ブラウザさえあれば実行することができます。

その理由として、**ブラウザにJavaScriptの実行環境が搭載されていることが挙げられます。**JavaScriptは、Internet Explorer・Microsoft Edge・Google Chrome・Firefox・Safariなど、ほとんどのブラウザで実行可能です。

ブラウザでJavaScriptを有効にする方法は以下の通りです。スマホでは予めJavaScriptが有効になっていることが多いですが、オフにしてしまった場合は、以下の手順で設定を行いましょう。

*【Chromeの場合】*
1.パソコンで Chromeを起動し、［設定］をクリック

~~【図】：Chromeメニュー　設定を選択　~~

2.［プライバシーとセキュリティ］をクリック

~~【図】：Chromeメニュー　プライバシーとセキュリティ~~

3.［サイトの設定］をクリック

~~【図】：Chromeメニュー　サイトの設定~~

~~【図】：Chromeメニュー　コンテンツ表示画面~~

5.［サイトが JavaScript を使用できるようにする］を選択

~~【図】：Chromeメニュー　Javascript設定画面~~

その他のブラウザで JavaScript を有効にするには、以下のリンクを参考にしてください。

【参考】：[ブラウザで JavaScript を有効にする - Google アド マネージャー ヘルプ](https://support.google.com/admanager/answer/12654?hl=ja)

*【iPhoneの場合】*
1.ホーム画面の「設定」アプリから「Safari」を選択

~~【図】：iPhone 設定メニュー　Safariアイコン選択　~~

~~【図】：iPhoneのSafariのメニューから「詳細」を選択　~~

~~【図】：SafariのJavaScript のトグルスイッチの操作画面　~~

*【Androidの場合（Chrome）】*
1.ブラウザ画面右上、赤枠部分をタップ

~~【図】：Androidスマホ Chromeの初期画面　~~

2.「設定」を開き「サイトの設定」をタップ

~~【図】：Androidスマホ Chromeの設定画面よりサイトの設定を選択　~~

~~【図】：Androidスマホ Chromeのサイトの設定画面から［JavaScript］を選択~~

5.タップで「JavaScript」をオンにする

~~【図】：Androidスマホ Chromeの［JavaScript］トグルスイッチの操作画面　~~

### フロントエンドとバックエンドどちらでも使える

JavaScriptは元々フロントエンド開発の言語として利用されてきましたが、先ほども少し触れたように、**2010年代前半に登場した「Node.js」というJavaScript用のフレームワークを用いることで、サーバ側でもJavaScriptによる開発が可能となりました。**

Node.jsは、サーバへの大量の同時接続に対応できるアプリケーション開発を目的として設計されたJavaScript環境で、サーバへの同時接続端末台数10,000台という従来の問題がNode.jsによって解決されています。

JavaScriptというプログラミング言語1つで、フロントエンドからバックエンドまで開発を行うことができるのは、非常に利便性が高いです。

フロントエンドとは？バックエンドとの違いや使う言語について解説

Node.jsとは？JavaScriptとの違いや使い所を解説

### 開発効率を向上させるフレームワークが豊富

登場してから25年以上の歴史と、多くのユーザによって活用されてきたことから、JavaScriptには、開発の効率を大きく向上してくれるフレームワークが充実しています。

*フレームワークとは、アプリケーションを開発する際に土台として機能させるソフトウェアのことを指します。*さまざまなプログラミング言語に用意されているアプリケーションの雛形ともいえるでしょう。

**JavaScriptは多くの開発で利用されてきたため、さまざまな用途に応じたフレームワークを有しています。**ユーザインターフェース構築に用いられるReactやVue.jsなどはその代表格です。

【参考】：[React](https://ja.legacy.reactjs.org/)
【参考】：[Vue.js](https://ja.vuejs.org/)

JavaScriptに関するフレームワークについて徹底解説！

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

## JavaScriptの注意点・デメリットは？

特徴・メリットからもわかるように、JavaScript は利便性が高く使いやすい言語です。しかし、注意すべき点もあります。JavaScriptのデメリットとしては以下の2つが挙げられます。

### ブラウザによって動作が変わる可能性がある

JavaScriptはブラウザ上で動作するプログラミング言語であるため「Internet Exploler」「Microsoft Edge」「Google Chrome」など、使用しているブラウザによって動作や挙動が変化する可能性があります。

**ブラウザ上の動作にはJavaScriptのバージョンやブラウザの種類・バージョンが関係してきます。**異なるブラウザ上で同様の動作にするためには、ブラウザの種類やバージョンなどに配慮してプログラミングのコーディング作業を行わなければなりません。

それぞれのブラウザで同じように動かすには、コーディング作業の他にテストも実施する必要があります。その分工数や時間を有してしまいます。

### 処理速度が他の言語と比較して遅い

**JavaScriptを使用して行われるプログラミングの実行には、「解析」「解釈」「変換」というプロセスが必要です。**そのため処理スピードが他のプログラミング言語と比べ遅い傾向にあります。

こういった対策として、機能を必要最小限にすることやコードの量を少なくすることが挙げられます。またJavaScriptを読み込むタイミングを変更するのも1つの方法です。

## JavaScriptを使って何ができる？

ここまでJavaScriptとはどういうものかについて解説してきました。ここからは、JavaScriptを使ってできることについてわかりやすく解説します。JavaScriptを使うと何ができるのか、その用途について見ていきましょう。

JavaScriptの用途やできることを初心者向けに紹介！

これまでにも触れましたが、JavaScriptを使用することでWebサイトに動きを加えることが可能となります。視覚表現や文章構造などを記述するための言語であるマークアップ言語の「HTML」や「CSS」のみでも、Webサイトは十分に作成することができます。

しかし、*JavaScriptを用いることでアニメーションなどをWebサイトに追加することもでき、ユーザビリティにも配慮したより魅力的なWebサイトの作成が実現できます。*

*■JavaScriptで動きのあるページを作ってみよう*
ではここで、試しにJavaScriptを使って、動きのあるWebページを作ってみましょう。以下のテキストをメモ帳などのテキストエディタにコピペし、適当なファイル名を付けて、拡張子をhtmlで保存します。

Webページに動きを加えるプログラミング言語であるJavaScriptは、Webサイトはもちろん、Webアプリやスマホアプリなどにも使われています。本記事では、JavaScriptについて、その特徴や何ができるのかを、初心者にもわかりやすく解説します。

JavaScriptは、Webサイト上で主にWebページに動きをつけるため使われる言語である

JavaScriptはバックエンドでも使用でき、スマホやゲームアプリの開発にも使われている

JavaScriptの需要は高く、今後もさまざまな開発分野で必要とされると考えられる

JavaScriptとは？特徴や何ができるのかを初心者向けに解説

JavaScriptのif文は、条件を満たしている場合に実行される構文です。使い方は、「if (条件) 文;」の1行で表すことができます。ここで示す「条件」は論理的な条件式を表します。**if文を使うには、if文自体の構文と、if文で判断される条件式を学ぶことでプログラミングに活用することができます。**

【参考】：[MDN Web Docs: 文と宣言](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements)
【参考】：[MDN Web Docs: if...else](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else)

JavaScriptの入門！その概要や文法の基礎について解説！

JavaScriptの書き方とは？初心者向けに基本から解説

## JavaScriptのif文の概要と使い方

JavaScriptは、プログラミング言語として言語固有の基本機能や構文が定められています。その構文に従って、処理する手続きを記述していきます。*if文は、ある条件が満たされる場合に処理を実行し、示す条件に応じて処理を制御することができます。*

文法は簡単で、以下のように使用します。

```
if (条件)
  文;
// または次のように1行で表します
if (条件) 文;
```

上の例では、条件が真（true）の場合に文を実行します。条件が条件が成立する真（true）の場合と条件が不成立の偽（false）の場合、それぞれに実行分を設定する場合は、else節を文に追加します。

```
if (条件)
  条件が成立する場合（true）の文;
else
  条件が不成立の場合（false）の文;
```

### JavaScriptのif文で複数の文を実行させる

ここでは、if文の基本構文をさらに発展させて、複雑な処理を行うための構文を学びます。複雑な処理は、単一ステートメントでは記述できないために、複数の文を組み合わせる必要があります。*その場合は、文全体を波括弧”{}”で囲んでブロック文とします。*

```
if (条件) {
  条件が成立する場合（true）の文1;
  条件が成立する場合（true）の文2;
     ：
} else {
  条件が不成立の場合（false）の文1;
  条件が不成立の場合（false）の文2;
     ：
}
```

【参考】：[MDN Web Docs: if...else](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else)
【参考】：[MDN Web Docs: ブロック](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/block)

### JavaScriptのif文でelse節を活用する

*if文で条件が不成立の場合、else節を使用してさらにif文を追加することができます。*これによって、複数条件がある場合に処理を細かく分岐して実行することができます。例えば3種類の条件があり、それぞれで異なる処理をさせる場合は次のように記述します。

```
if (条件1)
  条件1が成立する場合（true）の文;
else
  if (条件2)
    条件2が成立する場合（true）の文;
  else
    if (条件3)
      条件3が成立する場合（true）の文;
    else
      すべての条件が不成立の場合（false）の文;
```

ここで示されるelse節は直前のif節と対になっているので、わかりやすくインデントを追加しておきます。メンテナンス性を考慮すると、次のように波括弧で囲っておくと良いでしょう。

```
if (条件1) {
  条件1が成立する場合（true）の文;
} else {
  if (条件2) {
    条件2が成立する場合（true）の文;
  } else {
    if (条件3) {
      条件3が成立する場合（true）の文;
    }  else {
      すべての条件が不成立の場合（false）の文;
    }
  }
}
```

### JavaScriptで「else if」構文を使うには

これまでにelse節の使い方を学びました。if節とelse節の組み合わせは、多少面倒な部分だと感じる人もいるでしょう。ここでは構文をシンプルに記述するために、elseとifの組み合わせ構文について学びます。

*JavaScriptでは他のプログラミング言語のような「elseif」構文が定義されていないので「else if」のように「else」と「if」間にスペースを入れて使用します。*

先に学んだelse節は、次のようにすっきりと表すことができます。

```
if (条件1) {
  条件1が成立する場合（true）の文;
} else if (条件2) {
    条件2が成立する場合（true）の文;
} else if (条件3) {
    条件3が成立する場合（true）の文;
} else {
    すべての条件が不成立の場合（false）の文;
}
```

*比較演算子とは、条件式における論理的な真偽を返す演算子です。*if文などの条件分岐に用いて真偽によって処理を分岐させる役割を持ちます。基本的な考え方は、前後の2つを比較した場合に等しいか、大小の差があり等しくないかなどの条件式で判別に使用します。

AとBが等しい場合は「A == B」で表します。同様にAがBより小さい場合は「A < B」、AがBよりも大きい場合は「A > B」で表します。AがBより小さいか等しい場合は「A <= B」、AがBより大きいか等しい場合は「A >= B」、AとBが等しくない場合は「A != B」で表します。

「A == B」ですが、データ型も一致しているか確認する場合は「厳密等価演算子」の”===”を用いて、「A === B」で条件式を記述します。同様に「A != B」についても、データ型も確認する場合は、「A !== B」と「厳密不等価演算子」を用いて記述します。

【参考】：[MDN Web Docs: 式と演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators)
【参考】：[MDN Web Docs: コードでの意思決定 — 条件文](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals)
【参考】：[MDN Web Docs: 厳密等価 (===)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)
【参考】：[MDN Web Docs: 厳密不等価 (!==)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality)

*if文で記述する条件式は、論理演算子で複数の条件を評価することができます。*

ANDを意味する「&&」はそれぞれの条件がすべて真（true）の場合に真（true）となります。ORを意味する「||」は記述する複数の条件の中でいずれかが真（true）の場合、最初の真（true）となった時点で、条件式全体を真（true）とします。論理演算の結果を反転させるには、NOTを表す「!」を追加します。

例えば、条件1と条件2のいずれかが成立すれば処理をするOR条件の場合は、次のように記述します。合わせて条件3と条件4のいずれも成立するAND条件の場合も記載しておきます。

```
if (条件1 || 条件2) {
  条件1あるいは条件2のいずれかが成立する場合（true）の文;
} else {
    if節の条件式が不成立の場合（false）の文;
} 

if (条件3 && 条件4) {
    条件3と条件4いずれも成立する場合（true）の文;
} 
} else {
     if節の条件式が不成立の場合（false）の文;
} 
```

【参考】：[MDN Web Docs: 式と演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators)
【参考】：[MDN Web Docs: コードでの意思決定 — 条件文](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals)

## JavaScriptでif文を実際に使ってみる

*ここでは、学んだ構文を使って実際にif文を使っていきます。*if文の条件分岐を比較できるように、関数を定義して使用します。

この例では、引数が ”りんご” の場合は ”食べ過ぎに注意しましょう" を表示して、戻り値1を返します。比較演算子は、数字や文字列などデータ型を気にせずに使用できます。

```
function check(parm) {
    if (parm == "りんご") { // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // "引数は バナナ です"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 0 0"が表示されます
```

“りんご” 、 ”バナナ” 、数字の9999を引数で与えると ”りんご” のみがif文の条件式で真（true）となっていることがわかります。

### JavaScriptの比較演算子で条件を設定する

*続いて「else if」節の構文を使って、比較演算子の条件を追加します。*この例では、 ”バナナ” を条件に追加し、 ”体に良いよ” と表示し、戻り値2を返します。実行すると、3つの入力値でそれぞれ分岐処理がされていることがわかります。

```
function check(parm) {
    if (parm == "りんご") {      // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else if (parm == "バナナ") { // 文字列の比較もできます
        console.log(parm,"は体に良いよ")
        ret = 2;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // "バナナ は体に良いよ"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 2 0"が表示されます
```

### JavaScriptの論理演算子で複数条件を設定する

最後に、*JavaScriptの論理演算子で複数条件を設定してみます。*次の例では、関数の引数が ”りんご” もしくは ”バナナ” の場合、 ”食べ過ぎに注意しましょう" を表示して、戻り値1を返すように論理演算子で複数条件を設定します。

実行すると、引数が ”りんご” もしくは ”バナナ” の場合、条件式が真（true）となったことがわかります。

```
function check(parm) {
    if (parm == "りんご" || parm == "バナナ") { // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // “バナナ の食べ過ぎに注意しましょう"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 1 0"が表示されます
```

## JavaScriptのif文は1度作成すれば理解できる

JavaScriptのif文は、考え方がシンプルです。条件式を、比較演算子と論理演算子で組み立てるだけで、使用することができます。1度簡単なコードを作成し、制御フローをチェックすると良いでしょう。**チェック済みのif文のJavaScriptコードは使いまわしができますので、理解も深まりおすすめです。**

JavaScriptの数値計算とは？演算子やライブラリの例を紹介

JavaScript入門者・中級者におすすめの技術本8選！

JavaScriptのif文を使うには、if文自体の構文と、if文で判断される条件式の理解が必要です。if文自体は難しくないため、条件式が理解できればプログラミングで活用することができます。ここでは、用いる構文と条件式を実際の使い方を交えて解説していきます。

JavaScriptのif文は、「if (条件) 文;」のようにシンプルな構造で示されます

「else」あるいは「else if」など複数条件に対応し、複雑な制御が可能です

条件式で用いる比較演算子と論理演算子を用いて、1度作れば理解が進みます

JavaScriptのif文を使うには？用いる構文と条件式を解説

*JavaScriptはオブジェクト指向のスクリプト言語であり、ウェブページを動的に表示させることができます。*動的データの生成には、演算を使った数値などから条件に基づいて文字の出力やポップアップなど、多様な方法があります。その中の1つの方法として、配列の活用があります。

ここでは、JavaScriptの配列の使い方を学んでいきます。

【参考】：[MDN Docs: JavaScript の第一歩](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps)
【参考】：[MDN Docs: 配列](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays)

JavaScriptでできること9選！向いている人や学習方法も解説

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

*JavaScriptの配列とは、同一の名称で示す領域（オブジェクト）に複数のデータを格納する、データ型の変数を表します。*角カッコ ”[]” で配列を表し、複数の値をリストとして保持します。

通常の変数も値を格納できますが、配列の場合は任意の値に個別にアクセスすることができるため、多量の項目をループ処理する場合などに、効果的です。

ここからは、JavaScriptの配列を実際に使って解説していきます。*JavaScriptは難しいプログラミング言語ではありませんが、基本的な理解を深めるために、まずは配列の作成から始めていきます。*続いて、アイテム（要素）の追加や削除などを順を追って進めていきます。

【参考】：[MDN Docs: 配列](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays)
【参考】：[MDN Docs: Arrayオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)

*JavaScriptの配列を作成するには、配列名に対して角カッコ ”[]” で配列であることを宣言します。*”[]”のみの定義は、空の配列が定義されただけなので何も格納されていません。

```const fruits=[];
console.log(fruits);        // ”[]”が表示されます```

上記配列をconsole.log()で表示すると”[]”が戻り、まだ値が格納されていないことがわかります。値を格納するには、次のように要素を指定します。配列の要素へのアクセスは、角カッコ ”[]" 内にインデックスで位置を指定します。

```const fruits = [];
fruits[0] = "バナナ";
fruits[1] = "みかん";
fruits[2] = "リンゴ";
fruits[3] = "ブドウ";
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます```

上記配列をconsole.log()で表示すると、”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が格納されていることがわかります。

配列に格納できるのは、文字列や数値、オブジェクトや他の配列などあらゆるデータ型がサポートされています。もちろんデータ型の混在も可能です。

また2次元配列や、文字列と値のペアで管理できる、波括弧 ”{ }” で示す連想配列も定義されており、JavaScriptでは多様なデータの格納方法が提供されています。

### 配列の初期化を宣言時に行う

配列は宣言によって領域を作成し、値を代入してから利用することができます。*この初期化の手順は多少の手間がかかるため、次のように配列を作成する時点で同時に値を格納することができます。*

```const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます```

配列の作成方法は、上記リテラル記法のほか、Array()コンストラクタを用いて次のように行うこともできます。

```const fruits = new Array("バナナ", "みかん", "リンゴ", "ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます```

配列のそれぞれの要素は、”...”を先頭につけることで引数に用いる際に展開して使用することもできます。集計処理などで利用すると効果的です。

```const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(...fruits);     // 配列を展開した文字列、“バナナ みかん リンゴ ブドウ”が表示されます```

*配列にアイテム（要素）を追加するには、push()を使用します。*push()は、配列の末尾に1つ以上のアイテムを追加することができます。また、ここでは配列の長さも知りたいので、lengthプロパティを合わせて用います。

```const fruits = [];
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です
fruits.push("バナナ", "みかん", "リンゴ", "ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です```

push()を個別に実行した場合は、次のように末尾にアイテムが追加されていきます。配列長を表すlengthプロパティも1ずつ増加します。

```const fruits = [];
fruits.push("バナナ");console.log(fruits);        // ”[ 'バナナ' ]”が表示されますconsole.log(fruits.length); // 配列長の値は1ですfruits.push("みかん");
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されますconsole.log(fruits.length); // 配列長の値は2ですfruits.push("リンゴ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ' ]”が表示されますconsole.log(fruits.length); // 配列長の値は3ですfruits.push("ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です```

アイテムを先頭に追加するには、次のようにunshift()で追加できます。

```
const fruits = ["みかん", "リンゴ", "ブドウ"];
console.log(fruits);         // ”[ 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
fruits.unshift("バナナ");      // 先頭に”バナナ”を追加します
console.log(fruits);         // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です
```

### 配列からアイテムを削除する

*配列からアイテムを削除するには、pop()を用います。*pop()では、最後の項目が削除されます。pop()を使用すると、削除されたアイテムが戻ります。pop()によってアイテム数（要素数）も減り、次のpop()によって順にアイテムが削除されます。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です
console.log(fruits.pop());  // “ブドウ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
console.log(fruits.pop());  // “リンゴ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
console.log(fruits.pop());  // “みかん”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ' ]”が表示されます
console.log(fruits.length); // 配列長の値は1です
console.log(fruits.pop());  // “バナナ”が表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です
```

先頭の位置から削除する場合は、次のようにshift()を用います。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.shift());// “バナナ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
console.log(fruits.shift());// “みかん”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
console.log(fruits.shift());// “リンゴ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は1です
console.log(fruits.shift());// “ブドウ”が表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です
```

JavaScriptでは、配列のアイテムを操作するためのメソッドを用意しています。*splice()メソッドは、配列に格納したアイテムの追加や削除、置換のような配列操作が可能です。*

ここでは指定位置以降の要素を削除する場合に、splice()を使用してみます。引数は0から始まるインデックス（オフセット）を示します。3番目のアイテム以降を削除する場合は、引数にインデックス2を設定して次のように行います。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(2)); // ”[ 'リンゴ', 'ブドウ' ]”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
```

すべてのアイテムを削除する場合は、引数に先頭のインデックス0を代入します。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(0)); // アイテムすべてが表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です
```

任意の位置の項目を削除したい場合は、第2引数に数を与えます。例えば2～3番目の項目を削除したい場合は、開始インデックス1、削除する要素数が2であり、splice(1,2)などのように指定します。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(1, 2)); // ”[ 'みかん', 'リンゴ' ]”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
```

splice()を使ってアイテムを追加するには、第2引数を0にすると削除されずに第3引数以降を追加してくれます。次の例では、事前に保存されている要素を削除せず、先頭位置から3つのアイテムを追加します。

```
const fruits = [ "ブドウ" ];
console.log(fruits);        // ”[ 'ブドウ' ]”が表示されます
console.log(fruits.splice(0, 0, "バナナ", "みかん", "リンゴ"));  // 何も削除されず、”[]”が表示されます
console.log(fruits);        //  ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です
```

次のように任意の場所の値を置き換えることもできます。この例では ”みかん” を ”オレンジ” に置き換えます。”みかん” のインデックスが分からなくてもindexOf()メソッドで情報を得ることができます。

```
const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
const index = fruits.indexOf("みかん"); // “みかん”のオフセット番号1が得られます
console.log(fruits.splice(index, 1, "オレンジ"));  // “[ 'みかん' ]”が表示され、”オレンジに”置き換わります
console.log(fruits);        //  ”[ 'バナナ', 'オレンジ', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4で、アイテム数は変更がありません
```

## JavaScriptの配列はメソッドやプロパティが活用できる

JavaScriptは、ウェブページ作成によく使われるスクリプト言語です。多くの機能が搭載されており、処理結果に基づいた動的コンテンツの作成などに用います。ここでは、JavaScriptの構文の中から、配列の使い方に焦点をあてて解説していきます。

JavaScriptの配列は、同一名称で示す領域に複数のデータを格納するデータ型の変数です

配列を使用するには、角カッコ”[]”で配列を宣言し、複数の値をリストとして格納します

配列操作のメソッドやプロパティが提供され、効率的なデータ処理が可能です

JavaScriptの配列の使い方は？一連の使い方を解説

## JavaScriptにおける関数型プログラミング

近年、Web開発においてJavaScriptがますます重要な役割を果たす中、関数型プログラミングの概念を取り入れる動きが活発化しています。

従来の命令型プログラミング（オブジェクト指向プログラミング）とは異なり、関数型プログラミングはコードの読みやすさや保守性を向上させ、複雑なシステム開発にも柔軟に対応できる利点があります。

本記事では、*JavaScriptにおける関数型プログラミングの特徴、メリットなどについて詳しく解説します。*さらに、具体的なコード例を用いて、関数型プログラミングの主要な概念である「ファーストクラス関数」、「高階関数」、「クロージャ」などをわかりやすく紹介します。

【参考】：[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

プログラミングの関数とは？役に立たない？学び方と実務で役立つスキル

### そもそも関数型プログラミング言語とは？

関数型プログラミングは、**プログラムを関数という基本的な構成要素で組み立てていくプログラミング手法で、宣言型プログラミング言語の1種です。**関数とは、名前と処理内容を定義したプログラムのまとまりであり、引数を受け取って値を返すという特徴を持ちます。

代表的な言語としてはHaskellやScalaがあります。関数型プログラミングでは、以下の4つの基本原則に基づいてプログラムを設計します。

*1.状態不変性*
関数は常に同じ入力に対して同じ出力を返すように設計されます。つまり、関数の内部状態は実行ごとに変化せず、常に一定の状態を保ちます。

*2. 副作用の排除*
関数は副作用を起こさないように設計されます。つまり、関数の処理は外部のデータや状態を変更せず、関数内部のみで完結します。

*3.再帰*
問題をより小さな同じような問題に分解し、それを繰り返し解決することで複雑な問題を解きます。

*4. 高階関数*
関数を引数として受け取ったり、関数を出力として返したりするような、関数を扱う関数を指します。

*書籍「関数型言語で学ぶプログラミングの基本」*

これを機会に関数型プログラミング言語について学んでみたい方に、おすすめの書籍を紹介します。関数型プログラミングは、プログラムを関数の組み合わせとして捉えるスタイルです。本書ではOCamlを用いて、関数型プログラミングの基礎と応用について詳しく解説しています。

OCamlは直感的な文法と高度な抽象化機能を備え、複雑なアプリケーションの開発に適しています。関数型プログラミングの理解を深め、他の言語でも応用できるプログラミングスキルを身につけることができるでしょう。

▪著者：川井 俊輝
▪出版社：インプレス
▪ページ数：130ページ 
▪発売日：2024/02/23

【参考】：[関数型言語で学ぶプログラミングの基本](https://nextpublishing.jp/book/17485.html)

JavaScriptの記事（1ページ目）