## 初心者におすすめの言語、JavaScriptとは？

今人気のプログラミング言語の中で、*JavaScriptは初心者の方にもおすすめしたい言語の1つです。*ここでは、JavaScriptの特徴やできること、学習していく上で参考になる事柄を解説します。

Web全盛の時代、JavaScriptを知らないエンジニアはいないでしょう。**JavaScriptは動きのあるWebページの開発に使用される言語です。**Webでよく目にする動きのあるバナー広告や、写真がスライドするページなどはJavaScriptで作成されています。

JavaScriptが登場する前のHTMLで作成されたWebページには動きがなく、静的画面が当たり前でしたが、JavaScriptの登場でWebページの概念が大きく変わりました。

JavaScriptは、単にWebに動きをつけるだけのプログラミング言語というイメージが強いですが、実際にはさまざまな分野で利用されています。この記事では、JavaScriptの特徴に加え、活用範囲や将来性などについても解説します。

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

### JavaScriptは人気のプログラミング言語

ソフトウェアの品質評価や追跡を行っているオランダの「TIOBE Software」の2024年3月版「TIOBEインデックス」では、プログラミング言語の検索数ランキングでJavaScriptは6位を獲得しています。**U/Iが重視される今、JavaScriptの必要性がさらに高まっています。**

【参考】：[TIOBE Index](https://www.tiobe.com/tiobe-index/)

【16種類】プログラミング言語の一覧を種類別に紹介！難易度や選び方も解説

JavaScriptとJavaを混同する人もおり、両者は同じ系統のプログラミング言語と思われがちですが、それぞれは全く別ものです。**JavaScriptは主にWebページに動きを与えるためのプログラミング言語ですが、Javaはあらゆるマシンで動く汎用言語です。**

Javaは主にサーバーサイドで使われるプログラミング言語ですが、JavaScriptは主にクライアント側（端末側）で動くという点でも異なります。ネーミングが似ていますが、混同しないようにしましょう。

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

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

## JavaScriptを初心者におすすめする理由

JavaScritは特別理解しやすい言語というわけではありませんが、初心者の方に習得をおすすめしたい言語の1つです。以下にその理由をまとめました。

### インストール不要で特に準備するものがない

プログラミングを学ぶ際に、準備すべきものが多いとスタートのハードルが上がってしまいますが、**JavaScriptは学習スタート時に環境構築が不要の言語です。**普段使っているPCがあればすぐにスタートできます。

JavaScriptはブラウザ上で動くスクリプト言語のため、インストールの必要がありません。PC以外に必要なものは、普段利用しているEdgeやChromeなどのブラウザと、メモ帳などのテキストエディタだけで、改めて環境を作る必要がない点は初心者におすすめです。

### プログラムの結果が目で見て分かる

**JavaScriptは、自分でコーディングしたプログラムの動作をすぐに確認できます。**「結果がすぐに分かる」というのは仕事や学習のモチベーションに必要です。後ほど実際に演習で確認できますが、視覚的に動作をすぐに確認できる点は、初心者におすすめできるポイントと言えます。

JavaScriptは静的なWebページを動的なページに変える役割がメインですが、実はそれ以外にもさまざまなことができます。**用途が広いということは、多様な仕事で利用できるということです。**その汎用性もおすすめできる点です。

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

JavaScriptはWeb開発のフロントエンドで使われることが多いので、今回はフロントエンドエンジニアの年収を参考にします。

フロントエンドエンジニアの年収は「マイナビエージェント職業別年収ランキング」での平均年収は385万円（※2024年3月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種の「SE・プログラマ（顧客向けシステムの開発・実装）」を参考にすると、平均年収593万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、年代や調査媒体によって年収にバラつきがあります。

近年需要が高まっているJavaScriptのスキル次第では高年収も望めます。**初心者の頃は年収が高くなくても、キャリアアップによって年収が大幅に上がる可能性もあります。**

また、マイナビの調査では転職によって収入がアップしたフロントエンドエンジニアも多いです。ある程度スキルアップや経験を積んだら、より良い環境を求めて転職するというのも1つの方法でしょう。

【参考】：[マイナビエージェント職業別年収ランキング](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)

ここまでJavaScriptの概要や特徴について述べてきました。続いて、JavaScriptを使うと何ができるのかを見ていきましょう。JavaScriptの作品例には、Webサイトの他、スマホアプリやゲームアプリなどさまざまなものがあります。

初心者でも作れるものとしてデジタル時計のサンプルコードも用意したので、ぜひやってみましょう。

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

これは最大の特徴とも言えますが、**JavaScriptは世に知られた言語の中で唯一Webサイトに動きを付けることができます。**静的なWebサイトを作るだけならHTMLとCSSで作れますが、動きのあるWebサイトを作るにはJavaScriptが欠かせません。また、裏側でデータの処理などを行う場合には「PHP」などが必要です。

ではここで、**試しにJavaScriptを使って、簡単なプログラムで動きのあるWebページを作ってみましょう。**

初心者でも簡単に作れるものとしてデジタル時計を選んでみました。JavaScriptを多少かじった経験のある方は、まず回答を見ずに自身で現在時刻を表示するWebページを作ってみましょう。初めての方は、JavaScriptの簡便さを体験するために、以下の手順を試してください。

*HTMLファイルからJavaScriptファイルを呼び出す「外部スクリプト」という方式で行っています。*

*①以下のコードをメモ帳にコピペし、demo.htmlのファイル名で任意のフォルダに保存します。*

```
&lt;!DOCTYPE html>&lt;html lang="ja">&lt;head>  &lt;meta charset="UTF-8">  &lt;title>Document&lt;/title>  &lt;style>    div {      text-align: center;    }  &lt;/style>&lt;/head>&lt;body>  &lt;div>    <p id="showTime">&lt;/p>  &lt;/div>&lt;/body>&lt;script src="demo.js">&lt;/script>&lt;/html>

*②続いて、JavaScriptファイルを作成します。*

次のコードをメモ帳にコピペし、ファイル名をdemo.jsにして先ほどのHTMLファイルと同じフォルダに保存します。

```
 let ret;  if (num < 10) { ret = 0 + num; }  else { ret = num; }  return ret;}function showClock() {  const nowTime = new Date();  const nowHour = set2(nowTime.getHours());   const nowMin = set2(nowTime.getMinutes());  const nowSec = set2(nowTime.getSeconds());  const msg = 現在時刻は、 + nowHour + : + nowMin + : + nowSec +  です。;  document.getElementById(showTime).innerHTML = msg;}setInterval('showClock()', 1000);

