フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと

Post on:2020年12月10日

はじめに

2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フロントエンドのデベロッパーは、以前はHTMLとCSSと場合によってはjQueryをある程度知っていれば十分でしたが、今日では開発のスキル、ツール、ライブラリ、フレームワークなど、常に進化し続けるシステムに直面しています。

ここ数年で、ReactJS, VueJS, Svelteなどの素晴らしいライブラリやフレームワークが登場し、JavaScriptを使用したWebアプリは強化されました。

この記事ではフロントエンドのデベロッパーとして、これから何に注目すべきかについてガイダンスを提供したいと思います。

1. フレームワーク

2021年には、FecebookのReactJSとコミュニティ主導のVueJSの決闘が見られるかもしれません。Reactは現在GitHubで159,000以上のスターを獲得していますが、Vueは175,000以上とさらに多くのスターを獲得しています。ちなみに、Angularのスター数は67,500です。

現在の状況を見てましょう。下記はReact（ブルー）とVue（レッド）とAngular（イエロー）のGoogleトレンドの比較です。VueがReactをわずかに上回っており、Angularは追いつくことができない状況です。

React,Vue,Angularのトレンド比較（日本）
訳者注: 日本のものに変更しました。

2021年に向けてJavaScriptフレームワークを使用したいと考えているフロントエンドのデベロッパーは、ReactとVueを第一の選択肢として重視すべきです。Angularは、大規模なプロジェクトの場合に有効なオプションとなります。

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

静的サイトジェネレーターは、サーバーサイトのレンダリング機能（SEOには非常に重要ですが、ロード時間も重要です）とシングルページアプリケーションの両方を兼ね備えています。NextやNuxtなどのソリューションには、マークダウンサポート、モジュールバンドラー、統合テストランナーなどの便利な機能が付属しているため、最近の多くのプロジェクトでは、サーバー側のレンダリングが必要ない場合でも静的サイトジェネレーターを選択しています。

もしあなたが真剣にフロントエンドの開発に取り組んでいるのであれば、以下のプロジェクトを見て、実際に体験してみることをお勧めします。

Next (React-based)
Nuxt (Vue-based)
Gatsby (React-based)
Gridsome (Vue-based)

これらは最も注目されているプロジェクトですが、他にもたくさんの静的サイトジェネレーターがあります。
参考: Webサイトやブログを高速化、PWA対応！静的サイトジェネレーターの導入方法を詳しく解説した入門書

3. JAMstack

JAMstackとは、JavaScript（React、Vue、VanillaJSなどクライアント上で実行されるもの）、API（サーバー側のプロセスを抽象化し、JavaScriptを介してHTTPSでアクセスするもの）、Markup（デプロイ時にあらかじめ構築されたテンプレート化されたマークアップ）の頭文字です。

JAMstackはパフォーマンスを向上させるためにWebサイトやアプリを構築する方法で、スケーリングコストを削減し、セキュリティを強化し、デベロッパーエクスペリエンスを向上させます。

この用語はそれら自体は目新しいものではありませんが、共通しているのは、Webサーバーに依存していないということです。つまり、RubyやNode.jsのようにバックエンドに依存したアプリやDupalやWordPressのようにサーバーサイドで構築されたサイトは、JAMstackでは構築されません。

もしJAMstackを使いたいのであれば、いくつかのベストプラクティスがあります。

プロジェクト全体をCDNで提供

サーバーを必要としないため、プロジェクト全体をCDNから提供することができ、他の追随を許さないスピードとパフォーマンスを実現します。

すべてがGitの中にある

データベースや複雑な設定を必要とせずに、誰もがGitリポジトリからプロジェクト全体のクローンを作成できます。

自動構築

すべてのマークアップが事前に構築されているため、完全に自動化できます。例えば、Webhookやクラウドサービスを使用します。

アトミックデプロイ

大規模プロジェクトで何百、何千ものファイルを再配置することによる矛盾した状態を避けるために、アトミックデプロイでは、変更が開始される前にすべてのファイルがアップロードされるのを待ちます。

インスタントキャッシュの無効化

サイトが公開されたら、変更が表示されるようにするために、CDNがインスタントキャッシュパージを処理できることを確認する必要があります。

NetlifyやVercelのような有名なホストはJAMstackアプリケーションをサポートしており、大企業はユーザーに素晴らしいエクスペリエンスを提供するためにJAMstackを利用しています。

JAMstackは間違いなく、2021年にフロントエンドのデベロッパーとして頭に入れておきたいことです。

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

プログレッシブウェブアプリ（PWA）は2021年に間違いなく必要となるでしょう。ユーザーにリッチなモバイルエクスペリエンスを提供するために、ネイティブアプリではなくPWAを選択する企業が増えています。

PWAは信頼性が高く（即時読み込み、インターネット接続なしで動作）、高速（滑らかなアニメーション、ユーザーインタラクションへの迅速なレスポンス）、魅力的（ネイティブアプリのような素晴らしいユーザーエクスペリエンス）を与えます。

オフライン機能ではServiceWorkerを使用し、フルスクリーンエクスペリエンスにはWebアプリのmanifestファイルを使用します。

PWAを構築する理由としては、下記があります。

ブラウザからユーザーのホーム画面に追加可能
インターネットに接続していなくても動作する
エンゲージメントを高めるためのプッシュ通知をサポート
GoogleのLighthouse機能を活用する

