SPAでの実装

本ページでは、espar form を SPA(Single Page Application) 環境で実装する方法について解説します。

以降の解説は、 espar form の仕組みや埋め込みコードやバリデーション等の基本的な理解が必要です。espar form が初めての方は、まず最初に以下ページを読み、SPA ではない単一HTMLページで実装をしてみることをお勧めします。

SPA 環境で espar form を使ったフォームを実装する方法には、2パターンあります。制作するページに当てはまるパターンを選んで下さい。

	特徴
パターン1⁠‍‌⁣‌⁠⁠⁠⁠‌‌⁣⁠⁠⁠‍⁣‌‍‍⁣⁠‌⁠⁠⁣	シンプルなSPA、初期ロード時間を重視、フォーム設定が固定
パターン2	モジュール化、コード分割、フォームが一部のページのみ

パターン1 : シンプルなSPA

導入 > メールを飛ばしてみるの手順に沿って、フォームを実装するページのHTMLに espar form の埋め込みコードを貼り付ける基本的な実装パターンです。

<script src="https://bridge.espar.biz/v2.0.0/form.js"></script>
<script>
window.espar_form = {
    espf: {
        api_key: 'YOUR_API_KEY',
        auto_init: false
    }
};
</script>

HTMLが読み込まれた時点で、 form.js の読み込みと espar form のグローバルオブジェクト window.espar_form の設定を完了し、後の画面遷移で DOM を動的に追加・削除する実装となります。

このパターンは、制作するページがシンプルなSPAで以下条件を満たす場合に適しています。

フォームの設定(バリデーションや要素等)が固定的である
初期のロード時間をなるべく速くしたい

なお、フレームワーク使用有無やその種類に関わらず、実装に際して以下の点に留意して下さい。

auto_init で espar form の自動初期化を無効化すること

var espar_form = {
    espf: {
        api_key: 'YOUR_API_KEY',
        auto_init: false // 自動初期化を無効
    }
};

reset() で明示的に espar form を初期化する
```
// フォームを初期化
espar_form.espf.reset();
```

(注) 上記コード中の espf はフォームIDです。フォームによって異なる場合があります。

以下にシンプルなSPA実装での例を示します。

React

Reactで実装する場合の留意点は、具体的に以下の通りとなります。

DOMの動的追加 : コンポーネントの表示時にフォームの DOM を追加する
DOMの追加後にフォーム初期化 : useEffect 内で reset() を呼び出して初期化する

実装サンプル

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>espar form + React (Pattern 1)</title>
</head>
<body>
    <div id="root"></div>

    <!-- ライブラリを事前に読み込み -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://bridge.espar.biz/v2.0.0/form.js"></script>

    <!-- フォーム設定を事前に定義 -->
    <script>
        window.espar_form = {
            espf: {
                api_key: 'YOUR_API_KEY',
                auto_init: false
            }
        };
    </script>

    <!-- React アプリケーション -->
    <script type="text/babel">
        const { useState, useEffect } = React;

        function App() {
            const [currentPage, setCurrentPage] = useState('home');

            // ページ遷移でフォーム画面に入ったら初期化
            useEffect(() => {
                if (currentPage === 'form') {
                    espar_form.espf.reset();
                }
            }, [currentPage]);

            return (
                <div>
                    <button onClick={() => setCurrentPage('home')}>ホーム</button>
                    <button onClick={() => setCurrentPage('form')}>お問い合わせ</button>

                    {currentPage === 'form' && (
                        <form className="espf" method="POST">
                            <label>お名前</label>
                            <input type="text" name="name" className="espf-required" />
                            <div className="espf-e-name-required">お名前を入力してください</div>

                            <input type="button" value="送信" className="espf-b-submit" />
                        </form>
                    )}
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

Vue.js

Vue.js で実装する場合の留意点は、具体的に以下の通りとなります。

DOM の切り替え: v-if でフォーム DOM の表示/非表示を切り替える
DOM の表示後にフォーム初期化: $nextTick() 内で reset() を呼び出して初期化する

実装例

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>espar form + Vue.js (Pattern 1)</title>
</head>
<body>
    <div id="app">
        <button @click="currentPage = 'home'">ホーム</button>
        <button @click="showFormPage">お問い合わせ</button>

        <div v-if="currentPage === 'home'">
            <h2>ホーム</h2>
            <p>ここにはフォームがありません。</p>
        </div>

        <form v-if="currentPage === 'form'" class="espf" method="POST">
            <label>お名前</label>
            <input type="text" name="name" class="espf-required" v-model="formData.name">
            <div class="espf-e-name-required">お名前を入力してください</div>

            <input type="button" value="送信" class="espf-b-submit">
        </form>
    </div>

    <!-- ライブラリを事前に読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="https://bridge.espar.biz/v2.0.0/form.js"></script>

    <!-- フォーム設定を事前に定義 -->
    <script>
        window.espar_form = {
            espf: {
                api_key: 'YOUR_API_KEY',
                auto_init: false
            }
        };

        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    currentPage: 'home',
                    formData: { name: '' }
                };
            },
            methods: {
                showFormPage() {
                    this.currentPage = 'form';
                    // DOM 反映後にフォームを初期化
                    this.$nextTick(() => {
                        espar_form.espf.reset();
                    });
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

パターン2: モジュール化されたSPA

espar form の埋め込みコードをHTMLに直接貼り付けないパターンです。

フォーム用の DOM を動的に読み込むほか、espar form に必要な form.js の読み込みや、グローバルオブジェクト window.espar_form の設定も動的に行う実装です。

制作するページがコード分割・モジュール化されていたり、フォームが一部のページにだけ必要な場合に適しています。