Webページ作成に欠かせない言語の1つとして、HTML（HyperText Markup Language）が挙げられます。**HTMLの役割は、Webページの内容を構造化させることであり、文字や画像、動画、リンクなどの要素をバランス良くWebページ内に配置します。**

HTMLは基本的な構造がシンプルであり、習得難易度は比較的容易ですが、タグの種類やプロパティの書き方など覚えることが多いため、ある程度の勉強時間は必要です。

そこで、この記事では、HTMLの入門編として基礎知識や開発環境、基本構造について解説します。まずはHTMLの基礎知識から確認していきましょう。

*HTMLはハイパーテキスト記述言語です。*ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指し、Webを始めとするWeb系システムで標準利用されています。

WebコンテンツのほとんどはHTMLで記述されており、HTTP通信プロトコルを用いて、WebサーバーとWebクライアント間でコンテンツの通信を行います。また、直接PCに格納されたHTML文書をブラウザで表示することも可能です。

HTMLの仕様は、Web Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されていますが、*現在の仕様は、HTML Living Standardです。*

【参考】：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTML5はなぜ廃止された？いつからなのか、仕様変遷も紹介！

*HTMLはハイパーテキストを記述する言語なので、テキスト文書を作成する環境があればすぐにでも開始できます。*具体的にはHTMLを編集するためのエディタ、およびHTMLを表示するブラウザの準備ができれば問題ありません。動作環境はクライアントPCで作業できれば十分です。

前述の通り、HTMLの開発環境で必要なものはテキストエディタとブラウザです。ここでは、この2つについて、具体的にどのようなものが必要なのか解説します。

**テキストエディタとは、テキストの入力や編集を行う際に利用するソフトのことです。**文字や記号の入力、編集、保存、プレビューなどが実行でき、テキストファイル以外にも、プログラミングを扱うファイルの編集も行えます。

テキストエディタは100種類以上あるとされており、その中から自分に合うエディタを選択します。PCのOSに対応していたり、日本語に対応していたり、拡張機能の有無やリサーチ情報は豊富かなど、エディタ選びにおける必須項目をピックアップしておきましょう。

【2024年版】初心者向けのHTML編集ソフト（エディタ）おすすめ9選

**ブラウザとはWebサイトを開くためのソフトウェアであり、Webサイトを開くには、Webサーバーと呼ばれるWebサイトを他者に提供しているサーバーと通信を行う必要があります。**

PC単体ではWebサーバーと通信は行えないため、ブラウザが必要です。ブラウザにはいくつか種類があり、代表的なものとしては、Microsoft EdgeやGoogle Chrome、Safari、Firefoxなどが挙げられます。それぞれ機能や性能が異なるため、使いやすいブラウザを選択しましょう。

HTMLの基本構造は、以下の要素から構成されます。

*◼︎文書型宣言*
・タグ：\<!DOCTYPE html>
・このテキストが最新HTMLであることを表す（他のバージョンを指定することも可能）

*◼︎html要素*
・タグ：\<html>\</html>
・head要素とbody要素から成り立つ

*◼︎head要素*
・タグ：\<head>\</head>
・文書ヘッダーの明示（ブラウザに表示されない部分）
・meta要素（文書情報）、link要素（他との関連情報）、title要素（タイトル情報）から成り立つ

*◼︎body要素*
・タグ：\<body>\</body>
・文書内容の明示（ブラウザに表示される部分）
・article要素から成り立つ（記事であることを明示）

各要素は<要素>として宣言し、</要素>として括ります。

*【使用例】*
```
<!DOCTYPE html>
<html>
　<head>
　　<title>この文章のタイトル</title>
　</head>
　<body>
　　ここに必要な文書内容を書きます
　</body>
</html>
```

残る作業は必要な体裁を整えたり見栄えを良くしたりする処理を行うだけです。なお\はコメントを表しますので適宜利用します。

**HTMLの要素とはHTMLの文書を構成するものであり、タグはその要素を認識するための記号（\<>\</>）を意味します。**各要素は、「開始タグ（\<>）」と「内容」、「終了タグ（\</>）」から成り立ちます。

