Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ITリテラシー教育
Search
Moriyama Hiroaki
March 21, 2023
Business
1
120
ITリテラシー教育
複業として大学生・インターン生向けに実施したITリテラシー教育の基礎編となります。
Moriyama Hiroaki
March 21, 2023
Tweet
Share
More Decks by Moriyama Hiroaki
See All by Moriyama Hiroaki
他職種や経営層とエンジニアを「うまくつなぐ」ためにエンジニアができること
moriyamahiroaki
2
130
DBのキホン
moriyamahiroaki
1
36
障害対応のキホン
moriyamahiroaki
7
220
急拡大するエンジニア組織で複数PJを進めるカオスな状況を乗り切るチームビルディング
moriyamahiroaki
3
130
Other Decks in Business
See All in Business
CompanyDeck 2025
immedio
0
580
株式会社Legalscape
legalscape
1
100
Paris 2024 ~パリ・パラリンピック プチ紀行~:2720 Japan O.K. ロータリーEクラブ・AITO 代表 紅葉谷 昌代 会員
2720japanoke
0
210
Company Profile in English
borderlessjapan
0
100
あなたの「仮説検証」、ゆがんでいませんか? / Isn't Your "Hypothesis Verification" Distorted? #emoasis
expajp
1
210
AI駆動プロダクト開発で最速価値検証
nakawai
0
250
タケウチグループRecruit
takeuchigroup
0
5.1k
ポート株式会社_会社紹介資料(2025/03/07更新)
portpr
1
1.7k
生成AIが変える新時代のビジネスインテリジェンス
marreta27
0
290
[採用資料] Quollio Technologies
rytmq
PRO
2
7.8k
株式会社グラム -会社紹介資料
tokunagayuichi
0
400
社会の厳しさを知った壮年男性の物語
segavvy
1
670
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
Automating Front-end Workflow
addyosmani
1369
200k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Site-Speed That Sticks
csswizardry
4
450
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Faster Mobile Websites
deanohume
306
31k
How to Ace a Technical Interview
jacobian
276
23k
BBQ
matthewcrist
88
9.5k
Documentation Writing (for coders)
carmenintech
69
4.7k
Transcript
ITリテラシー教育 2023.03.21 森山宏啓
▼プロフィール • 1984年生まれ、38歳。 • 法学部法律学科卒業 • 新卒で中小SIerに入社。 →創業期ベンチャー →医療介護業界向け事業会社 →2019年に株式会社うるるへジョイン
• エンジニアを軸に、バックオフィス・ セールス・事業責任者を経験 • 現在は、本業でエンジニアリングマネージャーとし て従事しつつ、 複業フリーランスとして「茂エンヂニヤリング」とい う屋号で活動中。 https://type.jp/et/feature/12958/ 自己紹介
アジェンダ • パソコンの仕組み ◦ パソコンを構成する要素 • インターネットの仕組み ◦ インターネット通信の基礎 ◦
ドメインとDNSについて • Webサービスの仕組み ◦ Webサービスの仕組み ◦ サーバーの基礎知識 ◦ HTML/CSSの概要
パソコンの仕組み
パソコンの仕組み まずはじめに、パソコンの仕組みについて説明します。 ここでは、みなさんが使っているパソコンはどのような部品でで きていて、それぞれの部品がどのような役割をしているのかを説 明します。
パソコンの仕組み パソコンの構成要素は • 入力装置 • 出力装置 • 記憶装置 • 制御装置
• 演算装置 の5つで成り立っています。
パソコンの仕組み パソコンの構成要素は • 入力装置:パソコンへの命令を行う • 出力装置:操作の結果を人間が見られるようにする • 記憶装置:入力されたデータなどを保存しておく • 制御装置:命令の実行をコントロールする
• 演算装置:計算をする の5つで成り立っています。
パソコンの仕組み パソコンの構成要素は • 入力装置:マウス・キーボードなど • 出力装置:ディスプレイ(モニター)・プリンターなど • 記憶装置:ストレージ(HDD・SSD)・メモリなど • 制御装置:CPU
• 演算装置:CPU・GPUなど の5つで成り立っています。
CPU ストレージ メモリ 入力 出力 パソコンのパーツの役割を例えてみると?
• CPU ◦ 人の命令(マウス・キーボード含む)を処理する ◦ 『デュアルコア』『Core2Duo』は料理人が二人のイメージ! • メモリ ◦ CPUが、処理をする時に使う場所
◦ 流し台が狭いと効率よく料理するのが大変・・・ • ストレージ ◦ データを保存しておく場所 ◦ HDD(ハードディスク)やSSDなど種類がある ◦ ストレージが大きいからと言って、快適と いうわけではない! CPU/メモリ/ストレージ
インターネットの仕組み
インターネットの仕組み パソコンやスマホがあれば、ブラウザ(Microsoft Edge・Google Chromeなど)を使って、簡単にインターネットにア クセスして様々なサイトを利用できます。 ここでは、インターネットとパソコンがどのようにつながっている か?ブラウザの裏側で何が起こっているのか?を解説します。
インターネットとパソコンはどう繋がっているの? プロバイダ
⑦ブラウザは⑥で返ってきた情報をブラウザに表示す る ⑥サーバーは届いた情報を元に人間が見たい情報を 返す ⑤パケットをIPアドレスのサーバーにインターネット経 由で届ける ③ブラウザがURLからIPアドレスを調べる ①人間が見たいサイトのURL を入力する ②ブラウザが「どのサイトが見たいか」のリクエスト用
のメッセージを作る ④ブラウザが②のメッセージと③のIPアドレスを1つに まとめたパケットを作る ブラウザの裏側で何が起こっているの? ⑧見たいサイトを見ることがで きる
普段何気なく見ているURLの中にはドメインというものが含まれ ています。 このドメインは、平たく言うと人間が理解しやすくするために付け られたインターネット上の住所のようなものです。 ドメインは一部を除き、誰でもレジストラを通じて取得(購入)す ることができますが、取得するだけでは何もできず、サーバー等と の紐付けをする必要があります。 【補足】ドメインって何だろう?
誰でも取得できるドメインですが、TLD(Top Level Domain)毎 にそれぞれ管理する団体がいます。 ※TDL:ドメインの最後の部分(〇〇.net、△△.info) 私たちは、レジストラという取得代行をしてくれるサービスを通じ て、それぞれの管理団体からドメインの使用権を購入することに なります。 【補足】ドメインって何だろう?
ドメインを取得したら、まずはドメイン自身のDNS/ネームサーバー (住所録の原本)の場所を設定し、その住所録内にドメイン(住所)とIP アドレス(緯度経度)の紐付けをしていきます。 インターネット上では、このネームサーバーに書かれているドメインと IPアドレスの情報を相互にコピーしあう仕組みが存在しているので、原 本の設定を行うと自然に全世界からURLから場所の特定をすることが できるようになります。 ※新しい設定が全世界に行き渡るのは最大48時間かかります。 【補足】ドメインって何だろう?
▪取得に条件のあるドメイン .jp:日本に住所がある個人・団体・組織 co.jp:日本国内に法人登記がある企業(1法人1つまで) go.jp:日本の政府組織 .jm:ジャマイカに住所がある個人・団体・組織 【補足】ドメインって何だろう?
ドメインをインターネット上の住所と例えましたが、whois情報と いう住民票のようなものもあります。 https://ja.asuka.io/whois などのサイトを使って、ドメインの 持ち主などを調べることができます。 【補足】ドメインって何だろう?
異なる情報をURLで分けるとき、サブドメインとディレクトリという 分け方があります。 サブドメイン:https://hoge.example.com ディレクトリ:https://example.com/hoge これらは「どのような目的で分けるのか?」や「どのような影響 があるのか?」を意識して選択する必要があります。 【補足】サブドメインとディレクトリって何?
【サブドメインを使うとき】 • ベースは一緒だが、内容が大きく異なり別物として扱いたいときに使用 • 例えば、同一ブランドの別サービスを分ける時 ◦ 「Yahoo!ブランド」の「Yahoo!メール」と「ヤフオク!」など 【ディレクトリを使うとき】 • ベースが一緒で、情報のジャンルの一部のときに使用
• 例えば、同じサービスの情報を整理する時 ◦ メニューの「食事」と「飲み物」を分ける時など 【補足】サブドメインとディレクトリって何?
Webサービスの仕組み
Webサービスの仕組み インターネットでWebサービスを見るときの動きを学びました。 次はWebサービス側には何があるのか?どのようなものがある のか?を説明します。
Webサービスの仕組み〜Webサービスの代表的な構成〜 データベース Webサーバー プログラム サーバー
Webサービスの仕組み〜サーバーってなに?〜 • 深く考えず、超高性能なパソコンと考えてもらってOKです。 • 個人が使うPCに比べて、CPUやメモリ、ストレージが業務用の レベルといった感じです。
AWSとかAzureとかのクラウドと言われる サービスも実態はこんな感じです!
• HTMLはハイパーテキスト・マークアップ・ランゲージ (Hyper Text Markup Language)の略で、Webサイトに表示さ せたい情報を構造化するために用いる言語です。 • HTMLは、「要素」と「属性」という考え方で成り立っています。 Webサービスの仕組み〜HTMLってなに?〜
<a href="https://hogehoge.co.jp/" target="_blank">ホゲホゲホゲ株式会社 </a> Webサービスの仕組み〜HTMLやCSSってなに?〜 要素 属性 開始タグ 終 了
タ グ 要素の内容
Webサービスの仕組み〜HTMLやCSSってなに?〜
• CSSは、カスケーディング・スタイル・シート (Cascading Style Sheets)の略で、文字の色や大きさ、背 景、配置といったスタイル(見た目)を設定する言語です。 • HTMLで書かれた構造化された情報を「装飾」するために 活用します。 Webサービスの仕組み〜CSSってなに?〜
Webサービスの仕組み〜CSSってなに?〜 CSS(右側のファイル)で、 aタグに ・文字を太字にする ・太めの水色の下線 を設定してみました。
Webサービスの仕組み〜CSSってなに?〜
実は、HTMLファイル内にCSSの記述を書くことや、HTMLタグ内で装飾を 指定することもできます。しかし、別々に記載することが望ましいです。 その理由としては以下の2点があげられます。 • CSSのファイルを分けていることで、別のHTMLファイルからも装飾の設 定を利用できる。 • HTMLタグで個別設定すると同じ設定をすべてのタグで書く必要がある が、CSSで設定しておくと1箇所修正することで、該当箇所の装飾を一気 に変更できる。
HTML/CSSを別ファイルで準備するメリットは?
Appendix 何かございましたら、ご連絡ください! Facebook:https://www.facebook.com/HM.moriyamahiroaki/ Twitter:https://twitter.com/pilot_fish Mail:
[email protected]