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

必須

• 制作会社のフロントエンドエンジニアとしての実務経験2年以上
• Sass（SCSS）での実装経験
• GulpやWebpackなどの実務使用経験
• Wordpress、MTなどのCMS実装経験
• Gitの使用経験

歓迎

• BEM記法やCSS設計の実務経験
• EJSなどのJSテンプレートエンジンの実務使用経験
• Next.js、Nuxt.js、React、Vue.js、Astroなどフレームワークの実務使用経験
• Typescriptの実務使用経験
• HeadlessCMSの使用経験
• GSAPなどアニメーションライブラリの実務使用経験
• Three.jsなどWebGL関連ライブラリの実務使用経験
• GCP、AWS、FirebaseなどのPaaS、FaaSの実務使用経験
• サーバーサイド言語の実務使用経験
• Dockerの実務使用経験

求める人物像

• 一人でもくもくと、ではなく他職種や同じエンジニアとみんなで和気あいあいと案件に取り組める！
• 共有会や勉強会で質問しあったり教えあったりすることができる！
• 今までよりもよりクオリティアップや効率化をしたい！
• 新しいことにもチャレンジしたい！
• 自身とチームを進化させたい！

使用ツール

ポジション

• フロントエンドエンジニア

業務内容

• 基本的にはWebサイト制作におけるフロントエンド構築業務全般をお願いしますが、ディレクター、デザイナー、テクニカルディレクターとUIや挙動について密にコミュニケーションをとりながら実装を進めていただきます。
• 画面やUIパーツの挙動などを相談、提案できる環境です。案件や体制によっては仕様調査・技術選定・設計も含め行っていただくことがあります。
• 凝ったアニメーションの実装や、BEM記法・FLOCSSなどを用いたCSSの設計、案件によって最適な開発環境を考えたり、SEOやページ高速化など日々チャレンジや改善をしています。
• そういった基礎技術を用いてお客様の課題解決や、ユーザーにとってより使いやすいサイトの構築、遷移や機能におけるUXの検討など、あなたにしかできないことを発揮していただければと思います。

１ - UI・画面実装のプロフェッショナル

• 将来的なキャリアパスとして、UI関連を強化しJavascriptフレームワークでのコンポーネント実装や、SPA、SSR、Jamstackサイトにおける画面実装を行う専門的スキルを身につけたり、Typescriptでの静的型付けやAPI側などサーバーサイドとの連携部分などの設計に関しても行ってもらえればと思います。またWordpressなどの従来のCMSだけでなく、HeadlessCMS等を活用したWebサイトやECサイトの構築なども相互に相談をしつつ考えていけたらと思います。

2 - 設計のプロフェッショナル・テックリード

• 動的サイトやJavascriptフレームワークを使用した構築における基本設計部分や、サーバーなどのインフラ設計なども行い、他のエンジニアメンバーと協力しながら詳細設計に落とし込み、実装に移していくこともできるようになっていただければと思います。時に壁打ち役として、他のエンジニアメンバーのサポートを行っていただくポジションになりますが、スキルや特性に合わせて、より強みを活かせるようなキャリアパスを相談をしつつ考えていけたらと思います。

１ - キックオフMTG

• プロジェクトのスタート時には、ディレクター、デザイナーと共にキックオフミーティングを行います。プロジェクトの目的や要件の共有と、必要な成果物や役割を決めます。またプロジェクトのキーになる部分をその場で相談したり検証の必要性を話し、スケジュールとその微調整やネクストアクションに関してを共有し合います。
• エンジニア側ではサーバーの情報や、求められる機能に関しての技術選定や設計の必要性などを検討し、その後ディレクターへ共有します。

２ - 検証・設計