*③demo.htmlファイルをダブルクリックします。*

現在時刻をリアルタイムで表示するWebページが表示されるのを確認できればOKです。

**イベント処理とは、何らかの動作:「○○ボタンをクリックする」に対するアクション:「〇〇を実行する」の一連の流れのことです。**

JavaScriptを用いると、たとえばユーザアカウントを新規に登録する画面で、「そのアカウントはすでに使われています」といったイベントの表示をすることが可能です。これにより、あたかも人とコンピュータが対話しているような場面を作ることができます。

**JavaScriptはWebページに動きを付けたり、双方向のWebサービスを作ったりする際に利用されますが、それ以外にもスマホアプリやゲームを作ることができます。**

しかも、HTML5や新たなプラットフォームの出現によって、JavaScriptはAndroid、iPhoneを問わずスマホアプリの開発ができるようになりました。これらのアプリは「ハイブリッドアプリ」とも呼ばれています。

JavaScriptでゲーム作成に最適なライブラリ6選！初心者も必見

JavaScriptはその汎用性から、Webページに動きを付ける目的以外にもさまざまな分野で利用されていますが、苦手なこともあります。JavaScriptエンジニアを目指す皆さんは、この弱点についても理解しておきましょう。

### ブラウザによって動作が変わる

*Javascriptはブラウザ上で動くため、「Safari」「Microsoft Edge」「GoogleChrome」などのブラウザで挙動が違うことがあります。*あるブラウザでは正しく動作していても、他のブラウザでは動かないということも起こり得ます。

そのため、*主要なブラウザで正しく動作するかをあらかじめ確かめる必要があります。*開発者にとっては、この確認作業が大きな負担になります。

### ページの読み込み速度が遅い

*JavaScriptはあらかじめコンパイル（機械語への翻訳）を必要としないスクリプト型言語です。*実行の都度コンパイルが行われるため、コンパイル型言語と比べて処理速度が遅くなります。

JavaScriptで書かれたWebページはどうしても読み込みが遅くなる傾向があり、レスポンスの遅さがユーザの不満を招く要因になり得ます。

ここでは、初心者の方がこれからJavaScriptをどういった手順で学んでいけばいいのか、学習ロードマップを紹介します。1つずつこなしていくことで知識やスキル習得につながるでしょう。

【JavaScript学習ロードマップ】勉強する上で重要なポイントも紹介

*JavaScriptを学ぶ前に前提として学んでおく必要があるのが、HTML・CSSです。*そもそもWebページを作成するにはHTML・CSSの知識が欠かせません。JavaScriptはあくまで動的なサイト作りに活用されるため、まずはHTML・CSSで静的なサイト作りの基本を学びましょう。

難易度も他のプログラミング言語やJavaScriptと比較すると高くなく、WebデザイナーやWebクリエイターなどの非エンジニアでも習得は難しくありません。

学習方法としては、参考書や学習サイト、動画サイトなどを参考にコードを書くことで体系的な学習ができます。目安としては、1ヶ月程度の学習期間を設けましょう。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

CSSとは？概要や基本書式、具体的な記述方法について解説！

### 文法やライブラリ・フレームワークを学ぶ

JavaScriptを学習するには、文法やライブラリ・フレームワークについても理解しておく必要があります。

まずは、JavaScriptの基本文法として以下のような知識を習得しましょう。

続いて、おすすめのライブラリ・フレームワークは以下の通りです。

React（UI構築がメインでソースの可読性が高い）

Angular（フロントエンド開発に必要な機能が揃ったフルスタックライブラリ）

Vue.js（Angularを元に作られ、学習コストが低く、小規模開発に向いている）

jQuery（JavaScriptコードを簡素化でき、開発効率をアップさせる）

