TypeScriptでReact・Vue.jsプロジェクトを効率化するコンポーネント単位のコード分割方法

TypeScriptを活用したReactやVue.jsプロジェクトにおいて、コード分割はプロジェクトの規模が大きくなるにつれて重要性が増します。コンポーネント単位でのコード分割を行うことで、読みやすさやメンテナンス性が向上し、パフォーマンスの最適化も可能になります。本記事では、ReactやVue.jsを使ったプロジェクトにおいて、TypeScriptを活用して効率的にコンポーネントを分割し、パフォーマンスの向上や開発効率の改善を図る方法について詳しく解説します。

コード分割の基本概念

コード分割とは、アプリケーションのコードを機能ごとに分割し、必要に応じてロードする手法です。特に大規模なWebアプリケーションでは、初期ロード時にすべてのコードを一度に読み込むと、ページ表示が遅くなり、ユーザー体験が損なわれます。コード分割を行うことで、必要な部分だけを効率的に読み込み、初期表示の高速化やパフォーマンスの向上を実現します。ReactやVue.jsなどのモダンフレームワークでは、コンポーネントごとにコードを分けて管理し、必要に応じてそれらを動的に読み込むことができます。

TypeScriptとコード分割の相性

TypeScriptは、コード分割を行う際にもその強力な型定義が役立ちます。プロジェクトが大規模化し、複数のファイルやコンポーネントに分割されると、各コンポーネント間の依存関係やデータのやり取りが複雑になりますが、TypeScriptの静的型チェックがこれを大幅に簡略化します。

型によってコンポーネント同士のやり取りが明確になるため、分割されたコードでも一貫性を保ちやすく、リファクタリングや新機能の追加が容易になります。また、TypeScriptは型安全性を提供するため、ランタイムエラーを減らし、コードの保守性が向上します。このように、TypeScriptはコード分割の管理をより信頼性の高いものにする強力なツールです。

Reactでのコード分割手法

Reactでは、コンポーネント単位でコード分割を行うことが一般的です。これにより、再利用性が高まり、管理しやすいコードベースを保つことができます。Reactでのコード分割の基本的な手法は、React.lazyとSuspenseを使用した動的インポートです。

React.lazyによる動的インポート

React.lazyは、コンポーネントを遅延読み込みするためのReact標準のAPIです。必要なタイミングでコンポーネントを読み込むことで、初期ロード時のコード量を減らし、パフォーマンスを向上させます。たとえば、以下のように使用します。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

この例では、LazyComponentは必要な時にだけ読み込まれます。

コンポーネントの分割戦略

コード分割は、ルートコンポーネントやページごとに行うのが効果的です。ユーザーが特定のページを閲覧する際に、そのページに必要なコードだけを動的に読み込むことで、初期ロードを高速化できます。たとえば、React Routerを使用してルーティングに基づいてコンポーネントを分割する方法が一般的です。

このように、Reactにおけるコード分割は、パフォーマンスを向上させるだけでなく、プロジェクトの規模が拡大しても管理しやすい構造を維持するために重要です。

Vue.jsでのコード分割手法

Vue.jsでも、コンポーネント単位でのコード分割が推奨されています。Vueでは、dynamic importを用いてコンポーネントを遅延ロードすることで、プロジェクト全体のパフォーマンスを最適化し、効率的なコード分割が実現できます。

Vue.jsの動的インポート

Vue.jsでの動的インポートは、import()を使って実現できます。これにより、特定のコンポーネントが必要になったときに初めてロードされるため、初期ロード時のコード量が減少します。以下はその基本的な使い方の例です。

<template>
  <div>
    <Suspense>
      <template #default>
        <LazyComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';

const LazyComponent = defineAsyncComponent(() =>
  import('./LazyComponent.vue')
);

export default {
  components: {
    LazyComponent
  }
};
</script>

このコードでは、defineAsyncComponentを使ってLazyComponentを遅延ロードしています。Suspenseを用いることで、読み込み中に表示するフォールバックを設定し、ユーザー体験を損なわないように工夫できます。