• プロジェクトによっては新しいことや、今までの掛け合わせをするようなこともあったり、UIやUXの確認としても検証を行うことがあります。そのような検証やそれに基づく設計を行い、デザイナーと調整をしたりクライアントへの提案をすることもあります。複数人での構築の場合には方針を決めたり、担当部分の割り振りも行います。
• UIやデザインに関しては、動的部分やアニメーションの実装に関しての可否などを早い段階でデザイナーと相談しながら進めていきます。Javscriptフレームワークを使用した方がいい場合や、既存の状態とは大きく変わってしまう場合には、コスト面や運用面などを考慮しディレクターと相談しながら進めていきます。

３ - 実装・修正

• デザインや設計が進行し、画面要件が固まったら実装のフェーズに移ってきます。場合により先行して実装を進めるケースもありますが、しっかりと状況をディレクターと共有しながら進めていきます。デバッグに関しては、画面側はディレクター、デザイナーとも確認をしていきますが、 社内提出の前にセルフチェックも行います。また、複数人での構築の場合にはGitでPullRequestを出し合い、コードレビューを行う部分もあります。
• デザインの初稿時には必ず確認をし、それまでに相談してきたUIやアニメーションの実現可否の最終的な判断を行います。また、デバッグに関しては社内のチェック項目を確認しつつ、画面の操作やさまざまなデバイスでの確認を行い、想定外の挙動がないかも確認します。

４ - 納品・振り返りMTG

• 制作が完了し、社内確認・クライアント確認が済んだら納品になります。納品後には実際にかかった工数や対応内容に関してFBをし合います。良い部分は今後も継続し、改善点は個人だけではなく全体の改善点として、フローや取り組み方を調整していくこともあります。
• エンジニアはエンジニアチーム内での共有も行なっているので、実装で苦労した部分や工夫した部分なども他のメンバーへも共有する会も設けています。

１ - チーム構成

• エンジニアの所属するCreative div.は、Engineer section と Designer section、二つのセクションで成り立ちます。

Engineer division

• 実際の業務ではプロジェクトごとに1-2名、大規模の場合にはそれ以上の人数がアサインされ、デザイナーやディレクターと共に制作に携わります。
• プロジェクトで得たノウハウは、Notionへ記事を書いたりチャットで共有したり、エンジニアMTGでも共有し合っています。
• まだまだ一人ひとりの影響力が強いフェーズですが、大型のプロジェクトも増加していますので、ぜひ積極的にチームに関わって連携力を高めていきましょう。

２ - メンバーとのコミュニケーション

• 成長プロセスとしてカジュアルな1on1MTGを行ったり、毎週のエンジニアMTGでプライベート・業務関係なく相談や共有を行っています。不定期ではありますが勉強会も行っていますし、Notionでナレッジを社内で共有しています。ぜひ、社内のナレッジ共有の促進や教育等も一緒に行なっていただけると嬉しいです。
• また入社してすぐは、先輩エンジニアと一緒のプロジェクトにアサインしたり、オン・ボーディングで業務を進めて他のエンジニアメンバーと話す機会を増やしています。今までと進め方が違う部分もあると思いますが、疑問点の解消もしていただければと思います。

４ - 主な開発環境

• デパートでの基本的な開発環境を紹介いたします。
• Node.jsをベースに下記の構成で開発環境を構築しています。
• gulp
• webpack
• Typescript/Javascript
• Babel
• Sass(dart sass)
• 11ty
• EJS
• husky
• lint-staged
• ESLint
• stylelint
• Prettier
• その他、必要に応じて下記のツールを使用しています。
• Git
• GitHub
• Docker
• Docker Compose
• SourceTree
• Storybook
• CMSでは主に下記を使用していますが、プロジェクトによってはその他のCMSを使用することもあります。
• WordPress
• Movable Type
• Shopify
• MicroCMS
• またJavaScriptフレームワークとしては、Vue.js、Nuxt、React、Next.js、Astroを使用することもありますが、社内のツールとしてSvelteなども使用しています。その他、APIのスタブやモックサーバーなどでExpressやその他ライブラリを使用することもあります。