> For the complete documentation index, see [llms.txt](https://kent-and-co.gitbook.io/first-step-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kent-and-co.gitbook.io/first-step-js/mazuhapuroguramunitsuiteshiyou/whats-web-puroguramu.md).

# What's Web プログラム

プログラミングを進めるに当たって、どんな言語があってそれぞれの特性を知っておくととても便利！\
というわけで、ココではまず種類から整理していきましょう。

## プログラムの動く場所

Web のプログラミングにおいては、プログラムが動く場所によって種類が分かれます。\
まずはその種類を確認してみましょう。

### サーバーサイド

通称「バックエンド」とも言われるタイプ。その名の通り、サーバーで動きます。\
処理された結果をブラウザに送りつけてくれるので、見ている人のマシンなどに処理の負荷はかからない。\
サーバーのスペックが良ければ処理は速くなる。

### クライアントサイド

通称「フロントエンド」とも言われるタイプ。その名の通り、クライアントのマシンで動きます。\
クライアントは、サーバーの対義語ですので、いわゆるサーバじゃ無い側を指します。という事はブラウザなどで動く言語がコレに当たります。\
実際の所この言語って、多分 JavaScript だけじゃないかな...。

### 番外編: マークアップ言語

よく「プログラミング言語何が出来るの？」という話があったときに、HTML が登場したりします。\
しかしながら、HTML はマシンに命令をする言語ではありませんので、厳密にはプログラミング言語ではありません。\
という事で、HTML はマークアップ言語と呼ばれる部類に含まれ、文書構造を記述するものとして分類されます。仲間には XML 等がいます。

CSS はマークアップ言語ではありませんが、スタイルシートという種別なので、これまたプログラミング言語とは異なりますね。

## 実行の仕方の違い

### インタプリタとコンパイラ

プログラムって、書いてそのまま実行出来るかと言われれば、本来は違うモノ。\
機械が理解出来る言葉に翻訳して...機械に実行させて...その結果を...みたいな流れなのが本来の姿。

その機械が理解出来る形にプログラムを翻訳してから実行するのが **コンパイラ言語** です。\
それに対して、プログラムの実行をしたときに機械が理解出来る形にするのが、 **インタプリタ言語** です。

Web で触れる言語の殆どはインタプリタ言語ですが、そう言う物もあるんだねーって事は知っておきましょうねー。そだねー。

## よく聞くプログラミング言語たち

Web 業界でよく使われるプログラミング言語は多数有ります。まずはその種類を確認しておきましょう。

### JavaScript

今回の題材でもある JavaScript。J と S は大文字。スペースは無し。\
Java という言語もありますが、全くの別物。従兄弟でもない位。\
フロントエンドの言語。バリバリ使う。実はサーバーサイドでも使える。

jQuery とか、Vue.js とか、React がこの仲間。\
え？ JavaScript と jQuery は別物だと思ってた？ そんなことも解説してくれてない所が多いから、脱初心者出来ないんだよね。困ったもんだ。

サーバーサイドや、デスクトップアプリのプログラミングで使うときには Node.js という名前になります。そう、Web 以外でも使えるんだね。（実質 Web なんだけどね！）

細かいことは後でちゃんとまとめましょう。

### Ruby

日本人が作った珍しいプログラミング言語。インタプリタ言語です。\
割と歴史は浅め。まつもとゆきひろさんが作ったそうな。

> シンプルさと高い生産性を備えています。 エレガントな文法を持ち、自然に読み書きができます。

とのことですが、この辺は人による気がします。新しい言語なので、新しもの好きなエンジニアたちに好かれています。こぞって勉強している人が多い印象。

Ruby on Rails というのは Rails という物を利用した Ruby のプログラミング手法なので、特に別物というわけではない。\
JavaScript とかで言う jQuery とかと一緒です。はい。Ruby on Rails だからって別に凄いことしてるわけじゃない。

### PHP

「PHP: Hypertext Preprocessor」略して、PHP。\
なんと展開しても PHP が含まれるという不思議言語。

オープンソースのインタプリタ言語で、特徴的なのは HTML で作ったファイルの一部だけをプログラムにすることができるという所。\
`<?php` で始めて、 `?>` を書いて終わればそこだけをプログラムに出来ます。すごい。

そんなこともあって、出力の多いプログラミングに向いている傾向はあります。\
有名どころのツールだと、WordPress が PHP で作られたツールですね。

### Java

割とよく効くタイプの言語。コンパイラ言語。\
ネット用語でもある「ぬるぽ」は、この言語のエラー表示から生まれたと言われる。（ここではどうでもいいけど、 `NullPointerException` : ポインター不在による例外 という意味ですね。）\
一つのアプリを作ったりすることもできるけど、サーバで動く物を作ることも可能。

人によってはここから入るのを勧める人も多いけど、個人的にはハードルが高い印象。\
Web ではないけど、Android アプリは Java で書かれてますね。

### C 言語

Java の親元。やっぱりコンパイラ言語。\
今となっては純粋な C 言語って使っている人居るのだろうか？という感じがあるけれども、いわゆる C++や C#とか、Swift あたりはこの後継言語。\
あるいは総じて C 言語といわれる事も多い気がする。

C 言語の元になった B 言語っていうものも有ったけど、B 言語の方はインタプリタ言語だったらしいよ。

### Shell 言語

UNIX 系 OS で使われる言語。サーバを操るのに必要なインタプリタ言語。\
Bash が有名だけど、csh、zsh 等もよく使われている。

サーバの環境を整えるためには、この言語を操れないとしんどい。\
どうでも良いけど、Shell だけでいろんな事をする事もできます。UNIX を利用するなら一番 OS に近い言語なので処理が早い傾向はあります。

## さぁ、何をどうしようか

それぞれの言語でできることはわかってきました。\
じゃぁ、何をどうすれば良いの？ってことになりますね。

流れとして Web で動く物を作るためには、大まかに以下のような感じ。

1. サーバーにしたいマシンへ OS 入れる（大抵 UNIX 系の事が多い）
2. Shell 言語でサーバの環境を整える（このときに言語の元＝実行環境を入れることがある）
3. サーバーにプログラムを設置（手元で書いてアップロードする事が多い）
4. クライアントサイドで実行を確認（シンプルな物や、一般向けの物はブラウザで確認することが殆ど）
5. クライアントサイドで動かしたいプログラムを JavaScript で書く

考え方はいたってシンプル。後はやるだけ。\
ほーら簡単でしょ？（簡単とは言ってない）