COLUMN

コラム

フロントエンドの最前線：2024年のトレンドとテクノロジー

フロントエンド開発は、今一番変化の激しい業界の一つです。毎年のように新しいトレンドが生まれ、さらに機械学習のように新しいテクノロジーと組み合わさって進化しています。本記事では2024年に注目すべきフロントエンドのトレンドとテクノロジーについて紹介します。

栄枯盛衰の激しい業界だけに、あるプロジェクトで取り入れた技術が次のプロジェクトでは既に陳腐化していることも珍しくありません。陳腐化しているだけならまだしも、開発が停止していたり、サポート期限が来てしまっていることもあるでしょう。そのため、常に最新の情報を追いかけ、新しい技術に対応することが求められます。この記事を読むことで、フロントエンドエンジニアが2024年に向けてどのようなスキルや知識を身につけるべきかがわかるでしょう。

新しいフレームワークとライブラリ

最近、新しく注目を集めているのが以下のようなフレームワークです。

Svelte

Svelteは、ReactやVueのような仮想DOMを使わずに、コンパイル時に最適化されたJavaScriptコードを生成するフレームワークです。そのため、パフォーマンスが高く、ビルドサイズが小さいという特徴があります。

仮想DOMはDOM構造をJavaScript内で保持し、都度変数のアップデートに合わせて再描画を行います。そのため、パフォーマンスの低下やビルドサイズの増加が懸念されます。Svelteは、コンパイル時にJavaScriptコードを生成するため、これらの問題を解決しています。

SolidJS

SolidJSもSvelteと同じく、仮想DOMを使わずにコンパイル時に最適化されたJavaScriptコードを生成するフレームワークです。Reactのようなコンポーネントベースの開発が可能なのが特徴です。useStateの代わりにcreateSignalを使う点は異なりますが、Reactユーザーからの移行コストは低いと言えるでしょう。

以下はSolidJSの例です。


import { onCleanup, createSignal } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  const interval = setInterval(
    () => setCount(count => count + 1),
    1000
  );
  onCleanup(() => clearInterval(interval));
  return <div>Count value is {count()}</div>;
};

Qwik

Qwikも仮想DOMは利用しません。レンダリング部分はJSXを使っているので、その部分はSolidJSと似ています。Qwikはサーバーサイドで動作し、状態をHTMLにシリアライズします。そして、JavaScriptは必要な場合のみ読み込まれて実行します。

コードはサーバーとクライアント、そして両方で実行される可能性があります。ただし、それらを強く意識せずにアプリケーションを作れるのもQwikの特徴です。


import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
  const store = useStore({ count: 0 });

  return (
    <main>
      <p>Count: {store.count}</p>
      <p>
        <button onClick$={() => store.count++}>Click</button>
      </p>
    </main>
  );
});

仮想DOMからの脱却

React登場以降、さまざまなフレームワークで仮想DOMが採用されてきました。仮想DOMによって、プログラマーはHTMLの状態を意識することがなくなり、JavaScriptの変数を操作するだけで、最適な画面描画を行えるようになりました。

しかし、そのトレードオフになったのがレンダリング速度でしょう。また、変数を変更していなくとも再レンダリングが行われるなど（理由はアプリケーションの作りにあるのですが）、別な課題も浮き彫りにしました。

さらにクライアントサイドですべてを処理するのではなく、一部をサーバーサイドでレンダリングすることによってキャッシュを利用し、パフォーマンスを改善する方法も生み出されています。

今注目を集めるフレームワークは、こうした課題を解決するために作られています。仮想DOMの使いやすさは継承しつつ、パフォーマンスの最適化を図っています。

従来のフレームワークの状況

新しいフレームワークは登場しつつも、既存のフレームワークも負けてはいません。着実にバージョンアップし、より魅力的になっています。

  • React
    Reactはサーバーサイドの仕組みとしてNext.jsやRemixとの組み合わせが注目されています。また、React 18ではConcurrent Modeが導入され、レンダリングのパフォーマンスが向上しています。
  • Vue
    VueはNext.jsと同様にNuxtがあり、サーバーサイドでのレンダリングも行われています。また、標準でも createSSRApp があり、個別にSSR（サーバーサイドレンダリング）とクライアントサイドとを使い分けられます。
  • Angular
    Angularはv17から標準でSSRに対応しています。

パフォーマンス最適化技術

Webアプリケーションが増えるのに伴って、注視しなければならいのがパフォーマンスです。ユーザーは待ち時間を嫌いますし、検索エンジンもパフォーマンスを重視しています。そのため、パフォーマンス最適化技術はフロントエンドエンジニアにとって欠かせません。

Core Web Vitalsとその影響

Webアプリケーションのパフォーマンスを考える上で指標にしたいのがCore Web Vitalsです。Core Web VitalsはGoogleの提唱している、ユーザーエクスペリエンスを測るための指標です。具体的には、以下の3つの指標があります。

  1. Largest Contentful Paint（LCP）：コンテンツが表示されるまでの時間
  2. First Input Delay（FID）：ユーザーが最初のインタラクションを行うまでの時間
  3. Cumulative Layout Shift（CLS）：ページのレイアウトが安定するまでの時間

