プログラミング基礎〜フロントエンド編〜

プログラミング
スポンサーリンク

インターネットの仕組み

インターネットの用語
→概要で仕組みと用語がわかれば、ググればわかる。

図書館という例で、インターネットを説明して行きます。

皆さんが歩いて行って、図書館に来たとします。

図書館に来たら、受付の人に

「この本が欲しいです」

と聞きますよね?
そうすると受付の人が、

「この本はここにありますよ」

と教えてくれます。

このやりとり、これを「プロトコル(手続き)」。
ウェブでは、HTTPプロトコルとかHTTP通信と読んでいます。

その後に、受付の人が

「ここにありますよ」

に書いて渡してくれました。
このって、皆さん読んだら

「この場所の○○だな」

ってわかると思うんですが。

この情報を、ネットの世界ではHTMLと呼びます。

これ受付の人は、ただの白い紙ではなく。
花柄だったりカラフルな色で、装飾した紙で渡してくれました。


このおしゃれにする装飾のことを、CSSと呼ぶんですね。

この受付の人はお茶目だったんですよ。
この紙をぴろってめくると帰るがぴょんと飛んで来ました。


こういう動きとかをしてくれる仕組みを、Java Scriptと言います。

あなたがしたかった事は、本を探す事ですよね?
紙を見ると本の場所が書いてありました。
この本の場所っていうのをネットの世界では、URLと言います。

例えば:算数の本が欲しい

「A-1にありますよ」=’A-1’というURL

URL=HTML(本の情報)が書かれている

URL

ユーザーが変わりやすように設計されています。

例えば:Googleにアクセスするとき。
→google.co.jpと書いてあると思うんですが。これって皆さんが、わかりやすいようにわざわざ機会がやってくれているんですね。

機械は何で判別しているの?

例えば:家が渋谷だとします。
郵便番号は、〒○○○ー○○○と数字で表現していますよね?

でもこの数字だけ見ても、皆さんここが渋谷だとわかりませんよね?
この数字っていうのも機械で同じような仕組みがあって、これを「IPアドレス」と呼ぶんですね。

機械の中では、このIPアドレスで管理していて。郵便番号同じです。
これだけだと皆さんよくわからないので、URL(住所)に変えてくれている。

じゃあですね!

IPアドレスとURL(ドメイン)の紐付けはどこで管理しているのか?

DNSサーバーという所があるんですね。


このDNSサーバーという所で、このDNSだったらこのIPアドレスだと。
いう表みたいなものがあるわけですよ。
そこで変換しながら、皆さんの見やすいURL(ドメイン)を見せてあげている。という仕組みになっているんですね。

最後に、図書館はどこになりますか?

この図書館がある場所。
これをウェブでは、ホスティング(位置付け)と呼んでいます。
→皆さんが作ったプログラミングをどこかのサーバーに置かないといけないんですよ。
→これをサーバーにホスティングするって言います。

リポジトリホスティングサービス

実際の例で、ITの世界でもう一度説明して行きます。

例えば、皆さんこの記事は私のブログで読んでいるかと思うんですが。

https://kazuhiromouri.com/のようなURLになっているかと思います。
このURLにみなさんどうやってアクセスしているのか?というと。

chrome/sarfariなどからアクセスしていますよね?

chrome/sarfariこの見るツールの事をブラウザと読んでいます。

https://kazuhiromouri.com/これは、皆さんが理解できるドメインですよ。
ここから、機械が理解できるIPアドレスにDNSサーバーを使って変換しなきゃいけない。
変換するとどうなるかというと、「34.230.○○○〜〜」っていう用な謎の文字列になるんですね。

これをIPアドレスと読んでいます。

プラウザが「データをください」というと、HTML/CSS/Java Scriptさっき言ったこの3つですね。
本の場所/綺麗な装飾/カエルがぴょんとこの3つのセットですよ。これがサーバーから送られてきて、皆さんはページが見れているんですね。

ホスティング

https://kazuhiromouri.com.herokuapp.com

herokuっていうのが便利なツールでして。皆さんに作ったプログラムをホスティングする場所を提供してくれているサービスがあるんですね。
今回でいうとherokuっていうのが、ホステイングしているサービスで、このkazuhiromouri.comのページですね。

herokuのサーバーにホスティングされている。herokuのサーバーの上に立っていることになって居ます。

今回の用語

HRRP通信
HTML
CSS
Java Script
URL
IPアドレス
ドメイン
DNSサーバー
ホスティング
プラウザ

この10個をちゃんと理解をして、もっと深めるためにググってちゃんと理解してそれをアウトプットしてください。

最後に、HtML/CSS/Java Scriptの用語と仕組みを知っても、この3つのプログラムかけるようになりたいよって皆さん思うと思います。
今回どう調べたら良いか、何を知らないといけないかっていうのを簡単にご説明しますので。
これからお伝えする内容を是非ググって勉強して頂ければと思います。

HTML

皆さんにお伝えすることはありません。
皆さんググってください。

おい!なんだよって思うかもしれませんが。
ただオススメのサービスがあります。
「ドットインストール」が個人的にオススメです。

これで、HTMLの初級編とかであると思うので。
それで、HTMLをどうやって作ることができるか?ということが理解できるかと思いますので。
是非使ってみてください。

CSS

綺麗な装飾のCSSですよ。
これっていうのは、めちゃくちゃ苦労します。
この装飾をやりたいんだけどどうやって良いのかわからないっていうのが、なんども直面します。
それを解決するために、この用語を理解していればある程度わかるぞっていうのがあります。

Floats
Positioning
Display
Box Model
CSS Grid
Flex Box
BEM

この7個!このブログでは説明しません。なぜならググるとわかるから。
説明しませんが、皆さんがググってちゃんと理解して、それを使ってCSSを作ってみてください。

これもドットインストールなどを使って学ばれると、より早いのかな?と思います。

Java Script

カエルがぴょんですよ。

これもCSSと同様に重要なワードをご説明していきますので。
これを是非ググってください。

Hoisting
Event Bubbling
Scope
Prototype
Shadow DOM
strict
Ajax/XHR

これが何かを理解していると、皆さんがJava Scriptを書きたいときに。
これは何を使えば良いのか!っていう風にすぐにググれると思いますので。
まずはこの8個がなんなのか?っていうのを理解していると良いかと思います。

基本的な文法などは、ドットインストールなどを使って学ばれると比較的早く習得できるかなと思います。

 

 

コメント