最近フロントエンドのお仕事は継続的に依頼があって、フロントエンドエンジニアが不足してるんだなぁということをひしひしと感じてます。
一昔前から比べるとWebアプリケーション構築の仕事がかなり増えていますね。
ITエンジニアは他と比べて超売り手市場と言われていますが、中でもフロントエンドエンジニアの需要は年々増しているんじゃないでしょうか。
※個人的にもお仕事受けられなくて結構な数断っていますから本当にそう思います。
フロントエンド技術はとてもおもしろいのですよ。
8年続けられているのもそれなりに理由があります。
ぼくとしては少しでもフロントエンドエンジニアに興味を持っている方の力になりたい。
そこで、今日はフロントエンドエンジニアがどんなことをするのかについて紹介します。
フロントエンドエンジニアとは何をするのか？
フロントエンドという単語を聞いてもどこかぼんやりした印象ではないでしょうか。
フロントエンドエンジニアの主な役割は、一言で言うとデザインデータを元にWebサイトを構築してブラウザ上で見れる状態にすることです。
みなさんがインターネットをみるときに使う、ChromeとかInternet ExplorerとかEdgeなどのブラウザがありますよね？
フロントエンドエンジニアはそのブラウザが主戦場になります。
ブラウザでフロントエンドエンジニアが書いたプログラムを実行することで、Webサイトが表示されてリンクやボタンがクリックできたりするのです。
つまりフロントエンドエンジニアの役割は、ブラウザでWebサイトを表示するためにプログラムを書いて、ユーザーの皆さんがWebサイトを閲覧できる状態にするのが主なお仕事です。
フロントエンドエンジニアに必要な知識や技術は？
ブラウザで動くプログラムを作るのがお仕事なのですが、では具体的にどういったプログラムを書くのか。
ブラウザで実行できる言語（プログラム）の種類はいくつかありますが、その中でも主にHTML、CSS、JavaScriptの3つの言語を利用してWebサイトを作ります。
HTML（ハイパーテキストマークアップランゲージ）
まず1つめのHTML（エイチティーエムエル）はサイトを文章で構造化するための言語です。
HTMLタグという構造化するためのタグで文章を囲うことで、このサイトでは何が書かれているのかということをブラウザに示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>こんにちは！イソップブログです。</p>
</body>
</html>
上記のコードは簡単なHTMLで、このHTML言語をブラウザが解釈すると次のように画面に表示します。
ブラウザがHTMLタグを解釈して、その内容を表示するのです。
例えばブログの場合、記事のタイトルや日付、ブログの本文が表示されると思いますが、
ブラウザの裏側ではHTMLタグでそれぞれブラウザに認識できるようにコードが書かれています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>イソップブログ</h1>
<h2>フロントエンドエンジニアが求められている</h2>
<div>2018年4月28日</div>
<p>フロントエンドエンジニア...<p>
</body>
</html>
適切なタグを使ってサイトを構造化することで、そのサイトがどんな内容のサイトなのかを表現することができます。
3つの言語の中でもHTMLはWebサイトのベースとしての役割を担っています。
CSS（カスケーディングスタイルシート）
そして次にCSS（シーエスエス）ですが、CSSはHTMLで構造化されたサイトの見た目を装飾するための言語です。
CSSはHTMLと密接に関わり合っています。
次のコードを見てください。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSSここから -->
<style>
p {
color: red;
}
</style>
<!-- CSSここまで -->
</head>
<body>
<p>こんにちは！イソップブログです。</p>
</body>
</html>
HTMLで解説したコードにCSSを追記しました。
styleタグを追加して、その中にCSSが書かれています。
この例では、pタグで囲まれた文字色を赤に指定しました。
実際の表示は次のようになります。
このように、CSSで文字の色や大きさなどの見た目の装飾を行い、Webサイトの見た目を作っていきます。
サイトのほとんどのデザインをCSSで再現することになり、昨今のCSSはとても複雑な表現もできます。
また簡単なアニメーションなどもCSSで行うことができるのも特長です。
JavaScript（ジャバスクリプト）
最後にJavaScriptです。
JavaScriptはHTML,CSSとは違いプログラムコードを書いて、動的にHTMLを書き換えたり、CSSを操作したり、複雑なアニメーションを作れる言語です。
たびたびJS（ジェイエス）と省略して呼ぶことが多いです。
JavaScriptはCSSのようにHTMLコード内に記述できます。
例えば、文字をクリックしたときにクリックした文字を書き換えたいとしましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>こんにちは！イソップブログです。</p>
<!-- JavaScriptここから -->
<script>
document.querySelector('p').addEventListener('click', function() {
this.innerHTML = 'クリックされました。';
});
</script>
<!-- JavaScriptここまで -->
</body>
</html>
上記のようにJavaScriptを書くことで、「こんにちは！イソップブログです。」と表示されているテキストをクリックすると、「クリックされました。」に文字列が変更されます。
See the Pen QrdodO by Youhei Isokawa (@yuhiisk) on CodePen.
JavaScriptはこのようなプログラムを書くことで、サイト閲覧者がクリックなど行ったときに何かの処理を実行したり、タグの内容を書き換えることができるのです。
昨今の動きのあるWebサイトは、大体がJavaScriptを用いて作成されています。
さいごに
ということで少し駆け足でしたが、フロントエンドエンジニアは何をする役割なのかを紹介しました。
フロントエンドエンジニアとは、HTML,CSS,JavaScriptを扱ってサイトを構築するのが主な仕事です。
これから勉強したいという人には、プロゲートやドットインストールあたりでまず基礎を学んではどうでしょうか。
とりあえずミニマムで始めてみて、楽しかったらTECH::CAMP（プログラミングスクール）で実践的な内容を勉強できればベストですね。
おそらくプロゲートやドットインストールでは途中で挫折すると思うので、プログラミングスクールにお世話になるのが賢い選択です。（プログラミングの独学は難しいですよほんと。）
月額12,800円で学び放題のTECH::CAMPは全国に教室がありますし、近くに教室が無かったとしてもオンラインでがっつり学べるので、地方の方もぜひ検討してみてはいかがでしょうか。
そこら辺の怪しいスクールに通うより信頼できますよ。