2021年のフロントエンドエンジニアに求められそうなスキル

先日「フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと」という記事を読みました。

こちらの記事で挙げられている10個のポイントを踏まえて僕の考えを述べていきたいと思います。

フレームワーク

近年React・Vue・Angularの三つ巴で推移していたJavaScriptフレームワーク・ライブラリですが、日本においてはReact・Vueの2強体勢になってきた印象を受けます。

Vueの方がタグテンプレート形式であるためHTML/CSSに慣れたWebクリエイターの方でも触りやすい、理解しやすいという利点からデザイナーがHTML/CSSを書くようなプロジェクトでは好まれて採用されるケースがあるようです。

一方でTypeScriptとの相性はReactに軍配が上がり、型安全でスケールしやすく開発効率が高いのはReactだと考えています。

個人的にはReactを推したいですが、2021年にから新たに学ぶのであればReact・Vueのどちらを採用しても有用であると言えます。

その他の選択肢としてSvelteも名前が上がるようになってきていますが市民権を得るにはもう少し時間がかかりそうですね。

静的サイトジェネレーター（SSG）

JavaScriptフレームワークで開発されるSPAの弱点として初回ローディングの遅さやSEOの対策などが挙げられますが、アプリのビルド時に静的なファイルとして書き出すStatic Site Generation(SSG)と言う手法でその弱点を回避することができます。

静的なHTMLファイルとして書き出されるので、CDNにキャッシュを配置しておけるし、ページ遷移時にはSPAとして動的に変更ができるので非常に高速です。

少し前はReact製でSSGするならGatsby.js、と言う情勢でしたが、特に注目しているのがNext.jsです。

Next.jsはServer Side Renderingが主のフレームワークでしたが最近はSSGを推しているようで、Incremental Static Regeneration(ISR)が注目されていますね。

SSGの弱点がアプリのビルド時に全てのページを再出力する必要がある点でしたが、ISRでは設定した一定時間ごとにバックグラウンドでデータの再取得・HTMLの再生成が行われます。

こうすることでアプリ全体を都度再ビルドすることなく変更を反映させることができるのが利点です。

JAMStack

JAMとはJavaScript、API、Markupの頭文字で、JavaScriptで外部APIを叩いてMarkup(HTML)を構成することを意味しています。

主に静的サイトジェネレーター、ヘッドレスCMS、ホスティングサービスを使って構築されます。

ヘッドレスCMSで入力フォームを作成し、サービスで使うコンテンツをまとめ、APIとして公開します。

静的サイトジェネレーターでアプリをビルドする際にAPIを叩いてコンテンツを取得、HTMLなど静的コンテンツを生成します。

そして生成した静的コンテンツをホスティングサービスから配信します。

ほぼGitでマネジメントができるので開発効率も非常に良いですね。

ヘッドレスCMSはmicroCMS、Contentfulなどが有名どころで、microCMSは日本製と言うこともあり情報にリーチしやすく重宝しています。

静的サイトジェネレーターは上述の通り。Next.jsが個人的にはアツいです。

そしてホスティングサービスはNetlifyやFirebase Hostingなどがありますが、Next.jsを使うのであればVercel1択だと思っています。

Vercel社がNext.jsの開発母体と言うこともあり、VercelにNext.jsアプリを乗せればよしなにやってくれることが非常に多く、あえて他のホスティングサービスを利用する理由が見つかりません。

このブログは上述のSSG及びISRを取り入れ、Next.js×microCMS×VercelのJAMStackな技術スタックで開発されています。

開発体験もユーザー体験も上々だと感じているので、しばらくはNext.jsとVercelでWebアプリやWebサイトを開発していきたいなと思っています。

プログレッシブウェブアプリ（PWA）

Progressive Web Application(PWA)はWebアプリケーションをiPhoneやAndroidのネイティブアプリのように提供できる技術で、Webとスマホアプリの両面を兼ね備えたようなアプリです。

AppStoreからのインストールも不要でホーム画面へのアイコン追加やプッシュ通知ができるなど、ネイティブアプリのような使用感を得ることができます。

