概要（作成全体の流れ）

①Atomic Designの設計 ↓ ②スマートフォン・PCのUIの作成（レスポンシブ対応） ↓ ③機能の実装 ↓ ④本番環境にデプロイ

今回作成したサイト

ホーム画面 ![home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/ef113acf-15ce-3997-a9ee-e380e1ac7072.png)

ポートフォリオ一覧画面

プロフィール画面

お問い合わせ画面

Atomic Designの設計

Atomic Design（アドミックデサイン）はデザインパーツが5つあり、そのパーツを組み合わせることでWebページを作っていくUIデザインを言います。 Atomic Designには明確な定義がないので、Atomic Designの概念をつかむ事が大切です。

・Atoms（原子）
　　→これ以上分解することができないもの。インプット・ラベル・ボタン等。
・Molecules（分子）
　　→Atomsの集合体。インプット・ラベル・ボタン等の原子が集まってできている。
・Organisms（有機体）
　　→Atoms・Moleculesの集合体。ヘッダー・投稿カード等
・Templates（テンプレート）
　　→Atoms・Molecules・Organismsの集合体。ページレイアウト等。
・Pages（ページ）
　　→表示するページそのもの。

今回、Figma（フィグマ）というサービスを使い、サイト作成のためのデザイン設計を行いました。
作成したAtomic Design（アドミックデサイン）がこちらになります。

スマートフォン・PC用のUI作成

HTML・SCSS（CSSのフレームワーク）を使用し、レスポンシブ対応でUIを作成しました。 UIを作る順番としましては、スマートフォン用のUI　→　PC用のUI の順で作らないといけません。理由としましては、PC用のUIから作ると、それを分解してスマートフォン用のUIを作る際に構造（divタグの数）的に無理があるからです。私はPC用のUIから作っていたので、全てスマートフォンのUIから作り直しました。。。少し涙が出ました。。。

@media only screen and (min-width: 769px) {
//こちらの中カッコの中にPC用のUIを実装するためのコードを書く事
}

機能の実装

機能の実装で意識したことは、以下の３点です。・React+TypeScriptの書き方になれる事・React Hook FormやReact Routerなどのライブラリの使い方になれる事・コードを書く際にuseStateやpropsの使い方になれる事

苦労した点、お問い合わせフォームを実装する際に、errors関数を使用したバリデーションの表示がうまくいかなかった点。
↓エラーコード↓

interface IFormInputs {
  name: string;
  email: string;
  message: string;
}

  const {
    register,
    errors,
    handleSubmit,
  } = useForm<IFormInputs>();

↓エラーを改善したコード↓

interface IFormInputs {
  name: string;
  email: string;
  message: string;
}

  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<IFormInputs>();

errors　を　formState: { errors }　に変更したらうまくいきました。

errors関数はformState: {}のカッコの中に入れないと行けないので注意をする必要みたいでした。

本番環境にデプロイ

AWS AmplifyでReactのサービスをデプロイする方法。

①cliのインストール
npmの場合↓

sudo npm install -g @aws-amplify/cli

yarnの場合↓

yarn global add @aws-amplify/cli

②Amplify CLI を使用するための初期設定

amplify configure

③リージョンの設定
リージョンで設定することはどこのサーバを使うか選べます。
日本でしたら東京（ap-northeast-1）と大阪（ap-northeast-3）の２つがあります。
自分の家から近い所を選んだほうが通信が速いので私は東京（ap-northeast-1）を選びました。
↑↓矢印キーで選びEnterを押すと完了です。

④ユーザの作成
ブラウザで IAM ユーザの作成画面が立ち上がるので、とりあえずは
次のステップ:アクセス権限、次のステップ:タグ、次のステップ:確認
とクリックして、[ユーザの作成]をクリックします。

⑤ユーザを作成したら、アクセスキーとシークレットアクセスキーが表示されるにで、メモにひかえる

⑥先ほど作成したユーザにアクセスキー情報を入力
Enter the access key of the newly created user:
? accessKeyId: AKIA6GEFMYUJ********

⑦シークレットアクセスキーを入力
? secretAccessKey: ViGO4rI0xoMPbjX509PzuDQR****************

⑧作成するプロファイルネームを聞かれるので、IAMユーザ名と一緒の名前を入力してEnter
（既に既存のユーザ情報が存在する場合は上書きされます。)
? Profile Name: tochino

⑨作成した React プロジェクトを Amplify に持っていくための初期設定を行います。
ターミナル入力

$ amplify init

この先の初期設定につきましたは下記のサイトを参考に進めてください。

まとめ・今後の課題

ReactとTypeScriptを使った初めてのサイトとなりました。

型の使い方やライブラリの使い方が、本当に分からず苦戦をしました。
初めは難しく、大変なことも多いですが、サイトを作るうえで処理がはしったり、
UIが出来上がっていき、本当に嬉しかったですし、楽しかったです。
今後の課題としましては、お問い合わせフォームとSlackとの連携です。
連携の際のaxiosを使った実装がうまくいかず今回は断念しました。
機能実装は分かり次第あとから付け足していこうと思います。

React+TypeScriptでポートフォリオサイトを作ってみた