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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptにおける関数型プログラミングは、1990年代後半から徐々に注目され始めました。

**JavaScriptは、関数型プログラミングの主要な概念をサポートしており、関数型プログラミングスタイルで記述することができます。**

具体的には、以下のような機能が提供されており、これらの機能によってJavaScriptでも関数型プログラミングの主要な概念を実装することが可能になりました。また、JavaScriptは動的型付け言語であることから、関数に型指定ができません。

型推論の仕組みによって。ある程度は型を推論できますが、プログラムが複雑になると型が推論されないケースもあります。こうした問題を解決する方法として、静的型付け言語であるTypeScriptを使用する方法があります。以下、JavaScriptの主な関数の種類について紹介します。

*1.ファーストクラス関数*
関数は値として扱われ、他の変数に代入したり、関数引数として渡したり、関数から返したりすることができます。

*2.高階関数*
 JavaScriptには、map、filter、reduceなどの高階関数が標準で用意されており、これらの関数を利用することで、より簡潔で表現力豊かなコードを書くことができます。

*3.クロージャ* 
クロージャは、関数とその関数内で定義された変数を組み合わせたものです。関数を実行した後でも、関数内で定義された変数にアクセスすることができます。

TypeScriptとは？JavaScriptとの違いも解説！

## JavaScriptにおける関数型プログラミングのメリット

以上、関数型プログラミングとは何かについて解説しましたが、これらの原則を徹底することで、*JavaScriptでは以下のようなメリットが得られます。*

### コードの読みやすさと理解のしやすさ

 関数は独立した単位として扱われるため、コード全体を俯瞰しやすくなり、**複雑な処理であってもコードが読みやすく、理解しやすくなります。**

関数は副作用を起こさないため、コードのどの部分でエラーが発生しているのかを特定しやすくなるため、**エラーを見つけやすくデバッグが容易になります。**

関数は純粋な関数であるため、**入力値に対して常に同じ出力を返すことが保証されるため、テストが容易になります。**

関数は再利用可能な部品として扱われるため、コードのモジュール性を高め、保守性を向上させることができます。

## 関数型プログラミングの主要な概念

JavaScriptにおける関数型プログラミングの主要な概念とプログラミング例について、具体的に見ていきましょう。

JavaScriptにおける関数は、functionキーワードを使って定義されます。**関数は、名前、引数リスト、関数本体で構成されます。**

*例：平方数を計算する純粋関数*
この関数は、引数 x の値のみを参照して、平方数を計算し、その値を返します。外部状態を参照したり、グローバル変数を変更したりしないため、純粋関数と言えます。

```
function square(x) {
  return x * x;
}
const result = square(5); // 25
```

イミュータブルなデータとは、一度作成されたオブジェクトの状態（中身）が変わらないことを指します。具体的には、**オブジェクトのプロパティを操作しても、作成されたオブジェクトの中身が変わらない（影響を受けない）状態のことです。**

*例：イミュータブルな配列を使って合計値を求める*
このコードでは、numbers配列をイミュータブル（変更不可）なデータとして扱っています。reduce関数は、配列の各要素に対して処理を行い、その結果を新たな配列として返します。元のnumbers配列は変更されません。

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

const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
```

**高階関数は、関数を引数として受け取ったり、関数を出力として返したりする関数のことを指します。**JavaScriptには、map、filter、reduceなどの高階関数が標準で用意されています。

*例：map 関数を使って配列の要素を2倍にする*
このコードでは、map関数を使ってnumbers配列の各要素を2倍にしています。map関数は、配列の各要素に対して処理を行い、その結果を新たな配列として返します。

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

const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
```

関数の中で自分自身を呼び出す関数のことを指します。**再帰的なアプローチを使用することで、問題をより小さな部分に分割し、それらの部分を組み合わせて問題全体を解決することができます。**

*例：再帰を使って階乗を計算する*
この関数は、再帰を使って階乗を計算します。再帰とは、関数が自分自身を呼び出す手法です。この例では、factorial(n)関数はnが0になるまで自分自身を呼び出し、その結果を掛け算して返します。

