初心者による初心者のためのGatsbyJS覚書5（ページを増やす）

##この記事について
この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

##Chapter5：ページを増やす　備忘録メモ
前回作成した`layout.js`を活用してページを増やして行きます。
今回はアバウトページ（about.js）と404ページ（404.js）を作成しました。


###アバウトページの作成
今回アバウトページを作成するのに必要な手順は、、、
1.　`index.js`をコピーして新規ファイルを作成、中身をアバウトページ用に変更する。
2.　画像を最適化する
3.　Font Awesomeをインストールしてアイコンを表示する
4.　リンクを設定する

とこのような感じで設定していきます。
※手順2に関しては以前の記事で[画像の最適化](https://qiita.com/yume29/items/be5696f8a1bf559ecb08)について記載しているので割愛。

####index.jsをコピーして新規ファイルを作成、中身をアバウトページ用に変更する。

`pages`配下に`about.js`を作成して関数の名前を`AboutPage`に変更。
中身はダウンロード資料のHTMLをJSXへ変換して作成。

```jsx
import React from "react"
import { StaticImage } from "gatsby-plugin-image"
import Layout from "../components/layout"

const AboutPage = () => (
<Layout>
 //ここにJSX要素を追加
</Layout>
)

export default AboutPage
```

#### Font Awesomeをインストールしてアイコンを表示する

まずはパッケージをインストール。

```sh
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/react-fontawesome
```
アイコンのスタイルはフリーで使用できるものをまとめてインストール。

```sh
#solid
npm install @fortawesome/free-solid-svg-icons

#regular
npm install @fortawesome/free-regular-svg-icons

#brand
npm install @fortawesome/free-brands-svg-icons
```
あとはFont Awesomeを使いたいファイルでインポートして使うだけ。
どのアイコンを使うかはFont AwesomeのIconsページで確認できるのでどのスタイルに属してるのかも
併せて確認すると◎
今回はSNSアイコンを使用したいのでこのように記載。

```jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faFacebookSquare, faInstagram } from "@fortawesome/free-brands-svg-icons"
```
JSX上でアイコンを表示されるにはこのように記載する。

```jsx
<li>
 <a href="https://twitter.com/">
   <FontAwesomeIcon icon={faTwitter} />
    <span className="sr-only">Twitter</span>
 </a>
</li>
```
![スクリーンショット 2021-08-14 19.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/eab7b120-4d44-55d2-da4b-347891141e86.png)

`gatsby develop`ではそこまで気にならないが、デプロイしたサイト上ではロードしたときに
Font Awesomeのアイコンが一瞬大きく表示されてしまうので、Font AwesomeのCSSを先読みさせることでそれを予防。
`layout.js`にこのように記載する。

```jsx
import "@fortawesome/fontawesome-svg-core/styles.css" //Font Awesomeを先読みさせる
import { config } from "@fortawesome/fontawesome-svg-core"　//Font Awesomeのコンポーネント内でCSSを適用させない
config.autoAddCss= false//Font Awesomeのコンポーネント内でCSSを適用させない
```

####リンクを設定する

リンクをつけたいページのファイルで下記をインポート

```jsx
import { Link } from "gatsby"
```

JSX内でリンクをつけたいときは

```jsx
<ul>
 <li><Link to={`/`}>TOP</Link></li>
 <li><Link to={`/about/`}>ABOUT</Link></li>
</ul>
```

###404ページの作成
404ページを作成するのに必要な手順は、、、
1.　index.jsをコピーして新規ファイルを作成、中身をアバウトページ用に変更する。

のみです。

`index.js`をコピーして`404.js`を作成します。
関数の名前は`NotFoundPage`として作成。

```jsx
import React from "react"
import Layout from "../components/layout"

const NotFoundPage = () => (
<Layout>
<h1 style={{ padding: "20vh 0", textAlign: "center"}}>お探しのページは見つかりませんでした。</h1>   
</Layout>
)

export default NotFoundPage
```
ファイルを作成し、サーバーを再起動、`/abcde`など存在しないURLにアクセスすると

![スクリーンショット 2021-08-14 19.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/cada2b21-0636-0033-4ce4-c41e1fbf7184.png)

こんなページが出てくるので`preview`を押すと、、

![スクリーンショット 2021-08-14 19.11.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/6376a8a7-0537-dc61-7fab-46e18c037509.png)

簡単に404ページも完成。
`gatsby develop`では白いページが404ページの前に表示されるがデプロイしたサイトでは直接404ページが表示される。

今回はここまで。
次回はメタデータの設定についてポイントを書いていきたいと思います。