PWAについて詳しく知りたい場合は、次のリソースをご覧ください。

5. GraphQL

現在最も注目されているトピックの1つで、2021年に学ぶべきこと、または改善すべきことは間違いなくGraphQLです。

RESTは長い間、ステートレスサーバーのような素晴らしいコンセプトを提供することで、Web APIを設計するためのデファクトスタンダードと考えられてきましたが、RESTful APIはアクセスするクライアントが急速に変化していることに追いつくことに関しては、ますます柔軟性に欠けると考えられています。

GraphQLは、Restful APIを扱う際にデベロッパーが直面している問題を解決するためにFacebookによって開発されました。

REST APIを使用すると、デベロッパーは特定の目的で作成された複数のエンドポイントからデータをフェッチすることでデータを収集します。例えば、/users/_idエンドポイントや/tours/_id/locationエンドポイントなどです。

GraphQLを使用すると、これは異なる動作をします。デベロッパーは必要なデータを含むクエリをGraphQLサーバーに送信します。すると、サーバーは対応するすべてのデータを含むJSONオブジェクトを返します。

GraphQLを使用するもう1つの利点は、強力な型システムを使用することです。GraphQLサーバー上のすべてのものは、GraphQLスキーマ定義言語（SDL）を使ってスキーマを介して定義されます。スキーマが作成されると、フロントエンドのデベロッパーもバックエンドのデベロッパーも定義されたデータ構造を認識しているので、互いに独立して作業することができます。

6. コードエディタ/IDE

エディタは2020年と同様に、2021年もMicrosoftのVS Codeがフロントエンドのデベロッパーにとってナンバー1でしょう。

VS Codeはコード補完やハイライト表示など、IDEに近い機能が提供されており、マーケットプレイスでほぼ無限に機能を拡張することができます。

このマーケットプレイスの存在が、VS Codeをこれほどまでに素晴らしいものにしているといっても過言ではありません。その中からフロントエンドのデベロッパーに役立つ素晴らしい機能拡張を紹介します。

これらは機能拡張のごく一部です。VS Codeにはまだまだ発見できることがたくさんあるので、まだ使用していない人は試してみることをお勧めします。

7. テスト環境

テストされていないコードを本番環境で使うべきではありません。

個人的なプロジェクトでテストをしないことは便利に思うかもしれませんが、商用環境やエンタープライズ環境で作業をするときには、テストをすることは必須です。デベロッパーは可能な限りワークフローの中にテストを導入することをお勧めします。

下記のようにテストを区別できます。

ユニットテスト

単一のコンポーネントまたは機能を個別にテストします。
統合テスト

コンポーネント間の相互作用をテストします。
エンドツーエンドテスト

ブラウザで本格的なユーザーフローをテストします。

テストの方法には、マニュアルテストやスナップショットテストなど他にもいろいろあります。シニアデベロッパーへの転職や大企業への就職を目指す場合は、テストスキルの向上に努めてみてはいかがでしょうか。

8. クリーンなコード

クリーンなコードを書くことができることは素晴らしいスキルであり、多くの組織から高い需要があります。もしあなたが今のポジションからステップアップしたいのであれば、クリーンなコードのコンセプトを実際に学ぶ必要があります。

クリーンなコードは美しくて読みやすいものでなければなりません。すべてのテストはクリーンなコードで実行されます。冗長な記述を含めるべきではなく、クラスやメソッドや関数などエンティティの使用を最小限に抑える必要があります。

デベロッパーがクリーンなコードで気をつけるポイントは下記の通りです。

変数、クラス、メソッド、関数に意味のある名前を作成する。
関数は小さく、引数をできるだけ少なくする。
コメントはまったく必要ありません、コード自体が物語っているはずです。

クリーンなコードについて詳しく知りたい場合は、Robert C.Martinの書籍と記事をご覧ください。

9. Git

Gitは間違いなく、最近のWeb開発におけるバージョン管理のスタンダードです。あらゆる規模のチームで効果的に仕事をするためには、すべてのデベロッパーが基本的なGitのコンセプトとワークフローを知っておくことが本当に重要です。

知っておくべき人気のあるGitコマンドは下記のとおりです。

git config
git init
git clone
git status
git add
git commit
git push
git pull
git branch

参考: Gitでよく使用するコマンドをGIFアニメで解説

生産性を高めるためにこれらのコマンドを覚えておくことは良いことですが、フロントエンドのデベロッパーはGitの背後にある基本的なコンセプトも学ぶ必要があります。次のリソースをご覧ください。

10. ソフトスキル

見過ごされがちですが、デベロッパーにとって本当に重要なのはソフトスキルの習得です。

物事の技術的な側面を理解するのに役立ちますが、チーム内でのコミュニケーションする方法を知ることも同様に重要です。もしあなたが技術職でのキャリアを考えていて、上級職への転職を計画しているのであれば、次のソフトスキルを見つける必要があります。

共感
コミュニケーション
チームワーク
親しみやすさと有用性
忍耐
オープンマインド
問題解決
説明責任
創造性
時間管理

常に忘れないようにしましょう。シニア開発者にとって最も重要な成果物は、より多くのシニア開発者です。

終わりに

この記事では、フロントエンドのデベロッパーが2021年に学ぶべきこと、改善すべきこと、マスターすべきことを紹介しました。このリストが来年のインスピレーションになることを願っています。どれを選ぶかは、あなた次第です！

フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと

はじめに

1. フレームワーク

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