さらに、要素に「属性」を追加指定することも可能です。属性とは要素で用いる各種設定を変更したり、動作を微調整したりするものを指します。

HTMLの基本構造の要素は以上です。あとは必要な要素を組み合わせるだけで、HTML文書が簡単に作成できます。

HTML文書の体裁を整えるために、以下の代表的な要素が用意されています。

*◼︎段落（ページレイアウト）の構成要素*
段落（ページレイアウト）の構成要素は、文書を構成する基本要素を指します。
・p：段落構成の明示
・pre：整形済みテキストとする
・hr：水平線を引く（終了タグなし）
・br：明示的な改行を行う（終了タグなし）

*【使用例】*
```
　　<p> 
　　 文章を入力します
　　<pre>整形済み文章です</pre>
　　文章を入力します<br>ここから次の行に改行されます
　　<hr>
　　</p> 
```

*◼︎見出しの構成要素*
見出しの構成要素は、見出しの種類を宣言します。
・h1～h6：見出しの指定、h1が最上位

*【使用例】*
```
　　<p> 
　　<h1>大見出しです</h1>
　　<h2>2番目の見出しです</h2>
　　中見出しの文章を入力します
　　中見出しの文章を入力します
　　<h3>3番目の見出しです</h3>
　　小見出しの文章を入力します
　　小見出しの文章を入力します
　　</p> 
```

*◼︎リスト（項目表示）の構成要素*
リストの構成要素は、リスト化された項目を指定した項目番号あり・なしで表示します。
・li：リスト項目の指定（終了タグは省略可能）
・ol：順序付きリスト、typeでリスト項目番号（1、A、a、I）を指定可能
・ul：順序なしリスト、typeでリスト項目マーク（disc、circle、sqare）を指定可能

*【使用例】*
```
　　<p> 
```

*◼︎表（テーブル）の構成要素*
表の構成要素は、表形式データ等の情報を表示します。本構成要素はHTML Living Standardで非推奨属性や廃止属性があり、CSSで代替可能です。
・table：表の構成要素を宣言する
・tr：表の行
・th：ヘッダのセル
・td：データのセル

*【使用例】*
```
　　<p> 
　　<h2>表の表示です</h2>
　　<table>
　　　<tr>
　　　　<th>表の項目</th>
　　　　<th>列1の項目</th>
　　　　<th>列2の項目</th>
　　　</tr>
　　　<tr>
　　　　<td>行1の項目</td>
　　　　<td>行1列1の情報を書きます</td>
　　　　<td>行1列2の情報を書きます</td>
　　　</tr>
　　　<tr>
　　　　<td>行2の項目</td>
　　　　<td>行2列1の情報を書きます</td>
　　　　<td>行2列2の情報を書きます</td>
　　　</tr>
　　</table>
　　</p> 
```

### 見栄え調整や関連情報の追加

HTML文書の見栄え調整や情報追加のために、以下の代表的な要素が用意されています。

*◼︎フォントの構成要素*
フォントの構成要素は、フォントを装飾します。
・i：斜体（イタリック）を指定
・b：太字（ボールド）を指定
・small：文字の縮小

*【使用例】*
```
　　<p> 
　　このフォントは<i>斜体</i>です
　　このフォントは<b>太字</b>です
　　このフォントは<small>小文字</small>です
　　</p> 
```

*◼︎リンク構成要素*
リンク構成要素はハイパーリンクを作成します。
・a：アンカーを指定し、ハイパーリンクを作成する

*【使用例】*
```
　　<p> 
　　<a href="https://sample.sample-domain.com/sample" >Sample URLのリンクで
</a>
　　</p> 
```

*◼︎画像構成要素*
画像構成要素は、画像を文書に埋め込む指示を行います。
・img：埋め込み画像の表示、終了タグはなし

*【使用例】*
```
　　<p> 
　　<img src="sample_picture.jpg" alt="サンプル画像">
　　</p> 
```

### 見栄えをさらに良くする方法

