前回は、ディレクトリ、パスについて勉強したよね^^
今日はフロントエンド・バックエンドについてだっけ？
そうだね^^
ただフロントエンドの説明だけでも長くなると思うから、
今日はフロントエンドについて話して、
バックエンドはまた次教えるね(^^)
はーい！
はーい！
- フロントエンドはWebブラウザで表示される部分
- HTMLはWebページの構造を整える言語
- CSSはWebページのデザインを整える言語
- JavaScriptはWebページの内容を変更したり裏側でサーバーとやりとりをするプログラミング言語
フロントエンドとは？
まこと、最近プログラミングの勉強しはじめたけど、
フロントエンドとバックエンドのどっちを勉強しているのかな？
オレが今勉強しているのがフロントエンドなのかバックエンドかわからないけど、
Webページを今作ってて、HTML、CSS、JavaScriptを使っているかなー
HTML、CSS、JavaScriptってことはフロントエンドの勉強をしているんだね^^
HTML、CSS、JavaScript。
よく仕事でクライアントとやり取りする時に使う言葉だけど、
それぞれがどんなことやるのかざっくりと把握しているくらいで、
正直なところよく分かってない。。。
まことがさっき言ってようにWebページを作るには
HTML、CSS、JavaScriptを使うんだけど、
文字や、画像、動画など目に見える部分を作るのに構成されている
これらの技術はフロントエンドの技術だよ^^
目に見える部分ってことがフロントエンドってことは
目に見えない部分は何になるの？
目に見えない部分はバックエンドになるよ^^
最初のほうでも話したけどバックエンドはまた次回に説明するね(^^)
今オレがやっているのはフロントエンドのべんきょうだったのかー
目に見える部分(=Webページ)がフロントエンドってのはわかったけど、
さっき言ってたHTML、CSS、JavaScriptは具体的にどんなものなの？
HTMLって？
- タグと言われるものを使ってページの構造を定義する
- タグにはたくさん種類があって、画像表示用、リンク用、タイトル用などのタグがある
- HTMLの中でCSSとJavaScriptを読み込むことが出来る
HTMLから順番に説明するね^^
Web標準の技術がまとまっているMDNっていうサイトの「HTML 要素リファレンス」をみてみようか^^
<html>とか<body>のように「<>」って囲まれているものがタグになるよ(^^)
出た…
全く意味がわからないやつ。。。
今もちゃんと理解しているかって言われると微妙だけど
最近なんとなくわかってきた気がする^^
どんなタグを使えば良いかとかは都度Googleとかで調べながら
やっていけば問題ないさ^^
僕も100%理解しているかって言われるとそうでもないしねw
つよぽんも完璧にはわかってないのかい！w
ははw
実際にコードを書く際は完璧に理解する必要はないけど、
HTMLで何が出来るかだけ抑えておけば、
基本的には残りはGoogleで検索しながらやればWebページは作れるからね^^
そうそうw
オレもそんな感じで都度調べながらやってるw
さっきつよぽんが言ってた
「HTMLで何が出来るかだけ抑えておけば」
ってのが気になったけど、
HTMLではどんなことができるの？
HTML、CSS、JavaScriptでそれぞれ役割があって、
HTMLの役割はWebページの構造を定義することだよ^^
Webページの構造を定義ってどういう意味？
ここでいう定義っていうのは、
次の画像のようにヘッダー、タイトルなどのパーツを
Webページ上のどこに配置するか考えて定義することだよ^^
Webページ構造そうそう！
こういうの意識してHTML書いている！
なるほどねー
ただHTMLでは構造の定義を書いていくんだけど、
HTMLだけだとそれぞれのパーツを意図したところに置くということは出来なくて、
デザインを整えるにはCSSを使うんだ^^
CSSって？
- CSSでデザイン(スタイル)を整える
- 背景や文字の色を変えたり、文字の大きさを変更できる
え？
HTMLでWebページの構造の定義しているなら
それだけで十分じゃないの？
HTMLは構造の定義を行うって説明したけど、
さっきの画像を例にすると、
HTMLで
「ヘッダーでひとまとめ」、「メニューでひとまとめ」って感じグループ分けして、
CSSで
それぞれのグループを「右上に配置」、「左下に配置」するみたいなイメージを持ってもらえたらとわかりやすいかな？
さっきの画像でいうとCSSで
「アイコンを右上に配置」、「サイドバーを右下に配置」
って感じだよね？
なるほどね～
カスケーディングスタイルシートだから
デザイン、つまりスタイル変更の役割をもつのね〜
なんとなくだけど、HTMLとCSSの役割わかってきた気がする。
とりあえず、
- HTMLでWebページ構造の定義
- CSSでWebページの見た目を整える
って認識でいれば良いのね^^
うん！
じゃあ最後にJavaScriptの説明に入るよ^^
JavaScriptって？
- HTML、CSSの内容を動的に変更する
- 裏側でサーバーと通信を行う
HTML、CSSと比べてJavaScriptは一気に難易度が上がって
エラーに何度も苦戦しているよ…^^;
JavaScriptってHTML、CSSと比べると難しいの？
JavaScriptはプログラミング言語の1つで、
これが出来るようになったらエンジニアとして
出来ることが一気に広がるね^^
JavaScriptはプログラミング言語の1つって、
まるでHTMLとCSSはプログラミング言語ではないみたいに言うね。
うん、
HTMLとCSSはプログラミング言語ではなくて
マークアップ言語(HTML)、スタイルシート言語(CSS)で、
あくまでもWebページの表示と見た目を整える技術だから
プログラミングではないんだ！
マークアップ言語、スタイルシート言語って言葉は
今回はあまり気にしなくて大丈夫だよ^^
ふーん。
じゃあプログラミング言語ってのは
HTML、CSSと違ってどんなことができるの？
プログラミング言語はその名前の通りで
プログラムを記述する言語で、
プログラムとはあらかじめ決めた処理を適切なタイミングで実行することが出来るよ^^
例えば、Twitterのタイムラインで一番下までスクロールした時に
クルクルと回る読み込みマークとかよく見るよね？
あれは裏側でJavaScriptがTwitterのサーバーに
「タイムラインの続きをください」
ってお願いして、サーバーから続きのデータを受け取ったら
HTMLのタグを動的に追加して続きが読める仕組みになっているんだよ！
おお！
どんな流れで続きのデータを表示しているのかちゃんと理解しているね！
概念は理解しているけど、
実装がうまくいかなくてよくエラーになっちゃうんだよね^^;
ちょちょ、ちょっと待って！？
内容全く理解できないんですけど！(汗)
ゴメンゴメン^^;
言葉だけで理解するのは難しいから
次の図を使い流れ説明するね^^
WebブラウザとWebサーバーのやりとりの流れ上の図はさっきまことが説明したものをまとめたもので、
例としてTwitterのタイムラインの続きを表示するまでの流れを説明すると
- JavaScriptを使ってクライアント(Webブラウザ)からWebサーバーにタイムラインの続きのデータをリクエストする
- Webサーバーはクライアントからのリクエストを受け取りタイムラインの続きのデータををレスポンスデータとしてクライアントに渡す
- クライアントはWebサーバーから受け取ったデータを元にJavaScriptでHTMLのコードを動的に追加してタイムラインの表示を増やす
こんな感じになるよ^^
データの流れはなんとなくわかったけど、
さらっと新しい言葉言葉がいろいろと出てきた…
JavaScriptを使ったサーバーとのやりとりでよく使う言葉だから
ここで一緒に覚えておこう！
- クライアント: フロントエンドと同じ意味
- リクエスト: サーバーに対して何かしらの依頼をなげること
- レスポンス: リクエスト元に何かしらデータを渡すこと
- 動的: リクエスト投げる前と後でHTML、CSSの内容が変わること
クライアントって言葉も聞いたことあるけど、
フロントエンドと同じ意味なのね〜
リクエスト、レスポンスはセットで覚えておいたほうが良いよね！
リクエスト(依頼)に対してレスポンス(返事)があるみたいな感じに^^
そうだね^^
そして、動的って言葉はフロントエンドに対して使うときと
バックエンドに対して使うときで微妙にニュアンスが変わってくるけど、
大きな意味でいうと、リクエストに対するレスポンスのデータ(結果)が
毎回同じとは限らないと感じだよ^^
毎回同じとは限らない？
例えば、
index.htmlっていうHTMLファイルを用意して
そのファイルを開いたとしても
JavaScriptで変更を加えることをしなければ毎回同じ表示になるよね^^
そういうのを静的っていうんだよ(^^)
動的があるから静的っていう言葉もあるんだね^^
フロントエンドだけでも今日はもうお腹いっぱいだよ〜
そうだね^^;
今フロントエンドを勉強しているけど、
それでもよく理解してなかった言葉も出てきたし、
良い復習になりました！
それじゃあ今日の話はここまでにしようか^^
次はバックエンドの話をするから、
それまで今日学んだことを復習しておいてね〜
は～い^^
了解です！
- フロントエンドはHTML、CSS、JavaScriptからなる
- HTMLはWebページの構造を定義する
- CSSはデザインを整える
- JavaScriptはHTML、CSSの変更やサーバーとのやりとりを行う
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
