Skip to main content

導入ツールの実行

本節では、導入ツールを実行して省力化コンポーネントに必要な資材をインストールする手順について説明します。

導入ツールのコマンド実行​

ターミナルを起動し、前節でダウンロードした導入ツールのルートディレクトリに移動してください。ルートディレクトリに移動したら、次にコマンドラインで npm ci コマンドを実行してください。

その後、installer-cli\installer-for-next.bat コマンドを実行します。引数には、省力化コンポーネントを導入したいプロジェクトのルートディレクトリの絶対パスを引用符で囲って指定してください。

terminal
cd <導入ツールのルートディレクトリ>
installer-cli\installer-for-next.bat ＜プロジェクトのルートディレクトリの絶対パス＞
info

ターミナルでのパスの入力方法として、エクスプローラーからのフォルダのドラック&ドロップがあります。ドラック&ドロップをすることでパスが自動的に入力されるため、手入力の手間や打ち間違いを減らせます。

installer-cli\installer-for-next.bat コマンドを実行すると以下のプロンプトが順番に表示されますので、以降の詳細を確認しながら選択を行ってください。

  • パッケージマネージャの選択
  • UI コンポーネントライブラリの選択
  • バリデーションライブラリの選択
  • API 呼び出し方式の選択
  • デモ画面を含めるかの選択
  • Storybook を含めるかの選択
  • コピー先ディレクトリの選択(*1)

*1: すでに作成されているディレクトリしか選択できないため、必要があれば事前にディレクトリを作成してください。

パッケージマネージャの選択​

以下の 2 つのパッケージマネージャから選択してください。

  • npm ※デフォルト
  • yarn

UI コンポーネントライブラリの選択​

以下の 3 つの UI コンポーネントライブラリから選択してください。

  • Ant Design ※デフォルト
  • Material UI
  • React Bootstrap
info

省力化コンポーネントの導入事例において、最も多く採用されている UI コンポーネントライブラリは Ant Design です。そのため、本ドキュメントに登場する画面例や実装例は、Ant Design を選択した場合を前提としています。

特に指定がない場合は、「Ant Design」を選択することを推奨します。

バリデーションライブラリの選択​

以下の 2 つのバリデーションライブラリから選択してください。

  • Yup ※デフォルト
  • Zod

API 呼び出し方式の選択​

以下の 3 つの API 呼び出し方式から選択してください。

  • Orval（シンプル版）※デフォルト
  • Orval（拡張版）
  • TanStack Query
info

Orval は OpenAPI 仕様からソースコードを自動生成するツールです。「Orval」を選択すると、導入ツールは自動生成されるコードに対応する部品をインストールします。自動生成を行わずに TanStack Query を直接使用する場合は、「TanStack Query」を選択してください。

自動生成の方が開発効率が上がるため、 Orval を推奨します。

info

Orval（シンプル版）と Orval（拡張版）の違いは、mutator に設定する Axios カスタムインスタンスの違いです。それぞれの Axios カスタムインスタンスの詳細については、Orval の設定を参照してください。

特に指定がない場合は、「Orval（シンプル版）」を選択してください。

なお、Orval（シンプル版）と Orval（拡張版）で、それぞれインストールされる省力化コンポーネント用の部品が異なることに注意してください。

デモ画面を含めるかの選択​

デモ画面を含める場合は「はい」、含めない場合は「いいえ」を選択してください。

  • はい ※デフォルト
  • いいえ
info

デモ画面自身も省力化コンポーネントを使用して作成されているため、実装方法や動作イメージなどを確認できます。

初めて省力化コンポーネントを使用する方にはデモ画面を含めることを推奨します。

Storybook を含めるかの選択​

Storybook を含める場合は「はい」、含めない場合は「いいえ」を選択してください。

  • はい ※デフォルト
  • いいえ
info

Storybook とは、 UI コンポーネント用のカタログです。Storybook を利用することで、UI コンポーネントの見た目や動作、使い方をブラウザ上で簡単に確認できます。

初めて省力化コンポーネントを使用する方には Storybook を含めることを推奨します。

コピー先ディレクトリの選択​

省力化コンポーネントの資材をコピーする先のディレクトリを選択してください。

ディレクトリの選択方法
frameworkフォルダをコピーするディレクトリを選択してください。
  ↓ C:\Users\xxx\next-project\
    → C:\Users\xxx\next-project\public
    ↓ C:\Users\xxx\next-project\src
      → C:\Users\xxx\next-project\src\app
      → C:\Users\xxx\next-project\src\components
      → C:\Users\xxx\next-project\src\[copy-destination] ※指定したいディレクトリを選択する

-----------------------------------------------------

＊ リスト内を移動するには矢印キーを使用します。
＊ [↑] [↓]ではリスト内を上下に移動できます。
＊ [→]では選択されているディレクトリ内に入ることができます。
＊ ディレクトリを選択する際には[Enter]ボタンを押下してください。
warning

プロジェクト内に src ディレクトリがある場合、 framework フォルダのコピー先は src の配下に指定するようにしてください。 src 配下に指定されなかった場合、デモ画面ファイル内の import 文が適切に設定されない可能性があります。その場合は、import 文を編集し直す必要があります。

コピー先ディレクトリの選択までが完了すると資材のコピーおよびライブラリのインストールが開始されます。インストールが成功すると省力化コンポーネントが使用できる状態になります。

次節インストール資材では、コピーされるディレクトリの構成やインストールされるライブラリについて説明します。