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

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

最後に

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

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

2nd Community株式会社では一緒に働く仲間を募集しています

当社のフロントエンドエンジニアの業務範囲

Kenji Ohtsuka

2nd Community株式会社 / CTO

CSS JavaScript 開発フロントエンドフロントエンドエンジニア

5 いいね！

2nd Community株式会社

"主力事業である音楽学習事業(EYS音楽教室)を起点に、 ■音楽学習事業根幹事業でもある音楽教室の運営。「音楽教室は楽しくない」というこれまでの常識を覆した当社独自のビジネスモデルを、現場×カスタマー×本部の三方向において、人でなければできない領域を常に思考させ、牽引していく部門。 ■Inspiart（楽曲制作・流通）事業ブロックチェーン技術を用いた著作権管理をおこない、機会学習を活用した楽曲制作機能を用いて、誰でも自由に世界中の人とセッションし、オリジナル楽曲をリリースでき、且つ収入も得られる新しい仕組み（世界）を作り上げる事業です ■Otolier（楽器製造・販売）事業貿易ルートの開拓や世界各地の楽器工房の開拓を行い、各工房から自由に楽器を販売・購入できるサイトを構築し、世界の楽器市場にメスを入れることがOtolier事業部のミッションです。 ■コミュニティー事業学習事業において競争優位を確立した現在、最も重要視しているのが中小都市型のビジネスモデルの成功と、全国１０００箇所へのスタジオ展開。その実現に向けた戦略立案と実施を行うことがコミュニティー事業のミッション。 ■地球住所プロジェクト「エンジニアと音楽家は言語に左右されず、世界のどこでも活躍ができるはず」この思想のもと、世界基準で活躍できるエンジニアを多数輩出することが大きなミッションです。 ■エンターテインメント事業参加型プラットフォームの開発や、気軽にオンステージ体験できるライブイベントの開催、フェスの企画・運営は勿論のこと、音楽でもっと自己表現ができる世界を作り上げることがミッションです。以上、主に6つの事業を多角的に展開しています。弊社の特徴は、・利益化が難しいとされるコンシューマー向けの学習教室において、データマーケティングやオペレーションの効率化を積極敵に導入し、事業の合理化を実現している点・常にユーザーファーストを貫き、ユーザーニーズに基づく品質の高い学習コンテンツを量産できる体制を有している点・内製化された高い技術力をベースに、音楽・教育業界に革新をもたらすIoT/AI/blocchain等の最先端テクノロジーを事業化させている点にあります。また、業界でも異例の連続的な事業成長を牽引しているメンバーは、有名企業で活躍を続けてきたエンジニアやトッププレイヤー、新卒で弊社に入社し、若くして執行役員や事業管掌を任されてきた優秀なメンバー達です。音楽業界・教育業界・エンタメ業界に革新をもたらす既存事業の価値向上および、壮大なビジョンの実現に向けて、仲間を積極的に募集しています。

フォロー