## JavaScript入門のための基礎知識

**JavaScriptはプログラミング言語の1つで、ユーザー側のWebブラウザとWebサービスのやり取りをスムーズに行うために使用されることが多い言語です。**近年では、IT技術の急激な発展に伴い、データをブラウザに表示し、見たり読んだりする体験のほとんどがJavaScriptの処理によって実現されています。

例えば、Netflix・Hulu・U-NEXTなどの動画配信サービスの情報表示などにもJavaScriptが使用されています。ここでは、JavaScriptの入門ということで、JavaScriptの概要や間違われやすいJavaScriptとJavaの違いについて詳しく紹介します。

*JavaScriptは、Netscape Communications社とSun Microsystems社が共同で開発したプログラミング言語です。*JavaScriptが誕生したのは、インターネットが普及し始めた1990年代始め頃です。

当初はNetscape Navigatorというブラウザ専用に開発されており、LiveScriptという名称でした。その後企業との提携があり、JavaScriptという名称に変わりました。

**JavaScriptは主にWebサイトを制作する際に使用するHTMLの中に組み込んで使うスクリプト言語であり、 オブジェクト指向型言語の1つでもあります。**

JavaScriptは初心者におすすめ？その理由と作れるものを紹介

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

**「JavaScript」と「Java」は名称が似ていますが、全く異なるプログラミング言語です。**JavaはSun Microsystems社によって開発された言語で、JavaScriptが主にWebブラウザ上で動作するサービスの開発に使用されるのに対し、Javaは銀行や証券会社などの大規模システムの開発に使用されることが多い言語です。

また、変数の処理においてJavaScriptが動的処理を行うのに対して、Javaは静的であるといった違いもあります。JavaScriptとJavaは文法や使用方法も全く異なる言語だと言えるでしょう。

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

**JavaScriptは、プログラムを実行する際にコンパイルが必要ありません。**そのため、簡単に実行できます。

*JavaScriptの実行方法は主に2種類で、HTMLを用いて実行する方法とWebブラウザに付属する開発ツールを利用して実行する方法があります。*

JavaScriptは主にHTMLのコードに組み込んで使います。**組み込み方は2通りで、HTMLファイルに直接JavaScriptのコードを書き込むか、別でJavaScriptのファイルを準備し、それをHTMLファイルから読み込むことができます。**

前者の場合、HTMLの記述の中にscriptタグ（<script></script>）を用意し、その中にJavaScriptのプログラムを入力します。

```
<script>
（JavaScriptのコードを記述する）
</script>
```

HTMLはテキストエディタとブラウザがあれば記述・実行することができます。

後者の場合、JavaScriptのコードを別ファイルに記述し、HTMLファイルからそれを読み込みます。このとき、<script>タグのsrc属性を使って外部のJavaScriptファイルを指定します。

```
<script src="（JavaScriptファイル名）">
</script>
```

なお、JavaScriptファイルの拡張子は「 .js」とするのが一般的です。

### Webブラウザの開発ツールを用いて実行する

Google ChromeなどのWebブラウザに付属する開発ツール（コンソール）でJavaScriptコードを入力・実行することもできます。主要なブラウザには開発ツールが備わっていることが多いです。コンソールの開き方は次の通りです。

*【Google Chromeの場合】*
1．画面右上のメニュー→「その他のツール」→「デベロッパーツール」
2．画面下部もしくは右側に表示されるデベロッパーツールから「Console」を選択

*【FireFoxの場合】*
1．画面右上のメニュー→「その他のツール」→「ウェブ開発ツール」
2．画面下部に表示されるウェブ開発ツールから「コンソール」を選択

*【Microsoft Edgeの場合】*
1．画面右上のメニュー→「その他のツール」→「開発者ツール」
2．画面下部もしくは右側に表示され開発者ツールから「コンソール」を選択

これらのコンソールでは簡単なJavaScriptコードを記述・実行することができ、コードを記述してEnterキーを押せばすぐに実行されます。

それでは、JavaScriptの文法の基本について詳しく紹介します。

