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
120
DBのキホン
moriyamahiroaki
1
32
障害対応のキホン
moriyamahiroaki
7
200
急拡大するエンジニア組織で複数PJを進めるカオスな状況を乗り切るチームビルディング
moriyamahiroaki
3
110
Other Decks in Business
See All in Business
la belle vie Inc. Company Introduction for Engineers
recruiting
0
820
3次元データを用いた差分解析による工事発注への取組
tokyo_metropolitan_gov_digital_hr
0
370
merpay-Overview
mercari_inc
7
160k
SmartBank - Recruiting Deck
smartbank
10
200k
20241114_洲崎_レイヤード様LT
suzakiyoshito
0
360
VISASQ: ABOUT US
eikohashiba
15
460k
20241027.jjug_ccc_creditsaison.pdf
lalha
4
2.5k
M&A Cloud Advisory Partners 採用ピッチブック
macloud
1
13k
インキュデータ会社紹介資料
okitsu
3
32k
エムスリーキャリア エンジニア採用資料 / M3C Engineer Guide
m3c
1
86k
エンジニア向け会社紹介資料/株式会社PLAY
play_inc
0
5.4k
急成⻑スタートアップで働くことで得られるもの / 株式会社IVRy(社内LT会)
miyashino
0
1.2k
Featured
See All Featured
Speed Design
sergeychernyshev
24
610
Scaling GitHub
holman
458
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Faster Mobile Websites
deanohume
305
30k
Building Applications with DynamoDB
mza
90
6.1k
Side Projects
sachag
452
42k
For a Future-Friendly Web
brad_frost
175
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A designer walks into a library…
pauljervisheath
203
24k
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]