ルーティングによるコード分割

Vue Routerを活用したコード分割も有効です。Vue Routerでは、ページやビューのルーティングごとにコンポーネントを動的に読み込むことができ、ルートごとにコードを分割することで初期ロードの最適化が図れます。以下はその実装例です。

const routes = [
  {
    path: '/about',
    component: () => import('./views/AboutView.vue')
  }
];

このように、ページのルーティングが行われたときにだけ対応するコンポーネントが読み込まれるため、ユーザーが最初にアクセスするページの表示速度が向上します。

Vue.jsでのコード分割は、動的インポートとルーティングの活用により、ユーザー体験を向上させ、よりスケーラブルなアプリケーション開発を実現します。

動的インポートと遅延ロードの活用

動的インポートと遅延ロードは、コード分割を実現するための強力な手法で、アプリケーションのパフォーマンスを最適化するために非常に有効です。これにより、ユーザーが必要とするコンポーネントやページだけを後から読み込み、初期ロードの負荷を大幅に軽減できます。

動的インポートの仕組み

動的インポート（Dynamic Import）は、JavaScriptのimport()関数を使って、必要なタイミングで特定のモジュールを読み込む機能です。これは、Webアプリケーションにおいて、使用するコンポーネントやライブラリを最初からすべて読み込むのではなく、必要に応じて部分的にロードすることを可能にします。

例えば、以下のコードは、ReactやVue.jsでよく使われる動的インポートの例です。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

このようにしてコンポーネントを遅延ロードすると、初期表示時に大きなモジュールをロードする必要がなくなります。

遅延ロードでパフォーマンスを最適化

遅延ロード（Lazy Loading）は、初期ロード時のコード量を減らし、ユーザーがページを操作する際に必要な部分だけをロードする仕組みです。これは、大規模なアプリケーションや多くの機能を持つWebサイトにおいて非常に効果的です。

動的インポートと遅延ロードを組み合わせることで、以下のような効果を得られます。

• 初期表示を高速化し、ユーザーに素早く画面を表示する
• 必要な機能を使うタイミングでコンポーネントをロードし、不要なデータを読み込まない
• 特定のページや機能が頻繁に使われない場合、その部分のリソースは後で読み込まれるため、リソース消費を効率化する

例えば、ユーザーが特定のボタンをクリックしたときに初めてモジュールを読み込むことで、ユーザー体験を最適化することが可能です。

実装例: 画像の遅延ロード

遅延ロードはコンポーネントだけでなく、画像やリソースにも適用できます。以下は、画像の遅延ロードを実装する例です。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />

JavaScriptを使って、スクロール位置に基づき、ユーザーが近づいたタイミングでdata-srcに指定された実際の画像を読み込みます。

動的インポートと遅延ロードを効果的に活用することで、初期ロードを軽減し、ユーザーがスムーズにアプリケーションを操作できるようになります。これにより、ユーザー体験の向上とアプリケーションのスケーラビリティを両立することが可能です。

WebpackとTypeScriptの連携

Webpackは、JavaScriptやTypeScriptプロジェクトにおけるモジュールバンドラーとして、コード分割と効率的なビルドプロセスを支える重要なツールです。TypeScriptと連携することで、プロジェクトの依存関係を整理し、パフォーマンスを向上させる最適なバンドルを作成できます。

WebpackとTypeScriptの設定

WebpackとTypeScriptを連携するためには、まず適切な設定を行う必要があります。基本的な構成として、ts-loaderを利用してTypeScriptファイルをバンドルできるようにします。

まず、必要な依存パッケージをインストールします。

npm install --save-dev webpack webpack-cli typescript ts-loader

次に、webpack.config.jsでTypeScriptのバンドル設定を行います。

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

この設定により、src/index.tsをエントリーポイントとしてTypeScriptファイルがバンドルされ、最終的にdist/bundle.jsとして出力されます。

コード分割の設定