```
function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
const result = factorial(5); // 120
```

複数の関数を組み合わせて新しい関数を作る手法です。**JavaScriptでは、パイプ演算子 (|) を用いて関数の合成を記述することができます。**

*例：パイプ演算子を使って配列の要素を2倍にして合計値を求める*
この例では、map関数とreduce 関数を連結して、配列の要素を2倍にして合計値を求めています。

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

const result = numbers
  .map(num => num * 2)
  .reduce((total, num) => total + num, 0);
console.log(result); // 30
```

## JavaScriptの関数型プログラムと命令形プログラムの根本的な違い

ここまで、JavaScriptにおける関数型プログラミングについて解説してきましたが、では従来の命令形プログラムと根本的に何が違うのでしょうか。JavaScriptにおける関数型プログラムと命令形プログラムは、設計思想とデータの扱い方に根本的な違いがあります。それぞれ見てみましょう。

最初に、*関数型プログラムと命令形プログラムの設計思想における違いを見てみましょう。*

*【命令型プログラム】*
命令形プログラムは、状態と呼ばれる変数を用いてプログラムを記述します。プログラムは、状態を変化させる命令を逐次実行することで処理を進めます。

```
let count = 0;
for (let i = 0; i < 10; i++) {
  count++;
}
console.log(count); // 10
```

上記の例では、countという変数に状態を保持し、ループ内で状態を更新することで、1から10までの合計値を出力しています。

*【関数型プログラム】*
一方、関数型プログラムは、関数を基本的な構成要素としてプログラムを記述します。関数は、引数を受け取って値を返すというシンプルな定義を持ちます。

```
function add(x, y) {
  return x + y;
}
const result = add(3, 5);
console.log(result); // 8
```

上記の例では、addという関数を定義し、2つの引数を受け取ってそれらを足した値を返しています。

次に、*関数型プログラムと命令形プログラムのデータの扱い方の違いについて見てみましょう。*

*【命令型プログラム】*
命令形プログラムでは、変数は可変であり、プログラムの実行中に値が変化します。この可変性が、プログラムの複雑さや予期せぬ動作の原因となることがあります。

```
let count = 0;
function increment() {
  count++;
}
increment();
increment();
console.log(count); // 2
```

上記の例では、increment関数を呼び出すたびにcount変数の値が1ずつ増えます。しかし、このプログラムを実行した結果が常に2になるとは限りません。例えば、別の場所でcount変数の値を変更した場合、このプログラムの出力は変化します。

*【関数型プログラム】*
関数型プログラムでは、変数は不可変であり、1度代入された値は変更できません。この不可変性が、プログラムの理解しやすさと信頼性を高めます。

上記の例では、add関数内で変数の値を変更することはできません。そのため、常に同じ引数に対して同じ出力を返す純粋関数となります。

*■ 命令型プログラムと関数型プログラムの比較*
このように、JavaScriptにおける関数型プログラムと命令形プログラムは、根本的な違いを持つパラダイムです。それぞれの利点と欠点を理解した上で、状況に応じて適切なプログラミング手法を選択することが重要です。以下、比較表で整理してみました。

*【命令型プログラム】*
・設計思想：状態の更新
・データの扱い方：可変
・利点：シンプル
・欠点：複雑になりやすく、予期せぬ動作が起こりやすい

*【関数型プログラム】*
・設計思想：関数の組み合わせ
・データの扱い方：不可変
・利点：理解しやすく信頼性が高い
・欠点：慣れないと記述が難しい

## 関数型プログラミングの理解を深めてスキルアップを

JavaScriptはフロントエンドの開発言語として知られていますが、関数型プログラミング言語の特徴をいくつか備えています。この記事では関数型プログラミングとは何か、どのようなメリットがあるのかについて解説するので、ぜひ参考にしてください。

JavaScriptに関数型プログラミングの概念を採用する動きが活発化している

関数型プログラミングはコードが読みやすく、デバッグやテストが容易になるメリットがある

命令型プログラミングと関数型プログラミングの長短を見極め、状況に応じて選択すると良い

JavaScriptにおける関数型プログラミングとは？概要を紹介

## HTMLでJavaScriptを動かせるのか

マークアップ言語であるHTMLは、さまざまなWebサイトやCMSなどで活用されており、CSSとセットで利用されることが多い言語です。しかし、HTML/CSSのみではアニメーションなどの動きを加えることができず、クオリティの高いサイト作りが難しくなります。

スライドショーやプルダウンメニューなどの作成は、ブラウザで動きを加えられるJavascriptで実装されることが多いです。

一般的なWebサイト作りは、**HTMLによってWebサイトを構築し、CSSによって装飾が施され、Javascriptによってアニメーションなどの動きを加える、といったそれぞれの言語の特性を活かして使い分けることが重要です。**

では、このHTMLでJavascriptを動かすにはどうすればいいのでしょうか。

この記事では、HTMLでJavascriptを動かす方法の他、Webサイト作りで活躍するJavaについても触れていきます。HTML・Javascript・Javaを習得してITエンジニアやWebクリエイターを目指す方は、ぜひ本記事を参考にして転職に役立てましょう。

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

## HTML・JavaScriptで何ができる？

前述したように、Webサイト作りではHTMLやJavaScriptなどの言語が欠かせません。ここでは、HTML・JavaScriptについて具体的に何ができるのか、さらにWeb開発において活躍するJavaとの関係性についても解説します。

この3つの言語について基礎をおさらいしていきましょう。

HTML（エイチティーエムエル）とは、Webページを作成するために開発された言語です。プログラミング言語とは異なり、文章構造や視覚表現を記述することのできるマークアップ言語です。

*世界中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことができます。*2021年にHTML5が廃止され、現在の名称である「HTML Living Standard」になりましたが、基本的な要素や属性の扱いは変わりません。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼び出すことによって動的なコンテンツを実装できます。HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものです。

HTMLでできることは少ない？できないことやタグも一覧でまとめた

JavaScript（ジャバスクリプト）は、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。

JavaScriptは主にWebサイト上に動きを付ける目的で利用されています。記述内容が似ているJavaとは別物の言語であり、用途や目的も大きく異なります。

JavaScriptの特徴はブラウザ上で動作させることが可能な点であり、*ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせて動作させたりすることができます。*

最近では、大規模なWeb開発にはVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

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

Java（ジャバ）は、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、Web開発だけでなくシステム開発やアプリケーション開発にも利用されます。

幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高めです。

*Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計できます。*例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。

Javaとは？人気プログラミング言語の特徴やメリットを解説

## HTML・Javascriptを扱う職種や年収

ここでは、HTMLとJavascriptを扱うITエンジニアにはどういった職種があるのかを紹介します。また、今後スキルを習得するにあたって気になる年収事情についてもまとめました。

**HTMLとJavascriptを用いる職種としては、マークアップエンジニアやフロントエンドエンジニアが挙げられます。**

マークアップエンジニアとは、Webサイト制作においてHTML・CSSなどのマークアップ言語を主に利用して、ユーザビリティを配慮したWebサイト作成に携わる職種です。

具体的には、Webデザイナーが設計したデザインを、HTML・CSSを用いてコンピュータにプログラムとして実装します。Webサイト制作におけるフロントエンド部分の最終工程を担当します。

フロントエンドエンジニアとは、Webサイトにおいてユーザがテキストを入力したり、ボタンをクリックしたりするフロントエンド部分を担当するエンジニアです。

具体的には、Webデザイナーが作成したデザインをもとに、Webサービスの設計やマークアップ言語を使用してコーディング、WordPressなどのCMS構築などを担当します。

マークアップエンジニアとは？仕事内容や年収、将来性について解説

フロントエンドエンジニアとは？未経験から目指す効果的な転職方法を徹底解説！

ここでは、前項で紹介したフロントエンドエンジニアの年収例を参考に紹介します。

フロントエンドエンジニアの平均年収は、「マイナビエージェント 職業別年収ランキング」では385万円（2024年5月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりも、やや低めであることが分かります。

**フロントエンドエンジニアとして年収をさらにアップさせるには、後述して紹介する資格を取得したり、プログラマーやシステムエンジニアなどにキャリアアップしたりする方法がおすすめです。**

【参考】：[マイナビエージェント 職業別年収ランキング](https://mynavi-agent.jp/helpful/income/category/creative_05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)
※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)

前述したように、フロントエンドエンジニアやマークアップエンジニアとして活躍するには、HTML・CSS・JavaScriptに関係する資格の取得が有効です。おすすめの資格は以下の通りです。

*◼︎Webクリエイター能力認定試験*
Web制作業界でもっとも受験者数が多く、標準的なWebサイト制作のスキルが問われる資格です。「スタンダード」「エキスパート」の2つの認定区分に分けられます。

【参考】：[Webクリエイター能力認定試験｜資格検定のサーティファイ](https://www.sikaku.gr.jp/web/wc/)

*◼︎CIW JavaScript Specialist*
海外でも通用するグローバルな資格であり、インターネット・Web知識・技術に関する理解度が問われ、自身のITスキルや能力を国際的に証明できます。試験は英語のみですが、海外ビジネスのチャンスがある方にはおすすめです。

【参考】：[Page not found - Certification Partners](https://ciwcertified.com/ciw-certifications/web-development-series/javascript-specialist)

*◼︎HTML5プロフェッショナル認定試験*
LPI-Japanによって実施されているHTMLのスキルを証明できる資格です。試験はレベルに応じて、レベル1（初級・中級レベル）とレベル2（中級・上級レベル）に分けられます。

【参考】：[Web資格なら「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/)

*◼︎基本情報技術者試験*
ITエンジニアとしての基礎知識やスキルを問われる国家試験であり、「ITエンジニアの登竜門」とも呼ばれる資格です。初級〜中級レベルであり、学生から現役エンジニアまで幅広い年齢層の受験者がいます。

【参考】：[基本情報技術者試験(FE)](https://www.ipa.go.jp/shiken/kubun/fe.html)

Webクリエイター能力認定試験とは？メリットや活かせる仕事も解説

HTML5プロフェッショナル認定試験が難しい？試験内容や取得方法

基本情報技術者試験とは？試験概要や合格率、ITパスポートとの違い

ここまでで、それぞれの言語の役割と関係性を説明しました。ここからは、Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明します。まずは、JavaScriptを動かす方法を紹介します。*方法としては「外部ファイルから呼び出す」「HTMLに直書きする」の2通りです。*

HTML上でJavaScriptを呼び出す最も一般的な方法は、**外部ファイルから呼び出す方法です。**具体的な記述方法は下記の通りです。

```<script src="test.js"></script>```
<br/>
この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。

異なる記述のやり方として、以下のような記述方法もあります。

```<script type="text/javascript" src="test.js"></script>```
<br/>
type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5（HTML Living Standard）では、記述なしは自動的にJavaScriptとして認識してくれることから不要となっています。

もう1つの方法として、**HTMLに直接JavaScriptを記述する方法があります。**これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。記述方法は下記の通りです。

``` <script> 　
～JavaScriptのコードを記述～
</script>```
<br/>
外部ファイルから呼び出すときと同様に、HTML5（HTML Living Standard）ではtype="text/javascript"は省略することができます。

続いて、HTML上でJavaを動かす方法を紹介します。多くの動的WebページはJavaScriptのみの使用で十分ですが、高負荷でもパフォーマンスを発揮できる処理を実装したい時に活用できるでしょう。

サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。

このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバの1つです。

**HTMLでこのサーブレットを呼び出すことはJavaを呼び出すことと同義です。**HTML上で呼び出す方法としては、シンプルにhrefを使うことが挙げられます。

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaをサーブレットの本体とすれば、以下のような記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

```<a href="/Servlet/test">サーブレットリンク先</a>```
<br/>
別の方法としては、\<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。

この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、以下のようになり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。

```<form acrion="/Servlet/test" method="get">～フォーム内容～</form>```
<br/>
サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

Javaサーブレットとは？動的サイトの作成に使われるメリットなどを解説

HTML上でJavaを呼ぶもう1つの方法として、**HTML内にJavaを埋め込むJSPがあります。**この場合は、呼び出すというよりも前述したインラインスクリプトに近い形になります。JSPの記述例としては下記となっています。

```<%@ page contentType="text/html;charset=（文字コード名）" %>
<% out.print("テスト"); %>
現在時刻は<%= nowTime %>です```
<br/>
1つ目の<%@では、HTMLでJSPを利用するための決まり事であり、ページの種別や使用する文字コードを決めています。

2つ目の<%がJavaの記述であるかどうかを決めている箇所であり、この中にコードを記述していく形になります。

3つ目の<%=では、HTMLの表示文字列の中にJavaによって得られた文字列を表示することが可能です。文字列を出力するメソッドを入力する手間が省けているため、簡潔な表現が可能です。

ちなみに、上記例ではJavaの日付時刻データを管理するクラスにあるクラス変数を呼び出しています。

このようにJSPではHTML内においてもJavaの記述を最小限にすることができますので、簡潔なコードを記述することができます。

## Webアプリケーション開発で活躍するJava

サーブレットやJSPがあるように、JavaはWebアプリケーション開発の分野で非常に活躍しています。そのため、近年、より進化した開発ツールが登場しています。

*JSF（JavaServer Faces）は、Java EEという企業向けのJava開発プラットフォームで提供されているフレームワークの1つです。*ユーザインターフェースの作成に特化したコンポーネントベースのフレームワークとなっています。

JSFでは、JSPで欠点でもあるHTMLとJavaの混在によるコードの見づらさを改善する形となっており、デザインと処理を分けて実装したいというユーザのための存在と言えます。

JSFではJSPでのHTMLはXHTMLとなり、Javaで記述していた処理はJavaBeansで置き換えられることとなります。

Spring Bootは、Javaを使ったWebアプリケーション開発のためのフレームワークです。もともとSpring Frameworkというフレームワークがあり、機能の使い分けが困難であるという欠点を克服するために作られたものがSpring Bootです。

XML設定を不要化、アノテーションによるコード削減、ひな形の生成機能などWebアプリケーションの開発を手軽に行えるような工夫がなされています。

*ここにThymeleafと呼ばれるHTMLに対応したテンプレートエンジンを組み合わせれば、JSPで行っていたJavaの埋め込みを行わなくとも処理を記述することができ、HTMLエディタの互換性を保つことが可能です。*

こういったフレームワークを使いこなせるようになれば、業務効率がアップするだけでなく、ITエンジニアやクリエイターとしての価値も高まりやすくなります。未経験から挑戦する際は、こうしたツールの習得にも励みましょう。

Web開発において最も普及しているHTMLは、それ自体では動的なページを作ることができません。そこで登場するのが、JavaScriptやJavaです。本記事ではHTML上でこの2つの言語を使いこなす方法を紹介していきます。

HTML上でJavaScriptを呼び出す方法としては、外部ファイルから呼び出す方法とHTML上に直書きする方法がある

HTML上でJavaを呼び出す方法としては、サーブレット格納先のリンクを用意したり、JSPでHTMLに直接記述したりする方法がある

JavaのWeb開発ツールは日々進化しており、最近ではJSFやThymeleafなどが使われている

HTMLでJavaScriptを動かすには？Javaについても解説

## JavaScriptでポップアップメッセージやウィンドウを表示させる

JavaScriptは、ウェブコンテンツを動的に表示させたり、視覚効果を高めたりすることができるスクリプト言語です。*ウェブ画面を操作すると、ポップアップメッセージやウィンドウを表示させることもできます。*

ここでは、実際にコードのサンプルを見ながらポップアップ表示の仕方を学びます。

【参考】：[MDM Docs: JavaScript とは](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

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

### ポップアップ表示の概要と活用方法

ウェブを表示していると、突然広告やメッセージなどが表示されることがあり、この機能をポップアップと言います。Javascriptは動的コンテンツに対応しており、画面遷移してポップアップメッセージやポップアップ画像を表示したり、回答を入力させたりすることができます。

*ポップアップ表示は、処理の過程や結果の表示、注意の促しなど、操作性の改善や操作感の向上に役立てられます。*

## ポップアップメッセージの基本を学ぶ

*JavaScriptは、いくつかのポップアップメッセージ機能を関数やAPI呼び出しによって実装しています。*表示される部分をダイアログと呼んでおり、使用方法を学ぶことでコードの利用価値を高めることができます。

ここからは、実際に表示結果とサンプルコードを確認しながら、解説します。

### alert APIを用いたポップアップの仕方

*alertは、ポップアップ表示によってメッセージを伝える機能です。*window.alert()、またはalert()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"今年も暑い夏が来ましたね！"と表示させています。

~~　【図】：alert APIを用いたポップアップ~~

実際のコードは次のように、HTMLに直接埋め込むか、.jsファイルに格納して読み込みます。

```
<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      alert("今年も暑い夏が来ましたね！");
   </script>
