メモブログ

技術的なことを書き連ねるブログ

スライダープラグインSwiperがIE11で動かない時の設定

今までは、スライダーのプラグインに 「slick」を使わせてもらっていたのですが、

github.com

最近あまり更新されていないので 「Swiper」というプラグインに乗り換えました。

github.com

機能も沢山あるので、これがあればほぼ困ることはないと思います。

ですが、1点問題があって「ES module」で読み込むとIE11でエラーが出てしまい動きません。

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

理由は、このページの下の方に書いてあります。

idangero.us

In case you use it as an ES module make sure:

you have enabled Babel or Buble to transpile it to ES5 syntax, you have enabled node modules resolving and babel transpiling for Swiper as it uses Dom7 and ssr-window packages as dependencies.

  • babel or buble? で ES5にトランスパイルします。
  • Swiperは依存関係としてDom7およびssr-windowパッケージを使用するため、node_modulesの解決と、 babelでのトランスパイルを有効にします。

なので、通常であれば、babelでのトランスパイルにおいて、
「node_modules」ディレクトリは除外しますが、
「dom7|ssr-window|swiper」の3つのモジュールはトランスパイルしてね。
とwebpack.configに追記してあげてください。

  module: {
    rules: [
      {
        test: /\.js$/,
        // ここの設定を変更する
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, 
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ]
      },

phpでのコールバックの渡し方

javascriptが自由過ぎて、
phpでコールバック渡すのどうするんだ。。ってなったので
メモ

<?php

class A{
    public function call(){
        echo 'A!!!!';
    }
}

function B($callback){
    $callback();
}

$a = new A();

B(array($a, 'call'));

/// A!!!!

?>

ここに色々のってる
php.net

es-lint-react の 「react/no-access-state-in-setstate」

setStateの中でthis.stateを参照しようとしたら怒られた話。

function increment() {
  this.setState({value: this.state.value + 1});
}

なんでダメかというと
github.com

setState({value: 1 + 1})
setState({value: 1 + 1})

連続で使用した時に
1+1 = 2 , 2+1 = 3 となってほしい所を、
1+1 =2, 1+1=2 , と古い状態のstateにアクセスしてしまう場合があるらしい。
要するに、前のsetStateが終わっていない状態で、次のsetStateが走ってしまうということ。

function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

そういう時は、setStateメソッドには、コールバックが用意されているので
これを使えば、

setState({value: 1 + 1})
setState({value: 2 + 1})

と、期待通りの挙動になる。