Webpackは、SplitChunksPluginを使用してコード分割を簡単に実現できます。これにより、依存ライブラリや共通モジュールを分割し、再利用できるようになります。以下のように設定することで、コード分割を行います。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

この設定により、node_modulesにあるライブラリ（ReactやVue.jsなど）を別のバンドルに分割し、キャッシュ効率を上げることができます。

動的インポートとWebpackの連携

TypeScriptで動的インポートを使用してコードを分割する場合、Webpackは自動的に新しいバンドルを作成し、必要なタイミングでそれをロードします。例えば、以下のように動的インポートを設定します。

const loadComponent = async () => {
  const { LazyComponent } = await import('./LazyComponent');
  return LazyComponent;
};

Webpackはこのimport()を検出し、LazyComponent用に別のバンドルファイルを作成します。これにより、不要なコンポーネントが初期ロード時に含まれず、必要なときにだけロードされるため、パフォーマンスの最適化が図れます。

Webpackのパフォーマンス最適化オプション

Webpackには、ビルドパフォーマンスを向上させるさまざまな設定があります。例えば、cacheを有効にしてビルド速度を向上させたり、modeをproductionに設定することで、最適化されたバンドルを作成することが可能です。

module.exports = {
  mode: 'production',
  cache: {
    type: 'filesystem',
  },
};

productionモードでは、コードが自動的に最適化され、デッドコードの除去やミニファイが行われ、軽量なバンドルが生成されます。

WebpackとTypeScriptを組み合わせることで、効率的なコード分割とパフォーマンスの向上が実現でき、プロジェクトのスケーラビリティが向上します。

TypeScriptでの型管理とコンポーネント分割

TypeScriptは、静的型チェックを通じてコンポーネント間のやり取りを明確にし、コード分割後でも一貫性を保ちながらプロジェクトの保守性を高めます。特に、大規模なReactやVue.jsプロジェクトでのコンポーネント分割において、TypeScriptの型管理は大きな助けとなります。

プロップスの型定義

TypeScriptでは、コンポーネントが受け取るプロップス（props）に対して型を明示的に定義することができ、型安全なデータのやり取りを実現します。以下はReactでの例です。

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

このように、プロップスに型を指定することで、コンポーネント間のデータのやり取りが厳密に管理され、型に関するエラーが事前に検出されます。Vue.jsでも同様に、defineComponentやPropsで型定義が可能です。

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: {
      type: String,
      required: true,
    },
  },
});

コンポーネント間のデータ共有

コンポーネント分割を進めていくと、親子関係や兄弟コンポーネント間でのデータ共有が増えていきます。TypeScriptを使用すると、このデータフローを型で厳密に制御できるため、どのコンポーネントがどのデータを受け取るか、渡すべきデータが適切であるかを正確に管理できます。

例えば、以下のようにTypeScriptでコンテキストAPIを使うと、複数のコンポーネント間で型安全にデータを共有できます。

type ThemeContextType = {
  theme: string;
  toggleTheme: () => void;
};

const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);

こうすることで、誤ったデータ型が渡されることを防ぎ、分割されたコンポーネント間のデータ連携が信頼性の高いものになります。

動的インポートと型推論

TypeScriptは、動的インポートを行った際にも型推論を行います。たとえば、import()を使ってコンポーネントを遅延ロードする場合でも、TypeScriptは自動的に型情報を推論し、開発時に型エラーを防ぎます。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

type LazyComponentType = typeof LazyComponent;

このように、動的に読み込んだコンポーネントにも型情報を付与することで、プロジェクト全体が一貫性のある型管理下に置かれます。

型定義の再利用と効率化

プロジェクトが大規模化すると、複数のコンポーネントで同じ型定義を使い回すことが求められます。TypeScriptでは、共通の型定義をtypes.tsのようなファイルにまとめて定義し、それを複数のコンポーネントでインポートすることで、一貫した型管理が可能です。

// types.ts
export type User = {
  id: number;
  name: string;
  email: string;
};

