フロントエンド開発全体感

フロントエンドは2000年から今に至るまで多様な進化を遂げ、それに伴いフロントエンド開発がカバーする領域も昔と比較にならないほど増えました。ついにはフロントエンドエンジニアという職種が生まれ、今日では完全に定着するに至っています。

フロントエンドフレームワークを学習していくにあたって、共通して学ぶことになるトピックス群を下記に示します。

  • 各フレームワークの特徴
    • フロントエンドの世界は流行り廃りが早く、さまざまなフレームワークが存在します。時代とともにより多くのことができるようになった結果、フロントエンドエンジニアという職種が生まれた経緯がある。フロントエンド開発を嗜む以上、各フレームワークがなぜ生まれ、どのようなユースケースで選ぶべきかを適切に把握しておく必要があります。
  • 環境構築
    • アプリケーションを書き始めるまでが一番大変だと言われます（諸説あり）。繰り返し同じフレームワークのアプリケーションを作成するならどのように環境構築を行うのかを理解し慣れておくことでスムーズな開発が可能になります。
  • ルーティング
    • どのURLにアクセスしたらどのページを表示するのか、どのコンポーネントを表示するのかを決める必要があります。ルーティングの設定方法はフレームワーク毎にさまざまであり、各フレームワークにおけるルーティングの設定方法は学ぶ必要があります。
  • コンポーネント化とprops/slot
    • HTMLには部分的に別ファイルへと切り出す機能はありません。共通化したいコンポーネント（部品）もページ毎に何度も書く必要がありました。昨今のフロントエンドフレームワークは大抵コンポーネントとしてUIやロジックを部分的に別ファイルへと切り出す機能を備えており、propsやslotといった切り出し元と切り出し先の柔軟な連携機能も備えています。この機能を学ぶことはより短い時間で保守性の高いアプリケーションを開発する上で必須です。
  • スタイリング
    • UIをスタイリングする上でcss以外にもSass(scss,less),css library(bootstrap),css-in-js(styled-component,emotion,tailwindcss)などの選択肢があります。どれも素のcssよりも楽に管理しやすいスタイリングを行うために開発されたもので、昨今のフロントエンド開発においては素のcss以外の選択肢を適切に選ぶことが実質的に必須です。
  • データフェッチとキャッシュ
    • 2000年に公開されたXMLHttpRequest（XHR）を皮切りにフロントからリクエストを送る技術は年々発達してきました。ブラウザ標準のFetch APIも年々進化を遂げていますがそれ以上のスピードで複雑・多様化するデータフェッチのニーズに対応するためにさまざまなフェッチライブラリも開発されています。フェッチライブラリは状態管理などに比べるとそもそもの選択肢が少なく悩むことは少ないでしょうが、各ライブラリがどのような機能を備えているのか理解することはパフォーマンスの良いアプリケーションを開発する上で必須です。
  • 状態管理
    • 状態管理は様々なライブラリが群雄割拠しています。Vue界隈ではVuexかPiniaか(PiniaはVuex5互換のため実質同じ)と選択の余地はないですが、React界隈ではRedux,MobX,Jotai,Recoil,Zustandと様々な選択肢があります。適切な状態管理を行うことで重複した情報の取得や取得が間に合わずページが白紙で表示されるといった事態を回避できます。
  • テスト
    • 他項目に比べると優先度は落ちますが、長期的に複数人でアプリケーションを安定開発するならフロントエンドにおいてもテストは重要になります。デザイナーと円滑な連携を行うためにFigmaとStorybookを連動させ、認識のずれを無くすことなども含まれます。
  • レンダリングとビルド
    • 書いたコードを最終的にブラウザに返却するHTML/CSS/JSに変換することをざっくりビルドと呼びますが、それをどのように作り出すか、いつ作るかにおいていくつかの選択肢があります。これはアプリケーションの用途と許容できるコストと求めるパフォーマンスを天秤にかけて決められます。
  • デプロイと運用
    • AWSやGCP,Cloudflare,Vercel,Netlifyをはじめとして様々なデプロイ先の選択肢があります。バックエンドを用意するプラットフォームと同じプラットフォームにデプロイすることもあれば、設定の容易さからフロントエンドのみ別のプラットフォームにデプロイすることもあります。また、特に先進的なレンダリング方法を選択する場合、その先進性故にプラットフォーム側の対応が間に合っておらず特定のプラットフォームにしかデプロイができないこともあります。

他にもバリデーションや認証、SEO最適化、画像最適化などなど考えることはありますが、これらはフレームワークというよりかは実装する機能を考えるときに必要となる知見であるため上記では列挙しませんでした。

フロントエンド主要フレームワーク一覧

