フロントエンド言語とサーバサイド言語の違い

フロントエンド言語とサーバサイド言語の違い

フロントエンド言語とは

フロントエンド言語とは、
クライアントのPC(ブラウザ)上で動く言語のこと。

HTML、CSS、JavaScriptなど

フロントエンド言語の例の画像

 

サーバサイド言語

サーバサイド言語とは、
サーバ上で動く言語のこと。

Java、PHP、Python、Rubyなど

サーバサイド言語の例の画像

 

フロントエンド言語とサーバサイド言語の違い

フロントエンド言語と、サーバサイド言語の違いについて解説していく。

 

フロントエンド言語は、ブラウザ上で動く

ブラウザはHTMLやJavaScriptなどフロントエンド言語のルールにしたがって、サーバからレスポンスとして送られてきたプログラム(HTMLソースやCSS、JavaScriptなど)を正しく解釈して、画面に表示させる。

フロントエンド言語が動く仕組みの画像

 

一度ブラウザに送られてきた分の情報は、再度サーバに通信するまではずっと同じく表示される。なのでブラウザをリロードし、再度サーバとの通信をしない限りブラウザには同じ情報が残り続ける。

画面に動きをつけるJavaScriptなどは動的に見えるがあれもただウェブサイトの見た目をいじるプログラムがクライアントのブラウザ上で動いている、フロントエンド言語。

 

サーバサイド言語は、サーバ上で動く

サーバ上で動くので、フロントエンド言語のような、見た目に関係するプログラムというよりは、データ処理・実行などのプログラムを書く。

クライアントからwebページを通じて送られてきたデータ(リクエスト)を処理・実行したり、処理した結果をクライアントに送り返したり(レスポンス)するのもサーバサイド言語の特徴の一つ。

サーバサイド言語が動く仕組みの画像

 

 

開発目線での補足

フロントエンド言語はブラウザの開発者ツールなんかでソースコードが見れたり、開発者ならデバッグができてしまったり開発の敷居は比較的低い

テキストエディタとブラウザ、あとはapacheなんかのwebサーバソフト(無料)があればすぐにでもローカルで開発が進められる。画面にそのまま作ったものが反映されるので楽しい。

 

一方サーバサイド言語は学ぼうと思ったらわりと大変かも

初学者には文法も複雑な上、オブジェクト指向など概念からよく分からない。現場のソースコードに触れないとどう開発していいか想像もつかないんじゃないかなというのが正直なところ

 

 

参考:https://www.sejuku.net/blog/100525

 

 

記事が気に入った方はシェアをお願いします!

2件のコメント

hara さん、

お世話になります。

このブロックがとても分かりやすいです。私今プログラミングを学習してますが、PHPのプログラミングをもっと公開していただけますでしょうか?

どうぞよろしくお願いいたします。

ありがとうございます。
phpの記事は結構書いてありますでの、検索フォームより、「php」と検索していただくか、カテゴリ「IT」にアクセスしていただくかする」と、php関連の記事がたくさん出てくると思います!(ブロックが何か分からなかったですが、、大体同じように、絵などを」使いながら記事を書いています)。

よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。