Webの仕組みを新人プログラマーが解説!プログラミング初心者向け

こんにちは

セカンドセレクションのプログラマー梅原壮太です。

今回は研修中に教えていただいた「Webの仕組み」を紹介していきます。

入社前まではネットといえばGoogleを見ることにしか使っていませんでしたが、「Webの構造」を教えてもらい非常に興味がわいてきています。

できるだけ初心者目線でざっくりと解説しますので、是非最後までご覧ください。

Webシステムの概要

Webシステムはフロントエンドとバックエンドの2つに分類されます。

まずはフロントエンドとバックエンドの仕組みを紹介します。

フロントエンド

フロントエンドはWebサイト・アプリケーションにおいて、ユーザーに見える部分を指します。

上図ではWebブラウザに当たります。

例えばユーザーが文字を入力する、ボタンを押して注文するという「機能」を実行し、バックエンドのソフトウェアとデータをやり取りします。

フロントエンドのソフトウェア開発は「HTML・CSS・Javascript」の言語でプログラミングされます。

バックエンド

バックエンドは、ユーザーに見えない部分を指します。役割として、フロントエンドでユーザーが入力したデータを処理し、データベースへの保存、検索した結果を出力します。

上図では、Webサーバーとデータベースに当たります。

主にバックエンド開発言語は「PHP、Python、Ruby、Java」です。

バックエンド開発をする際には、効率的に質の高いアプリケーションを作るため、フレームワークを用いて必要な部分のみプログラミングを行います。

Webブラウザ

ブラウザはインターネット上のサイトを閲覧するために使われるアプリケーションです。

Chrome・Safari・Internet Explorer・Firefoxなどは皆さんもご存じではないでしょうか。

・ブラウザでは、Webページを表示する際にHTMLファイルを解析し、表示(レンダリング)をしてくれます。

Webサーバー

・Webサーバーはフロントエンドからの「このファイルデータが欲しい」というリクエストに対して、レスポンスを行います。

今見ているブログもあなたの使っている端末からWebサーバーにリクエストを送り、HTML・CSS・画像などがレスポンスで返ってきていると考えるとわかりやすいでしょう。

DB(データベース)

・データベースは膨大なデータを管理するためのソフトウェアです。

フロントエンドから出されたリクエストに対して、Webサーバー側で必要な「データ」をデータベースへ保存・取得していきます。データベースを操作する場合に用いられる言語がSQLです。

  1. ブラウザからWebサーバーへリクエスト送信
  2. WebサーバーからデータベースへSQL送信し、データを保存・取得する

研修中に「SQL攻略」でひたすらSQL文を書いたのが今に活きています。

インターネット

インターネットは1990年ごろから一般的に使われるようになりました。

(確かもっと前は軍事用の連絡手段だった気がしますが・・・)

テレビの誕生が1920年ごろ(およそ90年前)と考えるとインターネットの誕生が比較的最近に感じますね。

さて、フロントエンド(ブラウザ)とバックエンド(Webサーバー・データベース)をつないでいるのがインターネットです。普段はGoogleしか使っていない人もネットの裏側を意識してみてください。

近年ではスマートフォンをはじめ、いろいろなモノが通信機能を持ち始めています。今後5GやAI技術によるテクノロジーの発展でますます社会に浸透していくと僕は思います。

所感

Webに関する研修で教えていただいた内容をざっくりとまとめてみました。本記事でWebの仕組みが全然わからない方がWebの枠組みを理解し、少しでも興味を持ってもらえると嬉しいです。

【SSブログを更新中です】

IT系キーワードをまとめてみた

プログラミング初心者がソフトウェア開発をする際に知っておくべきポイント

 

コメントや感想があれば以下のフォームから頂けると幸いです。

コメント

タイトルとURLをコピーしました