**HTMLの見栄えをさらに良くするために、CSSが用いられています。**CSS（Cascading Style Sheets）とは、構造化文書の見た目を記述するための言語であり、HTMLに代表されるマークアップ言語で記述された文書のスタイルを指定します。具体的には、文書のフォントやレイアウト・色等を指定し文書の表現力を高めます。

使用方法は、\<style>\</style>で括ったタグの間をstyle要素として処理する他、style属性やlink要素を用います。ここでは、フォントの指定や文字色・背景色、幅等が詳細に指定できます。

HTML Living Standardでは、文字の大きさや種類・色などの見栄えの指定はCSSが担当し、文書の情報構造はHTMLが担当します。そのため、HTMLとCSSを併用することでデザイン性の高いWebページが作成可能です。

ここでは、実際にHTMLで頻繁に使用するタグを3つ紹介します。それぞれ特徴やコード例も紹介するので、ぜひ参考にしてください。

*<p>タグは、HTMLにおいて段落を意味します。*HTMLでは改行の際に使用するタグがいくつか存在し、\<p>タグはブロック要素の区切りを表します。文章の一部を区切って表示する、最も基本的なタグの1つです。

書き方としては、\<p> で段落の開始を示し、\</p> で終了します。実際に使用してみると、以下のようになります。

```
<p>HTMLはウェブページを作成するための基本的な言語です。</p>
<p>CSSを使ってデザインを加え、JavaScriptを使用して動的なコンテンツを追加します。</p>
```

\<p>タグの改行方法としては、\<br>タグがあります。\<p>タグとの違いは、使用目的と動作にあります。\<p>タグは段落を区切りたい際に使用し、\<br>タグはテキスト内で改行したい際に使用します。

Webサイトでは、文章を読みやすくするために「見出し」を活用して内容ごとに区切りを設けます。*この見出しを作成するのが、\<h1>〜 \<h6> タグです。*

\<h1>や\<h2>などに入る数字は見出しの種類を表し、\<h1>は最も重要な見出しで、ページのタイトルや最上位のセクションタイトルに使用されます。

実際に使用してみると、以下のようになります。

```
<h1>これは最も重要な見出しです</h1>
<p>このページの内容について説明しています。</p>
<h2>これはサブセクションの見出し</h2>
<p>このセクションに関連する内容です。</p>
<h3>さらに細かいサブセクションの見出し</h3>
<p>この部分は更に詳しい情報が書かれています。</p>
```

*HTMLで画像を表示させたい場合は、\<img>タグを使用します。*画像をWebページに埋め込むための方法であり、画像のURLを指定することで、画像を表示させます。

\<img>タグは単一のタグであり、終了タグは不要です。実際に使用してみると、以下のようになります。

```
<img src="image.jpg" alt="画像の説明">
```

また、\<img>タグにはいくつか属性があり、画像のファイルパスやURLを指定する「src（source）」、画像の表示サイズを指定する「width」や「height」、画像の遅延読み込みを指定する「loading」などがあります。実際のコードは、「src」を例に挙げると以下のように記述します。

```
<img src="image.jpg" alt="サンプル画像">
```

HTMLを習得するには、Webサイトの模写や参考書の活用が有効です。ここでは、Webサイトを模写する手順やおすすめの参考書を紹介します。

HTMLは座学で培う知識も重要ですが、実際に手を動かしながら学習する方法が最も効果的です。それには、**Webサイトを模写する方法がおすすめです。**実際にサイトを模写することで、実践的なHTMLのスキルが身に付くことはもちろん、CSSの理解も深まります。

具体的な手順としては、まず模写したいWebサイトを選び、ブラウザの開発者ツールを使用します。Google Chromeの場合は、右クリックで「検証」を選択して開発者ツールを起動します。

「Elements」タブではページのHTML構造を見て、タグがどのように使用されているかをチェックし、「Styles」タブではCSSスタイルを確認できます。必要な部分のみテキストエディタにコピーし、実際に書き換えて模写を始めましょう。書き終えたらブラウザで表示してチェックし、ミスがあれば都度修正します。

**HTMLの知識やスキル習得においては、知識を体系的にまとめられた参考書を活用する方法が有効です。**ここでは、おすすめの参考書をいくつか紹介します。