// 他のコンポーネントで再利用
import { User } from './types';

これにより、複数のコンポーネントで同じ型定義を使用し、一貫性を保ちながら開発効率を向上させることができます。

TypeScriptを使った型管理は、分割されたコンポーネント間でも信頼性の高いデータのやり取りを実現し、コードベースの保守性を大幅に向上させます。

パフォーマンス向上のためのベストプラクティス

コンポーネント単位のコード分割は、アプリケーションのパフォーマンスを向上させるための重要な手法です。TypeScriptを使用するプロジェクトにおいても、適切にコードを分割することで、初期ロードの時間を短縮し、ユーザー体験を大幅に改善することが可能です。ここでは、パフォーマンス向上のためのベストプラクティスをいくつか紹介します。

コードスプリッティングで初期ロードを最小化

初期ロード時にすべてのコンポーネントを一度に読み込むと、ファイルサイズが大きくなり、ページ表示までの時間が長くなります。ReactやVue.jsでは、動的インポートとコードスプリッティングを活用することで、初期ロード時に必要な最小限のコードだけを読み込み、その他の部分はユーザーが実際に操作したときにロードすることが可能です。

例えば、Reactでの動的インポートを使用したコード分割の例は次の通りです。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

このようにすることで、LazyComponentは必要なタイミングでのみ読み込まれ、初期のバンドルサイズを最小化できます。

キャッシュを活用してパフォーマンスを向上

コード分割により生成されたバンドルファイルは、ブラウザキャッシュを有効に活用することができます。webpackを使用してハッシュ付きファイル名を生成し、キャッシュのコントロールを最適化することで、ユーザーが再訪問した際のロード速度を大幅に向上させることができます。

output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
},

これにより、変更のあったファイルだけが再ダウンロードされ、キャッシュに残っているファイルは再利用されます。

不要なライブラリの除去

プロジェクトが成長するにつれて、使われなくなったライブラリや依存関係が増える可能性があります。これらを定期的に整理し、不要なライブラリを削除することで、最適なバンドルサイズを維持できます。webpack-bundle-analyzerを使ってバンドル内のモジュールを可視化し、不要なものを見つけて削除することが推奨されます。

npm install --save-dev webpack-bundle-analyzer

インストール後、以下のコマンドを使用してバンドルの分析を行います。

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [
  new BundleAnalyzerPlugin(),
],

これにより、プロジェクトのバンドル構成を視覚的に確認し、不要な依存関係を特定できます。

画像やメディアファイルの遅延ロード

コンポーネントやコードだけでなく、画像やメディアファイルも遅延ロードすることがパフォーマンス改善に寄与します。画像の遅延ロード（lazy loading）を使用することで、ユーザーが実際にスクロールして画像が表示されるタイミングでのみリソースを読み込むことが可能です。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" alt="example" />

JavaScriptライブラリやネイティブのloading="lazy"属性を活用することで、画像の遅延ロードを簡単に実装できます。

リソースの圧縮と最小化

Webpackや他のツールを使用して、CSSやJavaScriptの圧縮を行うことは、パフォーマンス向上の基本的な手法です。ファイルサイズを削減し、ネットワーク上での転送速度を向上させるために、TerserPluginやCSSMinimizerPluginなどのプラグインを使ってコードを最小化します。

const TerserPlugin = require('terser-webpack-plugin');

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
},

この設定により、不要な空白やコメントが除去され、軽量なコードが生成されます。

Web Vitalsの監視と最適化

Web Vitals（Core Web Vitals）は、ウェブページのパフォーマンスを測定する指標です。これらを意識しながら開発することで、ユーザー体験を最適化できます。Web Vitalsに基づいたパフォーマンス監視を行い、実際のユーザーエクスペリエンスに影響を与える部分に注力することが重要です。

TypeScriptを用いたコンポーネント分割とパフォーマンス最適化は、初期ロードを軽量化し、ユーザー体験を向上させるための重要な要素です。これらのベストプラクティスを活用することで、大規模なアプリケーションでも優れたパフォーマンスを維持できます。

