React で Swiper 使ってみた (react-id-swier)

## 使用するもの

- [React](https://ja.reactjs.org/)
- [Node.js](https://nodejs.org/en/)
- [react-id-swiper](https://www.npmjs.com/package/react-id-swiper)

環境は Windows 10 です。


## React 環境の構築（不要だと思うので読み飛ばしてください。）
下記を参考にサンプルプロジェクトを作成しています。
https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment

1. コマンドプロンプトを開き、好きなディレクトリへ移動

    ``` console 
    $ cd C:\React
    ```

1. 最新の [Node.js](https://nodejs.org/en/) がインストールされていることを確かめる。

2. [Create React App](https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app) のインストールガイドに従って新しいプロジェクトを作成する。

    ``` console 
    $ npx create-react-app swiper-sample
    ```

3. 新しく作ったプロジェクトの src/ 内にあるファイルをすべて削除する

    ``` console 
    $ cd swiper-sample
    $ del *
    ```

4. index.js を作成

    ``` console 
    $ type nul > index.js
    ```

5. 新しく作ったプロジェクトのルートへ戻る

    ``` console 
    $ cd ../
    ```

## Swiper (react-id-swiper) 導入

[react-id-swiper](https://www.npmjs.com/package/react-id-swiper) は [Swiper](https://swiperjs.com/) と全く別の人が開発しているものですが、React で簡単に Swiper が導入できたので、今回はそれを使います。

1. react-id-swier をインストール

    ``` console 
    $ npm install --save react-id-swiper@latest swiper@latest
    ```

2. index.js にサンプルコードを記述

    ``` react:index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Swiper from 'react-id-swiper';
    
    class SimpleSwiper extends React.Component {
    
      render() {
        return(
          <Swiper>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
          </Swiper>
        )
      };
    }
    
    ReactDOM.render(
      <SimpleSwiper />,
      document.getElementById('root')
    );
    ```

3. npm start

    ``` console 
    $ npm start
    ```


## react-id-swiper にパラメータをセット

swiper の pagenation と navigation を設定してみます。
設定できるパラメータは [こちら](https://www.npmjs.com/package/react-id-swiper#props) を参照ください。

1. index.js にサンプルコードを記述

    ``` react:index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Swiper from 'react-id-swiper';
    
    class SimpleSwiper extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          params: {
            pagination: {
              el: '.swiper-pagination',
              type: 'bullets',
              clickable: true
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            spaceBetween: 30
          }
        }
      }
    
      render() {
        return(
          <Swiper {...this.state.params}>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 6</div>
          </Swiper>
        )
      };
    }
    
    ReactDOM.render(
      <SimpleSwiper />,
      document.getElementById('root')
    );
    ```

## swiper インスタンスを取得しイベントを登録してみる

ここでの swiper インスタンスは、皆さんご存知の [swiper](https://swiperjs.com/) のはず。（おい
詳細なバージョンは ```node_module/swiper/package.json``` をご覧ください。


1. index.js にサンプルコードを記述

    ``` react:index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Swiper from 'react-id-swiper';
    
    class SimpleSwiper extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          params: {
            pagination: {
              el: '.swiper-pagination',
              type: 'bullets',
              clickable: true
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            spaceBetween: 30,
            getSwiper: (swiper) => { /** ----- ここを追加 ----- */
              swiper.on('slideChange', () => {
                console.log(`slide changed : ${swiper.activeIndex}`);
              })
            }
          }
        }
      }
    
      render() {
        return(
          <Swiper {...this.state.params}>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 6</div>
          </Swiper>
        )
      };
    }
    
    ReactDOM.render(
      <SimpleSwiper />,
      document.getElementById('root')
    );
    ```
開発者ツールでコンソールログを確認すると、出力されていますね！


## まとめ
- React で Swiper を実装するときは react-id-swiper が楽
- react-id-swiper でもいくつかパラメータは設定可能
- swiper のインスタンスは getSwiper より取得可能