Core Web VitalsはGoogle Chrome機能拡張やPageSpeed Insights、Search Consoleなどのレポートで確認できます。Core Web Vitalsを定期的に実行することで、パフォーマンスやUXの改善を図ることができます。

SSRとSSGの進化

Webアプリケーションを開発する際に、そのHTMLをどう生成するかを考えるのが重要です。すべてサーバーサイドで行う場合、サーバー負荷やパフォーマンスが課題になるでしょう。一部をキャッシュしたり、認証情報などの動的部分はJSONから生成するようにすることで、パフォーマンスを向上させることができます。

  • SSR（サーバーサイドレンダリング）
    SSRはHTMLをサーバーサイドでレンダリングし、その結果をブラウザに送信します。ブラウザは受け取ったHTMLを表示するだけなので、初回表示が速くなります。ただし、サーバーの負荷が増えるため、キャッシュやCDNを使うなどの工夫が必要です。
  • SSG（静的サイト生成）
    SSGはHTMLをあらかじめすべて生成し、サーバーサイドに保存します。そのままでは動的なコンテンツ配信が行えないので、APIを使ってJSONを取得し、動的な部分を生成することが一般的です。SSGはCDNとの相性が良いため、高速な配信が可能です。
  • ISR（インクリメンタルサーバーレンダリング）
    ISRはSSGの一種で、一部のページをキャッシュし、そのページにアクセスがあったときにキャッシュを更新します。これにより、動的なコンテンツを持つページでも高速な表示が可能です。

すべてクライアントで生成する場合、SEOに弱いといった課題やOGPが生成できないといった問題があります。Googleのクローラーは一部のJavaScriptを実行できますが、それでもすべてのJavaScriptを実行するわけではないため、サーバーサイドで生成したHTMLを提供することが重要です。

CSSの新動向

CSSも進化を続けています。CSSの新機能を使うことで、より効率的なスタイリングが可能になります。もちろん、その際にはブラウザが対応しているかどうかを判断しながら実装しましょう。

変数

CSSではカスタムプロパティを使って変数（別なスタイルで再利用できる値）を定義できます。これにより、同じ値を複数のスタイルで使い回すことができます。


:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

サブグリッド

grid-template-columns: subgrid; のように定義することで、グリッドの中にグリッドを作成できます。これにより、ネストされたグリッドを簡単に作成できます。より複雑なレイアウトを実現するのに便利です。


.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

コンテナクエリ

メディアクエリーはブラウザの幅や高さに応じてスタイルを変更するためのものでしたが、コンテナクエリは親要素の幅や高さに応じてスタイルを変更するためのものです。これにより、より柔軟なレイアウトを実現できます。


.post {
  container-type: inline-size;
  container-name: sidebar;
}