【参考】：[React](https://ja.react.dev/)
【参考】：[Angular](https://angular.jp/)
【参考】：[Vue.js](https://ja.vuejs.org/)
【参考】：[jQuery](https://jquery.com/)

人気のWeb系プログラミング言語JavaScriptは初心者にもなじみやすく、Webのほかサーバーサイド・スマホアプリ・ゲームアプリなどで使われ注目されています。この記事では、フロントエンドエンジニアに必須で将来性も高いJavaScriptについて紹介します。

JavaScriptは、Webサイト上で主にWebページに動きをつけるための言語だったが、今はさまざまな分野で利用されている

JavaScriptはOSやマシン環境への依存度が低いハイブリッド言語で、スマホやゲームアプリの開発にも使われている

活躍できるフロントエンドエンジニアを目指すには、JavaScriptの積極的な習得がおすすめ

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

## ChatGPTを活用すればプログラミングの学習も可能

ChatGPTは、OpenAIからリリースされている会話形式の言語モデルです。ChatGPTは、ユーザーの質問やチャットに対して、まるで人間と話しているような自然な文章で回答をしてくれます。

そんな特徴を持つChatGPTですが、プログラミングの知識も持っており、プログラミング学習にも役立てることができます。**本記事では、ChatGPTを活用したプログラミングの学習方法や使い方の例を、図を用いながら詳しく解説します。**

プログラミングを仕事や勉強で使っている人や、これから学習を始めたい人は、是非参考にしてください。

【参考】：[ChatGPT 公式](https://openai.com/blog/chatgpt)

ChatGPTとは？今話題のAIチャットボットの概要や仕組みを解説！

## プログラミングの学習に役立つChatGPTの使い方

プログラミングの学習と一言でいえど、具体的にどんなことができるのか気になるかと思います。

実は、**OpenAIのサイトからChatGPTの使用例のページを確認すると、プログラミングに役立ちそうな使用例を見ることができます。**

例えば、簡単なSQLのクエリの生成や、コードの説明やプログラミング言語同士の翻訳などができます。その他にも、プログラミングの学習をする上で役に立つ機能が沢山あります。

ここからはプログラミング学習に役立つChatGPTの使い方をいくつかご紹介します。実際に使用した例も、図解で紹介していますので是非参考にしてください。

【参考】：[OpenAI ChatGPTの使用例](https://platform.openai.com/examples)

ChatGPTの使い方とは？実際に使用するまでの流れを解説！

### 言語の特徴や概要を学習する

プログラミング言語を初めて学習する時に、言語を開発している団体などの公式サイトからドキュメントを読むことがあると思います。しかし、ドキュメントは量が膨大だったり、英語で記述されている場合があったりするので、非常に読みにくいといった課題があります。

そこで、ChatGPTの出番です。*ChatGPTで学習したい言語の特徴や概要を説明してもらえば、分かりやすい日本語でその言語の概要などを理解できます。*

例えば、下図はPythonの言語について説明を求めた例です。ChatGPTは、自然な文章で回答をすぐに作成してくれました。このように、言語に関する基礎知識を理解したい時には、ChatGPTで質問してみてはいかがでしょうか。

~~【図】：ChatGPTでPythonの特徴について説明を求めた結果~~

【参考】：[ChatGPTの使用例 Q&A](https://platform.openai.com/examples/default-qa)

ChatGPTの活用方法！エンジニアの業務に活かせるか利用してみた

### サンプルコードを記述してもらう

*ChatGPTでは、サンプルコードを記述してもらうことも可能です。*本記事では実際にChatGPTにサンプルコードを記述してもらいました。

まずは、下図のように「JavaScriptで簡単なサンプルコードを記述してください。」とChatGPTに指示をしてみます。すると、その指示に沿ったサンプルコードを提供してくれました。

~~【図】：ChatGPTにサンプルコードを記述してもらう~~

簡単なプログラムを読んで学習を進めたいときは、このようにChatGPTを活用してみましょう。また、さらに複雑なコードを記述してもらいたい場合には、より具体的に指示を出すとコードを記述してくれるでしょう。

### コードの内容を解説してもらう

プログラミング言語は、その言語ごとに独特の文法や関数、書き方のルールなどがあります。そのため、初めてプログラミング言語を学習する際は、いきなりコードを見ても理解するのに時間がかかりがちです。

*通常であれば、ドキュメントを参照したり参考書から調べたりしながら意味合いを調べますが、ChatGPTを利用すればコードの内容を瞬時に解析して解説してくれます。*

ChatGPTを利用して大まかにコードの意味合いを理解してから、本やドキュメントで知識を補完していくとスムーズに学習を進めることができます。

本記事では、例としてChatGPTにコードの解説をしてもらいました。下図のように、コードの解説を促すと、ChatGPTは即座にコードの解説をしてくれます。

~~【図】：JavaScriptのコードの解説を求めた結果~~

このように、上手にChatGPTを利用することで、より効率的にプログラミング言語の学習ができるでしょう。

【参考】：[ChatGPTの使用例 コードの説明](https://platform.openai.com/examples/default-explain-code)

### 自作したコードの修正をしてもらう

自分でコードを作成した場合、文法のミスなどによって思い通りにコードが動かないことがあります。*本来であれば、デバッグをしながらバグやエラーの箇所を特定して修正をしていきますが、このような時もChatGPTを利用すれば効率的に作業ができます。*

ChatGPTのサイトの使用例のページを見ると、PythonのコードをChatGPTに記載し、バグの修正を行っています。下図のように、バグを見つけて修正するように指示を出すと、修正されたコードが返ってきます。

~~【図】：ChatGPTのサイトの使用例 Python のバグ修正を指示~~

ご自身の環境で動作確認やコードの確認をする必要はありますが、学習中に上手くいかなくて困っている時は、ChatGPTを活用してみましょう。

【参考】：[ChatGPTの使用例 Python のバグ修正ツール](https://platform.openai.com/examples/default-fix-python-bugs)

*ChatGPTを利用すれば、自然言語をSQLのクエリに変換することも可能です。*指示を正確に出す必要がありますが、条件を正しく提示すればSQLが返ってきますので、非常に便利です。

下図は、ChatGPTで日本語をSQLのクエリに変換している例です。下図のように、テーブルの情報と条件を与えると、クエリに変換されます。

~~【図】：ChatGPTで日本語をSQLのクエリに変換した例~~

【参考】：[ChatGPTの使用例 SQLへの変換](https://platform.openai.com/examples/default-sql-translate)

SQLの入門編：初心者から経験者まで役立つSQL情報を掲載！

### プログラミング言語を別の言語に翻訳する

すでに何かしらのプログラミング言語を学習している人が、さらに新しい言語を学習したい場合にもChatGPTが役に立ちます。

例えば、JavaScriptからPythonに変換したい場合、JavaScriptのコードをChatGPTに入力します。この*コードをPythonへ変換することを併せて指示すれば、Pythonのコードに変換してくれます。*

新しい言語の習得においてコードの書き方を学習したいときや、言語の特徴を知りたいときに役に立つでしょう。

【参考】：[ChatGPTの使用例 JavaScriptからPythonへ](https://platform.openai.com/examples/default-js-to-py)

ChatGPTの面白い使い方15選！ビジネスや遊び相手になる事例

## ChatGPTをプログラミングに活用するためのコツ

以上のように、ChatGPTを使えばプログラミングの知識補完のみならず、プログラム生成やコードの修正を効率的に行うことができます。ただし、**正確な回答を導き出すためには、わかりやすいプロンプトになるよう、指示や質問の仕方を工夫する必要があります。**

ChatGPTをプログラミングに活用する際に意識したいポイントを解説しますので、これをもとにChatGPTとのやり取りに慣れていきましょう。

プロンプトを入力する際は、ChatGPTが理解しやすいように簡潔で具体的な内容にする必要があります。*曖昧な表現や冗長な表現、抽象的な表現は、誤った回答や希望しない回答を導き出す原因になります。*

使用するプログラミング言語を指定したり、具体的に何をどうして欲しいのか明確に示したりすることが大切です。また、丁寧で具体的な表現は心がけつつも、文章は長くなりすぎないように端的で短い文章を意識しましょう。

*一度のプロンプトで多くの情報を盛り込んでしまうと、ChatGPTが指示を上手く理解してくれない可能性が高まります。*そのため、ChatGPTにやって欲しいことをいくつかのフェーズに分けたり、大まかなタスクを達成してから細部を詰めていったりすることをおすすめします。

例えば、ChatGPTが生成したコードの一部に誤りがあった場合、その後に続くすべてのコードにおいて見直しが必要になることもあります。一度に多くのコードを生成してもらおうとすると、こうした問題が生じた際に修正が大変になります。段階的に少しずつ組み立てていった方が、確実で効率的です。

ChatGPTでは過去のやり取りを踏まえて回答を導き出すことも可能です。簡単な短いやり取りを段階的に繰り返して認識のずれやミスを防ぐことが、ChatGPTを扱うコツです。

より複雑な作業を指示する場合は、関連する情報も一緒に提供してあげると回答の精度を高めることができます。

コード生成を指示する場合は、使用しているプログラミングツールや開発環境、使用したいライブラリ、前提条件、さらに具体例や参照したいデータなどを必要に応じて提示すると良いでしょう。

なお、関連情報を添付する際は*プロンプトの簡潔さ・明確さを保つために、指示文とは別に箇条書きで記載するといった工夫が必要です。*また、「他に必要な情報があれば聞いてください」といった一文を添えることで、ChatGPT側からの情報提供のリクエストを受け付けることもできます。

ChatGPTのプロンプトとは？回答精度を高めるための秘訣を解説

プログラミングを学習するうえで非常に便利なChatGPTですが、いくつか注意しなくてはならないこともあります。なぜなら、**ChatGPTはインターネットの情報から学習を重ねた言語モデルのため、必ずしもその情報が正しいとは限らないからです。**

その他にも、ChatGPTを利用するうえで気を付けるべきことがあります。ここからは、ChatGPTをプログラミングの学習に取り入れる上での注意点をご紹介します。

プログラミングの学習にとどまらず、非常に重要なことですので、こちらも是非参考にしてください。

### ChatGPTの情報が正しいか必ず確認する

先程も少し触れましたが、ChatGPTはインターネットから学習して回答を作成しています。そのため、必ず正確な情報を提供してくれるとは限りません。

また、*最新の情報を提供している保証もありませんので、プログラミングの学習に活用する場合は、必ずその情報が正しいかどうか確認して下さい。*

ChatGPTは補助的な意味合いで使用し、学習した知識が正しいかどうか確かめる時は、公式のドキュメントや参考書で確認する、といった方法をおすすめします。

### コードを書く練習も併せて行う

プログラマーを目指している場合や、自分でアプリケーションを作りたい人は、自分でコードを書く練習もしましょう。

ChatGPTにコードを作成してもらうだけでは、文法の理解などはできても自分で一からコードを書く力はなかなか身に付きません。*コードの記述もある程度練習して、そのプログラミング言語になれる時間も確保しましょう。*

ChatGPTの問題点は？注意が必要なポイントを具体的に解説

## ChatGPTを上手に活用してプログラミング学習をしよう

ChatGPTは、プログラミング学習に非常に役立つことがお分かりいただけたかと思います。**SQLを記述してもらったり、コードを解析してもらうことで、プログラミングの学習をより効率的に行うことができます。**

しかし、その一方で情報の正確さなどは自分で必ず確かめる必要があります。特にプログラミング言語はバージョンアップなどの事情で、関数やルールが変更する可能性があります。

プログラミングの学習をする際には、必ずChatGPTの知識が正しいかなどをチェックするようにしましょう。

ChatGPTを上手に活用すれば、プログラミングの学習をしたことがない人でも、より簡単に学習を進めることができます。これからプログラミングを学習してみたいと考えている人は、是非ChatGPTも併せて活用してみてください。

プログラミング言語を一覧でチェック！種類別・難易度別で紹介

ChatGPT Plus（有料版）とは？無料版との違いやGPT-4の機能も解説！

ChatGPTのプラグインは何ができる？一覧や使い方を解説

ChatGPTは、会話形式の言語モデルとして知られていますが、プログラミング学習にも役立てることができます。本記事では、ChatGPTを用いたプログラミングの学習方法を紹介します。これからプログラミングの学習をしたいと考えている方は、是非参考にしてください

ChatGPTは、プログラミング言語の解説やコードの解析も行うことができる

自分で書いたコードのバグを修正する際も、ChatGPTを活用できる

ChatGPTによる回答が本当に正しいか、確認しながら学習をすすめることが重要

ChatGPTをプログラミング学習に活用しよう！方法やコツを解説

ITエンジニアの皆さんの多くは、1度はHTMLについて学んでいることでしょう。また、実際にWebプログラマーとして、日常的にHTMLを使いこなしている方もいるはずです。しかし、HTMLについて尋ねられた際に、きちんと説明するのを難しく感じてしまう方も多いのではないでしょうか。

この記事では、HTMLとはどういった言語なのか、何ができるのかを解説し、CSSやJavaScriptとの関係性についてもまとめました。特に日常的にHTMLを活用するフロントエンドエンジニアを目指す方は、ぜひ最後まで読み進めてください。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

### HTMLは様々なWebサイトやCMSで活用されている

*世界中のWebサイトのほとんどはHTMLで作られています。*しかしながら「Webページは作ったことはあるけれど、HTMLは使わなかった」という方も多いでしょう。近年ではCMS（コンテンツマネジメントシステム）が普及しており、HTMLを自分で記述しなくてもWebページが作れるようになっています。

ただし、HTMLの技術が不要になったわけではありません。有名なCMSであるWordPressも、HTMLの仕組みを用いてWebページを生成しています。Webページの微調整、色の調整など、細かい部分はHTMLで直接記述するケースもあります。そのため、HTMLのスキルを身に付けておくと、さまざまな場面で役に立ちます。

ここでは、HTMLとはどういった言語なのかを具体的に解説します。また、併せて簡単にできるWebページの作成方法やHTMLを活用するITエンジニアの年収についてもまとめました。

HTMLは、「Hyper Text Markup Language」の略語です。これをそのまま直訳すると「高度なテキストに目印を付けるための約束事」です。Languageは「言語」を意味しますが、ここでは文法やルールと考えてください。　

HTMLはマークアップ言語であり、プログラミング言語ではありません。私たちが日常的に目にするWebページは、WebデザイナーやWebプログラマーが視覚的に分かりやすく、タイトル・文字・画像などを配置しています。

しかし、コンピュータからすれば単なるコードの羅列でしかありません。そこで登場するのがHTMLです。**HTMLがコンピュータと人間の間を取り持つ、翻訳者の役割を果たしています。**HTMLはWebページに表示する画像サイズの指定や、文字のフォント・サイズ・配置を指示するといった役割を担ってくれます。

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

「Hyper Text Markup Language」の語句の意味について更に深掘りしていきましょう。ハイパーテキスト（HyperText）は、直訳すると「超テキスト」です。通常のテキストを超越したテキストということになりますが、何が「超」なのでしょうか？

Webページにはハイパーリンクが頻繁に登場します。このハイパーリンクは、ある語句に関してさらに深く知りたい時に、その語句から直接、関連文章や説明文書を呼び出すという機能を持っています。このように語句や文章を「関連づける」ことをハイパーリンクと称し、ハイパーリンクの機能を持つ文書を「ハイパーテキスト」と呼んでいます。

HTMLの特徴がハイパーテキストであることは理解できましたが、ではマークアップ（Markup）とは何のことを指すのでしょう？*マークアップとは「タグ」と呼ばれる記号で文章を囲い、文章に「目印をつけて」意味を持たせることです。*

マークアップ言語によって見出しがどこなのかを把握したり、どこまでが引用した部分なのかを確認したりすることが可能です。人間であれば目で見て理解できることでもコンピュータが人間と同じように理解することは難しいため、マークアップ言語を使用して理解させます。

また、マークアップ言語で見出しを大きく太字にしたり、段落を1段落ごとに改行して表示させたりすることで、ユーザが読みやすいサイト作りを行うことができます。

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

マークアップとは「タグ」を使って文章に目印をつけることだと説明しました。「タグ」とはWebページ上で何をどう表示させるかを指定する「命令文」であり、テキストをその意味ごとに<>で囲んで作成していきます。**このタグをコンピュータが読み取って、人に分かりやすい表示に変えてくれるのです。**

例えば、見出しであれば階層の上から &lt;h1&gt;~&lt;h6&gt; を用います。大見出しの場合は、&lt;h1&gt;大見出し&lt;/h1&gt; と記述します。

本文であれば、段落を表す &lt;p&gt;本文&lt;/p&gt; を用います。

その他、画像は&lt;img&gt;タグを用いて、&lt;img src="画像ファイル名"/&gt; のように記述します。

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

メモ帳のようなテキストエディタを用いて、文章や画像にタグを付けるだけで簡単にWebページを作れることが分かりました。

このようにHTMLは主にWebページ作成に使われていますが、実は他にもHTMLが活用されているものがあります。Webページを含めて、大きく3つの場所でHTMLが利用されているので、順に見ていきましょう。

世界中のWebサイトのほぼすべてがHTMLによって作られています。実際のWebサイトを見てHTMLの記述を確認してみましょう。今ご覧になっているこのサイトでも構いません。

Webページが実際にHTMLで記述されていることを確認するには、そのソースコードを見る必要があります。**Windowsのパソコンなら「CtrlとU」、Macを使っている方なら「⌘とOptionとU」を同時に押すとソースコードを表示ができます。**

このように、WebサイトはすべてHTMLで記述されているのです。

皆さんが普段利用しているEメールでも、HTMLが使われているケースが多いです。Eメールも当初はテキスト文字だけで構成されていましたが、近年のメールソフトは、OutLookのようにHTML対応が主流です。

*太字による強調・カラー装飾・画像の添付などがあるメールは、HTMLメールです。*ビジネスメールではテキストメールがまだ主流ですが、メルマガや登録サイトのお知らせメールなどではHTMLメールが多いです。

HTMLメールはWebと同じくビジュアル性があり、訴求力が高いため、広告重視のメールなどでよく利用されています。

HTMLはOSに縛られない点が強みです。iOSであれAndroidであれ、HTMLは共通言語です。

スマホアプリを開発する際、iOSの場合はObjective-CやSwiftなどを用い、AndroidはJavaなどを使いますが、iOSとAndroidそれぞれに対応できるスマホアプリを作る場合には、個別に開発をしなければなりません。

しかし、**Webページに動きを与えるJavaScriptと、HTMLを使えば、iOSとAndoroidの両方で動くスマホアプリの開発が可能です。**

このようなアプリは「ハイブリッドアプリ」と呼ばれ、二重開発を避けることで開発コストの低減につながることが大きなメリットです。ハイブリッドアプリ構築の環境としては、Monaca・アドビ社のApache Cordova・マイクロソフト社のXamarin・FacebookのReact Nativeなどが知られています。

【参考】：[Monaca](https://ja.monaca.io/)
【参考】：[Apache Cordova](https://cordova.apache.org/)
【参考】：[Xamarin](https://learn.microsoft.com/ja-jp/xamarin/get-started/what-is-xamarin)
【参考】：[React Native](https://reactnative.dev/)

iPhone(iOS)アプリ開発は難しい？必要な準備と開発の流れを解説！

HTMLでできることについて、具体的な作業に即して見ていきましょう。以下では、HTMLでできることの中から、代表的な例を3つ挙げてみました。

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

HTMLの重要な機能として、「文章の見出し」を作る機能があります。後ほど具体的な記述例を紹介しますが、*見出しの定義には &lt;h1&gt;から&lt;h6&gt; までのタグが使われます。*

お役立ち記事