この記事は約6分で読めます。

5分でわかるwebアプリの仕組み【プログラミング初心者向け】

5分でわかるwebアプリの仕組み【プログラミング初心者向け】

ココカラエンジニア編集長の打田がエンジニアを目指す人に役立つコンテンツをyoutubeで配信します。

今回はWebアプリケーションの仕組みをわかりやすく解説しています。

プログラミング初心者から、こんな質問が多く届いています。

悩む青年
アプリを作りたいけど全体像がわからない・・・
悩む青年
仕組みがわからないから上手く進めないよー

アプリケーションの仕組みはむずかしく見えてしまうのですが、実は意外と簡単です。

 

編集長
スライド3枚もあれば説明できてしまうんですよ!

ツイッターを例に、Webアプリケーションの仕組みをわかりやすく説明しますね。

 

Webアプリケーションの仕組みは「ツイッター」を題材にします

僕のセミナーで実際に使っている資料です。

動画の図をつかって簡単に「Webアプリケーション」の仕組みを説明します。

 

ツイッターの仕組みには3つの登場人物が!

ツイッターを題材にすると3つの登場人物があります。

  1. ユーザー(PC,スマホ見たりカキコする人)
  2. Webサーバー(php,Rubyなどプログラミング言語)
  3. データベースサーバー(amazon web services)

この3つの役割や実際の流れについて、みなさんに説明しますね。

 

結論からお話しますと、3つの登場人物

  1. ユーザー
  2. Webサーバー
  3. データベースサーバー

1〜3の登場人物(ユーザー、Webサーバー、データベースサーバー)

  • それぞれ別々に動いて
  • それぞれデータ(ツイートの内容)を行き来している

という仕組み・流れになります。

 

ユーザー・Webサーバー・データベースサーバーの役割は?

「ユーザー」「Webサーバー」「データベースサーバー」3人の登場人物の役割を紹介します。

ツイッターでの文、画像はこのように流れていくんですよ。

1.私たちユーザーはいつもこんなリクエストを行なっています

  • ツイートをつぶやく、文を書いて画像を投稿します

2.するとWebサーバーで次の動きがおこります

  • Webサーバーが投稿リクエストを受け取ります
  • 「php」「Ruby」などプログラミング言語が動きます

3.そのあとデータベースにいきツイートが保存されます

自分のツイートを見てもらえる他、みんな(フォロー)のツイート・画像も見れますよね。

ツイッター書き込みは1〜3の順ですが、タイムラインを読みたいときには逆の流れがおこっています。

 

みんなの投稿(タイムライン)を見るときの流れは「逆向き」

書き込むときと違って見るだけのときは、データベースから始まる逆の流れになります。

  • (3)データーベースからWebサーバー(phpなど)にデータが返ってきて
  • (2)WebサーバーからPC、スマホに文や画像が流れて
  • (1)僕たちの画面にツイートが表示される

自分やみんなのツイッターを見れるのはこんな仕組みなんです。

3人の登場人物の中で、もっとも耳慣れない「データベース」について少しお話しますね。

 

ツイッターにおけるデータベースはどんな役割なの?

データーベースとは「表形式」のデータです。

とても多くのデータが表の中に正確に整理された形で格納されています。

データベースに保存されているものは

  • ユーザー名
  • つぶやいた内容(文・画像)

これら情報が

「データベース」ー「Webサーバー」ー「みんなのPC、スマホ」

こんな風に私たちのPC、スマホ(端末)に返ってきているんですよ。

 

ツイッターのタイムライン表示はこうなっている

(フォロー全部ではなく)僕が投稿した投稿分だけがタイムラインに拾われ表示される仕組みは、

編集長
僕だけのデータが集約され、上から順に並べられます

今度は自分だけの投稿でなくフォローみんなのを見れるタイムラインを出しますね

画面の見た目はこんなです。

編集長
上から順にダーッっと並べ替えられるんです

僕がフォローしてる人のツイートを

  • データベースからみんなのデータ集約・取得(ユーザー、つぶやき)
  • みんなのツイートを新しい順に、見やすく並べ替える

Webアプリケーション作りは、非常にむずかしく感じるかもしれません。

しかし注意するポイントは3つだけです。

 

Webアプリケーションをつくるポイントは3つだけ!

Webアプリケーションをつくる3つのポイントは

  1. 見た目を(HTML,CSSなど)でつくる
  2. (データを管理する)データベースに(Webサービスに必要な)データを集約する
  3. 「1.見た目」と「2.データベース」を橋渡しする「Web言語」(php・Ruby等)をつかい「見た目・データ」の取り出し・保存を行う

Webサービスを構築していく手順と流れをまとめました。

編集長
「ユーザー」「Web言語」「データサーバー」と3分割したイメージで開発を進めてくださいね!

 

「小まとめ」にまとめましたので3分割の図をごらんください。

 

まとめ

Webアプリケーションには3つの登場人物がいて

  1. ユーザー(PC,スマホ見たりカキコする人)
  2. Webサーバー(php,Rubyなどプログラミング言語)
  3. データベースサーバー(amazon web services)

ツイッターに書き込みするとき

1〜2〜3の順で

閲覧するときには

3〜2〜1の順になります。

 

実際にWebアプリを作るときのポイント

  1. 見た目(HTML,CSSなど)をつくる
  2. データベースにデータを集約する
  3. 「見た目・データベース」を橋渡しする「Web言語」(php・Ruby等)をつかって「見た目・データ」の取り出し・保存を行う

ウェブアプリケーションの仕組みと流れが何となくわかったら、あまり難しく考えずに作り始めてみるのが良いですよ。

質問、相談などは「ココカラエンジニア」LINE@にお寄せください!

LINE@

この記事をシェアする