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
110
ITリテラシー教育
複業として大学生・インターン生向けに実施したITリテラシー教育の基礎編となります。
Moriyama Hiroaki
March 21, 2023
Tweet
Share
More Decks by Moriyama Hiroaki
See All by Moriyama Hiroaki
他職種や経営層とエンジニアを「うまくつなぐ」ためにエンジニアができること
moriyamahiroaki
2
110
DBのキホン
moriyamahiroaki
1
25
障害対応のキホン
moriyamahiroaki
7
180
急拡大するエンジニア組織で複数PJを進めるカオスな状況を乗り切るチームビルディング
moriyamahiroaki
3
94
Other Decks in Business
See All in Business
VISASQ: ABOUT DEV TEAM
eikohashiba
1
17k
(14枚)仮説思考に必要な5つの能力
nyattx
PRO
1
330
ブレイン・ラボ‐会社説明資料
blhr_nktk
0
18k
OKR基本のキ / OKR Basics
toshimaru
3
120
VISASQ: ABOUT US
eikohashiba
14
440k
新規事業 プロダクト組織紹介
kubell_hr
0
840
自己解決を支える検索技術と改善サイクル
akiroom
0
290
「アジャイルチームによる目標づくりガイドブック OKRを機能させ成果に繋げるためのアプローチ」のOKR/The OKR of OKR Guidebook
ikuodanaka
3
280
CompanyDeck_v5.0.pdf
xid
2
15k
240722_CobeAssocie_121-changes-in-lifestyle-2024_vol18.pdf
nozomi
0
110
Salesmarker_Culturebook
salesmarker
PRO
0
930
株式会社アトラエ|会社紹介資料 / Join us
atrae
12
420k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
A Philosophy of Restraint
colly
200
16k
Statistics for Hackers
jakevdp
792
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Being A Developer After 40
akosma
72
580k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Leading Effective Engineering Teams 2024
addyosmani
3
300
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Documentation Writing (for coders)
carmenintech
63
4.2k
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]