採用条件から学ぶべきもの - フロントエンド基礎編 -

はじめまして、マツガナイトです。

先日、「中途採用の面接の話」という記事を投稿しました。面接って苦手だなと思う人いるかもしれません。僕も苦手です。

面接で聞かれることを前持って準備しても当日テンパってよくわからないこと言ってることもありますよね。面接では聞かれることで、私がエンジニアであって、面接では必ず「求める経験・スキル」という話題がでてきます。今日はそのスキルに限定した話をしていこうと思います。

（フロントエンドエンジニア編ですが、多分この記事だけでは治らないと思います。何回か分けて投稿していきます。あとバックエンド、インフラ、その他諸々なことも投稿していきます。）

フロントエンドってなに

「フロントエンド　とは」でググると大体出てきますが、意味としては

「Webサイトの視覚的な部分を担当する」です。

みなさんが見てるこのnoteの記事だったり、その他たくさんWebサイトが存在すると思いますが、それら見ている部分を担当するのがフロントエンドエンジニアです。

何ができたら良いのか

ここから本題です。求めているフロントエンドエンジニアになるべきにはどういうことをすればいいか。

とある質問をします。

「Webサイトってどのように作られていますか？」

この質問に答えられたらあなたはいったん合格だと思います。まあ私も正確に答えられないのがつらいところ。

Webサイトはどのように作られて表示されているか

「Webサイトがどのように作られていますか？」

と

「Webサイトはどのように表示されていますか？」

は似てるようで違う。後者の話は後ほどします。

Webサイトがどのように作られているかという答えは、簡潔にいうとHTML/CSS/JavaScriptです。もっと細かくいうと、Webサイトの土台を構成するのがHTML、その土台にデザインを付け加えたのがCSS、そしてユーザのアクションによって動的に処理を加えるのがJavaScriptです。

で、この3つの言語で作られたものが一般的にWebサイトと言っています。正確にいうとJavaScriptを用いないサイトもあります。そのサイトを静的サイト、用いるサイトを動的サイトと呼んだりもします。

さらにさらに細かくいうと

HTMLはpugといって効率よくコーディングするためのHTMLテンプレートに置き換えられる場合があります（最近はあまり見かけない）。

CSSはSassといってCSSをさらに拡張したプログラミング言語やBootStrap,GoogleMaterialDesignのようなフレームワークを使用する場合があります。

JavaScriptはいまJavaScriptフレームワーク時代となり、React,VueなどのフレームワークやTypeScriptのような静的型付け言語を使用するようになっています。（CSS in JSといってJavaScriptでCSSを書くということもできます。）

HTML/CSS/JavaScriptは単純にそれらを書くのではなく、形を変えて開発者にとって「効率の良い手法」に変わっています。ここらへんの話は後々します。とりあえず原点はHTML/CSS/JavaScriptです。

ブラウザの仕組みこそ重要

じゃあ、Webサイトを作ったけど、これをどうやって表示すればいいの？っていうのが次の質問となります。

この答えはブラウザレンダリングです。何それってなると思いますが、簡単に言ってしまえば、ブラウザ（Google Chrome,Safari,FireFox等）で表示する技術のことです。作成したHTML/CSS/JavaScriptはブラウザによって解析されます。その解析された結果がみなさんが見ているWebサイトの表示画面となります。

解析というざっくりな表現をしましたが、

リソース読み込み、JavaScript解析（字句解析、構文解析）、CSSレイアウトツリー構築、レンダリング結果の描画

というものがあります。Webサイトを表示するだけでもこのような仕組みがあります。Webブラウザは年々アップデートを重ねていますが、レンダリングの技術等に変化は特にないです。ブラウザの仕組みは知っておいても損はないと思います。

まとめ

いかがだったでしょうか？

フロントエンドエンジニアとはWebサイトの視覚的な部分を担当する人を指しています。

このエンジニアになりたいから勉強するにしても、本質が大事です。Webサイトが「どう作られて」「どう表示されて」いるか、この部分を頭に入れておいたほうがいいとおもいます。

「Webサイトがどのように作られていますか？」
→HTML/CSS/JavaScriptで作成される。

「Webサイトはどのように表示されていますか？」
→ブラウザレンダリングを用いて表示する。

あと改めてタイトル回収すると、採用条件では「ブラウザの仕組みを理解したWebサイトの作成」という条件たまに見かけます。

Webサイトが「どう作られて」「どう表示されて」いるかをしっかり理解していれば多分答えられると思います。

この記事ではざっくりお話ししましたが、次回の記事からはそれぞれの言語や機能をしっかり見ていきたいと思います。