sugiken のメモ帳

知ったことを書いていく

フロントエンド言語って何??

プログラミング言語の分類のひとつである「フロントエンド」。今回はそのフロントエンド言語とは何なのか、を超ざっくりと説明します🤗
まださっぱりわからない方向けなので経験者は大目に…σ(^_^;)
 

 

プログラミングと一口にいっても、「言語」は沢山あります。星の数ほどあるという時もあります。

 
その中で「見た目」について書くのが「フロントエンド言語」です。(逆に裏方の仕事をするのが「バックエンド」と言われたり)
 
例えばウェブページであれば、まさに今見えてるモノはフロントエンド言語によって書かれています。
 
今回は特にウェブページを表示するのに使われるhtml、cssjavascriptの3つの言語についてです。
最近の大学生なら高校時代に情報の授業でやったことのある人もいるかもしれませんね!😊
 
それぞれの役割は以下の通り!

HTML
ウェブページにどんな要素を表示するかを書く
CSS
htmlを基にそれぞれの要素のデザイン(スタイル)を書く
Javascript
上記に加えて更に動きを追加するプログラミングを書く

 

文字だとわかりづらいので画像で見ていきましょう!
 
 
HTMLだけだと・・・?

f:id:kentear:20160428000608p:plain

これがhtmlだけで見たYahoo!のトップページです。先述した通りまさに要素だけの状態です。
タイトルの画像やメニュー部分の文字などが見て取れます。もちろん文字をクリックしたらそれぞれのページに飛んでいくので本来の機能は果たしています。
でもこれじゃあ少し味気ないですね?
 
 
CSSを追加すると・・・?
ここから「人に伝えるため」にデザインを追加していきます。つまりCSSを追加するのです。そうするとこのようになります!

f:id:kentear:20160428000749p:plain

だいぶ見やすくなりましたね?それはユーザーが使いやすいようにCSSでデザインを追加したからです。
この段階でいつも見ているとなんら遜色のないYahoo!だと思います。
 
 
おいおいJavascriptは・・・?
動きを表現するためのJavascript。画像だと難しいです><
ですが、上の画像の右側にある大きな広告欄。広告によってはユーザーの目を惹くために華麗に動いたりしますが、Javascriptがないとそういう人の目を惹く仕掛けを作れなくなります。
他にもユーザーの利便性向上のためにも使われます。これをインタラクションデザインなどと言います。(興味のある方は調べてみてください!)
 
 
まとめ
以上3つの言語を用いてウェブページのフロントエンドは構成されています。しかもこの3つは初心者でも比較的簡単に学習できます!理由はきっと「すぐに目で見て楽しめるから!」エンジニアは結構地味な作業が多いと聞きますが、フロントエンドなら書いたコードがすぐ結果としてみれるので楽しいです!少しでも興味のある人は、以下の本やページを参考にちょっとだけ触れてみるのもいいかもしれません!
 
 

 ここなどで無料で勉強できるのでぜひ!😊