英単語帳アプリ作ってみました - Elsaの技術日記(徒然なるままに)

ちょっと英語も勉強して行かなきゃなと思う今日この頃。

速読速聴・英単語 Core1900 ver.5 (速読速聴・英単語シリーズ)

新品価格
￥2,090から
(2020/10/24 22:02時点)

だけど、、、ただ勉強するのもな。。。と思ったので、、、
今回勉強も兼ねてReactで英単語アプリを作ってみました！！

■作成アプリ
■カードめくりアニメーション
■英単語について
■最後に
■参考

■作成アプリ

作成したアプリはこんな感じになります！！
f:id:Elsammit:20201024212532g:plain

アプリはこちらで公開しております。
https://elsammit.github.io/wordbookApp/

ソースコードはこちら。
https://github.com/Elsammit/wordbookApp.git

■カードめくりアニメーション

今回、日本語と英語の切り替えにはアニメーションを用いました！！
アニメーションを一から作るのは大変だし辛いので、
”react-card-flip”ライブラリを用いました。

react-card-flipはこちらでインストール可能です。

npm install react-card-flip

もしくは

yarn add install react-card-flip

実際の使い方ですが、

import ReactCardFlip from 'react-card-flip';
render() {
 return (<div>
 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">
  <div id="Front">
    //表ページの処理.  
  </div>
     <div id="Back">
    // 裏ページの処理.
     </div>         
 </ReactCardFlip>
   )
 }

といった形で用います。

 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">

にisFlippedが設定されていますが、こちらにセットした変数をtrue/falseと切り替えることで、
ページを表、裏と切り替えることが出来るようになります！！
また、flipDirectionの内容によって回転方向を決めることができます。
flipDirectionは"vertical"、"horizontal"どちらかでの設定になります。
さらにさらに、
flipSpeedFrontToBack、flipSpeedBackToFrontで回転速度を設定することが可能です！！
先ほどのコードだとどちらも1.0としているため、1秒での回転になります。

自分が作成したコードはこんな感じになっておりまして、

    handleClick(e) {
        e.preventDefault();
        this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
    }

・・・

 <ReactCardFlip isFlipped={this.state.isFlipped}  flipSpeedFrontToBack={1.0}
     flipSpeedBackToFront={1.0} flipDirection="vertical" infinite="true" width="300px">
     <div id="card">
         <img id="card" src={BlankCard} onClick={this.handleClick} className="cardSize" />
         <p>{this.state.English}</p>
     </div>
     <div id="card">
         <img id="card" src={BlankCard} onClick={this.handleClick} className="cardSize" />
         <p>{this.state.Japanese}</p>
     </div>         
 </ReactCardFlip>

画像上をクリックすることでisFlippedがtrue、falseと切り替わるため、
画像の表・裏を切り替わります。

ライブラリを用いることで、アニメーションが楽になりますね👍