**プログラミング言語では一般的にコメントを記述でき、JavaScriptも例外ではありません。**コメントは、レビューやコードを更新するときに役立ちます。JavaScriptのコメントの書き方には、1行と複数行のものがあります。1行の場合、「//」以降の行末までがコメントアウトです。

の間がコメントアウトされます。コメントアウトされた部分は、実行結果に表示されません。

**JavaScriptの演算子には、算術演算子・比較演算子・インクリメント演算子・デクリメント演算子・条件演算子・文字列連結演算子などがあります。**それぞれの概要は次の通りです。

【算術演算子】加減乗除を行う演算子のこと
【比較演算子】2つの式や値の大小比較を行い、結果を真偽で評価する演算子のこと
【インクリメント演算子・デクリメント演算子】数字を1だけ加減算するための演算子のこと
【条件演算子】条件によって処理を変えることができる演算子のこと
【文字列連結演算子】文字列を結合するための演算子のこと

**JavaScriptには、8種類のデータ型があります。**それぞれの名称と概要は次の通りです。

【Boolean型】「true」もしくは「false」の真偽値を表すデータ型のこと
【Number型】整数や浮動小数点数を表すデータ型のこと
【BigInt型】精度が自由である整数値を表すデータ型のこと
【String型】文字列を表すデータ型のこと
【Symbol型】固有の識別子を表すデータ型のこと
【Object型】データまたはデータをやり取りするデータ構造を表すデータ型のこと
【null型】null値を表すデータ型のこと
【undefined型】値が定義されていないことを表すデータ型のこと

**JavaScriptでは、値を表現するためにリテラルを使用します。**リテラルには次のような種類があります。

【リテラル】特定のデータ型の値を直に記述したもの
【真偽値リテラル】trueまたはfalseのこと
【配列リテラル】0個以上の式のリストのこと
【数値リテラル】10進数・16進数・8進数・2進数で記述できる数値のこと
【浮動小数点リテラル】浮動小数点のこと
【Symbolリテラル】固有の識別子のこと
【文字列リテラル】一般的な文字列のこと

**JavaScriptでは、変数に「var」「let」「const」の3種類を使用します。**「let」「const」を使用すれば、意図していない変数の上書きを未然に防ぐことができます。

「var」は再宣言と再代入ができる変数
「let」は再代入はできるが、再宣言ができない変数
「const」は再宣言と再代入ともにできない変数

*プログラムのエラーや不具合を防止するためにも、変数の使い分けは重要です。変更する予定のない変数は「const」を選ぶのがおすすめと言えます。*

近年ではJavaScriptを利用してできることは増加傾向にあります。理由として、IT機器の性能が向上したことや、JavaScriptの言語自体が発展を遂げたことが挙げられます。ここでは、JavaScriptを活用してできることについて詳しく紹介します。

### Webブラウザに表示された画面に動きを加えられる

**HTML・CSSをJavaScriptで操作し、画面に動きを与えることができます。**例えば、ユーザーがスクロールする際に画面背景のデザインを変化させたり、ローディングする際にアニメーションを導入したりすることが可能です。

### サーバーとデータを送受信できる

**JavaScriptはサーバーと通信を行い、データを取得できます。**Webコンテンツは一般的に「サーバーサイド」と「フロントエンド」で構築されています。サーバーサイドとは、サーバー側で動作しているプログラムのことです。

サーバーサイドのプログラムは、URLに対してどのWebページを表示するかを制御したり、データベースから特定のデータを取得したりする役割を担います。

一方、フロントエンドのプログラムは、サーバーサイドから取得したデータをWebブラウザ上に表示する役割を主に担うことが多いです。*Webブラウザ上で動作するJavaScriptは、フロントエンドとサーバーサイドの間をやり取りすることができる言語と言えます。*

### Webページ上に複雑なアプリを作成することができる

**JavaScriptを利用して、Webブラウザ上に複雑なアプリケーションを作ることが可能です。**例えば、「Googleスプレッドシート」や「Googleドキュメント」などは、JavaScriptによって動的なコンテンツを生成しています。

*近年では、Webブラウザ上で動作する複雑なアプリの需要が高まりつつあります。*Webアプリでは端末や機器の違いを気にする必要がないため、オフィスではPCで業務を行い、通勤中はスマートフォンで作業するといった使い方が可能です。

