
今日はGatsby.jsを使ってナビゲーションバーを追加していきます。
ウェブサイトを作るときに大変なのは、ナビゲーションバーを作る作業ですね。
そのため、今回はコードにいろいろ書き込みながら理解していきます。
今日はGatsby.jsの始め方から、ナビゲーションバーの追加までやっていきたいと思います。
この記事でわかること
・ナビゲーションバーの追加方法
・styled-componentの使い方
・ナビゲーションバーのデザイン
Bootstrapを使ってNavbarを作成する方法もありますが、今回はBootstrapを使わずに作っていきます。
下記のページではReactとbootstrapを使ってナビゲーションバーを作る方法が書いてあります。
英語の文献ですが、詳しく書いてありますので、もし興味があれば参考にしてみて下さい。
参考文献
React.jsの時と同じYoutuberの人を参考にさせていただいています。
ナビゲーションバーの追加
完成図
まずナビゲーションバーを作っていきますが、先に完成図をお見せします。
それからこうなるまでの過程を理解していきます。

ナビゲーションバーの作成
まずがNavbar
というフォルダを作成して、その下にindex.js
とNavbarElements
のファイルを作成します。
NavbarElements
では、styled-components
を使っていきます。
今回の内容は下記のページの内容とかぶっている部分がありますので、細かく理解したい方は下記のpサイトを参考にしてみてください。(特にuseEffectの部分)
useEffectを使ってみた【React.js】
react-iconのインストール
まずはreact-icon
をインストールしてます。
下記のコードでreact-icon
をインストールすることができます。
$yarn add react-icons
インストールしたら。react-icons
をインポートします。
import { FaBars , FaTimes } from "react-icons/fa"
import { IconContext } from "react-icons/lib"
これでreact-icon
が使えるようになりましたね。
Navbar/index.jsを作成
Navbar
の下にまずはindex.js
を作成していきます。
下記のコードのように書いていきます。
コードの役割はコメントアウトで書いておきました。
import React, {useState, useEffect } from 'react'
import { FaBars , FaTimes } from "react-icons/fa"
import { IconContext } from "react-icons/lib"
import {
Nav,
NavbarContainer,
NavLogo,
NavIcon,
MobileIcon,
NavLinks,
NavItem,
NavMenu,
} from "./NavbarElements"
const Navbar = () => {
const [click, setClick] = useState(false)
const [scroll, setScroll] = useState(false)
/* クリックするとclickの値が反転するようにメソッドを定義 */
const handleClick = () => setClick(!click)
/* スクロールが80に達するとscrollがtrueになる */
const changeNav = () => {
if (window.scroll >=80){
setScroll(true)
}else {
setScroll(false)
}
}
/* スクロールイベントがあるごとにを実行させる */
useEffect(() => {
changeNav()
window.addEventListener("scroll", changeNav)
}, [])
return(
<>
/* 全てのアイコンの色をデフォルトで指定する(黒) */
<IconContext.Provider value={{ color: "#141414"}}>
/* NavbarElementsからactiveとclickが渡されてstateに値が渡される */
<Nav active = {scroll} click = {click}>
<NavbarContainer>
<NavLogo to='/'>
<NavIcon />
EXPLOR
</NavLogo>
/* クリックするとアイコンが変化する */
<MobileIcon onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</MobileIcon>
* クリックするとアイコンが変化する */
<NavMenu onClick={handleClick} click={click}>
<NavItem>
<NavLinks to='/'>Home</NavLinks>
</NavItem>
<NavItem>
<NavLinks to='/images'>Images</NavLinks>
</NavItem>
<NavItem>
<NavLinks to='/destinations'>Destinations</NavLinks>
</NavItem>
</NavMenu>
</NavbarContainer>
</Nav>
</IconContext.Provider>
</>
)
}
export default Navbar;
このindex.js
は次に作るNavbarElements
から値が渡されて処理する場所という理解でいます。
それではNavbarElements
を作成していきます
NavbarElementsの作成
Navbar
ではstyed-components
を使うので、styled-components
をインストールしましょう。
下記のコードはyarn
でインストールする場合です。
$ yarn add gatsby-plugin-styled-components styled-components
styled-components
の使い方は下記を参考にするといいと思います。
インストールできたら、インポートしましょう。
import styled from 'styled-components';
これで準備はOKですね。
それでは下記のようにコードを書いていきます。
import styled from 'styled-components';
import { DiScala } from "react-icons/Di"
import { Link } from "gatsby"
export const Nav = styled.nav`
background: ${({active}) => active ? "#fff"
: "linear-gradient(to bottom,rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100% )"}; /* グラデーション */
height: 80px;
display: flex;
justify-content: center; /* displayとセット 横並びにして中心に寄せる */
align-items: center; /* アイテムを中央付近にまとめる */
font-size: 1rem;
position: sticky; /* Navをフロートする */
top: 0;
z-index: 999; /* 重なり順 */
@media screen and (max-width: 960px){
background: ${({click}) => (click ? "#fff" : "transparent" )}; /* 白 : 透明 */
/* 変化するすべてのプロパティへの適用 */
transition: 0.8s all ease;
}
`
export const NavbarContainer = styled.div`
display: flex;
/* 各アイテムを均等に配置し、最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる */
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1000px;
`
export const NavLogo = styled(Link)`
color: #141414;
/* フレックスアイテムを先頭に寄せる */
justify-content: flex-start;
cursor: pointer;
/* テキストの装飾を行いません(初期値)*/
text-decoration: none;
/* 元のフォントサイズの150% */
font-size: 1.5rem;
display: flex;
align-items: center;
`
export const NavIcon = styled(DiScala)`
margin: 0 0.5rem 0 2rem;
`
export const MobileIcon = styled.div`
/* 画面がデスクトップサイズの場合は、非表示にする */
display: none;
@media screen and (max-width: 960px){
display: block;
position: absolute;
top: 0;
right: 0;
/* 左に100% 下に60%移動させる */
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
`
export const NavMenu = styled.ul`
display: flex;
align-items: center;
/* リストの点を消す */
list-style: none;
text-align: center;
@media screen and (max-width: 960px){
display: flex;
/* 積み重なるように配置する */
flex-direction: column;
width: 100%;
height: 90vh;
position: absolute;
/* クリックする前は画面いっぱいに表示 : クリック後は上に移動して消える */
top: ${({ click }) => (click ? "100%" : "-1000px") };
/* 透明になる */
opacity: 1;
/* 時間的変化をつける |適応するプロパティ|変化までの時間|変化の仕方|(変化がいつ始まるか) */
/* easeは開始と完了が滑らか */
transition: all 0.2s ease;
background: #fff;
}
`
export const NavItem = styled.li`
height: 80px;
@media screen and (max-width: 960px){
width: 100%;
}
`
export const NavLinks = styled(Link)`
color: #141414;
display: flex;
align-items: center;
text-decoration: none;
padding: 0.5rem 1rem;
height: 100%;
font-family: "Ubuntu", sans-serif;
@media screen and (max-width: 960px){
text-align: center;
padding: 2rem;
width: 100%;
/* table状に並べる */
display: table;
&:hover {
color: #ff4040;
transition: all 0.3s ease;
}
}
`
こんな感じでstyled-components
を構成していきます。
このままではサイトにナビゲーションバーを表示することができないので、layout.js
ファイルに追加してレンダーできるようにします。
こんな感じでstyled-components
を構成していきます。
このままではサイトにナビゲーションバーを表示することができないので、layout.js
ファイルに追加してレンダーできるようにします。
こんな感じでstyled-components
を構成していきます。
このままではサイトにナビゲーションバーを表示することができないので、layout.js
ファイルに追加してレンダーできるようにします。
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import "./layout.css"
import Navbar from "./Navbar";
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Navbar />
<main>{children}</main>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout

きちんとナビゲーションバーが表示されました。
以上でナビゲーションバーの追加は完了です
まとめ
今日はナビゲーションバーを追加しました。
React.jsで作ったナビゲーションバーと作り方はほとんど変わりませんでしたね。
次回もウェブサイトの制作についてやっていきます。
最後まで読んでいただきありがとうございます。