フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

フロントエンドエンジニアとは?具体的な仕事の内容やスキルについて解説

フロントエンドエンジニアとはそもそも何か?具体的な仕事は?必要なスキルは?エンジニア界隈の仕事は色々専門用語もあって分かりづらいと思います。

なんとなくエンジニアになりたいけど、フロントエンドエンジニアやバックエンドエンジニアなど色んな言葉がありますし、業界初心者からエンジニアを目指す方にとってまずそこが理解の壁になりますよね。

この記事ではフロントエンドエンジニアの具体的な仕事内容や必要なスキルについて解説をしていきますので、フロントエンドエンジニアに対する基本理解を深めていただけると思います。

フロントエンドエンジニアとは

エンジニアをよくフロント側、バックエンド側といって区別したりします。フロント側はフロントエンドエンジニアのことですが、フロントとバックエンドでどのような違いがあるのかをまず説明します。

フロントエンドエンジニアは基本的にクライアントサイドの言語を使って開発をする人で、バックエンドエンジニアはサーバーサイドの言語を使います。

クライアントサイドの言語とは、ユーザーのブラウザ側で実行される言語のことで、サーバーサイドの言語とはサーバー側で実行される言語です。これを理解するためにはWebサイトが表示される仕組みを理解する必要があります。といってもすごく簡単な理解で問題ありません。

Webサイトが表示されるまでの流れをものすごく簡単に書くと次のようになります。

  1. ユーザーがURLをクリック
  2. URLからサーバーを特定してサーバーを探しに行く
  3. サーバーにたどり着き、サーバー内のファイルを読み込む(サーバーサイドプログラムの実行)
  4. 実行結果として生成されたファイルをブラウザにダウンロード
  5. ブラウザでHTMLやCSS、JavaScriptを解釈してWebを表示(クライアントサイドプログラムの実行)

サーバーに設置されているファイルは、PHPファイルなどブラウザ側では実行できない様々なプログラムで書かれているファイルが存在し、データベースとも連携しています。ここで扱うプログラム言語をサーバーサイドプログラムといいます。それらをサーバー側で実行してユーザーがリクエストしている画面を表示するためのHTMLを生成します。

そのHTMLやその他CSSやJavaScriptなどをブラウザで表示しているわけです。このブラウザ側で扱うプログラム言語がクライアントサイドプログラムですね。(厳密にはHTMLはマークアップ言語ですので、“プログラム”という表記は微妙ですがここではわかりやすく、プログラミング言語に包括します)

クライアント側を扱うのかサーバー側を扱うのかの違いでフロントかバックエンドかわかれてきます。

フロントエンドエンジニアの具体的な仕事内容は後述しますので、次は必要なスキルについて解説します。

フロントエンジニアに必要な言語スキル

必要な言語は以下のようなものがあります。

  • HTML
  • CSS
  • JavaScript(jQueryなどのライブラリも可)
  • その他サーバーサイドプログラムの概念理解

HTMLやCSSは基本的なことですが、フロントエンドエンジニアはSEO対策を意識したマークアップや構造化データによるリッチリザルトの開発が必要なケースも多いですので、HTML5に準拠した書き方やSEO対策、構造化データを前提としたコーディングができるようになっておきましょう。またCSS3を使ったアニメーションもよく使いますので、最低でも頻出のアニメーションについては理解と実装力が必要です。

JavaScriptはゼロから書くというよりはjQueryなどのライブラリを使うことが多くなります。JavaScriptの基本をおさえつつも、jQueryなどのライブラリを使った実装ができるようになっておく必要があります。

そしてフロントエンドエンジニアは、サーバーサイドプログラムを扱える必要はありませんが、概念を理解しておくなど基本をおさえておくと良いでしょう。というのも、フロントエンドエンジニアが作成したファイルを元にサーバーサイドエンジニアがプログラムを埋め込むなど、PHPファイル化したりします。

フロントエンドエンジニアの都合だけでファイルを作るとサーバーサイドエンジニアが困ります。サーバーサイドエンジニアがどんな作業をするかを理解する意味で、サーバーサイドプログラムの概念が頭に入っておくと良いです。

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

フロントエンドエンジニアの概念や必要なスキルが分かったところで、実際にどんな仕事内容なのかを理解していきましょう。
フロントエンドエンジニアはデザイナーやバックエンドエンジニアどちらとも直接仕事で関わることになります。

デザイナーが作ったデザインを見ながら、HTMLやCSSでコーディングしていきます。また、その過程でJavaScriptによる動きの実装などをしていきますが、この辺については単純に動きを実装するというよりは、ユーザビリティやデザインの意図を理解した動きを意識して実装していく必要があります。デザイナーとの密なコミュニケーションが必要になります。

コーディングする際にはSEO設計も考慮した上で全体を作っていくので、ただデザインを実装するだけではありません。そのプロジェクトの目的や概要を包括的に理解していることが求められます。

そしてフロントエンドエンジニアがHTMLファイルを作成したら、バックエンドエンジニアがPHPファイル化していきます。フロントエンドエンジニアはバックエンドの人がファイルを作成しやすいように、HTMLファイルの中にコメントを入れてたりして管理をしていきます。例えばどの部分が共通パーツなのか、どこをどういう条件によって表示を切り分けるのかなどです。

フロントエンジニアの具体的な業務

フロントエンドエンジニアの具体的な業務を1つ1つピックアップしていき解説します。

コーディング

HTML・CSSコーディングですね。先述した通り、SEOやリッチリザルト表示などを踏まえた上でコーディングする必要があります。バックエンドエンジニアが仕事がやりやすいように適宜コメントは入れていきましょう。

JavaScriptでのプログラミング

サイトに動的なものを実装する際に主に使うJavaScriptですが、そのサイトにとって意味のある動きを実装しましょう。後述しますが、サイトコンセプトや要件理解に基づいたUX/UIデザインを意識した実装が求められます。

UX/UI設計

ユーザーの体験性やユーザビリティを高める上で必要な設計です。UXはユーザーにどんな体験を与えるかをデザインやアニメーションで実装します。サイトのコンセプトに基づき、デザイナーが作ったデザインにどのようなアニメーションを実装していくのか、予めデザイナーとある程度調整しておきます。また、ボタンをクリックした時の挙動など細かい点についても、使い勝手やユーザーに与えたい体験を前提に仕様を決めていきます。

SEO設計

キーワードに対して確実にSEO対策できるように設計、コーディングしていきます。見出しの設定などはもちろん、全体的な構造設計や内部リンクなども考えてコーディングしていきます。

構造化データへの対応

パンくずリストなどをリッチリザルト表示させるために、Googleの構造化データを理解し、実装していきます。要件に応じて構造化データに対応していきます。

バックエンドエンジニアとの連携

バックエンドエンジニアに作成したデータを渡した後に、個別に色々調整や確認が入ることがよくあります。「ここの仕様ってどうなっている?」など、全体設計だけでは確認できていなかった細かい仕様などについて詰めていく作業も必ず出てきます。また、WordPressなどでフロントエンドエンジニアがすべてサイトを実装して公開まで行く場合は、バックエンドエンジニアとの連携はありません。

まとめ

フロントエンドエンジニアの仕事内容について理解いただけたでしょうか。Webデザイナーもフロントエンドエンジニアもバックエンドエンジニアもそうだと思いますが、職場や働き方によってもどこまで関わるのか、業務範囲が変わってきます。

この記事で解説したことが基本的なことになりますので、あとは就職するのかフリーランスとして活躍するのかなど自分のキャリアも考えた上で、個別具体的にやるべきことを微調整していってください。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介