GatsbyにReact bootstrap導入とナビゲーションバー

# GatsbyにReact bootstrap導入とナビゲーションバー

GatsbyプロジェクトにReact bootstrap導入する方法とナビゲーションバーの設定を少し。

### 前提
Gatsbyプロジェクト作成はすでに終わってる。
参考：[Gatsby＋microCMSで手を打つ](https://qiita.com/atomyah/items/759823f6c1e86ce44b23)

### React Bootstrapをインストール

インストールコマンド

```bash
$ yarn add react-bootstrap bootstrap
```

インストール後のpackage.jsonは以下の通り。

```json
{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "gatsby": "^2.20.12",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-react-helmet": "^3.2.2",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-microcms": "^0.1.0",
    "gatsby-transformer-sharp": "^2.4.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },
  "devDependencies": {
    "prettier": "2.0.4"
  },
・・・以下略・・・
```

###ではコーディング

####gatsby-config.js
まずはgatsby-config.jsのタイトルをデフォルトから変更。
とりあえずタイトル変更場所を記録しておこうかなって。

```jsx
module.exports = {
  siteMetadata: {
    title: `ギャツビー`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
・・・略・・・
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/462e5f7e-0b41-948c-2794-a61419e3667a.png)

###Bootstrap導入
####layout.js編集

bootstrapのCSSを読み込むようにする。

```jsx
//components/layout.js

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
//import "./layout.css" ← コメントアウト
import 'bootstrap/dist/css/bootstrap.min.css'; // ← 追加

・・・略・・・
```

フォントがかっこ良くなった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/e98a4b2c-a1a3-d3a5-10e7-b1ca25778c92.png)



####header.js編集

以下のように`<header>....</header>`の中を編集。

```jsx
// components/header.js

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import { Container, Navbar, Nav } from 'react-bootstrap' // ←追記

const Header = ({ siteTitle }) => (
// ↓ここから
  <header className="bg-dark">
    <Container>
      <Navbar expand="md" variant="dark">
        <Navbar.Brand href="/">{siteTitle}</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarResponsive" />
        <Navbar.Collapse id="navbarResponsive">
          <Nav as="ul" className="ml-auto">
            <Nav.Item as="li">
              <Link to="/page-2" className="nav-link" activeClassName="active">Page2</Link>
            </Nav.Item>
            <Nav.Item as="li">
              <Link to="/page-3" className="nav-link" activeClassName="active">Page3</Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </Container> 
  </header>
// ↑ここまで
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
```

ナビゲーションヘッダができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/c8f6bcab-01a7-22da-9191-c837a21902d9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/3c3ea76f-22d1-ae12-3648-99a4635f7658.png)


こんな調子でbootstrapの設定はお好みで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/81f41a21-9654-1a27-2fef-c8e65c7fc2b7.png)

```jsx
//components/header.js
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import { Container, Navbar, Nav } from 'react-bootstrap'

const Header = ({ siteTitle }) => (
// ↓ 追加
  <>
  <style type="text/css">
  {`
  .bg-purple {
    background-color: purple;
    color: white;
  }
  `}
  </style>
// ↑ 追加
  <header className="bg-purple"> // 変更
    <Container>
      <Navbar expand="md" variant="dark">
        <Navbar.Brand href="/">{siteTitle}</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarResponsive" />
        <Navbar.Collapse id="navbarResponsive">
          <Nav as="ul" className="ml-auto">
            <Nav.Item as="li">
              <Link to="/patients" className="nav-link" activeClassName="active">患者の方へ</Link>
            </Nav.Item>
            <Nav.Item as="li">
              <Link to="/doctors" className="nav-link" activeClassName="active">医師の方へ</Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </Container> 
  </header>
  </>                // ← 追加（これはReact.Fragmentのこと？）
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
```



# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />