「フロントエンドとバックエンドの違いってなに？年収ってどれくらい？」
「HTMLコーダーとの違いなに？」
そんな質問をよく聞きますが、2010年ごろからよく聞くようになった用語です。
プログラミングを学びたい方や求人探しで見る機会が多いのではないでしょうか。
ただ「フロントエンド」を紹介する前に知っておいてほしい注意点があります。
フロントエンドという用語は非常に幅が広く、あいまいです。
どういった意味合いで利用されているかを読み解かないとキャリアの選択の失敗にもつながります。
IT業界に10年以上いる筆者が
- フロントエンドの用語説明
- フロントエンドエンジニアの仕事内容や年収の紹介
- バックエンドとの違い
- フロントエンドで利用するプログラミング言語やツール
についてしっかりと解説していきますので、失敗したくない方は必ず最後までお読みください。
目次で流し読み
フロントエンドとは？かんたんに3分で解説
フロントエンドとはブラウザ上で動くHTMLやCSS、JavaScriptのことを指します。
そのためフロントエンド（HTML、CSS、JavaScript）を実装するエンジニアを「フロントエンドエンジニア」と呼びます。
ブラウザ上で表現されるデザインや使いやすい導線設計（UI/UX）もフロントエンドエンジニアが担当することも多くあります。
わかりやすく表現すれば、フロントエンドというのはユーザーの入力を受け付けたり、情報を表示したりすることです。
フロントエンドとバックエンドと違いは「ユーザーの目に触れるかどうか」
フロントエンドとはブラウザで実行される範囲の技術や工程を呼びます。
逆にバックエンドは「フロントエンド以外のすべて」です。
つまりバックエンドとはブラウザではできないすべての技術・工程を呼びます。
例えば、
- 会員登録をしたときにデータベースへ登録する処理
- 受信したメッセージを通知する処理
- 商品を購入したときの処理
などです。
わかりやすく表現すると、フロントエンドとバックエンドと違いは「ユーザーの目に触れるかどうか」ということが言えると思います。
ユーザーの目に触れる「フロントエンド」に対して、バックエンドの存在はユーザーに気づかれることはほとんどありません。
家づくりで例えると、
- バックエンド：基礎や柱、配線など
- フロントエンド：カーテンや壁紙、小物など
です。
フロントは出来上がりのイメージに直結するおいしい役割と見ることができます。
フロントエンドエンジニアとは？仕事内容をかんたんに解説
フロントエンドエンジニアはフロントエンドの開発を担当するエンジニアです。
Webシステムを構築するために最適な技術や構成を考えるのが主な仕事です。
そのために、必要な知識と技術を持っていることはもちろん、ときにはデザイナーやHTMLコーダーと相談して最適な道を模索するといったアドバイザー的な役割がメインとなります。
具体的にどのような仕事をするのか見ていきましょう。
フロントエンドの求人から分かる仕事内容
それでは、求人情報からフロントエンドエンジニアの仕事内容を見ていきましょう。
今回は大手求人サイトのdoda（デューダ）のものを参考にします。
そのあとで仕事内容の解説をしていきます。
案件1：株式会社博報堂マーケティングシステムズ
業務内容
フロントエンドエンジニアの下に配属され、基本的なフロントエンド開発技術を学びながら、大手クライアントのWebサイトやアプリケーション等のコーディング業務を行っていただきます。
将来的には、フロントエンド実装技術を用いて、大規模Webサイト、プロモーションサイト、Webアプリケーションの提案・設計・実装を行います。
単純な設計、開発業務だけではなく日々アップデートされる最新技術をキャッチアップし、常に技術的な視点からの提案を重ねることによりクライアントの課題解決を実現します。
必要業務経験
必須条件：
- プログラミングが好きで個人でも設計、開発経験がある方
- クライアントやプロジェクトメンバーとのコミュニケーションが好きな方
歓迎条件：
- ネット広告会社やWeb制作会社、デジタルマーケティング支援会社、広告代理店での就業経験のある方
案件2：LINE Growth Technology株式会社
業務内容
LINEが運営するサービスの成長にコミットするGrowth開発領域を担当する新組織で、ブランディングサイトやイベントページの制作、またインハウスで利用されるツール・システムのUIコンポーネントの実装やHTMLテンプレートの制作・組み込み作業などにも幅広く関わります。
具体的には下記の業務を行います。
- デザイン、企画からの要求に応じたHTML／CSS／JavaScriptによるウェブフロントエンドの実装
- インハウスシステムのUI実装
必要業務経験
必須条件：
- HTML／CSS／JavaScriptへの専門的な知識
- UIコンポーネント、HTMLテンプレート制作の経験
- Webサイト制作全般に関する知識
- アクセシビリティ、ユーザビリティ、セキュリティに関する知識
歓迎条件：
- 大規模プロジェクトへの参加経験
- Webデザインの経験
案件3：株式会社TSUTAYA
業務内容
「TSUTAYA TV」のフロントエンド担当として、フロントの開発及び、サーバーサイドとの連携業務をご担当いただきます。
必要業務経験
必須条件：
- HTML、CSSを用いたWeb開発と運用の実務経験2年以上
- JavaScriptを用いたWeb開発と運用の実務経験2年以上
- Web標準に則ったコーディングの実務経験
- AltCSSまたはPostCSSを用いた実務経験
- コンポーネント指向ライブラリを用いたモダン開発の実務経験（React、Vue.js、Angular等）
- フロントエンドのユニットテスト経験
- git、githubフローでの開発経験
- webpack、gulp等を用いた開発環境の構築
仕事はUI周りがメイン
どの求人を見てもメインとなるのはUI（ユーザー・インターフェース）周りになっているのがわかります。
最近ではより直感的で快適な体験を提供するUX（ユーザー・エクスペリエンス）デザインも重要視されています。
自社サービス、自社システムのUIの開発からスタートし、徐々に企画、設計などの担当範囲を広げていくのが王道となるでしょう。
必要とされる技術はHTML／CSS／JavaScriptの3つが基本となります。
そのほか、開発プロジェクトに応じたツールを使いこなすスキルや、ユーザーが快適に利用できるように開発するUI・UXの知識が求められます。
HTMLコーダーとの違いは「設計者」と「表現者」
フロントエンドエンジニアとHTMLコーダーとの違いは「設計者」と「表現者」と言い表すことができます。
HTMLコーダーという名前で求人が出ていることもあり、混同してしまうことがあります。
HTMLコーダーというのはフロントエンドエンジニアやデザイナーが設計した画面をHTMLやCSSを駆使して「表現」するのが仕事です。
フロントエンドエンジニアと比べると業務範囲はより限定的になるでしょう。
Webデザイナーとの違いは「設計者」と「アーティスト」
フロントエンドエンジニアとWebデザイナーとの違いは「設計者」と「アーティスト」と言い表すことができます。
実は、Webデザイナーという言葉は広義で使われるケースがあり、一概に1つの業務をする職種として定義しきれていないのが実情です。
Webサイト全体を「デザイン」する、つまり、Web制作に関わる人を広義でWebデザイナーと呼ぶことがあるのです。
しかし、本来の意味でいえば、WebデザイナーというのはUI（画面）をデザインする人です。
フロントエンドエンジニアが設計したUI（テキストボックスや表など）を元に最適な配置で画面をデザインするのがWebデザイナーの仕事です。
そのため、Webデザイナーの中にはHTMLやCSSの知識を持ち合わせていない人もいます。
このように、職種によって求められる作業内容、スキルは微妙に違うのです。
フロントエンドエンジニアが必要なスキル
フロントエンドエンジニアにはどのようなスキルを見ていきましょう。
「HTML・CSS」は必須スキル
まず、サイトを表現するために必要なHTML・CSSは必須スキルです。
あらゆるフロントエンドの仕事をするのにこの2つは避けて通れません。
いわば土台となるスキルですね。
ほかにもさまざまなプログラミング言語が求められます。
プログラミング言語
フロントエンドにおけるプログラミング言語というのは表示制御を行うものが多いです。
HTML（HTML5）
マークアップランゲージといわれるもので、ブラウザが読み取って表示できるようにする言語です。
すべてのWebサイトはこのHTMLで作られています。
CSS（スタイルシート、Sass）
HTMLをどのように表示するのかというデザイン部分を担当するのがこのCSSです。
フォントの大きさ、色、文字の間隔、サイトの幅、デザインに関するありとあらゆることをこのCSSで表現します。
JavaScript（JS、jQuery、Ajax、React）
Webサイトをより動的に表現するために用いられることが多いです。
ボタンが動いたり、絞り込みをするとその場で表示が切り替わったりするなど、リッチな表現が可能になります。
Rails（Ruby）
Web系のベンチャーが採用するWeb開発のフレームワークです。
Ruby言語が日本人により開発されたこともあり、日本で人気です。
プログラミング言語の中では先端のアイデアを取り入れられているため「イケてる」言語と認識されています。
その分、バージョンアップが常に行われ、しっかり情報収集しないと2年程度で置いていかれるでしょう。
PHP
PHPは初心者でも構築しやすい開発環境で、プログラミングもしやすい言語です。
WordPressもPHPで動いています。
Web制作やフリーランスの世界ではPHPの案件が多いため、フロントエンドエンジニアが覚えておくと良いプログラミング言語です。
Java
Javaは企業のシステム構築に使われる言語です。
Oracleが提供しているため、信頼性が非常に高く保証もしてもらえるためです。
プログラミング言語としては非常にスタンダードな言語ですのでSIerなどではプログラミング研修で使われる言語でもあります。
企業向けの社内システムを提供する会社を目指す方は覚えておいて損はない言語です。
デザインツール
デザインツールはWebデザイナーが使うイメージがありますが、納品されてきたデータを活用するのはエンジニアですので、使える必要があります。
PhotoShop・Illustrator
デザインといえばAdobeが提供するPhotoshopとIllustratorが主流です。
「フォトショ」「イラレ」などと呼ばれることが多いです。
非常に多機能なため、すぐに使いこなせるようになるのは困難ですが、まずは必要な機能だけ、必要なときに覚えていくのが良いでしょう。
開発時に利用するツール
開発時には以下のようなツールを活用することが多いです。
Git（GitHub、Gitlab）
いわゆるソース管理ツールです。
プロジェクトでは1つのソースを複数人で変更することが多く、変更箇所を履歴管理（バージョン管理）することで、間違えてしまった場合は過去の履歴を復元することができるので多くのプロジェクトで採用されています。
Redmine
プロジェクト管理ツールとして代表的なのがRedmineです。
複数人で取り組むプロジェクトではメンバーが何をするべきで、今なにをしているのかを常に把握することが必要不可欠となっています。
Redmineを使えばやるべきことをタスク化、可視化することで効率的にプロジェクト状況を共有することが可能です。
WordPress
いわゆるCMS（コンテンツ・マネージメント・システム）と呼ばれるもので、ブログサイトを誰でも構築可能にしたのがこのWordpressです。
個人だけでなく、企業レベルでも導入しているところが増えてきています。
W3Techsの調査では世界で稼働しているサイトの3分の1がWordpressで作られていることがわかっています（2018年11月時点）。
コラム：最初からすべてできる人はいない。少しずつスキルアップしていけばOK
ここまでたくさんのスキルをご紹介してきました。
こんなことできるわけない、と不安に感じている人もいるでしょう。
安心してください。エンジニアというのはいきなりなんでもできるわけではありません。
誰もが必要に応じてその場その場で吸収していくものです。
最初はHTML、次にCSSという風に業務をこなしていけば、次第にJavaScript、CMSなどの業務を任されていきます。
そのときにしっかりと学習して身につけていけば問題ありません。
また、業務を覚えていくと自然と興味が湧いてくることがあります。
興味が沸くというのは大きなチャンスです。
どんどん、調べて自分で実験していきましょう。
それが大きなスキル・財産となります。
フロントエンドエンジニアのキャリアは守備範囲の積み上げ
フロントエンドエンジニアはHTMLコーダーの上位職種である色合いが強く、担当業務も多岐に渡るため代表的なキャリアパスが存在しないのが実情です。
そのため、さまざまな業務を兼務できるようになっていくことで自分の価値を高めていくことが求められます。
担当できる業務が増えれば、次第に管理を任せてもらえるようになりますので、プロジェクトリーダー、マネージャーといった管理職に上がるチャンスも出てくるでしょう。
フロントエンドエンジニアの年収は350万円〜700万円
フロントエンドエンジニアの年収は350万円〜700万円というのが相場のようです。
これは会社員としての年収で、最近は自宅業務を行うSOHOスタイルのエンジニアも増えています。
いわゆるフリーランスとして独立するパターンですね。
フロントエンドの仕事は比較的外部に発注することも多いため、フリーランスと相性が良いのも特徴です。
もちろん、フリーランスになれば相場はさらに高くなります。
では、どのような人がフロントエンドエンジニアに合うのでしょうか。
フロントエンドエンジニアに合う人・合わない人
ここではフロントエンドエンジニアに合う人、合わない人を見ていきます。
フロントエンドエンジニアに合う人
フロントエンドエンジニアに合う人は以下の人です。
常に最新情報へのアンテナを張っている人
フロントエンドの技術はバックエンドに比べても驚くほどのスピードで最新情報が出てきます。
常に情報収集を欠かさず、アンテナを貼り続けることができるのはフロントエンドエンジニアに必要な素養といえます。
コミュニケーション能力の高い人
フロントエンドエンジニアはより感覚的な表現を形にする仕事が多いです。
そのため、クライアントの要望を適切に引き出し、ほかのエンジニア、コーダー、デザイナーとコミュニケーションを連携していくことが求められます。
デザインに対する興味・関心が高い人
UI・UX周りの仕事が多いフロントエンドエンジニアは、デザインも請け負うことが珍しくありません。
デザインセンス、色彩センスがあることはフロントエンドエンジニアにとって大きな素養といえるでしょう。
遊び心がある人
遊び心があるユーザー目線でシステムやデザインを組める人はフロントエンドエンジニアに向いています。
「こうしたら楽しい、嬉しい」というシンプルかつ本質的な体験を大切にできることは大切な素養です。
フロントエンドエンジニアに合わない人
こだわりが強くない人
フロントエンドの仕事はコンセプトやユーザー目線の設計、開発が重要です。
そこにこだわることができず、適当な仕事をしてしまう人はフロントエンドエンジニアとして食べていくのは苦しいかも知れません。
クリエイティブなことに興味がない人
これも当然ですが、デザインという部分に興味を持てない、最新技術に興奮できない、新たな表現に惹きつけられない、クリエイティブな部分に興味を持てないと、フロントエンドエンジニアとしてやっていくのは厳しいでしょう。
こうした人はバックエンドエンジニアのほうが向いている可能性があります。
バックエンドエンジニアはこだわりよりも、いかにして要件を満たすシステムを作るか、という部分が求められる職種です。
また、デザインも気にする必要がないのもプラス要因ではないでしょうか。
転職もOK！フロントエンドエンジニアになる確実な方法は教えてもらえる環境がポイント
最後に気になるのがフロントエンドエンジニアになる方法だと思います。
フロントエンドエンジニアになる方法はいくつかありますが、確実になりたいのであればプログラミングスクールに通うのがおすすめです。
IT技術というのは独学で身につけるのが非常に難しいという側面があります。
なぜなら、自分でシステムを組めば間違いなくバグが出ます。
これは初心者だからというわけではなく、プロでも必ずバグは出ます。
プロならバグの見つけ方やその修正方法がわかりますが、素人だと「何が分からないのか分からない」という状態になってしまいます。
独学で多くの転職希望者が挫折していくのです。
プログラミングスクールであればプロがしっかりサポートしながら導いてくれるので、迷うことなく進むことができ、モチベーション維持も容易です。
プログラミングスクールはたくさんありますが、とくにおすすめなのがTechAcademyです。
フロントエンドコースが用意されており、パーソナルメンターがマンツーマンで指導してくれます。
HTML・CSS・JavaScript・jQueryといったフロントエンドの基礎スキルをまんべんなく習得できるだけでなく、Web APIの構築やサーバーの知識までつけられます。
プランは4種類用意されており、社会人と学生で料金体系が異なります。
学割が効くのは嬉しいですね。
TechAcademyではカリキュラム終了後の就職サポートまでしっかりしていますので、一人で就職、転職に悩む心配がありません。
フロントエンドエンジニアになりたいのであれば検討する価値はあると思いますよ。
TechAcademy
- 受講期間内にWebサービスのリリースを通して実践力を養える
- プロフィールや学習内容をもとに企業からスカウトがある
- プロのパーソナルメンターとビデオチャットやペアプログラミングができる
| 学べるスキル |
|
|---|---|
| 料金 | 79,000円〜 |
| オンライン教室 | ○：オンライン受講可能 |
| 受講形態 | オンライン＆マンツーマン（オンライン） |
| スクールの場所 | 全国（オンライン） |
| 就職のサポート |
|
まとめ
フロントエンドエンジニアはこれからのWeb業界においてますます専門性が強まっている職種です。
将来性という点でも需要がなくなる心配はないでしょう。
世の中で役に立つWebサービスを作りたい、ユーザーが喜ぶサービスを作りたいという方にはおすすめの職種だといえるでしょう。
