企業向け:採用ノウハウ

【採用担当者のためのIT知識】 フロントエンドエンジニアを採用する!①業務内容は?バックエンドとの違い、用語解説など

優秀なエンジニアの採用のために、採用担当者自身がIT知識を付けていく時代が来ています。本記事では「フロントエンドエンジニア」の採用を進めるうえで、採用担当者に欠かせないITの基礎知識を解説していきます。

記事の対象者

ITエンジニアのバックグラウンドがない方が、ITエンジニアの採用に支障のないレベルまで知識を付けることを目的にした記事です。そのため感覚的な説明も含まれます。ITエンジニアの採用を担当しているものの、ITエンジニアの知識がなく求人票が作成できない、現場の要件が理解できない、用語がわからない、候補者の絞り込みができないなど採用を進めるうえで不便を感じている方を対象に、基本から分かりやすくIT知識を解説していきます。

 

フロントエンドエンジニアの意味

そもそも「フロントエンドエンジニア」とは何を意味するのでしょうか。フロントはその名の通り「前面・正面」といった意味を持つ言葉です。フロントエンドエンジニアとは言葉通り「フロント」を扱うエンジニアを指します。といってもなかなか理解が難しいとおもうので、Webサイトを例にとって説明していきましょう。

 

 

フロントエンド:

 

主に私たちユーザーが実際に見ることができて、操作する部分のことを「フロントエンド」または「クライアントサイド」と呼びます。「フロントエンド」と「クライアントサイド」は同じものと理解して問題ありません。

 

 

例えば転職サイトに訪れた時にブラウザに沢山の求人情報が表示されますよね。Webデザイナーが色や配置などを設計しますが、その時点ではWeb上で見ることはできません。フロントエンドエンジニアは私たちが求人情報をWeb上で閲覧できるようにHTMLやCSS、JavaScriptといったプログラミング言語を使用して、サイトデザインをコードに落とし込んでいきます。昨今のフロントエンドエンジニアにはコーディングだけではなく、デザインやUI/UX、コンテンツ、SEOの技術など幅広い知識とスキルが求められます。

 

コーダー/マークアップエンジニア/フロントエンドエンジニア

フロントエンドエンジニアを調べていると、コーダーやマークアップエンジニアという言葉を見かけることもあると思います。コーダーやマークアップエンジニアは一般的にHTML/CSSを使ってコードの作成をする人を指していることがほとんどです。

 

 

フロントエンドエンジニアは、コーダー・マークアップエンジニアのスキルをすべて満たす上位職という認識が一般的です。HTML/CSSの技術に加えJavaScript、PHPの理解、またフレームワークやライブラリを使用した開発スキル、UI/UXの理解など幅広いスキルを求められます。企業によって求める範囲は変わりますが、フロントエンドエンジニアはマークアップエンジニア・コーダーを包括しているという認識で大きなずれは生じないでしょう。

 

 

フロントエンドとそのほかの領域

フロントエンドエンジニアの事を理解するためには、他の領域を扱っているエンジニアのことも理解しておくと良いでしょう。

 

フロントエンドとバックエンドの違い

「フロントエンド」があるなら「バックエンド」があるはず。と想像できている方も多いと思います。「フロントエンド」とは違い「バックエンド」は私たちから見ることのない部分のことを指します。「バックエンド」は「サーバーサイド」と呼ばれることもあるので覚えておくと混乱せずに済むでしょう。

 

 

「フロントエンド」⬄「バックエンド」

「クライアントサイド」⬄「サーバーサイド」

 

 

先ほどの求人サイトを例に考えてみましょう。私たちが気になる求人を見つけた時に「個人情報を入力して応募する」をクリックしたとします。このフォームのデザインなどを作成しているのがフロントエンドエンジニアです。一方で入力された個人情報をデータベースに保存できるように設計したり、応募ボタンが押されたときに特定の情報をデータベースから引っ張り出しページに表示させる、といった様々なシステムの構築を行います。バックエンドと言っても幅広い役割がありますが、そちらはバックエンドエンジニアの記事で解説します。

 

デザイナーとフロントエンド

フロントエンドがWebで目に見える部分を担当します。そしてデザイナーも同じように見える部分を担当します。とするとその役割の違いは何でしょうか?では求人サイトの「応募ボタン」を想像してみましょう。

 

 

  • デザイナー:ボタンの色やサイズ、余白の設計、求人のどの位置にボタンを表示するか、クリックすると何色に変わるのかといったデザインの部分を設計
  • フロントエンドエンジニア: HTMLやCSSといったプログラミング言語を使用してデザイナーが作成したボタンデザインをWeb上で見えるように実装する

 

 

フロントエンドエンジニアであっても自分でデザインを作成するデザイナー寄りの人もいるため、はっきりした境界線がない場合もあります。

 

フロントエンドエンジニア向けの求人票を作成するときは:

 

採用の要件にもよりますが、エンジニアを募集する際に「フロントエンドエンジニア募集」や「バックエンドエンジニア募集」という表現をよく使います。IT知識がない場合はプログラミング言語ではなくポジションで求人を記載する方が分かりやすいという利点もありますが、プログラミング言語はもちろん、ライブラリやフレームワーク(後述)の使用実績など具体的なスキルを記載して求人に具体性を持たせるのもおすすめです。

 