*「HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門」*
本書では、納品レベルのWebサイトを作成するためのノウハウを紹介しています。HTML・CSSの実践的な知識を習得し、現場レベルのコーディングスキルを身に付けられる書籍です。

▪著者：小豆沢健
▪ページ数：576ページ
▪出版社：技術評論社
▪発売日：2025/1/14
【参考】：[HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門](https://direct.gihyo.jp/view/item/000000003609)

*「デザインの学校 これからはじめる HTML&CSSの本 ［改訂第3版］」*
本書はシリーズ58万部を突破した人気の参考書であり、0からHTML・CSSを習得したい人におすすめです。よく使用されるHTMLの要素やCSSのプロパティの意味が丁寧に解説されており、手順通りにコーディングしていくことで、Webページを1から作成できます。

HTMLはWebコンテンツで用いられる記述言語で、ハイパーテキストマークアップ言語と呼ばれています。基本構造は要素をタグで指定するだけのシンプルな構造をとっています。ここでは、初心者向けにHTMLの構造と構成要素を基礎から解説していきます。

HTMLはウェブコンテンツで標準的に利用されている記述言語を指します

HTML文書はテキスト形式ですのでテキストエディタがあれば編集可能です

HTMLに加えてCSSを併用することでコンテンツの見栄えが良くなります

HTML入門！開発環境やタグ、学習方法について解説

## 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入門】実行方法や文法の基本などを解説！

**SQLとは代表的なデータベース操作言語です。**データベース操作言語とはデータの操作や定義を行う言語を指します。データベースにはいくつかのデータモデルがあり、SQLはリレーショナルデータベース管理システム（RDBMS）で用いられるデータベース操作言語の一つです。

SQLは*コマンドラインからの対話実行、並びにアプリケーションAPIやプリプロセッサによるプログラムアクセスで用いられます。*

### そもそもデータベースとは？

**データベースとは、必要とされる情報を蓄積・検索する機能を有するデータの集まりを指します。**簡単に言うと、古くからある台帳や帳簿といったアナログな情報記録媒体をシステム化し、検索を容易にしたイメージです。

また、データベースシステムとは、データベースの仕組みをシステムとして実装したものを指します。つまり、*データベースシステムは主にデータベースをコンピュータ実装したものを意味します。*

### データベース管理システムとは？

**データベース管理システムとは、データベースをコンピュータ実装する際に必要とされるソフトウェアです。**システムは以下の機能を有しています。

*・データベース構築機能*
　データベースをコンピュータシステムで導入し、初期設定や必要なシステム資源を割り当てます。

*・データベース管理機能*
　データベースの論理設計に基づき、データの作成・更新・削除・検索を行います。

*・データベース運用機能*
　システム資源・データベース領域のモニター、バックアップ・リカバリー、保守・保全等を行います。

### リレーショナルデータベースとは？

**データベースではいくつかのデータモデルが定義されており、データモデルに即したデータベース管理システムがあります。**以下に代表的なデータモデルを挙げます。

*・階層型データモデル*
　データをツリー構造の階層で表すモデルです。検索は高速ですが高度な設計技術が求められます。

*・ネットワーク型データモデル*
　CODASYL型データセットにより親レコードと子レコードを持ちます。ツリー構造より実体の定義が容易ですが、リレーショナルデータモデルに淘汰されました。

*・リレーショナルデータモデル*
　データの項目を整理し、論理的にテーブル（表）・レコード（行）・カラム（列）で表示されるモデルです。

*・オブジェクトデータモデル*
　オブジェクト指向プログラミングで用いるオブジェクト形式でデータを取り扱うモデルです。

現在は、リレーショナルデータベースがデータベース管理システムの主流となっています。オブジェクトデータモデルを取扱い可能としたオブジェクトリレーショナルデータベースの機能追加・拡張も始まっており、今後の利用拡大が期待できます。

SQLでできることとは？活用例・種類・難易度・将来性を解説

**SQLを実行するには、MySQLやPostgreSQLといったリレーショナルデータベース管理システム（RDBMS）が必要です。**ここでは、RDBMSを準備する方法を解説していきます。

### RDBMSをPCにインストールする

MySQLやPostgreSQLなどのRDBMSは、PCにローカルでインストールして稼働させることができます。**ローカルでインストールする場合は、公式サイトからインストーラをダウンロードしてインストールします。**

インストール後、データベースに接続することでコマンド上でSQL文を実行できるようになります。ただし、インストールするには十分な容量が必要であり、またインストール時に適切な設定作業も必要です。

【参考】：[MySQL](https://www.mysql.com/jp/)
【参考】：[PostgreSQL](https://www.postgresql.org/)

### オンラインのサービスを使ってRDBMS環境を用意する

**RDBMSは、DB FiddleやSQL Fiddleなどのオンラインのプログラミングサービス、あるいは学習目的であればオンライン学習サービスを使って準備することもできます。**

インストールの作業にはやや手間がかかるので、簡易的に実行環境を容易したい場合にはオンラインのサービスを利用しましょう。実際の作業手順はサービスによって異なりますが、簡単なステップで環境構築ができます。

【参考】：[DB Fiddle](https://www.db-fiddle.com/)
【参考】：[SQL Fiddle](https://sqlfiddle.com/)

MySQLのインストール手順！トラブル対応法も解説

PostgreSQLとは？MySQL・Oracleとの違いを解説

SQL Serverとは？使い方や構築方法をわかりやすく解説！

## SQLの構成要素と基本のコマンド

SQLはリレーショナルデータベースで用いられており、その構成要素は大きく以下の分類に大別されます。

*・データ定義言語（DDL）*
*・データ操作言語（DML）*
*・データ制御言語（DCL）*

なお、SQLの規格は標準SQL規格としてANSI・ISOにより制定されていますが、統一規格制定前から各社がRDBMSを製品化しており、それぞれ独自拡張されています。そのため、各RDBMS製品によりSQL構文やストアドプロシージャに違いが見られます。

データ定義言語（DDL）とは**データベース内のデータを定義するための言語要素を指します。**

代表的なコマンドは以下の通りです。

*・CREATE*
　データベース、テーブル（表）、インデックス（索引）、ストアドプロシージャ等の作成

*・DROP*
　データベース、テーブル（表）、インデックス（索引）、ストアドプロシージャ等の削除

*・ALTER*
　存在するオブジェクト属性の変更

*・TRUNCATE*
　テーブル（表）からデータを削除

SQLのインデックスとは？概要から作成方法・構文まで徹底解説

データ操作言語（DML）とは、**データベース内でのデータの登録、更新、削除、検索を行うための言語要素を指します。**

*・SELECT*
　データの検索・抽出

*・DELETE*
　レコード（行）の削除

データ制御言語（DCL）とは、**データベースに対するデータアクセス制御を行うための言語要素を指します。**

SQLは、データ定義言語（DDL）・データ操作言語（DML）・データ制御言語（DCL）から構成されていることをお話ししました。このうちデータ定義言語（DDL）およびデータ制御言語（DCL）は、主にデータベース管理者が行う作業で用いる命令群です。

**SQLを用いてデータを扱う場合は、データ操作言語（DML）を理解が重要です。**ここでは、データ操作言語（DML）の基本構文であるSELECT文・INSERT文・UPDATE文・DELETE文について説明していきます。

SELECT文はデータの検索・抽出を行うための構文です。

*構文：*
```
SELECT [ALL | DISTINCT] 列名 FROM “テーブル（表）名”
　[WHERE 条件式]
　[GROUP BY “カラム（列）名” [HAVING 条件式]]
　[ORDER BY “カラム（列）名”];
```

以下で構文の解説を行います。

**・SELECT句：SELECT文によるデータの検索・抽出**
　ALL：デフォルト値、重複検索時もすべてを返す
　DISTINCT：重複を除く
　列名：列名称（複数指定可）、 \* を指定すると全ての列を対象とする

**・FROM句：テーブル（表）の指定**
　テーブル（表）名は複数指定可

初心者・入門の記事（1ページ目）