プログラミング

【素人向け】Web系のプログラミングで使う言語を簡単に解説!

プログラミング言語比較

プログラミングを始めようと思っているなら断然Web系を覚えたいよね。

この記事では

「プログラミング言語ってたくさんあるよね?」

「たとえばJavaScriptとJavaなにが違うのか知りたい!」

「HTMLできれば、プログラミングできたことになる?」

こんな疑問にITエンジニア歴17年のボクが簡単に解説します。

たわしむし
たわしむし
難しいと眠たくなるから簡単にたのむよ。
ユウキ
ユウキ
どうも!ユウキです。
3分で読めるように、簡単にWeb系開発に必要なプログラミング言語について解説するね!

プログラミング言語は無数にある

Web系開発のプログラミング言語にはなにがある?

プログラミング言語は無数にあります。

その中でも今回はWeb系開発に必要な以下の言語を説明していきます。

  1. HTML(エイチ・ティー・エム・エル)
  2. CSS(シー・エス・エス)
  3. JavaScript(ジャバスクリプト)
  4. Ruby(ルビー)
  5. PHP(ピー・エイチ・ピー)
  6. Java(ジャバ)

各プログラミング言語が使われているサイト例をあげます。

  1. HTML:どんなサイトも共通利用
  2. CSS:どんなサイトも共通利用
  3. JavaScript:どんなサイトも共通利用
  4. Ruby:食べログ・価格.com・ツイッター
  5. PHP:FaceBook・ぐるなび・このサイト(WordPress)
  6. Java:企業向け業務システムがメイン
たわしむし
たわしむし
あれ?前半と後半で、なんか違うな?
ユウキ
ユウキ
そう、まずはそこで大きく違いがあるね。
これに加えて、データを管理するSQLって言語も必要ですね。

プログラミング言語のすみ分け

理解を深める
Web系開発のプログラミング言語(コンピュータ言語)は、大きく3つに分かれます。

  • フロントエンド系言語
  • バックエンド系言語
  • データベース系言語

それぞれ解説していきます。

コードの例を紹介してしまうと難しくなるので、全部日本語で説明してみます。

フロントエンド系言語

HTML、CSS、JavaScriptがこれに該当します。

HTMLは、WEBサイトの表示を担当する言語
文字やボタンを表示したり、画像を表示したり、表(リスト)を表示したりします。

CSSは、HTMLの表示を助ける言語
文字やボタンに色をつけたり、画像をPCやスマホによってサイズ調整したり、表(リスト)をお洒落な見た目にしたりします。
有名なフレームワーク:BootStrap

JavaScriptは、WEBサイトの表示に動きを付ける言語
文字やボタンにクリックアクションをつけたり、画像のスライド表示をしたり、表(リスト)の並び替えをしたりします。
有名なフレームワーク:jQuery

フレームワークとは、先人のエンジニアが、一般エンジニアに再利用できるよう、一般的な便利な機能をあらかじめ使いやすく構成してくれたもの。

場合によっては、HTML、CSSをマークアップ言語と分類し、JavaScriptをフロントエンド言語とすみわけすることもあります。

たわしむし
たわしむし
HTMLだけじゃなくて、合わせてCSSとJavaScriptは覚える必要あるねんな!

バックエンド系言語

Ruby、PHP、Javaがこれに該当します。

RubyPHPJavaサーバー上で働くプログラミング言語です。

Webサイトに表示する内容を作ったり、WEBサイトの入力フォームの内容を、データベースに登録する制御をしたりします。

役割はどの言語も同じです。

1つのサイトでバックエンド系言語が共存することはなくて、どれか1つが担当します。

ユウキ
ユウキ
余談で、バッチ処理だけ別のを使うとかはあるよ。
たわしむし
たわしむし
JavaScriptとJavaは名前似てるけど、フロントエンドとバックエンドで全然別ものやねんな!

データベース系言語

データベース(RDBMS)といえば、MySQL・Oracle・PostgreSQL・SQLServerなどが有名です。

