# JavaScriptを使ったフォームの構築

> Formspree Docs · Reactの使い方 · 2026年3月23日

JavaScript を使用して Formspree を既存のアプリケーションに統合したり、フォームをより動的にしたり、フォーム開発ワークフローを効率化したりすることができます。

Formspree では、セットアップに応じていくつかの異なる方法で JavaScript を利用できます：

-   プレーン HTML での宣言的なフォーム処理には `@formspree/ajax`
-   React アプリケーション向けの React ライブラリ
-   モダンな JavaScript ワークフロー向けの CLI

それぞれの詳細については以下をご覧ください。

### AJAX 送信

JavaScript でフォーム送信を処理する推奨方法は [@formspree/ajax](https://www.npmjs.com/package/@formspree/ajax) を使用することです。

このライブラリを使用すると、独自の fetch、Axios、または jQuery ロジックを記述することなく、フォームを非同期で送信できます。標準の HTML フォームと連携し、送信、バリデーションエラー、ローディング状態、成功メッセージを自動的に処理します。詳しくは[こちらの記事](/articles/building-your-form/submit-forms-with-javascript-ajax/)をご覧ください。

### Formspree React ライブラリ

Formspree は [Formspree React ライブラリ](/articles/working-with-react/the-formspree-react-library/)を使用して React アプリケーションに統合できます。Formspree React ライブラリは [React でのコンタクトフォーム構築](/articles/using-the-cli/build-a-contact-form-with-react/)、[MailChimp フォームの設定](/articles/using-the-cli/build-a-mailchimp-form-with-react/)、[webhook アクションの追加](/articles/using-the-cli/send-a-webhook/)、その他多くのサードパーティ統合に使用できます。

### Formspree CLI

React ライブラリに加えて、Formspree はモダンな JavaScript ツールでフォームを構築・デプロイするための便利なワークフローを提供するコマンドラインインターフェースツールも提供しています。Formspree CLI の詳細は[こちら](/articles/using-the-cli/the-formspree-cli/)でご覧いただけます。

### 追加リソース

Formspree フォームの JavaScript 統合に関する追加のサンプルとガイドは以下でご覧いただけます。

[ガイド - NextJS](https://formspree.io/guides/nextjs/)

[ガイド - Gatsby](https://formspree.io/guides/gatsby/)

[CodeSandbox サンプル](https://codesandbox.io/examples/package/@formspree/react)