/* コンテナーが 700px より広い場合 */
@container sidebar (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

最新のCSSフレームワーク

ここ数年で注目を集めているCSSフレームワークと言えば、Tailwind CSSです。Tailwind CSSは、クラス名を使ってスタイルを適用することができるため、スタイルの再利用性が高くなります。また、カスタマイズ性も高いため、デザイナーとのコラボレーションがしやすいという特徴があります。

Tailwind CSSはCSSファイルを読み込むだけでなく、JavaScriptで実行・生成されます。色や幅などのテーマが設定でき、細かなカスタマイズが可能です。


<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
  <img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption>
      <div>
        Sarah Dayan
      </div>
      <div>
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

セキュリティとアクセシビリティ

Webアプリケーションのセキュリティの多くはサーバーサイドに由来しますが、フロントエンドでもセキュリティには十分気をつける必要があります。

XSS（クロスサイトスクリプティング）対策

XSS（クロスサイトスクリプティング）は、Webアプリケーションにおいて最も一般的な脆弱性の一つです。ユーザーが入力したスクリプトをそのまま実行してしまうことで、悪意のあるコードを実行される可能性があります。XSS対策としては、ユーザー入力をエスケープする、CSP（Content Security Policy）を設定するなどの方法があります。

CSRF（クロスサイトリクエストフォージェリ）対策

CSRF（クロスサイトリクエストフォージェリ）は、ユーザーが意図しないリクエストを送信させる攻撃です。CSRFトークンを使ってリクエストの正当性を検証することで、CSRF攻撃を防ぐことができます。

Cookie

Cookieはセッション管理や認証に使われることが多いため、セキュリティに気をつける必要があります。Secure属性やHttpOnly属性を設定することで、Cookieの安全性を向上させることができます。

最近ではサードパーティーCookieの制限が厳しくなってきているため、代替手段としてLocalStorageやSessionStorageを使うことも検討されています。

HTTPS

Let's Encryptなどの無料SSL証明書の普及により、HTTPSを使うことが一般的になってきました。HTTPSを使うことで通信内容が暗号化され、盗聴や改ざんを防ぐことができます。また、Google Chromeなどのブラウザでは、HTTPSを使っていないサイトに対して警告を表示するようになっています。

ブラウザのAPIによっては、HTTPS以下でないと利用できないものが増えています。たとえば、Geolocation APIやService Worker APIなどがHTTPSでないと利用できません。

開発ツールと環境の進化

フロントエンド開発においても、開発ツールや環境は進化を続けています。新しいツールや技術を取り入れることで、開発効率や品質を向上させることができます。

最近ではWebpackなどを用いない開発ツールが登場しています。

Vite

Viteは、Vue.jsの開発者であるEvan Youによって開発された新しい開発ツールです。Viteは、開発時にES Modulesを使ってモジュールをロードするため、高速なビルドが可能です。また、HMR（Hot Module Replacement）によって、変更をリアルタイムに反映することができます。

デフォルトでTypeScript、JSXをサポートしています。SSRの組み込みをサポートしており、5173番ポートでサーバーが立ち上がります。

Snowpack

Snowpackは、Viteと同様に高速なビルドを実現するツールです。Snowpackは、ES Modulesを使ってモジュールをロードするため、ビルド時間が短縮されます。また、プラグインシステムを使って、様々なツールと統合することができます。

package.jsonやコードから依存しているパッケージを抽出し、 web_modules ディレクトリにコードを出力します。アプリケーションからは、 web_modules を指定してモジュールを読み込みます。

WMR

WMRは主にPreactプロジェクトに対して最適化された開発ツールです。ViteやSnowpackと同様に高速なビルドを実現しています。設定不要、簡単なセットアップが特徴です。

Rollupを使ってHTMLをプリレンダリングし、高速な表示をサポートします。

その他知っておきたい開発ツール

Docker登場以降、コンテナ技術を開発時・運用時に利用するのが当たり前になっています。フロントエンド開発においても、コンテナ技術を使って開発環境を構築することが一般的です。

さらに、そのコンテナ環境をブラウザ内部で実現する動きも出ています。Web Container APIやktock/vscode-container-wasmなどによって、ブラウザ内部でNode.jsを実行したり、Webサーバーを実行して開発も行えます。

人工知能とフロントエンドデザイン

ここ数年、トレンドになっているのがAI・機械学習です。Web GPUを使ってブラウザ内で機械学習を実行するという意味ではなく、AI・機械学習を利用してデザイン・開発プロセスをサポートしてくれる視点でツールを紹介します。

FRONT-END.AI

FRONT-END.AIは画像ファイル（JPEGファイルなど）をアップロードすると、そのデザイン構成を読み込んでHTML/CSSを生成します。これまではレイヤーを自分で分けたファイルを作成する必要がありましたが、FRONT-END.AIはその手間を省いてくれます。

デザインファイルから素材を切り出したり、CSSクラス名の決定プロセスなどを省略できます。

v0 by Vercel

v0はプロンプトを入力すると、その内容に合わせたHTMLコードを出力します。素のHTMLはもちろん、Next.jsで使えるReactのコードも生成します。生成されたコンポーネントは専用コマンドを使って自分のアプリにインポートできます。

生成されるコンポーネントはTailwind CSSを使ってスタイリングされています。また、生成されたコードは追加のプロンプトでカスタマイズできます。

Design 2 Code

手書きのスケッチ画像からHTML/CSSを生成します。コード生成部分にはChatGPTを利用しており、GPT4のビジョンアクセスが必要とのことです。

openv0 | generative UI components

openv0は前述のv0のオープンソース実装になります。こちらもDesign 2 Codeと同じく、OpenAIを利用しています。キーは別途用意する必要があります。

AIが開発プロセスに与える影響

AIによって、プログラミングやHTMLコーディングプロセスの大半が自動化される可能性があります。これにより、開発者はより高度な作業に集中できるようになります。また、AIによって生成されたコードは、品質が高く、一貫性があります。

すでにGitHub Copilotなどを活用している人は多いでしょう。CodeRabbitのようにレビュープロセスもAIによって自動化できます。

ただし、課題なのはAIが生成したコードの理解や保守です。AIが生成したコードを理解し、修正するためには、開発者にとって新たなスキルが求められるかもしれません。AIによって生成されたコードであっても、その保証はプログラマーがしなければなりません。そのため、コードに関する知識は常に磨いておく必要があります。

まとめ

今回は2024年現在におけるフロントエンドを軸としたトレンドと、その周辺テクノロジーを紹介しました。フロントエンドは常に進化を続けており、新しい技術やツールが次々と登場しています。これらのトレンドやテクノロジーを取り入れることで、より効率的な開発が可能になります。

AIのように自動化を急速に推し進める技術もあり、エンジニアとしてどう取り組めば良いのか分からなくなってしまうかも知れません。大事なのは、AIにすべて任せられる訳ではなく、その成果物に対する品質保証はエンジニアに委ねられているという点です。そのためには常に技術を磨き、新しい技術にも柔軟に対応できるようにしましょう！

役に立ったら、記事をシェアしてください

コラム一覧

AI App Modeler - AIでアプリケーション開発を革新

詳しくはこちら

arrow_forward
Contact Usお問い合わせはこちら