今回は非エンジニアの経営者向けにwebサービスの仕組みを解説していきます。開発する際にそれぞれの用語の意味や部品が何をしているのか理解することでwebサービス開発がスムーズになります。
例えばHTMLやcssって何をしているんだろうと疑問に思う経営者の方も多いはず。この記事を読めばそれぞれの役割を把握し、発注する際のコミュニケーションに役立ちます。
この記事は下記動画でも解説しています。
webサービスの定義
まず、webサービスというとfacebookやtwitter、amazonなどを想像すると思います。かねがねあっているのですが、今回はブラウザに表示せるwebのサービスを対象とします。iOSやandroidなどアプリはこの記事ではアプリサービスと定義します。
大まかな仕組み
webサービスはすごく大雑把にいうと下記を行なっています。
- リクエストを送る
- 情報をサーバーから返す
- その情報を返す際にDBから返す
すごい難しいことをしているように見えますが（まあ実際に難しいことをしている場合もありますが）、大体は上記です。この情報が欲しいですとユーザーがリクエストを送り、その情報をDBから取り出し、加工してユーザーに送り返しています。
例えばtwitterを見た際に最初のHOMEでフィードをユーザーがリクエストを送っている状態になります。twitterはその人のフィードに表示するtweetをDBから取り出し、送り返しているのです。
ドメインの役割
では、そのリクエストを送る先ってどこなの？となるかもしれませんが、ドメインになります。正確にいうとそれぞれIPアドレスというものが振られています。これは住所みたいなものと思ってもらえればいいです。このIPアドレスは数字の羅列で覚えにくいのでドメインという〇〇.comみたいな名前をつけます。
このIPアドレスにドメインを当てることでわかりやすくすることを名前解決と言います。
ただ表示させるサイトと入力ができるサイトの違い
上記でDBから情報を出すと言いましたが、DBのないサイトもあります。正確にいうとDBの情報とコードで生成した情報を返しており、DBなしでコードの生成した情報のみを返す場合もあります。
DBが必要なのはユーザーの入力がある場合が多いです。ただ表示させて、情報をユーザーから入力しないサイトはDBなしの場合もあります。
それぞれの用語の解説
webサービスをつくる場合、必要なものは下記になります。各部品の役割を説明していきます。
- HTML
- CSS
- javascript
- バックエンド（php、rubyなど
- フレームワーク（railsなど
- サーバー
- DB
webサービスが動く仕組み詳細
下記の流れでwebサイトというのは表示されています。
- ユーザーがurlを入力
- サーバーにリクエストが飛ぶ
- サーバーでバックエンドのコードを元にdbなどの情報を返す
- HTML、CSSでサイトデザインを表示し、サーバーから受け取ったdbなどの情報を表示する
まず、大まかに分けると、サイトを表示させるものが
- HTML
- CSS
- javascript
になります。次に情報を出し分けたりロジック部分のコードが
- バックエンド（php、rubyなど
- フレームワーク（railsなど
になります。このコードを保存しているのがサーバーになります。DBなのでは？と思った方もいるかもしれませんが、DBはロジックを保存しているのではなく、ユーザーデータなどを貯めています。表示させるコンテンツ自体と言ってもいいです。（実際にはコンテンツ以外にも色々保存しています）
下記でそれぞれを詳しく紹介します。
HTML
webサイトを表示させる言語になります。テキストなどの内容はこのHTMLにより指定されます。
<h1>タイトル</h1>上記はh1、ページのタイトルをhtmlで書いています。このようにコンテンツをタグで囲み、このコンテンツがどう言ったものかを定義していくのがhtmlになります。
CSS
CSSはデザインを整える言語になります。htmlの文章などの内容物をcssで形を整えます。
javascript
javascriptは動きをつける言語になります。ブラウザ上で動きをつける際に用いられます。
バックエンドのプログラミング言語（php
サーバーで動くプログラミング言語をバックエンドと呼びます。phpやrubyなどがそれにあたります。
フレームワーク
バックエンドで動く枠組みで多くのシステムで使われるであろうものをあらかじめ作っているものになります。たいていのwebサービスは何かしらのフレームワークの上に作られています。プログラミング言語とフレームワークはどう違うのかわかりにくいかもしれませんが、言語の上にフレームワークは乗っかっており、言語をもとに作った枠組みがフレームワークになります。
DB
DBはデータを溜めておく場所になります。ユーザーの情報などはここに溜まっています。
アプリの動く仕組み
今までwebの仕組みを説明してきました。iOSやandroidなどアプリは少し変わってきます。リクエストを送って情報を返すというところは同じなのですが、アプリの場合、表示させる部分が違います。
webではHTML、CSSで表示部分を作っていましたがそこがアプリだとiOS、androidでそれぞれ作ることになります。
まとめ
以上がwebサービスを開発する際に知っておきたい知識になります。もちろん作るものや組織によって変わるのであくまで一例になります。