</body>
</html>
```

【参考】：[MDM Docs: window.alert](https://developer.mozilla.org/ja/docs/Web/API/Window/alert)

### prompt APIを用いたポップアップの仕方

*promptは、ポップアップ表示によってメッセージを伝え、入力を促す機能です。*window.prompt()、またはprompt()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"何か入力してね！"と表示させています（①）。入力完了後の「OK」で入力値をウェブに表示させます（②③）。

~~　【図】：prompt APIを用いたポップアップ~~

入力した後に、「OK」の場合はその値が返り、「キャンセル」の場合は”null”が返ります。実際のコードは次のように、記述します。

```
<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      ret=window.prompt("何か入力してね！");
      document.write(ret);
   </script>
</body>
</html>
```

【参考】：[MDM Docs: Window.prompt()](https://developer.mozilla.org/ja/docs/Web/API/Window/prompt)

### confirm APIを用いたポップアップの仕方

*confirmは、ポップアップ表示によって「OK」「キャンセル」の結果を受け取る機能です。*window.confirm()、またはconfirm()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"よろしいでしょうか？"と表示させています。

~~　【図】：confirm APIを用いたポップアップ~~

「OK」をクリックするとtrueが戻り（①）、「キャンセル」をクリックするとfalseが戻ります（②）。実際のコードは次の通りです。

```
<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      ret=window.confirm("よろしいでしょうか？");
      document.write(ret);
   </script>
