webcreative

非エンジニアでも知っておきたいWeb開発言語の種類と特徴

Web制作関連

2022.04.26

中村和正

Index

Web開発言語とは
Web開発言語の種類
フレームワークとは
まとめ

Web開発とは、WebサイトやWebアプリケーションを開発することです。一番わかりやすいものとしてはWebサイトでしょう。プログラミング技術などを用いてWebサイトを作っていく過程はWeb開発の一種です。ここでは、WebディレクターやWebデザイナーの方など向けにWeb開発言語とはなにか、どのようなものがあるのかなどについて解説していきます。

Web開発言語とは

Web開発言語とは、WebサイトやWebアプリケーションを作るためのプログラミング言語です。プログラミング言語にはいろいろな種類がありますが、その中で特にWeb開発でよく使われるプログラミング言語がWeb開発言語と呼ばれています。

Web開発言語の種類

Web開発言語には複数の種類があるのですが、大きく分けるとプログラミング言語とマークアップ言語があります。マークアップ言語もプログラミング言語の一種としてカウントされる場合も多いのですが、厳密には区分されるものです。

プログラミング言語とマークアップ言語の違い

プログラミング言語とは、コンピューターに命令するための言語です。見た目としては、英語をベースに記号などを用いて記述されています。

コンピューターの命令は2進数で行われるのですが、人間が0と1の組み合わせでコンピューターに命令するのは難しいので、プログラミング言語というものを利用します。プログラミング言語を記述すれば、その後2進数に自動変換してくれるツールなどがあって、人間が書いたプログラムは最終的に2進数になります。

一方で、マークアップ言語とは、文書の構造を指定する言語です。プログラミング言語はコンピューターに命令を与えますが、マークアップ言語は文書を作るだけです。マークアップ言語によってコンピューターを動かすことはできません。マークアップ言語はプログラミング言語に比べると書くのが簡単なので、プログラミング学習の入り口としてマークアップ言語から始められる場合も多いです。

マークアップ言語であるHTMLは以下のような記述になります。例えば<h1>で囲むことで、そこが見出しであることを示しています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML Sample</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div class="header">ヘッダー</div>
  <div class="main">
    <h1>見出し</h1>
    <p>ここに本文が書かれています。</p>
    <img src="img/sample1.jpg">
  </div>
  <div class="footer">
    <a href="#">お問い合わせはこちら</a>
  </div>
</body>
</html>

以下はプログラミング言語であるJavaの例です。記述のルールを知らないと何を表しているのかはちょっと分からないですよね。

class Cat {
　// 猫の名前
　private String name;
　// 猫の名前をクラスの外から参照するためのメソッド
　public String getName() {
　　return this.name;
　}
　// 猫の鳴き声
　private String cry;
　// 猫の鳴き声を変更するためのメソッド
　public void setCry(String c) {
　　this.cry = c;
　}

マークアップ言語の種類と役割

マークアップ言語には、HTML、SGML、XMLなどがあります。このうちよく使われるのはHTMLです。HTMLの前身であるSGML、画面ではなくプログラムの定義を行うXMLはそれほど使う機会はないでしょう。そのため、ここではHTMLについてご紹介します。

HTMLはHyper Text Markup Languageの略です。名前にも入っている通り、主にテキストの構造を扱う言語です。構造を扱うと言っても難しいことはなく、たとえばここに記述する文章は見出し、ここは本文、ここはリンク、といったことを定義していきます。またテキストだけでなく画像や動画などを表示することもできます。

HTMLとあわせて使われる言語としてCSSというものがあります。CSSは主にレイアウトやスタイル（文字の大きさや色、罫線など）を定義します。

HTMLで文書の構造を定義して、CSSで見出しを大きくする、重要な部分を赤字にするといったスタイルを定義しています。みなさんがブラウザで見ているWebページはこのようにして表示されているのです。

プログラミング言語の種類と役割

プログラミング言語は日々新しい言語が生み出されていたり、バージョンアップされたりとかなりの種類がありますがWeb開発で使われることが多いものとしては以下があります。

JavaScript
PHP
Ruby
Python
Java

例えば検索サイトであれば、あなたが入力した検索キーワードをこれらプログラム言語が受け取って、データベースにヒットするデータを返すように命令する。といった具合に機能が実現されています。

フレームワークとは

最近ではフレームワークを用いた開発もよく行われます。フレームワークとはプログラム言語に代わるものではなく、セットで使われるものなので、今回のシステムは「〇〇（言語）+△△△△（フレームワーク）」を用いて開発しますという形になります。

フレームワークとは、プログラミングを行う際によく使う機能などがあらかじめ準備されたソフトになります。フレームワークが無いとゼロから全てのプログラムを書かないといけないのですが、このフレームワークを利用すればよく使われる機能はすでに準備されており、開発の工数を大幅に削減することができます。

言語と同様にこのフレームワークにも様々な特徴がありますので、開発する内容や規模に応じて適切なものを選択することが必要です。またプログラマーによって使える言語・フレームワークが異なりますので、スタッフのアサインや外部委託する際にはこの点を踏まえて依頼する必要があります。

まとめ

Web開発言語には大きく分けてマークアップ言語とプログラミング言語があります。マークアップ言語はWebサイトなどの表示側を作る言語で、プログラミング言語は内部の処理をつくる言語です。

非エンジニアの方は呪文のようなプログラムコードがとっつきずらくてエンジニア任せになってしまっている方も少なくないでしょう。自分でプログラムコードを書けるようにならないまでも、基本的な概念や言葉の意味などを理解しておくことでプロジェクト内での連携もスムーズになりますし、クライアントへの提案の幅も広がりますので、まずは基本的なところからでも学んでみるとよいでしょう。