質問編集履歴

3

動画の削除

2020/08/07 03:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -757,21 +757,3 @@
757
757
 
758
758
 
759
759
  ```
760
-
761
-
762
-
763
- # 動画 (分かりづらかったらすみません)
764
-
765
- コードの部分はタイピングしているところです
766
-
767
-
768
-
769
- クラスコンポーネントでの挙動
770
-
771
- ![イメージ説明](0908834358555e1d62cfec73f0199094.gif)
772
-
773
-
774
-
775
- 関数コンポーネントに置き換えて依存関係を解消した後の挙動
776
-
777
- ![イメージ説明](efc89bb3f98ef165be7c7b24d463a9b3.gif)

2

動画についての補足説明

2020/08/07 03:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -762,6 +762,8 @@
762
762
 
763
763
  # 動画 (分かりづらかったらすみません)
764
764
 
765
+ コードの部分はタイピングしているところです
766
+
765
767
 
766
768
 
767
769
  クラスコンポーネントでの挙動

1

エラーメッセージとりあえず解消

2020/08/04 06:36

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,14 @@
26
26
 
27
27
 
28
28
 
29
+ # 追記
30
+
31
+ とりあえず警告に出た依存関係を全て解消したら今度は挙動がおかしくなってしまいました。
32
+
33
+
34
+
35
+
36
+
29
37
  # コード(部分的)
30
38
 
31
39
 
@@ -515,3 +523,253 @@
515
523
 
516
524
 
517
525
  ```
526
+
527
+
528
+
529
+ 依存関係をとりあえず解決
530
+
531
+ ```jsx
532
+
533
+ import React, {useState, useEffect ,useCallback} from "react";
534
+
535
+ import styled from "styled-components";
536
+
537
+ import ChangeScreenButton from "../Share/ChangeScreenButton"
538
+
539
+ import keyList from "../Share/keyList"
540
+
541
+
542
+
543
+ // TODO 関数コンポーネント化
544
+
545
+ // XXX 関数コンポーネント化する際に依存関係を解決しないといけない <=難しい
546
+
547
+ const Game = (props) => {
548
+
549
+ const [subject, setSubject] = useState("");
550
+
551
+ const [inputContent, setContent] = useState("");
552
+
553
+ const [correctCount, correctCountUp] = useState(0);
554
+
555
+ const [incorrectCount, incorrectCountUp] = useState(0);
556
+
557
+ const [elapsedTime_ms, setTime_ms] = useState(Date.now());
558
+
559
+
560
+
561
+ const maxSubject = 10;
562
+
563
+
564
+
565
+ const generateSubject = () => {
566
+
567
+ const rnd = Math.floor(Math.random() * keyList.length);
568
+
569
+ const subject = keyList[rnd];
570
+
571
+ setSubject(subject);
572
+
573
+ }
574
+
575
+
576
+
577
+ const handleSubejctFinish = useCallback(() => {
578
+
579
+ setTime_ms(Date.now() - elapsedTime_ms);
580
+
581
+ props.sendResult(correctCount, incorrectCount, elapsedTime_ms);
582
+
583
+ props.handleScreen("result");
584
+
585
+ }, [elapsedTime_ms, correctCount, incorrectCount, props])
586
+
587
+
588
+
589
+ const handleCorrect = useCallback(() => {
590
+
591
+ correctCountUp(correctCount + 1)
592
+
593
+ setContent("")
594
+
595
+ if(correctCount >= maxSubject) {
596
+
597
+ handleSubejctFinish();
598
+
599
+ } else {
600
+
601
+ generateSubject();
602
+
603
+ }
604
+
605
+ }, [correctCount, handleSubejctFinish])
606
+
607
+
608
+
609
+ const handleIncorrect = useCallback(() => {
610
+
611
+ incorrectCountUp(incorrectCount + 1);
612
+
613
+ }, [incorrectCount])
614
+
615
+
616
+
617
+ const checkCorrectness = useCallback(() => {
618
+
619
+ if(inputContent === subject) {
620
+
621
+ handleCorrect();
622
+
623
+ } else {
624
+
625
+ handleIncorrect();
626
+
627
+ }
628
+
629
+ }, [inputContent, subject, handleCorrect, handleIncorrect])
630
+
631
+
632
+
633
+ const readInputKey = useCallback((e) => {
634
+
635
+ let pressedKey = e.key
636
+
637
+ console.log(pressedKey);
638
+
639
+ setContent(pressedKey)
640
+
641
+ checkCorrectness();
642
+
643
+ }, [checkCorrectness])
644
+
645
+
646
+
647
+ useEffect(() => {
648
+
649
+ generateSubject();
650
+
651
+ window.addEventListener("keypress", readInputKey);
652
+
653
+ console.log("キー入力受付開始");
654
+
655
+ return () => {
656
+
657
+ window.removeEventListener("keypress", readInputKey);
658
+
659
+ console.log("キー入力受付終了");
660
+
661
+ }
662
+
663
+ }, [readInputKey])
664
+
665
+
666
+
667
+ return (
668
+
669
+ <FlexContainer>
670
+
671
+ <Instruction>表示された数字または記号のキーを押してください</Instruction>
672
+
673
+ <Subject>{subject}</Subject>
674
+
675
+ <Footer>
676
+
677
+ <FlexP>問題数: {maxSubject}</FlexP>
678
+
679
+ <FlexP>正解数: {correctCount}</FlexP>
680
+
681
+ <ChangeScreenButton onClick={() => props.handleScreen("title")}>タイトルに戻る</ChangeScreenButton>
682
+
683
+ </Footer>
684
+
685
+ </FlexContainer>
686
+
687
+ );
688
+
689
+ }
690
+
691
+
692
+
693
+ const FlexContainer = styled.div`
694
+
695
+ position: relative;
696
+
697
+ display: flex;
698
+
699
+ flex-direction: column;
700
+
701
+ align-items: center;
702
+
703
+ width: 100%;
704
+
705
+ height: 100%;
706
+
707
+ `
708
+
709
+
710
+
711
+ const Instruction = styled.p`
712
+
713
+ font-size: 20px;
714
+
715
+ `
716
+
717
+
718
+
719
+ const Subject = styled.p`
720
+
721
+ flex: 1;
722
+
723
+ font-size: 90px;
724
+
725
+ `
726
+
727
+
728
+
729
+ const Footer = styled.div`
730
+
731
+ width: 100%;
732
+
733
+ justify-self: flex-end;
734
+
735
+ display: flex;
736
+
737
+ justify-content: space-around;
738
+
739
+ `
740
+
741
+
742
+
743
+ const FlexP = styled.p`
744
+
745
+ display: inline-block;
746
+
747
+ margin: 0.2em;
748
+
749
+ `
750
+
751
+
752
+
753
+
754
+
755
+ export default Game;
756
+
757
+
758
+
759
+ ```
760
+
761
+
762
+
763
+ # 動画 (分かりづらかったらすみません)
764
+
765
+
766
+
767
+ クラスコンポーネントでの挙動
768
+
769
+ ![イメージ説明](0908834358555e1d62cfec73f0199094.gif)
770
+
771
+
772
+
773
+ 関数コンポーネントに置き換えて依存関係を解消した後の挙動
774
+
775
+ ![イメージ説明](efc89bb3f98ef165be7c7b24d463a9b3.gif)