リファクタリングとコンポーネント分割

コードのリファクタリングは、ソフトウェア開発において継続的に行われる重要なプロセスです。TypeScriptを活用したReactやVue.jsのプロジェクトでも、リファクタリングを通じてコンポーネントを効率的に分割し、コードの可読性やメンテナンス性を向上させることが可能です。

リファクタリングの目的

リファクタリングとは、動作はそのままに、コードの内部構造を改善する作業です。主な目的は以下の通りです。

• コードの可読性向上：分かりやすいコードにすることで、開発者全員がコードを理解しやすくし、バグの発生を防ぎます。
• 再利用性の向上：共通部分をコンポーネントとして分割することで、再利用可能なパーツを作り、開発効率を上げます。
• メンテナンス性向上：プロジェクトが大規模になるほど、明確に分割されたコードベースの方が管理がしやすくなります。

TypeScriptを用いたリファクタリングでは、型の明確化やコンポーネント間の依存関係の整理が特に役立ちます。

リファクタリング手法の例

リファクタリングの過程で、冗長なコードや重複しているロジックを見つけ、これらを独立したコンポーネントとして分割することが効果的です。例えば、複数のページで使用しているフォーム入力ロジックを一つのFormInputコンポーネントにまとめ、他のページで再利用できるようにします。

// 以前のコード（重複したロジック）
<input type="text" value={name} onChange={handleNameChange} />
<input type="text" value={email} onChange={handleEmailChange} />

// リファクタリング後
const FormInput = ({ value, onChange, label }: { value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; label: string }) => (
  <div>
    <label>{label}</label>
    <input type="text" value={value} onChange={onChange} />
  </div>
);

このように、共通するロジックを抽象化し、再利用できるコンポーネントとして分離することで、コードの重複を避け、メンテナンスを容易にします。

型の再利用と改善

リファクタリングにより、TypeScriptで使用する型も整理し、再利用性を高めることが可能です。特に、同じデータ構造を複数のコンポーネントで扱う場合は、型定義を一元化し、それを必要な場所で使うようにします。例えば、以下のように共通のUser型を定義し、複数のコンポーネントで利用します。

// types.ts
export type User = {
  id: number;
  name: string;
  email: string;
};

// 使用するコンポーネント
import { User } from './types';

