## 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についても解説

## PHPを知ればワードプレスをより活用できる

ワードプレス（WordPress）は、近年Webサイトの構築で多く使われるCMS（コンテンツ・マネジメント・システム）の1つです。

**プログラミングの知識がなくてもWebサイトを作成できるツールであるワードプレスですが、PHPのスキルがあればワードプレスをより効果的に活用できます。**

ワードプレスで記事やページを投稿して管理するための仕組みは、PHPによって構成されています。
そのため、PHPの知識とスキルがあれば、ワードプレスのテーマやプラグインをカスタマイズして自分の用途に合ったWebサイトを構築することができるのです。

この記事では、ワードプレスをより活用したい方のために、ワードプレスとPHPの基礎知識や関係性、ワードプレスでのPHP編集方法、PHPのバージョンなどについて解説します。

【参考】：[WordPress とは](https://ja.wordpress.org/)

## ワードプレスとPHPの関係性とは

まずは、PHPとワードプレスの概要と、関係性を説明していきます。ワードプレスを使用するのにPHPの知識が必要なのかどうかも解説します。

PHPは、Webページを動的に生成するために使用されるサーバサイドのスクリプト言語で、多くのWebサイトやアプリケーションで使用されています。

*動きのない静的なWebページを作成するためにも使用できますが、訪問者の入力に基づいてWebページを動的に変更できることが大きな特徴です。*

たとえば、PHPを使用して、Webサイトにログインしたユーザのアカウント情報に基づいてWebページを変更したり、訪問者がWebサイトから商品を購入した注文を処理したりすることができます。

また、PHPを使えばMySQL、SQLite、PostgreSQLなどのさまざまなデータベースと連携することもでき、Webサイトやアプリケーションでデータベースを活用できます。

PHPとは？基本知識からメリット・デメリットまでわかりやすく解説

PHPの入門として概要やプログラムの記載方法、文法について解説

ワードプレスはPHPで作られたCMSです。個人のブログから企業のコーポレートサイトまで、世界中の多くのWebサイトがワードプレスで作られています。

*提供されているさまざまなテーマをそのまま使ったWebサイトであれば、プログラミングを使わずにノーコードで完成させることもできます。*

また、ワードプレスではプラグインによって多様な機能を簡単に追加することもできます。

このように、ワードプレスは初心者でも簡単に利用でき、Webサイトの構築から必要な機能の実装まで手軽に行うことができるCMSといえます。

### ワードプレスとPHPの関係性とは

ワードプレスはPHPによって構築されたシステムで、テーマやプラグイン、データベースなど、ワードプレスを構成する要素のほとんどがPHPで作られています。

ワードプレスで作成されたWebサイトを開くときには、PHPが記事の表示やページの構成など各部分の表示を制御しています。

実際にワードプレスのテーマファイルを開いてみると、たくさんのPHPファイルが並んでおり、ページの枠組みやパーツの構成に関わる部分もPHPで記述されています。

*そのため、ワードプレスを利用する際にはPHPが必要不可欠です。*ユーザが意識していなくても、ワードプレスを利用することはPHPを使っているということでもあります。

また、PHPはオープンソースで広く使用されているため、多くの開発者がワードプレスのテーマやプラグインを作成し、無料で公開しています。

### ワードプレスの利用にPHPの知識は必要か

ワードプレスを利用したWebサイト運営においては、一般ユーザにとってPHPの知識は必須ではありません。

ワードプレスには、本体やプラグイン、テーマなどを構築するPHPが既に記述された状態で提供されているため、自分でPHPを記述する必要がありません。ワードプレスの運営を行っていても、どこにPHPがあるのか分からない方も多いでしょう。

*しかし、PHPの基礎知識を習得することで、ワードプレスサイトをより効率的に構築・管理することができます。*

PHPの高度な技術があれば複雑なカスタマイズも可能ですし、PHP入門レベルでもワードプレスでよく使われるPHPの関数を知っておくだけで、ワードプレスサイトの運用の幅が一層広がります。

## ワードプレスにおけるPHPの役割

PHPはワードプレスのメインとなるテンプレートエンジンを構成しています。また、ワードプレスのテーマで動的な部分を担当したり、プラグインの実装に使われたりしています。

### テンプレートエンジンの役割

PHPはワードプレスのWebサイトのページを構成し、表示するテンプレートエンジンの役割を果たしています。

*例えば、PHPで作られたテーマファイルは、Webサイトのデザインやレイアウトを定義し、ページの外観を決定します。*

また、ワードプレスでブログを作成する場合、ユーザは記事を投稿して公開すれば、自動的にWebサイトの1ページが生成されますが、この動作をPHPが担っています。

このように、PHPはワードプレスのWebサイトのページを構成し、動的にページ生成を行って表示するために使用されます。

ワードプレスのテーマは、HTML・CSS・PHPで構成され、Webサイトのレイアウトや構成を定義するものです。ワードプレスの公式リポジトリでは多数のテーマが公開されていて、好みのテーマを使用することができます。

*PHPはテーマの中でも動的なプログラムの部分を担当しており、例えば、Webページ内の記事タイトル、説明文、コンテンツ内容などの出力順序や出力内容はPHPが動的に生成しています。*

テーマで構成された枠組みに応じて、PHPにより必要な内容をWebページに表示させることで、ユーザがプログラミングを意識せずにWebサイトを運営できる仕組みが実現されているのです。

【参考】：[テーマ](https://ja.wordpress.org/themes/)

プラグインとは、ワードプレスの機能を拡張するためのソフトウェアです。プラグインはPHPで開発されており、ワードプレスの公式リポジトリにはさまざまな用途のプラグインが公開されています。

*例えば、プラグインを使用することで、標準では用意されていない画像ギャラリーを追加したり、ブログに問い合わせフォームを追加したりして、ワードプレスの機能を拡張することができます。*

【参考】：[プラグイン](https://ja.wordpress.org/plugins/)

ワードプレスのさまざまなカスタマイズを行う場合には、PHPの編集を行う必要があります。ここでは、PHPを編集することでできること、カスタマイズの前に行っておくこと、PHPの編集方法などについて解説します。

### PHPを編集してできることとは

ワードプレスのテーマのPHPファイルをカスタマイズすることで、サイトのデザインやスタイルなどを細かく調整することができます。

*具体的には、PHPをカスタマイズすることで、PHPが担っている部分である記事タイトル、説明文、コンテンツ内容などの出力順序や出力内容を変更できます。*

テーマには親テーマと子テーマがあり、カスタマイズする場合には子テーマを編集することで、大枠を変えずに必要な部分だけを変更できる仕組みです。

また、PHPを編集してプラグインの機能を追加したり、プラグインの機能を変更したりするなど、プラグインをカスタマイズできます。

ただし、多くのプラグインは定期的にアップデートされるため、ユーザの編集内容が上書き更新される可能性があります。

PHPでできること7選！作品例やアプリ、将来性についても解説

### ワードプレスカスタマイズの前準備

ワードプレスをPHPでカスタマイズする際は、まずワードプレスのバックアップを取得しましょう。

*PHPでのカスタマイズ中に予期しないエラーが発生して、真っ白なページしか表示されなくなったり、動かなくなったりしたときに備え、バックアップからサイトを復旧できるようにするためです。*

また、本番のワードプレス環境でカスタマイズすると、エラーが発生したり意図しない動作を行ったりするリスクもあります。そのため、必要に応じてローカル環境でXAMPPやMAMPPなどの開発環境を導入してカスタマイズを行うことも検討しましょう。

*ワードプレスをカスタマイズする際、PHPファイルの編集方法には、ワードプレスの管理画面から直接編集する方法と、FTPソフトを使用して編集する方法の2つがあります。*

ワードプレスの管理画面からは、「テーマファイルエディター」からテーマのPHPファイルを編集できます。

FTPソフトウェアを使用した編集方法では、「functions.php」「wp-config.php」「.htaccess」などのファイルをダウンロードしてローカル環境で直接編集し、再度アップロードすることで編集内容を反映させることができます。

どちらの方法で行う場合でも、PHPの編集で間違った記載や変更を行うとサイト表示に不具合が生じるリスクが伴うため、バックアップを行って慎重に作業を行う必要があります。

## ワードプレスでのPHPバージョン管理

ワードプレスを運用する上で、利用するPHPのバージョンには注意を払う必要があります。ここでは、その重要性と、バージョンの確認方法、バージョンアップ方法について解説します。

ワードプレスはPHPで動作しており、PHPのバージョンはワードプレスのセキュリティや機能に大きく影響します。

ワードプレスのバージョンが上がるにつれて、必要とされるPHPのバージョンも上がる傾向にあり、古いPHPバージョンを使用すると、ワードプレスのセキュリティや機能に影響を与える可能性があります。

*そのため、利用しているWebサーバにおけるPHPのバージョンを把握し、定期的に最新バージョンに更新することをおすすめします。*

### 現在のPHPバージョンを確認する方法

*ワードプレス の管理画面で、「ツール」から「サイトヘルス」を選択することで、PHPのバージョンを確認できます。*

チェック完了後の結果画面にPHPのバージョンが表示され、古いバージョンを使用している場合は注意喚起が表示されます。

【参考】：[サイトヘルス画面](https://ja.wordpress.org/support/article/site-health-screen/)

### PHPをバージョンアップする方法

*PHPのバージョンは、利用しているWebサーバに依存します。そのため、契約しているサーバ側でバージョンアップを行う必要があります。*

PHPのバージョンアップ方法はサーバの提供事業者により異なります。Webサーバのコントロールパネルから行う場合や、サポート窓口への問い合わせが必要な場合がありますので、サーバ業者に確認してみましょう。

また、PHPバージョンアップを行う場合には、ワードプレスだけでなく、使用しているテーマやプラグインの対応PHPバージョンも確認する必要があります。

テーマやプラグインが新しいPHPバージョンに対応していない場合は、動作に不具合が生じる可能性があるためです。

変更前には、不具合が生じた場合に元の状態に戻すことができるように、必ずバックアップを取っておくことが重要です。

## ワードプレスとPHPの関係性を理解してより活用しよう

ここまで、ワードプレスとPHPの関係性について解説しました。ワードプレスは、PHPによって構築されたCMSであり、PHPの知識を活用することでワードプレスをさらに活用できることが分かったでしょう。

ワードプレスをより効果的で安全に運用するためにも、ワードプレスで使えるPHPのスキルを学び、PHPのバージョン管理にも気を配ることをおすすめします。

PHPのおすすめ本13選！入門レベルからさらに学べる学習本まで解説

ワードプレスはCMSの1つで、テンプレートエンジン、テーマの動的表示、プラグインなどにPHPが使われており、PHPの知識があればカスタマイズしてより便利に使用できます。この記事ではワードプレスをより活用するため、ワードプレスとPHPの関係について解説します。

PHPはワードプレスのテンプレートエンジンや動的な部分を担当し、テーマやプラグインの実装に使用されている

ワードプレスの利用にPHPの知識は必須ではないが、あればワードプレスのカスタマイズ範囲が広がる

ワードプレスを運用する上で、使用するPHPのバージョン管理も重要である

ワードプレスとPHPの関係とは？編集方法やバージョンについて解説

## 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をクリックボタンから起動する

プログラミング言語の記事（6ページ目）