当社でもフロントエンドエンジニアを募集しておりますが、フロントエンドといっても業務の種類は複数あり、プロダクトによっても作業内容が違ったりするので、当社のフロントエンドの仕事をまとめてみました。

フロントエンドエンジニアが HTML/CSS/JavaScript の他になにを知っておくべきか

当社のフロントエンド開発では、 npm, Webpack, Yarn などのツール、 Vue.js, React, Angular などのフレームワークを使いますから、それらの理解が必要です。 CSS については SASS/SCSS を使いますから、それらの理解と、 BEM記法、FLOCSS が使えるようになっている必要があります。 FLOCSS を完全に理解していないにしても OOCSS, SMACSS などの構造的な書き方をひとつでも理解していないと、かなり苦労します。 バックエンドに関する技術は、プロダクトによることもあるのですが、 PHP, SQL が完全でなくても理解できていると、 だいぶデキるエンジニアとして扱われます。

開発環境には Docker が多く使われていますから、 Docker も知っていると楽になります。

もうちょっと具体的に、フロントエンドエンジニアってどんな開発をするの？

当社のフロントエンドエンジニアがどんなサイトの開発を行っているのか、３つのパターンのサイトを挙げて説明します。

EYS音楽教室 ウェブサイト などの比較的静的な、外部の方に見ていただくサイト

当社の音楽事業のメインサイトは 40を超えるコースのページや30ほどのスタジオのページなどがあり、大量のPVを稼いでいますから、PVやコンバージョンレートを考えながら開発を行っていきます。 ABテストのための実装も多く行います。 ひとつひとつの改善は小さいのですが、積み上げると非常に大きな成果となります。 デザインがあってそのデザインと寸分たがわず実装する必要があるので、技術的には非常に難しいです。 過去にWeb制作会社に依頼したこともありましたが、デザインと違うものが出来上がるという事例がいくつもありました。

HTML/JavaScript/CSSだけでなく、ある自社のサーバとAPIで連携したり、自社の別サイトの Wordpress のデータベースからデータを取得して表示するなどの作業を行うこともあります。 データ連携においてはAWSのラムダのコードを書いたりすることもあります。 もちろん、書けない人もいるので分担してうまく進めていきます。

表には現れませんが、サイトのファイル構成についても構造的に決めていく必要があります。 代表的なEYS音楽教室などのウェブサイトはページ数が200を超えるので、共通パーツは同一ファイルにするなど、効果的なファイル構成を考える必要があります。 多くはPHPを使っていますから、フロントエンドエンジニアといえどもPHPを理解している必要があります。

サーバ構築をフロントエンド担当のエンジニアが行うことがあります。 (そこまでくると仕事内容としてはフロントエンドといいきれないこともありますね。)

メディアレッスンラボ などの Wordpress を使ったサイト

Wordpress で運用しているサイトでもフロントエンドエンジニアによるカスタマイズが発生します。 フロントエンドと言い切れるのかわかりませんが、 PHP も使ってサイトの新しいテーマを作り、 ABテストのためにワードプレスをカスタマイズするなど、 PHP と Wordpress を理解していないと手を出せません。

Wordpress を使ったサイトに限りませんが、申込を受け付けるサイトではメールを送ったり、個別にデータベースにデータを保存したりしますから、そういう点でも バックエンドのコードの理解が必要です。 そこで 「HTML/CSS/JavaScript しかできません」となると、バックエンドエンジニアの手を煩わせることになるので結構疎ましく思われます。

Yubista スタジオレンタル などの会員向けのサイト

会員のデータと連携して表示を切り替える、バックエンドと連携した開発が必要なフロントエンドで、動的部分が多くなります。 こういった会員サイトでは、フロントエンドとバックエンドを担当者を分けて開発することもありますし、同じ人がすべて開発してしまうこともあります。

こういった会員サイトになると、 Angular, Vue.js を使っているサイトが多くなります。 npm, Webpack/Yarn, SASS/SCSS などを使いこなせないと開発が難しくなります。

会員サイトでもCVは大切ですから、ABテストも常時行います。

フロントエンドの改善ってどれくらいやってる？

フロントエンドの改善は常にやっています。 全てのサイトについて、毎週数値を計測して、毎週改善ポイントが出てきます。 その改善ポイントの効果を測定するためABテストを実装します。 (集計・分析はマーケティング担当にお任せしています。)

画像編集ってフロントエンドエンジニアがやるの？

Adobe XD のファイルから画像を取り出したり、 ちょっと文字を変えるなどのことは フロントエンドエンジニアが行うこともあります。 最近はデザイナを採用して作業の分担を図っています。

最後に

当社のフロントエンドエンジニアがどんなことをやっているか、少しでも理解が深まれば幸いです。

また、このような開発に興味のあるかたは、ぜひ当社の門を叩いてみてください。