今回はReactを使って自分のポートフォリオサイト作成してみました。
実際にデザインから実装までしていく中で、できたことできなかったことが明確になったのでとてもいい機会になったと思います！
反省がてらアウトプットの過程を書いていきたいと思います！

#使用技術
・React・CSS・TypeScript・material UIです

#デザインの作成
今回はFigmaを使用してモックの作成をしていきました！
作成するにあたって、参考サイトを見ながら自分で作ってみたい箇所をFimgaで表現していきました！
この段階がかなり重要だなと感じました。
理由として、今回デザインを途中で変更してまい、大幅は時間ロスを犯しました。
途中でこのデザインの方がいいなと思ってしまったので原因です。作成する前に色んなデザインを見ながら後戻りなるべくしないように気をつけていきたいと思います。

#ここから実装開始
###トップページの作成

ここでは主に2つの実装をしていきました。
①React-Routerを使用してボタンを押した時にSPAを意識しながら実装していきました！
App.tsxに<Router>で囲み、その中にパスを指定しながら飛ばしたいコンポーネントを指定していきました！
画面を2画面に分けたかったのでここでleftとrightに分けながら実装していきました。
そうすることでトップページの左側のボタンは変更せずに右側だけを変更することを実現することができました！

LeftDisplay.tsx

              <label>
                <Link to="/" className={styles.title}>
                  <Buttons
                    title={"ホーム"}
                    icon={<HomeIcon style={{ fontSize: 40 }} />}
                  />
                </Link>
              </label>

App.tsx

      　<Router>
          <div className={styles.app_left}>
            <div className={styles.left_container}>
              <LeftDisplay />
            </div>
          </div>
          <div className={styles.app_right}>
            <div className={styles.app_right_container}>
              <Route exact path="/" component={Top} />
              <Route exact path="/contact" component={ContactForm} />
              <Route exact path="/Profile" component={Profile} />
              <Route exact path="/skill" component={SkillProduct} />
            </div>
          </div>
        </Router>

　②LeftDisplay.tsxファイルで<Link to>でパスを指定してその中にiconなどを入れていきました！
その時にlabelで囲ってあげることでiconを押した時もLink toが適用なるように実装しました！

###スキルページ

ここではreact-slickを使用してスライダーを実装していきました！
参考記事を貼っておきますのでみてみてください！スライダー参考記事

SkillProduct.tsx

const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

dots: true,とすることで下に丸ぽちが表示され、infinite: true,とすることで
繰り返し画像を表示することができます！
かなり設定も簡単だったので、スライダーを実装する時はぜひ使ってみてください！

###自己紹介ページ

ここではツイッターとGitHubのアイコンを実装し、クリックしたらそれぞれのURLに飛ばす実装していきました。
ここではアイコンをhoverすると何を指してるのか表示する実装をしていきました！
実装方法は,material Uiを使用し、実装していきました！

Profile.tsx

         </Tooltip>
          <Tooltip title="GitHub">
            <a href="https://github.com/fumimoe">
              <IconButton>
                <GitHubIcon style={{ fontSize: 30 }} />
              </IconButton>
            </a>
          </Tooltip>

Tooltipで囲んであげることでhoverした時にアイコンの名前を表示することに成功しました！

###問い合わせページ

ここではreact-hook-formを使用して実装を進めていきました！

registerを使用することでバリデーションを設定することができます！ただ、デフォルトで最低限のバリデーションしか準備がないため、独自で設定する場合はpatternを使用してバリデーションを記述していく必要があります！
バリデーションについてまだまだ理解しきれてない部分だったので次回に課題としたいと思います！

#できなかったこと・課題点
①ファイルの構成がぐちゃぐちゃになってしまった。
なるべくコンポーネントを意識しながらパーツごとにフォルダを作成したつもりですが、
1つのファイルに多くのパーツを実装してしまい、Reactのメリットであるパーツ使い回しをあまり意識できなかった。
デザインの段階でここのパーツをまとめられるなとイメージしながら実装していけばもう少し見やすくをファイルの構成ができるのでは思いました！

②スマホ表示がうまく実装できなかった
useMediaと@media screen and (max-width: 1200px)を使いながら実装しましたが、サイズを1200px以下の場合とそれ以上の２パターンしか作成することができなかった。
理由として、ボタンを4つに分けて実装した為、サイズを変更するとボタンの感覚が小さくなっていた為、2パターンしか設定することができなかった。
buttonのサイズも画面ごとに大きさを帰るかCSS配置（absolute）の設定を変えていく必要があると感じました！
CSSについてもまだまだ理解ができてない（特にGrid）ので次回の課題として学習していきたいと思います！

#作成してみて
今回はパーツを意識しながら作成することができなかったので、1つのファイルのコード記述量が多くなってしまいました。
デザインの段階からある程度パーツをまとめながら再利用を意識していきたいと思います！
またファイル名もかなりセンスのない感じになってしまったので誰が見てもこのパーツね！と思われるような名前をつけていきたいと思います！