キャラ講義

会話で使われる用語パート2 ~フロントエンド~

会話で使われる用語パート2~フロントエンド~
つよぽん
つよぽん

 

みゆき
みゆき

前回は、ディレクトリパスについて勉強したよね^^

今日はフロントエンドバックエンドについてだっけ?

つよぽん
つよぽん

そうだね^^

ただフロントエンドの説明だけでも長くなると思うから、

今日はフロントエンドについて話して、

バックエンドはまた次教えるね(^^)

まこと
まこと

はーい!

みゆき
みゆき

はーい!

概要
  • フロントエンドは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で出来ること
  • タグと言われるものを使ってページの構造を定義する
  • タグにはたくさん種類があって、画像表示用、リンク用、タイトル用などのタグがある
  • 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ページ構造Webページ構造
まこと
まこと

そうそう!

こういうの意識してHTML書いている!

みゆき
みゆき

なるほどねー

つよぽん
つよぽん

ただHTMLでは構造の定義を書いていくんだけど、

HTMLだけだとそれぞれのパーツを意図したところに置くということは出来なくて、

デザインを整えるにはCSSを使うんだ^^

CSSって?

CSSで出来ること
  • CSSでデザイン(スタイル)を整える
  • 背景や文字の色を変えたり、文字の大きさを変更できる
みゆき
みゆき

え?

HTMLでWebページの構造の定義しているなら

それだけで十分じゃないの?

つよぽん
つよぽん

HTMLは構造の定義を行うって説明したけど、

さっきの画像を例にすると、

HTMLで

「ヘッダーでひとまとめ」、「メニューでひとまとめ」って感じグループ分けして、

CSSで

それぞれのグループを「右上に配置」、「左下に配置」するみたいなイメージを持ってもらえたらとわかりやすいかな?

まこと
まこと

さっきの画像でいうとCSSで

「アイコンを右上に配置」、「サイドバーを右下に配置」

って感じだよね?

つよぽん
つよぽん

そうそう!

そんなイメージで良いよ^^

さっきも参考にに使ったMDNの

CSS: カスケーディングスタイルシート

を見ると見栄えを表現するために用いられるって書いているね^^

みゆき
みゆき

なるほどね~

カスケーディングスタイルシートだから

デザイン、つまりスタイル変更の役割をもつのね〜

なんとなくだけど、HTMLとCSSの役割わかってきた気がする。

とりあえず、

  • HTMLでWebページ構造の定義
  • CSSでWebページの見た目を整える

って認識でいれば良いのね^^

つよぽん
つよぽん

うん!

じゃあ最後にJavaScriptの説明に入るよ^^

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サーバーのやりとりの流れWebブラウザとWebサーバーのやりとりの流れ
つよぽん
つよぽん

上の図はさっきまことが説明したものをまとめたもので、

例としてTwitterのタイムラインの続きを表示するまでの流れを説明すると

  • JavaScriptを使ってクライアント(Webブラウザ)からWebサーバーにタイムラインの続きのデータをリクエストする
  • Webサーバーはクライアントからのリクエストを受け取りタイムラインの続きのデータををレスポンスデータとしてクライアントに渡す
  • クライアントはWebサーバーから受け取ったデータを元にJavaScriptでHTMLのコードを動的に追加してタイムラインの表示を増やす

こんな感じになるよ^^

みゆき
みゆき

データの流れはなんとなくわかったけど、

さらっと新しい言葉言葉がいろいろと出てきた…

つよぽん
つよぽん

JavaScriptを使ったサーバーとのやりとりでよく使う言葉だから

ここで一緒に覚えておこう!

JavaScriptとサーバーのやりとりでよく使われる言葉
  • クライアント: フロントエンドと同じ意味
  • リクエスト: サーバーに対して何かしらの依頼をなげること
  • レスポンス: リクエスト元に何かしらデータを渡すこと
  • 動的: リクエスト投げる前と後でHTML、CSSの内容が変わること
みゆき
みゆき

クライアントって言葉も聞いたことあるけど、

フロントエンドと同じ意味なのね〜

まこと
まこと

リクエスト、レスポンスはセットで覚えておいたほうが良いよね!

リクエスト(依頼)に対してレスポンス(返事)があるみたいな感じに^^

つよぽん
つよぽん

そうだね^^

そして、動的って言葉はフロントエンドに対して使うときと

バックエンドに対して使うときで微妙にニュアンスが変わってくるけど、

大きな意味でいうと、リクエストに対するレスポンスのデータ(結果)が

毎回同じとは限らないと感じだよ^^

みゆき
みゆき

毎回同じとは限らない?

つよぽん
つよぽん

例えば、

index.htmlっていうHTMLファイルを用意して

そのファイルを開いたとしても

JavaScriptで変更を加えることをしなければ毎回同じ表示になるよね^^

そういうのを静的っていうんだよ(^^)

みゆき
みゆき

動的があるから静的っていう言葉もあるんだね^^

フロントエンドだけでも今日はもうお腹いっぱいだよ〜

まこと
まこと

そうだね^^;

今フロントエンドを勉強しているけど、

それでもよく理解してなかった言葉も出てきたし、

良い復習になりました!

つよぽん
つよぽん

それじゃあ今日の話はここまでにしようか^^

次はバックエンドの話をするから、

それまで今日学んだことを復習しておいてね〜

みゆき
みゆき

は~い^^

まこと
まこと

了解です!

まとめ
  • フロントエンドHTMLCSSJavaScriptからなる
  • HTMLはWebページの構造を定義する
  • CSSはデザインを整える
  • JavaScriptはHTML、CSSの変更やサーバーとのやりとりを行う
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です