Chapter 01

はじめに

intro-cover.png

進歩し続けるフロントエンド開発

ウェブ開発における新しい技術の誕生と成長は盛んに繰り返されています。とくにフロントエンドの領域において、その進歩は著しいものです。「新しい技術が次から次へと出てきて追いつくのが大変」という方も少なくないと思います。しかし、それほど進歩の余地がある、伸びしろのある領域なのです。

昨今のフロントエンドのトレンドとしては「React」や「Vue」などのSPAを構築できるライブラリが挙げられるかと思います。これらが多くの技術者、そしてサービスから選ばれている理由としては

  • サイトのパフォーマンス改善
  • 複雑な状態遷移の実現
  • 開発体験の向上

などが挙げられ、様々な側面からサービスに寄与しています。

パフォーマンスという点では、ECサイトにおいてページの表示速度が早いほど購入率が高まるというデータがあるのは有名です。ReactやVueの特徴である仮想DOMは、描画時に前後の状態を比較し差分のある部分のみを描画することでパフォーマンスを改善が見込めます。

Gatsbyについて

本書では、React製のフレームワークであるGatsbyに焦点を当てています。
Gatsbyで何ができるのか一言で説明すると、**「爆速なサイトを簡単に作れる」**です。

爆速であれば、画面が速く表示されるためユーザー体験が良くなりページ離脱率が下がることが期待されます。また、検索上位に表示されるかどうかといったSEOにおいても、速さは評価の指標であるとされています。

簡単に作れるという点は開発体験に寄与します。
昨今のモダンなフロントエンド開発に求められるスキルセットは複雑で幅広く、初学者にとっては壁を感じてしまう状況です。Gatsbyでは少ない知識で開発を始められ本格的なサイトを構築することができる環境が提供されます。

Gatsbyの知名度

2020年5月の時点で、GitHubのスター数44000、コントリビューター3300人、リリースの数は12000となっており、Gatsbyへの関心の高さと開発の盛り上がりがお分かりいただけるかと思います。

国内での認知は低いものの、海外では有名なサイトがGatsbyで作られているという事例も増えてきています。実際にGatsbyが使われている有名な事例としては、以下のサイトが挙げられます。