【図解付き】絶対わかる!WEBアプリケーション・サービスの仕組みとは?

eyecatch_1046

こんにちは!侍ブログ編集部(@samuraijuku)です。

全くのプログラミング初心者にとって、「WEBアプリケーションやWEBサービスの仕組みを理解すること」はなかなか難しかったりしますよね?

調べてみても、専門用語が並んでいたり、説明が難しかったりと、なかなかすっきりと理解できないことがあると思います。

そこで今回は、WEBアプリ開発やWEBプログラミングをこれから学習していく方にも簡単にわかるように、図を用いてWEBアプリケーション・サービスの仕組みをわかりやすく説明していきます!

とにかく「わかりやすく」をテーマにしていますので、難しい単語や、ややこしい説明などはすべて省いています。

なので、プログラミングどころかPC自体初心者という方でも、読み進めていけばすっきりとWEBアプリケーション・サービスについて理解できているでしょう!

WEBアプリケーションの仕組みとは?

web_application_structure_001

まずは、こちらの図を見てみてください。

「ちょっと分からない..」という方が大半だと思います。

大丈夫です。今回の内容を読み終わる頃には図の内容は大枠理解できるようになるでしょう。

では早速、説明していきます。

まず、WEBアプリケーションの構成を大きく2つに分解すると以下の様になります。

  • クライアントサイド
  • サーバーサイド

なにやら、聞きなれない単語が出てきたなぁ。

と思われる方もいらっしゃると思いますが安心してください。

これから、この2つの意味と役割について説明します。

クライアントサイドとは?

shutterstock_269584661

「クライアントサイド」の説明を、まずはWikipediaで見てみましょう。

HTTP」「FTP プロトコル」といった難しい単語が出てきて、なかなか初心者には理解できない内容になっていると思います。

では、クライアントサイドとは何なのかを簡単に言うと、「ユーザーが手に触れて見ることのできる領域」のことです。

例えば、今まさにあなたが見ている「この画面(ブラウザ)」も、「スマホ」や「パソコン」も総じてクライアントサイドと言います。

簡単にまずはそのくらいの理解で大丈夫です。

ブラウザとは?

次に「ブラウザ」について説明します。

初心者の方でも一度は耳にしたことがあると思います。

でも、「ブラウザって何?」と聞かれると意外と出てこない人もいるはずです。

簡単に言うとブラウザとは、「WEBの世界を覗くための窓」です。

今あなたがこのブログを見るために使っているツールは「InternetExplor」「Chrome」「FireFox」「Safari」あたりではないでしょうか?

それがまさに「ブラウザ」ということになりますね。

使用言語

「ブラウザ」で主に使われている言語は、

  • HTML
  • CSS
  • Javascript

などが挙げられます。

「HTML」は、WEBページの骨組みを作るもので、「CSS」は、色付けやフォント、レイアウトなどを決めるもの、「JavaScript」はアニメーションなどの動きをつけるものです。

HTMLやCSSを学ぶのに最適な学習サイトまとめはこちらからどうぞ。

サーバーサイドとは?

shutterstock_313779428

次に、「サーバーサイド」について説明します。

先ほどと同様に、細かく説明するとかなりややこしくなってしまうので噛み砕いて説明していきます。

サーバーサイドとは簡単に言うと、ユーザーが普段見ることや触れることができない領域のことです。

もうちょっと掘り下げると、「WEBアプリケーションの本体が置いてある場所」を指します。

サーバー(server)」という言葉には元来「提供する」といった意味があります。

つまり、クライアントサイドから求められた処理に対して、情報やデータ等を「提供する」といった意味合いで解釈することができますね。

一般的なサーバーには、求められた処理にあったデータを返す「WEBサーバー」や、データ自体の保存などに使用する「データベースサーバー」などがあります。

データベースとは?

「データベース」という単語も、聞いたことはあるけどイマイチわからないという方も多いと思います。

データベースは、WEBアプリケーションやWEBサービスには欠かせない大事なもので、アプリケーションやサービス開発をする際には必ずといって良いほど使用します。

そんなデータベースに関してもこちらで詳しく解説していますのでご参考ください。

使用言語

サーバーサイドで使用される言語は、

  • Ruby
  • PHP
  • Perl
  • Java

などが挙げられます。

それぞれの言語で、習得がしやすかったり、大規模開発に向いていたりと特徴があります。

自分の目的にあった言語を選定しないと、遠回りすることになってしまうので、気をつけて選びましょう。

言語選定に関してはこちらを参考にどうぞ。

その中でもとくに、WEBアプリケーションやWEBサービスを簡単につくることができて、習得も簡単、尚且つ案件数や単価などでも高い人気を誇る言語が、「Ruby」です。

Rubyの学習方法や、アプリケーション開発に関してこちらで体系的に学ぶことができるので、ぜひご覧ください。

まとめ

いかがでしたでしょうか?

WEBアプリケーションの仕組みについて、クライアントサイドとサーバサイドという2つの要素から簡単に説明してきました。

WEBの世界は、一見複雑な構造の様に思えますが、たった2つの世界で成り立っているんですね。

これからWEBアプリケーションを開発したり、WEBプログラミングを学習される場合、全体的な流れや仕組みを理解しておくことは非常に重要になりますので、この記事が参考になれば幸いです!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題、最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

侍エンジニア塾ブログ編集部

侍エンジニア塾ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去100人以上のフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
ホームページはこちら
ツイッターはこちら
フェイスブックはこちら