### スマホアプリを作成することができる

一般的に、JavaScriptはWebブラウザ上で動作するものです。しかし近年では、*JavaScriptの活躍する領域は拡大し、Webブラウザ以外の環境でも使用されるケースが増加しています。*その1つがスマホアプリの開発です。

スマホアプリは、Androidの場合「Java」「Kotlin」、iOSの場合「Swift」「objective-C」などのプログラミング言語を用いて開発されることが多いです。しかし、AndroidとiPhoneで使用するプログラミング言語が違うのは、エンジニアにとって不便であるとも言われています。

そんな中、**JavaScriptのスマホアプリ開発用のフレームワーク「React Native」が登場したことによって、エンジニアはAndroid・iOSのどちらにも対応したスマホアプリを制作できるようになりました。**

「React Native」のフレームワークを使用して作成されたスマホアプリの代表例として、Facebook・Instagramなどが挙げられます。

KotlinとJavaの違いは？それぞれのメリット・デメリットと勉強方法も紹介

Swiftとは？特徴・できること・学習方法をまとめて解説！

React Native入門！将来性やアプリ開発環境について解説

## JavaScriptがよく使われている場面

JavaScriptの使用場面として最もわかりやすいのは、やはり「画面に動きを加える」例です。ここでは、誰もが1度は目にしたことがあるような例をいくつか挙げてみます。

Webサイトでは、画像も多く使われます。こうした画像の表示をJavaScriptを用いてカスタマイズすれば、より見やすく、魅力的な画面になります。

**■画像の拡大表示**
Webサイト上で画像をクリックすると、拡大表示できるようにJavaScriptで設定できます。例えば、ECサイトの商品画像などで細部までよく見せることができます。

**■画像スライダー**
複数の画像が自動的に切り替わっていく表示方法です。Webサイトのトップページなどでよく見られます。

### アイテムの表示・非表示の切り替え

画像の拡大表示や画像スライダーのように表示の仕方をカスタマイズするだけでなく、表示・非表示を切り替えることもできます。**よく見られるのは、カーソルの動きに伴うメニューの表示・非表示切り替えです。**

カーソルを合わせると詳細メニューが表示され、離すと表示が消える、という動きは、JavaScriptによって実現されています。

「サーバーとデータを送受信する」例についても紹介します。多くの人が経験したことのあるものとして、入力フォームのエラー表示が挙げられます。会員登録や商品の購入ページで必要項目を入力して送信しようとしたら、入力不備があると表示された、といった経験があるのではないでしょうか。

これは、**JavaScriptによってユーザーが入力した内容（入力値）を取得し、さらにそれを特定の条件にもとづいてチェックして、OKなら送信、NGならエラーメッセージの表示、という設定をしているからです。**

Googleマップなどの地図アプリでは、地図の縮小・拡大や他の場所の表示への移動がスムーズにできます。このような動きは、**JavaScriptを利用した非同期通信「Ajax」によって可能になっています。**

ブラウザでWebページなどを表示するとき、通常はデータを読み込むために多少の待ち時間が発生します。これは、特定の処理が終了してから次の処理に進む「同期通信」が行われているためです。

対して地図アプリでは非同期通信によって、サーバーから情報を取得しつつもユーザーの操作も受け付けることができます。そのため、リロードをせずにリアルタイムで地図の表示範囲を変えることができるのです。

## JavaScript入門者におすすめの勉強方法

JavaScriptは、Webサイトに動きを加えるために使用されることが多いプログラミング言語です。しかし近年では、活用される領域が増加傾向にあります。そこで本記事では、JavaScriptの概要や文法、できることについて入門者向けに解説します。

JavaScriptは、Webサイトに動きを加えるために使用されることが多いプログラミング言語

JavaScriptとJavaは名前が似ているが、全く異なるプログラミング言語

JavaScriptを勉強する際は、フレームワークの知識も学習することが大切

【JavaScript入門】実行方法や文法の基本などを解説！

**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にはどんな特徴・メリットがある？

プログラミング言語にはさまざまな種類があり、開発したいものや目的に合わせて適切な言語を選ぶ必要があります。では、この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の記事（1ページ目）