常々注目はされている技術ではありますが、スマホユーザー側にそれほど認知されていないようで普及が進んでいません。

また、執筆時点でPWAに必要なService Workerと言う技術がSafariに対応しておらず、iPhoneがシェアを多く占める日本のスマホ市場では向かい風な状況なのかもしれません。

GraphQL

GraphQLはFacebookが開発しているWeb APIのための規格で、クエリとレスポンスデータの構造が似ていること、スキーマによる型付けができることが特徴です。

クライアント側はシンプルに書けること、そしてREST APIと違ってエンドポイントが1点となることから複数のAPIを叩いてデータを統合して...と言うことをしなくてよいのが利点だと考えています。

1回のリクエストで必要なデータのみ取得することが可能なのがREST APIでの構築との違いだと思います。

ただ、サーバー側のリゾルバーを書くのがクライアント側に比べると複雑で、N+1 SQL問題が発生しやすいと言うのが難点です。

リゾルバーを書くのをマネージドにするためにHasura GraphQL Engineが個人的には良いソリューションなのではと思っていて、PostgreSQLまたはMySQLのデータソースを元にGraphQLのリゾルバーを自動生成してくれるので、バックエンド側で複雑なことをしない限りは有用な選択肢だと考えています。

Hasuraは注目するだけしてまだアプリに落とし込めていないのでしっかりと運用してみたいと思います。

コードエディタ/IDE

記事同様、VSCodeで十分すぎるパワーがあると思っています。

WebStormのようなJet Brains製品のような有料エディタも非常に有用なのですが、拡張性の高いエディタが無料で使え、有料のエディタと遜色ない点がVSCodeを使う理由です。

LiveShareの機能でオンラインペアプログラミングもできる優れものです。

テスト環境

フロントエンドのテスト、特にビジュアルは変更が多いため「テストなんて書いてもなぁ...」などと言われたこともありますが、開発中に予期せぬエラーを見つけやすくなったり、コードレベルでの機能の担保ができるのは大きな利点です。

(目視とExcelへのスクショを貼りまくったSIer時代を思い出す...)

テストを書かぬままのコード変更はリファクタリングではなくただの破壊的変更だ、と言うことも聞いたことがあります。

Storybookを使ったUIコンポーネントテスト、Jestでのユニットテストやスナップショットテスト、React-testing-libraryでの結合テスト、SeleniumでのE2Eテストなど、アプリ品質を確保するためにも使いこなせるようになりたいですね。

クリーンなコード

リーダブルコードを読みましょう。随分前の書物にはなってしまっていますが、「なぜクリーンなコードを書くべきか」概念は掴めるはずです。

エンジニアとして働くと、コードを書く時間よりも調べたり既存資産のコードを読む時間の方が長かったりします。

そして自分が書いたコードですら人間は愚かなので意図を忘れるのです。

変数名が省略されていたり一つの関数に複数の意味があるようなものを作らないなど、日々気をつけて開発したいですね。

Git

複数人で開発する上でGitを使わない開発はほぼないと言えます。もちろん個人開発でもGitは必須です。

記事にないGitコマンドの中では最近amendやrebaseはよく使っています。コミットログの変更・修正になるので使い所は考える必要がありますが、コミットログと言うプロジェクトコードの歴史はきれいに管理していきたいですね。

ソフトスキル

上記の中でも最も必須スキルだと思います。

エンジニアはただパソコンを前にして一人で開発だけを進める仕事ではなく、複数人のチームで進めていくことが主になります。

特にリモートワークが普及しつつある昨今、オンラインでのコミュニケーションをいかにとることができるかは重要視されていると思います。

終わりに

10つのスキル、2021年のフロントエンドエンジニアに求められるものとしてとても共感できるものでした。

付け加えるとしたらTypeScriptですかね？もはや当たり前だと言うことで元記事には挙げられていないのかもしれませんが。

PWAやGraphQLはまだまだ自分にとって知識不足だと思いましたし、フレームワークなどわかったつもりになっている技術もあると思います。

フロントエンドフレームワークは今年も引き続きNext.jsに注目していきたいなと思っています。

基礎を疎かにせずこれからも精進していきたいですね。