一方でバックエンドエンジニアが求人を探す場合は「Ruby」「Python」などのプログラミング言語で検索するエンジニアの方が多いため求人票を書く際は「プログラミング言語」で検索に引っかかるように作成してくのも戦略です。

 

 

出典:「フロントエンドが足りないって、本当?」難波由夏(株式会社grooves)~採用担当×採用メディア×採用コンサル三者から見たエンジニア採用裏話

 

フロントエンドエンジニアの仕事内容は?

フロントエンドエンジニアの仕事内容を理解するためには彼らが使用するプログラミング言語を理解する必要があります。フロントエンドエンジニアが使用するプログラミング言語は「HTML」「CSS」「JavaScript」の3つに分類されます。バックエンドの使用言語が無数にあるのと比べると非常に覚えやすいですよね。では、それぞれの言語で出来ることと、それらをどのように使用して仕事をしているか見ていきましょう。

 

HTML(HyperText Markup Language)

HTMLはエンジニアであれば大体誰もが使用することのできる言語です。Webサイトのほとんどは、このHTMLで作成されています。HTMLは、マークアップ言語とも呼ばれ、Webサイトの文字情報や、どの部分を段落/見出しにするか、箇条書きにするかといったサイトの設計を行います。HTMLにもバージョンがあり、最近ではHTML5が主流ですが、一般的にHTMLと記載すればHTML5を指すのでバージョンについてはそこまで気にする必要はありません。

 

CSS(Cascading Style Sheets)

HTMLで記載された味気ない文字列の見た目をよくすることが出来るのがCSSです。フォントサイズや色、見出しのデザインなどを装飾して、人が見やすいサイトを作成することができます。HTMLやCSSは厳密にはプログラミング言語とはみなさないケースもありますが、採用担当者のレベルであればHTMLやCSSの役割を知っておくだけで十分でしょう。

 

JavaScript

HTMLやCSSのみでWebサイトを作成することも可能ですが、サイトに動きを付けたいと思ったときに使用するのがJavaScript(ジャバスクリプト)と呼ばれるプログラミング言語です。例えば画像にカーソルを載せた時に、画像を拡大させたり、ポップアップを表示させたりといった動きを実装できます。外部サイトですが、JavaScriptで出来ることがまとまったサイトなどをみると、言語の役割が想像しやすいと思います。

 

 

出典:【ざっくりわかる!】JavaScriptでできること15選 まとめてみた

 

 

[ポイント]

  • よく聞くJavaと響きは似ていますが全く違う言語なので混同しないようにしましょう
  • 大文字と小文字の使い分けは非常に重要です。Javascriptやjavascriptと記載しないように注意しましょう。

 

TypeScript(タイプスクリプト)

TypeScriptはJavaScriptを拡張したプログラミング言語で、互換性があるためJavaScriptと併用することができます。具体的にはTypeScriptで書いたコードをJavaScriptに変換して使うのが一般的です。JavaScriptと比べて、大人数が関わる開発の際にもエラーを防ぎやすいという特徴があり注目が高まっています。

 

 

フロントエンドエンジニアはこれらのプログラミング言語を駆使して、ユーザーが直接目にする部分を作成していきます。Webサイトの作成であれば、設計の段階から企画に関わり、デザイナーやサーバーサイドとのコミュニケーション、実際のコーディング、UI/UX設計など幅広い業務に携わります。ただコードを書くだけでなく、ユーザーが実際に利用するインターフェイスを作り上げる責任の大きい仕事をしているのがフロントエンドエンジニアです。

 

フレームワークとライブラリを理解する

エンジニア採用をするうえでワークフレームとライブラリを理解するのも重要です。初めて耳にするという採用担当者の方も多いと思うので、分かりやすく解説してきます。

 

 

フレームワークもライブラリには「一定の機能を実装するためのコードの塊」が保存されています。概念としては、よく使う汎用的な機能は一からコーディングするのではなく、みんなで使えるように共有できる所に保管しておいて、必要な時は参照できるようにしたら便利だよね、という考え方です。

 

ライブラリとは

よく使うプログラムをまとめたものを「ライブラリ」と呼びます。ライブラリは言葉の通り「図書館」を指しており、汎用化された便利なプログラムが保存されています。例えば最近よく見る「Googleアカウントを利用してログインする」という機能。一から自分でコードを書くとなると大変ですが、よく使う機能なのでライブラリにある他の人が作成したコードを流用することで、効率的に早く機能を実装することが出来ます。

 

フレームワークとは

フレームワークは特定のアプリケーションを効率よく作るために「全体の処理の流れが実装されており、その中の一部の具体的な処理を自分で実装して、はめ込めるようになっているシステム」*の事を指します。このはめ込めるようになっている部分をホットスポットと呼びます。

 

出典:Qiita フレームワークとライブラリの違い

 

フレームワークとライブラリの違い

採用担当者のレベルで両者を厳密に区別して理解する必要はほとんどありませんが、せっかくなので外部サイトで説明されていた例をご紹介します。

 

 

