ウェブサービスアプリが動く仕組み②

ウェブサイトの仕組み

サイトは文字の羅列で作られています。必要なのはHTMLいう言語です。これは知っている方も多いと思います。文章の構造を明確にしたり、画像や動画を配置したりすることができます。このHTMLはデザインとは関係ないんですよ。HTMLはあくまでサイトの文章の構造を決めるためのものなんです。構造とは何かというと、大見出し、小見出し、そしてそれぞれの文字・画像が一体そのサイトの中でどん

な意味合いをもっているのかを整理していることです。それが青色なのか赤色なのか、文字の大きさとかそういうものはHTMLには一切書かれていません。見た目やデザインに関するものはCSSというものを使います。CSSはウェブページのスタイル見た目を指定するためのものです。これを使うことで文章の構造とデザインを切り離すことができるんです。構造とデザインを分けておくことにはすごく意味があります。ウェブサイトって1HTMLファイルあたり1ページで作っていくんです。100ページのサイトがあって見出しのデザインを変えようと思ったら、その100個のファイル全部デザインを修正していかなきゃいけないですよね。でも何ページあろうがデザインはまとめて1つのCSSファイルに設定されていたらその、CSSファイルを編集するだけで全部のページが変わります。もし分けていなかったら、全部開いて全部修正しないといけないといけないですから。そしてHTMLとCSSファイルはサーバーにあげておくことで、人はウェブサイトとして見ることができるんです。これはブラウザの場合のみです。スマホとかは少し違いますGoogle ChromeとかSafariはHTMLファイルCSSを読み込んでサイトの情報を出していると覚えておいてください。

またあなたに質問です。スマホアプリでは、レスポンスで返るファイルは、ウェブサービスと異なり文章構造や画像だけが返り、デザインの情報はありません。それはなぜだと思いますか

答えは見た目やデザインの情報はアプリ内に用意されているため、文章の画像の情報を一緒に手元にダウンロードされているからです。アプリから何か送信するときは情報だけは返ってくればいいわけですよ。

まとめ

ウェブサイトの仕組み

HTMLはウェブページを制作するための言語で文章の構造を決めることができる

CSSはウェブページのスタイル見た目を指定することができる

レスポンスでHTMLとCSSを返すことでウェブページを表示することができる

サーバーサイドスクリプトとデータベース

スマホやパソコンからリクエストを送ってサーバーにたどり着いて、サーバー内でレスポンスを返すまでの間にこの中で一体何が起きているのか?という話です。この処理は時間にしたら、1秒もありません。でもこの間にたくさんの技術が使われていて、それらがわたしたちの生活を便利にしてくれているのです。サーバーにはLinux型のOSが入っていることが多いです。今回はLinuxでいろんなバージョンがある中でも、CentOsというのが入っているとします.

このサーバーの中にHTML/CSSファイルを置くだけでもウェブサイトができます。ただし問題があります。何かわかりますか?何回見ても同じページが表示されます。これでは投稿したり検索したり、おすすめを表示したりサービスを作ることはできません。ウェブサービスではないんです。サービスにするため必要なものは2つです。

1、データを保存する仕組み

2、サービスの使用を反映したロジック

データの保存はサーバーサイドスクリプトが担当します。あなたはこの流れを覚えてください。アプリとかウェブサービス、例えばメルカリとかクックパッドとかそういったものって、膨大な情報があります。それらを保存しておく場所がある必要です。データベースといいます。データを保存するシステムです。通常はExcelのような形式で保存されます。この1つの表をテーブルといいます。1つのテーブルはシートみたいなものです。これにデータが保存されているわけです。このデータベースを操作するための言語があります。それがSQLです。保存されたテーブルから呼び出したり、更新したり、削除したりすることができます。データベース、SQLって聞くと難しく感じますよね。でも実際全然難しくありません。SQLなんて1時間位レクチャーされれば誰でも使えるようになります。

次にサーバーサイドスクリプトについてです。データベースはあくまでデータの保存ができる場所でしかないのです。データーを保存する場所と場所内で操作する方法としてSQLがあるというだけですなのです。サービスの使用に基づいたロジックや実際に返すHTMLの情報をプログラムしておく必要があります。サービスの使用に基づいたロジックというと難しく感じるかもしれませんが簡単です。例えばメルカリのトップページで情報が出てると思うんですけども、そこで「一体どんな情報を表示するか?」を決めることです。料理レシピでどんな料理を最初に見せるか?そういったものを決めることをロジックといいます。ここで使われるのがサーバーサイドスクリプトのRubyやJava PHPを始めとするサーバー内での処理を担うプログラム言語です。こういった言語を使ってサービスの使用をプログラムしていくのです。このサーバーサイドスクリプトがやってくれることをざっくり2つ覚えてください。

1つ目

サーバーサイドスクリプトは必要に応じてSQLを用いて、データベースから情報を引き出してくれます。例えばアプリとかで自分のプロフィールを見たいときは、サーバーサイドスクリプトで自分のプロフィールページを見ているときには自分のプロフィールの情報を返すとプログラムをしておくのです。

2つ目

データベースから取得したデーターを使ってHTML/CSSを生成してくれます。生成すると言うと大げさですけども、当てはめるといった意味です。これはブラウザの場合で先程言ったようにアプリの場合はちょっと違うんですけども、大枠やっている事はほとんど同じです。プロフィールページを見たいんだったら、データーをもってきて、それを見やすいようにして返すとこれだけです。ちなみにRuby、PHP、 Javaなど複数のサーバサイドクリプトの言語がありますが、書き方が違うだけで基本的な役割は同じです。例えばPythonであれば機械学習型のツールが使いやすいです。そういった特徴があるんですけども基本的にやっている事は同じです。よくある質問として初めにどんな言語を間勉強したらいいんですか?って聞かれるんですけども、1つの言語に接すれば他の言語も覚えられるようになります。なのでどの言語を覚えるかはこだわりすぎなくてもいいです。

最後はレスポンスとして情報返して終わりです。リクエストに対してサーバーサイドスクリプトが「こういう情報が必要だ」とデータベースからデータを持ってくる。それを見やすいように整形してあげてそれを返す、そういった流れが起きています。

まとめ

サーバーサイドスクリプトとデータベース

データベースはデータの保存するシステムでテーブルと呼ばれる表形式で保存されるSQLはデータベースを操作するための言語サーバーサイドスクリプトルビーJava PHP道はウェブサービスのロジックを担当するサーバーサイド側とはデーターベースから必要なデータを取得する

終わりにテクノロジーから逃げないでください世の中はテクノロジーでどんどん変化していきますでもテクノロジーといっても全く理解できないような本当に難しいものなんてありませんてぐらいせずにざっくりとそれが一体どんな役割を果たしているのかどんなものなのかと言うのは勉強を続けるようにしてください今の時代にテクノロジーから逃げていくと世界の変化からどんどん置き去りになりますそうすると言われた仕事をこなすだけの人になってしまいますもうアナログ男って許されないんですよテクノロジーの細かいところまで理解する必要はありませんからざっくりと何をやっているかだけを理解するようにしましょう。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です