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
コーポレートストーリー(新規投資家様向け会社説明資料)
gatechnologies
1
11k
イオングローバルSCM 会社概要
agscm
0
4.2k
株式会社ハイクリ 採用デッキ
hicrea123
0
520
PTEゼロ人部署から大躍進! PTE 2025を5人(うちFellow 1人)を 誕生させた秘訣を大公開!
danishi
0
260
株式会社ジグザグ_For our future members/未来の仲間へ
zig_zag
4
28k
VISASQ: ABOUT DEV TEAM
eikohashiba
3
25k
ご参考資料
ryoheig0405
1
200
モノクレア / 求職者向け会社紹介
oneterasu
0
120
アジアクエスト会社紹介資料 / We invite you!
asiaquest
7
93k
株式会社調布清掃 会社説明資料
ldk_by_bridge
0
13k
株式会社Legalscape
legalscape
1
120
2024年度(4月-12月)イコマド運営報告書
tadanori
0
190
Featured
See All Featured
Done Done
chrislema
183
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
We Have a Design System, Now What?
morganepeng
51
7.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Bash Introduction
62gerente
611
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Code Reviewing Like a Champion
maltzj
522
39k
How GitHub (no longer) Works
holman
314
140k
Agile that works and the tools we love
rasmusluckow
328
21k
Facilitating Awesome Meetings
lara
53
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
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]