</body>
</html>
```

【参考】：[MDM Docs: window.confirm](https://developer.mozilla.org/ja/docs/Web/API/Window/confirm)

### alert APIをクリックボタンから起動する

*alert APIをクリックボタンから起動するには、<head></head>に関数を定義し、alertをコールします。*クリックするボタンでは、”onclick=”から定義した関数を呼び出すように記述します。「クリックボタンの表示」ボタンがクリックされると（①）、alertのポップアップダイアログが表示されます（②）。

~~　【図】：alert APIをクリックボタンから起動する~~

使用したコードは、以下の通りです。

```
<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function onClick() {
         alert("クリックしたの？");
      }
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <button onclick="onClick()">クリックボタンの表示</button>
</body>
</html>
```

### prompt APIをクリックボタンから起動する

*prompt APIをクリックボタンから起動する場合も、<head></head>に関数を定義し、promptをコールします。*「クリックボタンの表示」ボタンがクリックされると（①）、promptのポップアップダイアログが表示されますので（②）、任意の文字を入力します（③）。

~~　【図】： prompt APIをクリックボタンから起動する~~

```
<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function onClick() {
         ret=window.prompt("何か入力してね！");
         document.write(ret);
      }
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <button onclick="onClick()">クリックボタンの表示</button>
</body>
</html>
```

JavaScriptの記事（1ページ目）