SQL共通で使われるコンピュータ言語です。

データを登録したり、登録するテーブルを作ったり、データを取り出したりします。

SQLはデータベースの種類別に独自仕様があったりします。

基本部分は同じだけど、拡張機能はそれぞれ存在する構造です。

またSQLを使わないNoSQLのデータベースも存在します。

AWSで利用できるDynamoDBや、MongoDBなどがありますが、初心者のあなたはまずはSQLから覚えましょう。

まとめ:Web系のプログラミングで使う言語を簡単に解説

まとめ:Web系のプログラミングで使う言語を簡単に解説
たわしむし
たわしむし
もうまとめかいな。
ユウキ
ユウキ
3分で解説の約束だからね。
別記事で、それぞれの言語を解説してるのでよかったら読んでください。
HTML初心者
ホームページを作りたいプログラミング未経験者向けに「HTML」について5分で解説!プログラミング初心者や、ホームページ作成に取り組んでいこうとしているあなたが まず最初に聞く単語といえば、「HTML」ですよね。 ...
CSSとは
ホームページを作りたいプログラミング初心者向けに「CSS」について5分で解説!ホームページを作ろうとしているあなたが最初に出会うのが「HTML」、そして「CSS」ですね。 ホームページを作るにはHTMLと...
JavaScript初心者
ホームページを作るのに使うプログラミング入門でもある「JavaScript」について5分で解説!ホームページ作成するのに「HTML」を覚えたら「JavaScript」も使う必要が出てきたでしょ? ホームページを作るのにJa...

WEBサイトを作りたいと思って何を勉強しようか迷っているなら、初心者向けにパソコンがあればすぐできる入門手順を提示しておきます。

まず、HTMLで「Hellow World」を表示してみる。

次に、CSSで「Hellow World」の文字サイズや、色を変えてみる。

それから、JavaScriptで「Hellow World」をクリックすると、文字が大きくなるようにしてみる。

こんな感じで、フロントエンド系言語をたくさん楽しんでください。

ちなみに、パソコンがあればフロントエンド系言語はブラウザだけで動くので、このレベルならサーバーとかは必要ないです。

たわしむし
たわしむし
今すぐできるやん!

プログラミングの楽しさを体験できたらもっと色々やってみたいと思うはず。

例えば、

画面からコメントを登録できるようにして、それがタイムラインに表示できるツイッターみたいな画面を作りたい!

とか思うはず!

その段階で、バックエンド系言語のどれでもいいので、1つ学習を開始しましょう。

おすすめはRubyですね。

あなたのITエンジニアの入門にはもってこいです。

学習方法は、こっちの記事でまとめてるので良かった読んでみてください。

学習やるぞ!
【素人向け】無料で始めるプログラミング学習サイトを3つ紹介!プログラミングを始めたいあなた、無料で学習できるサイトがあるのをご存知ですか?「progate(プロゲート)」「ドットインストール」「Ruby on Rails チュートリアル」を紹介します。また、なにから学習すればいいか、ボクのおすすめ学習方法を紹介しています。...

学習をすすめていくうちに、データベースについても学ばざるをえない状態になるので、そのときにデータベース系言語についても学習します。

ちなみに、フロントエンド系言語のあとに、バックエンド系言語の学習へ進まず、

WEBデザイン系へ進む道もあります。

これは大いにありです。

Web制作系の企業に就職したい場合はこっちの道ですね。

Webデザインを始める
【比較表あるよ】ITエンジニアのおすすめWebデザインスクール7選ITエンジニア歴17年の僕がおすすめするWebデザインが学べるスクールを、通学型・オンライン型・留学型の3パターンに分けて、授業形態・料金・無料体験などで比較して7つほどご紹介します。...

WEBエンジニアになるか、WEBデザイナーになるか。

それとも両方極めるか。

たわしむし
たわしむし
デザイン力はあって損はせーへんしな勉強したいわ!
ユウキ
ユウキ
では、この辺でおわります。
ユウキでした。