架空レストランHPの制作過程 Part6 レスポンシブコーディング＆デプロイ編

前回の記事はこちら

https://qiita.com/yamashee/items/94afa64f0db9ff3820df

モバイルファーストで制作していた当ページですが、今回はPC表示対応をしていきます。

## ナビゲーション
PC表示の際は、横幅を確保できる分、ハンバーガーメニューを消してナビゲーションを表示するようにしました。実際のWebサイトでもよくある手法ですね。

ナビゲーションの項目のデザインには、背景をぼかすcss、`backdrop-filter: blur;`を使いました。
ヘッダーに高さを設けるとどうしても画面が手狭になってしまいますが、これを使うことで見せたいとこを見せつつ、画面の一部がヘッダーに覆われてる感が和らぐので、結構お気に入りな手法です。

![fv.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/9b1d915b-1e63-a517-2803-51bd91a42b97.jpeg)

## ディナー, 環境への取り組み
メディアクエリで画面横幅が767px以上の時に`flex-direction: row;`で横並びにしました。
```css
@media (min-width: 767px) {
  .dinner-menu {
    flex-wrap: nowrap;
    gap: 2rem;
  }

  .dinner-menu img {
    width: 50%;
  }

  .environment-action {
    width: calc((100% / 3) - 1rem);
  }
}
```
![dinner.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/ea41d1a0-14cb-709c-3682-d6ef98e74683.jpeg)
![environment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/5a6d0edc-6711-756a-7648-edffadae6d03.jpeg)

## シェフ達
モバイル表示では写真は基本全幅表示していましたが、PC表示では、創業者~~忖度~~リスペクトで、創業者及び本店オーナーシェフの写真だけ大きくしました。創業者メッセージも追加しました。

![chefs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/7b409502-71dd-2c48-ef88-aa32e59ee782.jpeg)

## 店舗概要
横幅が確保できる分、タブ切り替えではなく、テーブルで3店舗並んで表示されるようにしました。
```diff_jsx:Overview.jsx
import { useState } from 'react'
import { shopOverview } from './shopOverview'

const Overview = (props) => {
    const [selectedShop, setSelectedShop] = useState('shinjuku')
    const handleSelectShop = (e) => {
        setSelectedShop(e);
    }

    return (
        <div>
            <div className="overview-buttons sp-only">
                <button onClick={() => handleSelectShop('shinjuku')} className={selectedShop === 'shinjuku' ? 'isActive' : ''}>新宿本店</button>
                <button onClick={() => handleSelectShop('ikebukuro')} className={selectedShop === 'ikebukuro' ? 'isActive' : ''}>池袋店</button>
                <button onClick={() => handleSelectShop('kinshicho')} className={selectedShop === 'kinshicho' ? 'isActive' : ''}>錦糸町店</button>
            </div>
+            {props.isDesktop ?
+               <div className='overview-vibe'>
+                    <div><h3>新宿本店</h3><img src="./images/shinjuku-vibe.webp" alt="" /></div>
+                    <div><h3>池袋店</h3><img src="./images/ikebukuro-vibe.webp" alt="" /></div>
+                    <div><h3>錦糸町店</h3><img src="./images/kinshicho-vibe.webp" alt="" /></div>
+                </div>
+                :
                <img src={shopOverview[selectedShop].image}></img>
+           }
            <table>
                <tr>
                    <th>店名</th>
                    <td className='sp-only'>{shopOverview[selectedShop].name}</td>
+                   <td className="cell-pc-only">{shopOverview.shinjuku.name}</td>
+                   <td className="cell-pc-only">{shopOverview.ikebukuro.name}</td>
+                   <td className="cell-pc-only">{shopOverview.kinshicho.name}</td>
                </tr>
                <tr>
                    <th>営業時間</th>
                    <td colSpan='3'>
                        ランチ 11:40～14:00<br />
                        ディナー 18:00～23:00
                    </td>
                </tr>
                <tr>
                    <th>定休日</th>
                    <td colSpan='3'>毎週月曜日</td>
                </tr>
                <tr>
                    <th>席数</th>
                    <td className='sp-only'>{shopOverview[selectedShop].chair}席</td>
+                    <td className="cell-pc-only">{shopOverview.shinjuku.chair}席</td>
+                    <td className="cell-pc-only">{shopOverview.ikebukuro.chair}席</td>
+                    <td className="cell-pc-only">{shopOverview.kinshicho.chair}席</td>
                </tr>
                <tr>
                    <th>問い合わせ</th>
                    <td className='sp-only'>
                        <p>電話：<a href={`tel:${shopOverview[selectedShop].inquiry}`}>{shopOverview[selectedShop].inquiry}</a></p>
                        <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
                    </td>
+                    <td className="cell-pc-only">
+                        <p>電話：<a href={`tel:${shopOverview.shinjuku.inquiry}`}>{shopOverview.shinjuku.inquiry}</a></p>
+                        <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+                    </td>
+                    <td className="cell-pc-only">
+                        <p>電話：<a href={`tel:${shopOverview.ikebukuro.inquiry}`}>{shopOverview.ikebukuro.inquiry}</a></p>
+                        <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+                    </td>
+                    <td className="cell-pc-only">
+                        <p>電話：<a href={`tel:${shopOverview.kinshicho.inquiry}`}>{shopOverview.kinshicho.inquiry}</a></p>
+                        <p className='overview-toFormWrap'><span>お問い合わせフォームは</span><button className="link overview-toForm">こちら</button></p>
+                    </td>
                </tr>
                <tr>
                    <th>決済</th>
                    <td colSpan='3'>
                        現金<br />
                        クレジットカード（JCB、Master、Visa、American Express）<br />
                        電子マネー（交通系、楽天Edy、iD、QUICPay）、QR決済（PayPay、楽天ペイ、LINE Pay、d払い）
                    </td>
                </tr>
                <tr>
                    <th>アクセス</th>
                    <td className='sp-only'>
                        <p>{shopOverview[selectedShop].access}</p>
                        <a href={shopOverview[selectedShop].link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
                    </td>
+                    <td className="cell-pc-only">
+                        <p>{shopOverview.shinjuku.access}</p>
+                        <a href={shopOverview.shinjuku.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+                    </td>
+                    <td className="cell-pc-only">
+                        <p>{shopOverview.ikebukuro.access}</p>
+                        <a href={shopOverview.ikebukuro.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+                    </td>
+                    <td className="cell-pc-only">
+                       <p>{shopOverview.kinshicho.access}</p>
+                        <a href={shopOverview.kinshicho.link} target="_blank" rel="noreferrer noopener" className='link'><span>マップで開く</span></a>
+                    </td>
                </tr>
            </table>
            <Access selectedShop={selectedShop} shopOverview={shopOverview} />
        </div >
    )
}

export default Overview
```
![shopoverview.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/f62b93bf-c172-4444-2df6-9e5155658b2e.jpeg)