React

  • 登場時期: 2013年
  • SPA: Reactはその核となるライブラリであるため、SPAの開発を自然とサポートしています。React自体はコンポーネントベースのUIライブラリであり、SPAの構築に適しています。
  • SSR: ReactでのSSRはReactDOMServer APIを通じてサポートされています。このAPIはReactの初期バージョンから存在しており、サーバーでReactコンポーネントをHTML文字列にレンダリングすることができます。
  • SSG: Reactそのものにはありません。

Vue

  • 登場時期: 2014年
  • SPA: VueはSPAの開発に適したリアクティブなデータバインディングとコンポーネントシステムを提供します。Vue CLIやVue Routerを使用することで、効率的にSPAを構築できます。
  • SSR: VueでのSSRは、vue-server-rendererパッケージを使用して実現します。Vue 2.0（2016年）からSSRが公式にサポートされています。
  • SSG: Vueそのものにはありません。

Next.js (Reactベース)

  • 登場時期: 2016年
  • SPA: Next.jsはSPAをサポートしており、クライアントサイドナビゲーションを介してシームレスなページ遷移を実現します。初期バージョンからSPAの概念をサポート。
  • SSR: Next.jsの主要な特徴の一つがSSRで、これも初期バージョンからサポートされています。
  • SSG: 静的サイト生成（SSG）機能は、Next.js 9.3（2020年）で導入されたgetStaticPropsとgetStaticPathsAPIによって大幅に強化されました。

Nuxt.js (Vue.jsベース)

  • 登場時期: 2016年
  • SPA: Nuxt.jsはSPAの構築をサポートしており、これを可能にする設定は初期バージョンから利用可能です。
  • SSR: SSRはNuxt.jsの核となる機能であり、これはフレームワークの初期バージョンから利用可能です。
  • SSG: Nuxt.jsはバージョン2.13（2020年）からnuxt generateコマンドを通じて、より強力なSSG機能を提供し始めました。

Gatsby.js (Reactベース)

  • 登場時期: 2015年
  • SPA: GatsbyはSPAの開発をサポートしており、ページ間のリンクに<Link>コンポーネントを使用することで、クライアントサイドナビゲーションを実現します。初期バージョンからSPAの概念をサポート。
  • SSR: Gatsbyはビルド時にサーバーサイドレンダリングを行い、静的ファイルを生成します。従って、伝統的な意味でのランタイムSSRは提供しませんが、ビルド時のSSRを初期バージョンからサポート。
  • SSG: Gatsbyはその核となる概念としてSSGを位置づけており、これはフレームワークの初期バージョンからの主要な機能です。

Svelte

  • 登場時期: 2016年
  • 特徴: コンポーネントベースのフロントエンドJavaScriptフレームワーク。ビルド時に高性能なJavaScriptコードにコンパイルされるため、ランタイムが不要になります。
  • SSR & SPA: SvelteはSSRをサポートしており、SvelteKit（Svelteのアプリケーションフレームワーク）を使用することで、SSGやSPAの開発も可能です。

SolidJS

  • 登場時期: 2020年
  • 特徴: Reactに似た宣言的なJavaScriptライブラリでありながら、リアクティブなデータフローを採用しています。高いパフォーマンスと小さなバンドルサイズが特徴です。
  • SSR & SPA: SSRとSPAの両方をサポートしており、高速なレンダリングとインタラクティブ性を提供します。

Remix (Reactベース)

  • 登場時期: 2021年
  • 特徴: Remixは、Reactを基にしたフルスタックのウェブフレームワークで、深いリンクによるデータ依存関係の解決、SSR、およびSPAの機能を提供します。高速なページロードとインタラクティブ性を実現します。
  • SSR & SPA: Remixは、SSRを強化し、SPAの利便性を提供することに重点を置いています。

Astro

  • 登場時期: 2021年
  • 特徴: Astroは、静的サイトジェネレータ(SSG)として開始されましたが、フロントエンドのフレームワーク（React, Vue, Svelteなど）を組み合わせて使用できるユニークな構造を持っています。
  • SSG & SSR: AstroはSSGを主要な特徴としていますが、SSRもサポートしています。コンポーネントを必要に応じてクライアントサイドで動的に読み込むこともできます。

Qwik

  • 登場時期: 2021年
  • 特徴: Qwikは、「リゾーム可能なフロントエンドフレームワーク」として開発され、ページロード時のJavaScriptの使用量を最小限に抑えることに重点を置いています。これにより、非常に高速な初期ロードが可能になります。
  • SSR & SPA: SSRをサポートし、必要なコードのみをクライアントに送信することでSPAのような体験を提供します。