const UserProfile = ({ user }: { user: User }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

このように、型を一元化することで、コードの整合性が保たれ、メンテナンス時のミスを減らすことができます。

分割後のコンポーネントテスト

コンポーネントを分割した後は、必ず各コンポーネントの単体テストを実行し、期待どおりに動作するかを確認する必要があります。TypeScriptを使用することで、テスト中に型チェックが行われ、テストケースの信頼性が向上します。

例えば、JestやVue Test Utilsなどを用いて、コンポーネントの入力と出力をテストします。

import { render, screen } from '@testing-library/react';
import { FormInput } from './FormInput';

test('renders input field correctly', () => {
  render(<FormInput value="test" onChange={() => {}} label="Name" />);
  expect(screen.getByLabelText(/Name/i)).toBeInTheDocument();
});

リファクタリング後のテストは、コンポーネントの信頼性を高め、将来的な変更にも強いコードベースを構築する助けとなります。

コンポーネントの依存関係整理

コンポーネント分割後の依存関係もリファクタリングの重要なポイントです。特に、親コンポーネントと子コンポーネントの役割を明確にし、コンポーネント間の依存を最小限に抑えることで、変更が一箇所に留まるようにします。データフローが複雑な場合、コンテキストAPIやVuexのような状態管理ライブラリを活用し、グローバルな状態管理を導入することも検討しましょう。

リファクタリングを定期的に行うことで、プロジェクトの健全性を保ち、長期的なメンテナンスコストを削減できます。TypeScriptを活用したコンポーネント分割と型の管理は、よりスケーラブルで保守性の高いコードベースを実現します。

応用例とケーススタディ

TypeScriptを使用したReactやVue.jsでのコード分割は、多くの実際のプロジェクトで成功を収めており、さまざまな形で活用されています。ここでは、具体的な応用例やケーススタディを通じて、コード分割がどのように役立つかを紹介します。

ケーススタディ1: 大規模eコマースサイトの最適化

ある大規模なeコマースサイトでは、ページの読み込み速度が遅く、ユーザー体験の悪化が課題でした。TypeScriptを使用したコンポーネント分割と、ReactのReact.lazyによる動的インポートを導入することで、パフォーマンスを大幅に改善しました。

まず、製品一覧ページと詳細ページ、ユーザーページなど複数のページで共通するコンポーネントを再利用可能な単位に分割しました。次に、特定のページで必要となるコンポーネントのみを動的に読み込むように設定しました。

const ProductList = React.lazy(() => import('./ProductList'));
const UserProfile = React.lazy(() => import('./UserProfile'));

この結果、初期ロード時に不要なコンポーネントが読み込まれなくなり、読み込み時間を30%削減することに成功しました。

ケーススタディ2: SaaSアプリケーションのパフォーマンス向上

あるSaaSアプリケーションでは、ユーザーの操作によって複数のダッシュボードや分析ツールが表示されるため、JavaScriptバンドルサイズが非常に大きくなっていました。Vue.jsとTypeScriptを使用し、各ツールやダッシュボードを個別のコンポーネントとして分割し、動的に読み込む手法を採用しました。

Vue Routerを活用して、ページ遷移時に対応するコンポーネントのみを動的にインポートすることで、初期ロードが必要なJavaScriptのサイズを劇的に削減しました。

const routes = [
  {
    path: '/dashboard',
    component: () => import('./Dashboard.vue'),
  },
  {
    path: '/analytics',
    component: () => import('./Analytics.vue'),
  }
];

このアプローチにより、JavaScriptの初期ロード量を50%以上削減し、ダッシュボードの表示速度を大幅に向上させることができました。

応用例: 動的フォーム生成アプリケーション

TypeScriptとコード分割の利点を最大限に活かしたプロジェクトの一つが、動的フォーム生成アプリケーションです。このプロジェクトでは、ユーザーがカスタムフォームを作成する際に、各フォームフィールドをコンポーネントとして分割し、必要に応じて動的に読み込む設計を行いました。

たとえば、フォームに選択されるフィールドが10種類ある場合、それぞれのフィールドコンポーネントを動的にインポートします。

const TextField = React.lazy(() => import('./TextField'));
const CheckboxField = React.lazy(() => import('./CheckboxField'));

フォームの構成に応じて、必要なフィールドのみを読み込み、ユーザーが追加する度にコンポーネントを遅延ロードすることで、アプリケーション全体の動作を軽量化し、動的フォームのパフォーマンスを向上させました。

パフォーマンスと保守性の両立

これらのケーススタディや応用例に共通するのは、パフォーマンス向上と保守性の両立が実現されている点です。コンポーネント分割により、アプリケーションが大規模化しても各コンポーネントを個別に管理でき、TypeScriptの型チェック機能が安全なデータのやり取りを保証します。

TypeScriptを使ったコード分割は、単に初期ロードを最適化するだけでなく、開発者が管理しやすい構造を維持しつつ、将来の拡張にも対応できる柔軟な設計を可能にします。

まとめ

本記事では、TypeScriptを活用してReactやVue.jsプロジェクトにおけるコンポーネント単位のコード分割を行い、パフォーマンス向上と保守性を高める方法について解説しました。コード分割の基本概念から、動的インポート、遅延ロード、リファクタリングの手法、そして実際のプロジェクトでの応用例までを紹介し、効率的なプロジェクト管理とユーザー体験の改善を図るためのベストプラクティスを取り上げました。適切なコード分割を行うことで、大規模なアプリケーションでもスケーラビリティとパフォーマンスを維持することが可能になります。