PROGRAMMING

Gatsby.jsでウェブサイトを作る!【ナビゲーションバーの追加】

今日はGatsby.jsを使ってナビゲーションバーを追加していきます。

ウェブサイトを作るときに大変なのは、ナビゲーションバーを作る作業ですね。

そのため、今回はコードにいろいろ書き込みながら理解していきます。

今日はGatsby.jsの始め方から、ナビゲーションバーの追加までやっていきたいと思います。

この記事でわかること
・ナビゲーションバーの追加方法
・styled-componentの使い方
・ナビゲーションバーのデザイン

Bootstrapを使ってNavbarを作成する方法もありますが、今回はBootstrapを使わずに作っていきます。

下記のページではReactとbootstrapを使ってナビゲーションバーを作る方法が書いてあります。

英語の文献ですが、詳しく書いてありますので、もし興味があれば参考にしてみて下さい。

参考文献

React.jsの時と同じYoutuberの人を参考にさせていただいています。

ナビゲーションバーの追加

完成図

まずナビゲーションバーを作っていきますが、先に完成図をお見せします。

それからこうなるまでの過程を理解していきます。

ナビゲーションバーの作成

まずがNavbarというフォルダを作成して、その下にindex.jsNavbarElementsのファイルを作成します。

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
画像に alt 属性が指定されていません。ファイル名: e7edf4b8e8798aceaaa400ea3c244adc.gif

きちんとナビゲーションバーが表示されました。

以上でナビゲーションバーの追加は完了です

まとめ

今日はナビゲーションバーを追加しました。

React.jsで作ったナビゲーションバーと作り方はほとんど変わりませんでしたね。

次回もウェブサイトの制作についてやっていきます。

最後まで読んでいただきありがとうございます。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.