## デプロイ
ざっと完成したので、制作したページをサーバーにデプロイしていきます。

デプロイには[Vercel](https://vercel.com/)というホスティングサービスを使います。

VercelはWebサイトやWebアプリの公開を簡単に行ってくれるサービスです。

元々Next.jsは、Vercelを提供するVercel社が開発したものなので、Reactベースのフレームワークでのデプロイに最適化されています。

色々機能を付けようとすると課金が必要ですが、Reactを使ったポートフォリオの公開にはこのVercelがわりと最適解だと思います。

Reactで制作したWebサイトをVercelで公開するには、まずGitHubにpushして、GitHubとVercelを紐づけます。

新たにGithubにプッシュするコマンド↓
```bash
git remote add origin <リモートリポジトリURL>
git add <変更したファイル>
git commit -m "<コミットメッセージ>"
git push -u origin master
```

Vercelにログインすると、Githubにプッシュしたリポジトリが表示されているので、`Import`をクリックします。
![vercel (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/0b42bbbc-e469-d7b9-36dc-2e1fe41d9725.jpeg)

すると、このような画面に遷移します。
特段設定が必要なければそのまま`Deplpy`をクリックします。
![vercel2 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/4711f467-6c4b-c60b-dd84-5ed1778c6aed.jpeg)

`Deplpy`クリック後、数秒でデプロイ完了します。
右上の`Visit`ボタンでデプロイしたページに遷移できます。
![vercel3 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/7122f3a0-afd8-ce70-80e1-74b19b799847.jpeg)

今後サイトをを更新する場合、Gitをプッシュするだけで、自動的にデプロイされるようになります。

## まとめ
というわけで多少荒削りな部分がありますが、Reactで制作したWebサイトが完成しました。

https://la-festa.vercel.app/

まだまだ改良の余地はあるので、随時更新して行こうと思います。