初心者向けです

1. 非エンジニアでもわかる
WEBが動く仕組み

2. • WEBサイトの仕組み
• サーバーとは
• クライアントとは
• CUIとGUI
• プログラミング言語
• HTML/CSSとは
• フロントエンドバックエンドについて
• DBとは
目次

3. ①WEBが動く仕組みについて

4. この画面、どうして見えているのだろう？

5. 登場するものは３つ
クライアント
自分たちが見ている画面
サーバー
実際にデータがある場所
ネットワーク
クライアントとサーバー
をつないでいる

6. ①クライアントがサーバーにネット
ワークを通して欲しい情報を要求する
②サーバーがネットワークを通してク
ライアントに持っているデータを送る
これをリクエストと呼ぶ
これをレスポンスと呼ぶ

7. 今回の場合だと
①https://twitter.com/engin_portfolio
の情報を教えて！！
②はい！！どうぞ～

8. 実はコンピュータは文字を認識できない
つまり、いきなり“ https://twitter.com/engin_portfolio ”と言わ
れても分からない。
実は、各サイトの情報には住所のように番号が振り分けられてい
る。例）IPアドレス＞31.13.82.1
これを対応させることを「名前解決」と呼ぶ。
（DNSサーバーが行っている）

9. まとめ
① WEBサイトを見るとき、パソコンではライアントからイン
ターネットを通じサーバーとやり取りをしている。
②ほしい情報を送る行為をリクエスト、情報を返すことをレスポ
ンスという
③リクエストをする際には、名前解決を行っている。

10. ②サーバーとは

11. 今回はここ！！

12. サーバーとは
リクエストを受け付けてレスポンスを返す役割のコンピュータ
ずっと起動したままリクエストが来るのを待ち、
リクエストが来たらレスポンスを返す

13. サーバーの種類
リクエストの種類に応じていろんなサーバーがある
• WEBサーバー：リクエストに対してHTML、CSS、JavaScript
などの情報を返す役割
• アプリケーションサーバー：動的コンテンツを生成する
• DBサーバー：データの保存や更新、バックアップなどを行う
などがある

14. これらが相互に連携してレスポンスを返す
例）検索ページを表示する

15. まとめ
サーバーはずっと起動したままリクエストが来るのを待ち、リク
エストが来たらレスポンスを返す
サーバーにはさまざまな種類のサーバーがあり相互にやり取りを
してクライアントにレスポンスを返す。

16. ③クライアントとは

17. 今回はここ

18. 一般的なパソコンのこと
大きくハードウェアとソフトウェアの二つに分けられる
ソフトウェアはOSとアプリにさらに分けられる

19. ハードウェアとソフトウェア
コンピューター内の
プログラムのこと
物理的に手で触れるもの

20. OSとアプリ
ユーザーの利用目的に合わせて
制作されたソフトウェア
OS
コンピュータの動作に必要な
機能を備えたもの
基本ソフト
アプリ

21. まとめ
• クライアント側には階層構造がある。
• 大きく分けると、ハードウェアとソフトウェアがある。
• ソフトウェアはさらに二つに分かられる。
• 基本ソフトをOSと呼び、ユーザーは必要に応じてアプリを使う
ことができる。

22. ④CUIとGUIとは

23. こんな画面、見たことありませんか？
＞実はこれ、ただ新しいファイルを作成しているだけ

24. • キーボードを入力して何かしらのコマンドを入力して動作をコ
ンピューターに指示することをCUIと呼ぶ。
• 反対に、表示されているボタンやアイコンをマウスでクリック
することでコンピューターに指示することをGUIと呼ぶ。
CUIとGUIとは

25. パソコンに指令を出しているという点は普段自分たちが行っている
操作と同じ
ただ、その手段がことなるだけ。
エンジニアはCUIで操作することが多い

26. CUIのメリット
• 処理の自動化がしやすい
• 容量が軽い
• 操作の記録を残しやすい
• コピペして複数人で共有しやすい

27. まとめ
エンジニアでは、よくCUIを用いられる。
CUIとは文字でパソコン操作をすること。
CUIにはGUIにはない様々な開発におけるメリットがある。

28. ③プログラミング言語とは

29. プログラミング言語とは
＜一言で言うと＞
人とパソコンが会話するための言語
＜特徴＞
ちょっとでも文法間違いなどがあるとエラーを出す。
＜ちなみに＞
人工的に作られた言語なので、人工言語という。
その反対に、日本語や英語のように、自然に発生し、昔から話
され使われてきたことばを「自然言語」という。

30. プログラミング言語にも様々な種類がある
種類①何を扱うのか
種類②人間寄りかパソコン寄りか

31. 種類①何を扱うのか
やりたいこと（目的）によって使う言語は異なってくる

32. 種類②人間寄りかパソコン寄りか
初めての人には理解が簡単な高級言語から取り組むことがおススメ

33. まとめ
プログラミング言語は人がパソコンと意思疎通を図るための言語
である。
プログラミング言語には多くの種類があり、目的によって最適な
言語がある。
高級言語は比較的理解が容易であるため初心者でも取り掛かりや
すい

34. ③HTML/CSS/JavaScriptとは

35. HTML/CSS/JavaScript
Webを見る際にサーバーからクライアントへスポンスとして返
される言語
・HTML：サイトの構成を決める役割
・CSS：装飾を決める役割
・JavaScript：動作を決める役割

36. GoogleChromeの検証モードから
生のコードが見える
右がHTML 左がCSS

37. まとめ
• Webサイトを見る際、レスポンスとしてサーバーから
HTML/CSS/JavaScriptが送られそれを読みこむことでHPが表
示される。
• 実際のコードは、 GoogleChromeの検証モードから誰でも見る
ことが出来る。

38. 参照
• https://www.youtube.com/watch?v=zq50JwOU_ls&t=435s&
ab_channel=%E3%83%9E%E3%82%B3%E3%81%AA%E3%82
%8A%E7%A4%BE%E9%95%B7
• https://techlife.cookpad.com/entry/2018/05/09/080000