建築で例えた場合:

例えば洗面所に蛇口をつけたい場合お湯を出すための部品と、お水を出すための部品、蛇口などパーツで準備されているものから選んで使うのがライブラリ。お湯と水が出し分けられるようになっている蛇口が既に枠組みとしてあるのがフレームワークなイメージで捉えてみました。*

 

 

*出典:JSフレームワークとライブラリがごっちゃになっている話

 

フロントエンドのライブラリとフレームワーク

求人票を書く際にも「Vue.js(フレームワークの一種)を用いた実装経験」といったライブラリやフレームワークに言及するのが一般的。ライブラリやフレームワークの名前がプログラミング言語と一致すると採用活動が進みやすくなるはずです。フロントエンドの採用をする場合は下記のJavaScriptのライブラリ・フレームワークを理解する必要があります。

 

 

ライブラリ

  • jQuery(ジェイクエリー)
  • Redux(リダックス)

 

 

フレームワーク

  • React(リアクト)
  • Vue.js(ビュージェイエス)
  • Angular(アンギュラー)
  • Nuxt.js(ナクストジェイエス)

 

 

まずは名前を聞いて、JavaScriptのライブラリ・フレームワークということが分かればOKです。それぞれの違いや特徴については別の記事で別途詳細を紹介します。

 

フロントエンドに求める知識/スキル

フロントエンドエンジニアに求められる知識やスキルを理解しておくと、採用活動の際に候補者の絞り込みや要件の定義がスムーズにいきます。

 

コーディングスキル

第一に必要なのはコーディングスキルです。上で紹介した3つのプログラミング言語「HTML」「CSS」「JavaScript(TypeScript)」が基本となります。これらを適切に使用しユーザーが実際に使う画面を作成していくスキルが重要になってきます。

 

UI/UX設計スキル

UI(ユーザーインターフェイス)/UX(ユーザーエクスペリエンス)設計スキルとはWebの情報の表示の仕方(デザイン、フォント、サイト内導線)などをユーザー目線に立って改善し、より顧客の体験を向上させるためのスキルです。Webサイトなどを見ていて、ボタンの位置がわかりにくかったり、字が小さすぎて読みにくかったりという経験をしたことはないでしょうか?一つ一つは小さなストレスですが、改善によって早期離脱のリスクを下げることができます。フロントエンドエンジニアが扱うのはUI(ユーザーインターフェイス)全般ですので、よりパフォーマンスの高い設計をするためにもUI/UX設計スキルを持っていると評価につながりやすくなります。

 

CMS構築スキル

CMS(コンテンツマネジメントシステム)の台頭によって、コーディングの知識がなくても誰でも簡単にWebサイトの制作が出来るようになりました。代表的なCMSにWordPressがあります。サイトリリース後のコラム管理などが比較的簡単に出来るので、WordPressをベースにした開発を依頼する企業も増えてきています。今後はCMSのカスタマイズといったスキルもフロントエンドエンジニアに求められてくるでしょう。

 

SEOスキル

SEOとはSearch Engine Optimizationの略で検索エンジン対策を指します。狙ったキーワードで検索されたときにサイトが上位表示されるように設計するのはWebサイトの設計上でも重要な施策です。フロントエンドエンジニアとしてもSEOスキルを持っておくことでより良いWebサイト設計が行えます。

 

サーバーサイドの理解

フロントエンドエンジニアであってもサブスキルとしてサーバーサイドの理解をしておくことは非常に重要です。サーバーサイドエンジニアとのコミュニケーションやサーバーサイドの動きを組み込んだフロントの設計ができるのは優秀なフロントエンドエンジニアの特徴です。

 

フロントエンドエンジニアの資格はある?

フロントエンドエンジニアを採用する際に、採用基準となる資格があると評価がしやすくなりますよね。フロントエンドエンジニアが取得していると実力の証明になる資格としては下記のようなものがあります。

 

 

  • HTML5プロフェッショナル認定試験
  • ウェブデザイン検定
  • 基本情報技術者試験
  • Webクリエイター能力認定試験
  • ウェブ解析士
  • CIW

 

 

資格があれば必ず優秀なフロントエンドエンジニアである、といい切れるわけではありませんが、採用の際の基準として保有している資格をチェックしてみるのもおすすめです。

 

フロントエンドエンジニアを理解して採用を進めよう

フロントエンドエンジニアの仕事内容や用語について簡単に説明してきましたが、理解は深まったでしょうか?エンジニアの採用担当者の場合、自分でコードを書くといった知識までは必要ありませんが、用語の理解やどの解像度で会話をしているのか、を理解して採用を進めていくのは重要なスキルです。本記事の中に分からない単語があれば、自社のエンジニアに聞いてみる、Webで検索してみるといった方法でより知識を深めていきましょう。

 

 

後編ではフロントエンドエンジニアの平均年収や母集団を解説しています。合わせて読んでみてください。

【採用担当者のためのIT知識】 フロントエンドエンジニアを採用する!②平均年収や求人応募の時にエンジニアが気にしているポイントは?

 

ページ上部へ戻る