昨今、ブラウザの進化により、様々なWebページ表現が可能となりましたね。
それによって、HTML/CSS/Javascriptといった、ブラウザ出力を制御するフロントエンドの業務範囲やスキルは、日に日に増えています。
当然、正しいHTML/CSSを書くことができる事は最重要ですが、単にマルチデバイス、マルチブラウザで、ページが正しく表示できればよし。というところに留まらなくなってきています。
一段上のフロントエンドエンジニアを目指す場合に、押さえておくべき周辺スキルを、いくつかご紹介します。
PageSpeed Insights
SEO対策の基本的な指標となる、PageSpeed Insightsのスコア。表示スピードが早いページ構成は、UXの観点からも重要になります。
コーディングだけではなく、画像の減色・圧縮加工、次世代フォーマットへの対応、コードのミニファイなども絡めて、軽量なページを作成する技術は、強みとしてアピールできるポイントです。
Google タグマネージャー
Webサイトにおけるトラッキングの導入は、フロントエンドエンジニアの仕事になります。
支給されたトラッキングコードを埋め込めるだけではなく、トラッキングコードのメインコントロールを行う、Google タグマネージャーの適切な設定ができることは、仕事の幅を広げることに繋がります。
Google Analytics / Search Console
代表的なアクセス解析ツールである、Google Analytics / Search Console のアカウント開設から導入、設定まで、一通り自分でできるようになることは、今では必要なスキルの一つと言えます。
Google Analyticsは、もちろん、「GA4」を対象として、Search Consoleとの連係までできる必要があります。
もし、さらに上を目指すのであれば、トラッキングしたいデータをヒアリングして、Google Analyticsの設定行えるようになり、また、レポーティングや分析といった、データアナリスト的な立ち振る舞いができるところまで行けば、フロントエンドエンジニアとして、非常に心強い存在になれるでしょう。
Google 各種APIやサービス連携
Googleの各種APIやサービスを、Webサイト上に導入できることは、昨今フロントエンドエンジニアに求められることの一つです。
特に頻度の高いサービスは、MapsやYouTubeのエンベッドです。
広告効果測定ツール
プロモーションは、Webサイトにおいて重要な戦略の一つですので、Webサイトを立ち上げた際に、Google Analytics以外に、広告効果測定ツールを導入するクライアントは少なくありません。
コンバージョン（例えば、「購入完了」や「お問い合わせ完了」といった地点）を終着点として、広告効果測定ツールを、正しく設置していくことができる能力は重宝されます。
広告効果測定ツールの例としては、「アドエビス」「ノバセルアナリティクス」などの広告効果測定ツールです。
もちろん。ランディングページの改善活動を支援するA/Bテストツールと言ったものもありますし、大規模なマーケティングやCRM活動を行う場合は「Salesforce」といったツールも挙げられます。
流石にこれらの導入設定まで知っている必要はありませんが、Webページに適切に必要なコードを配置できることは、フロントエンドエンジニアに求められる可能性があります。
SNS連係
Twitter、Facebook、Instagram、LINEなどの投稿埋め込みや、シェア・フォローボタンの設置に関して、正しいMETA情報や画像サイズの設定ができることを基本として、サイトによっては、ソーシャルログインの実装、ハッシュタグ検索結果のスクレイピングなど、サードパーティとの連係などもあり得ます。
WordPress
インストール、アカウント設定、テンプレートコーディング、プラグインの選定と導入、投稿画面構築といった、WordPressの基本的な導入設定は、フロントエンドエンジニアが担当するケースが一般的になってきています。
プラグインのカスタマイズなどは、流石にプログラマーの仕事ですが、WordPress本体やプラグインの設定画面で行えることは一通り理解できて、正しく設定できるようになっている必要があります。
また、上記に挙げたSEO対策、SNS連係、Google連係などの様々な周辺スキルは、WordPressにおいてもプラグインなどの形で実現されていく物ですので、関連するプラグインの知識はおさえておくべきポイントになります。
以上のようなことを意識的に習得することで、就職・転職・昇格・昇給などに寄与するでしょう。もちろん、個人事業主として仕事を取っていく上でもプラスに働くことになるでしょう。
