検索結果0件」

    【月単価90万+αのエンジニアへの道】Gatsby.jsを使って、簡単にイケてるブログを作る

    【月単価90万+αのエンジニアへの道】Gatsby.jsを使って、簡単にイケてるブログを作る

    こんにちは、シンヤです!

    今回は、【月単価90万+αのエンジニアへの道】Gatsby.jsを使って、簡単にイケてるブログを作るというテーマで、お話しいたします。
    なお、以下に解説するやり方はMacでのやり方となります。


    Gatsby.jsとは

    Gatsby.jsとは、「React.jsを使って、かんたんにブログを作れるようにした、静的サイトジェネレーター」のことです。
    静的サイトジェネレーターとは、ざっくり言ってしまうと「データベースなしでブログを作れるようにしたツール」の事です。
    こちらのブログも、Gatsby.jsで作られております😊

    React.jsについては、以前書きましたこちらの記事をご参照ください。

    Gatsby.jsの特徴

    • データベースなしでブログが作れる
      • サーバー代やメンテナンスコストがかかりません。
    • SPAでブログが作れる
      • 非同期通信であるSPAを使って、スマホアプリと同じように滑らかなブログが作れます。
    • デザインを自由に切り替えられる
      • WordPressと同じように、テーマを切り替える事でデザインも自由に変えられます。
    • ルーティングを自動で行ってくれる
      • 個別で指定したルーティングを、Gatsby.jsは自動的に行ってくれます。
    • プラグインがある
      • Gatsby.jsには便利なプラグインが、たくさん用意されています。
    • 初学者向けではない
      • React.js自体が「JSX」という特殊な文法でコードを書いていく為、初学者の方は対応は難しくなっています。
    • Webサービス作りには向いていない
      • フレームワーク外の事は行いにくく、かつブログ作成に特化している為、Webサービス作りには向いていない。

    上記を加味すると、データベースなしかつ無料でブログが作れ、Webアプリによる高いUXが実現できます。
    反面フレームワーク外の事をするなどの、柔軟性の高い使い方ができないので、Webサービス作りには向いていません😅


    環境構築をする

    以下の方法で、ご使用中のMacに環境を構築していきます。
    既に環境構築済みの方は、こちらの項目は飛ばして読んでください。
    少し難しいかもしれませんが、頑張ってついてきてください😅

    ターミナルを起動する

    まずは、ターミナルの起動を行います。
    Mac下部の「Launchpad」で、「terminal」と入力して出てきたアイコンを、クリックしてください。

    Homebrewのインストール

    以下のコマンドを入力して、Homebrewをインストールします。

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    インストール後、以下のコマンドを入力して、Homebrewのバージョンが表示されたら、成功しています😊

    $ brew -v
    #> Homebrew 1.2.3
    #> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)

    Nodebrewのインストール

    以下のコマンドを入力して、Nodebrewをインストールします。

    $ brew install nodebrew

    インストール後、以下のコマンドを入力して、Nodebrewのバージョンが表示されたら、成功しています😊

    $ nodebrew -v
    #> nodebrew 1.0.0

    Nodebrewを使える様にする

    以下のコマンドをターミナル上で入力して、環境変数を追加します。

    $ vi ~/.bash_profile

    ターミナルの画面が変わったら、

    1. キーボードの「I」を押す
    2. 「export PATH=$HOME/.nodebrew/current/bin:$PATH」のコードを追加する。

    以下の様な画像になっていればOKです。

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    以上で、コードの保存が終わり、エディターが閉じます😊

    Nodebrewのセットアップ

    以下のコマンドを入力して、先ほど作ったbash_profileを反映させます。

    $ source ~/.bash_profile

    次に以下のコマンドを入力して、Nodebrewをセットアップします。

    $ nodebrew setup

    Node.jsのインストール

    以下のコマンドを入力して、Node.jsをインストールします。

    $ nodebrew install-binary v12.13.1

    次に以下のコマンドを入力して、インストールしたNode.jsを使える様にします。

    $ nodebrew use v12.13.1

    インストール後、以下のコマンドを入力して、Node.jsのバージョンが表示されたら、成功しています😊

    $ node -v
    #> v12.13.1

    Gatsby.jsのインストール

    以下のコマンドを入力して、Gatsby.jsをインストールします。

    $ npm install -g gatsby-cli

    プロジェクトを作成する

    以下のコマンドを入力して、Gatsby.jsのプロジェクトを作成します。

    $ gatsby new gatsby-project

    gatsby-projectの部分は、好きな名前に変更してください。

    ローカルサーバーを立ち上げる

    ターミナルから以下のコマンドを入力して、作成したフォルダに移動します。

    $ cd gatsby-project

    移動後、以下のコマンドをターミナルで入力してください。
    入力後http://localhost:8000にアクセスして、下記の画面が表示されたら、正常にローカルサーバーが立ち上がっています😊

    $ npm run dev


    ディレクトリ構造を理解する

    Gatsby.jsは、どこにどのファイルを入れるというような、ディレクトリ構造が決まっています。
    今回使うディレクトリは以下になります。
    そのほかは今は覚えなくても問題ありません😅

    • src
      • Gatsby.jsの基本的なファイルはここに入れます。
    • static
      • 画像やアイコンなどの静的なファイルを入れます。
    • gatsby-node.js
      • Gatsby.jsの動きを制御するファイルです。
    • gatsby-config.js
      • Gatsby.jsの設定ファイルです。
        設定を変更したい場合は、このファイルを編集します。

    srcディレクトリとstaticディレクトリを理解する

    Gatsby.jsは基本的なファイルは、srcディレクトリとstaticディレクトリに入れます。


    src

    主な構造は、以下の通りです。

    • components
      • Component(部品)はここに入れます。
    • images
      • 画像を入れるディレクトリですが、ここに入れた画像は表示方法がかなり特殊なので、今回は使いません😅
    • pages
      • ここに切り替えていきたい画面を入れていきます。
        ルーティングは自動的に行われます。

    ディレクトリは好きなように追加する事ができます😊


    static

    画像やアイコンなどをここに入れていきます。
    最初は作られてないと思うので、新規で作成してください。

    こちらもディレクトリは好きなように追加する事ができます😊


    改造してみる

    ディレクトリ構造が理解できたところで、実際にGatsby.jsのファイルを改造してみましょう😀
    src/index.jsファイルを開いて、以下の様にソースコードを編集してください、

    import React from "react"
    import { Link } from "gatsby"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const IndexPage = () => (
      <Layout>
        <SEO title="Home" />
        <h1>Indexページです</h1>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </Layout>
    )
    
    export default IndexPage

    以下の様な画面になっていれば、成功しています😊


    Componentを作ってみる

    Gatsby.jsだけじゃなくアプリの特典の一つなのですが、
    部品(Component)を作って、画面毎にデザインを切り貼りして使い回すことができます。
    これを使う事で、

    • Header
    • Footer
    • Sidebar
    • Navigation

    などなど、部品を切り分けて、画面毎に呼び出して使うことができます。
    これにより、

    • 部品の管理がやりやすくなり
    • 作るファイルが少なくなる
    • それぞれの画面で部品を使いまわせる
    • 複数人でのファイル管理がやりやすくなる

    などのメリットがあります。

    「components」に、新しくファイルを追加する

    src/componentsディレクトリに、新しくnav.jsを追加してください。
    その後、以下のコードを追加してください。

    import React from "react"
    import { Link } from "gatsby"
    
    const Nav = () => (
      <nav
        style={{
          maxWidth: 960,
          margin: `0 auto`,
          padding: `1.45rem 1.0875rem`,
        }}
      >
        <Link to="">Index</Link>
        <Link to="">About</Link>
        <Link to="">Policy</Link>
      </nav>
    )
    
    export default Nav

    作成いたしましたら、src/components/header.jsに以下のコードを追加してください。

    import { Link } from "gatsby"
    import PropTypes from "prop-types"
    import React from "react"
    
    import Nav from "./nav"
    
    const Header = ({ siteTitle }) => (
      <div>
        <header
          style={{
            background: `rebeccapurple`,
            marginBottom: `1.45rem`,
          }}
        >
          <div
            style={{
              margin: `0 auto`,
              maxWidth: 960,
              padding: `1.45rem 1.0875rem`,
            }}
          >
            <h1 style={{ margin: 0 }}>
              <Link
                to="/"
                style={{
                  color: `white`,
                  textDecoration: `none`,
                }}
              >
                {siteTitle}
              </Link>
            </h1>
          </div>
        </header>
        <Nav />
      </div>
    )
    
    Header.propTypes = {
      siteTitle: PropTypes.string,
    }
    
    Header.defaultProps = {
      siteTitle: ``,
    }
    
    export default Header

    以下の様な画面になっていれば、成功しています😊


    layoutを変更してみる

    Gatsby.jsには、画面を切り替えても変わらない、「layout」を作ることができます。
    早速、layoutを編集してみましょう😊

    src/components/layout.jsを、下記のように編集してください。

    import React from "react"
    import PropTypes from "prop-types"
    import { useStaticQuery, graphql } from "gatsby"
    
    import Header from "./header"
    import "./layout.css"
    
    const Layout = ({ children }) => {
      const data = useStaticQuery(graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `)
    
      return (
        <>
          <Header siteTitle={data.site.siteMetadata.title} />
          <div
            style={{
              margin: `0 auto`,
              maxWidth: 960,
              padding: `0 1.0875rem 1.45rem`,
            }}
          >
            <p>共通のLayoutです。この部分はページを切り替えてもデザインが変わりません。</p>
            <main>{children}</main>
            <footer>
              © {new Date().getFullYear()}, Built with
              {` `}
              <a href="https://www.gatsbyjs.org">Gatsby</a>
            </footer>
          </div>
        </>
      )
    }
    
    Layout.propTypes = {
      children: PropTypes.node.isRequired,
    }
    
    export default Layout

    以下の様な画面になっていれば、成功しています😊


    画像を追加してみる

    まずは、画像を用意します。
    用意する画像はなんでもいいです😀
    今回は以下の画像を使いました。

    staticディレクトリに、画像を追加します😅
    その後src/components/layout.jsに、以下のコードを追加してください。

    import React from "react"
    import PropTypes from "prop-types"
    import { useStaticQuery, graphql } from "gatsby"
    
    import Header from "./header"
    import "./layout.css"
    
    const Layout = ({ children }) => {
      const data = useStaticQuery(graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `)
    
      return (
        <>
          <Header siteTitle={data.site.siteMetadata.title} />
          <div
            style={{
              margin: `0 auto`,
              maxWidth: 960,
              padding: `0 1.0875rem 1.45rem`,
            }}
          >
            <img src="/headerImage.jpg" alt="" />
            <p>共通のLayoutです。この部分はページを切り替えてもデザインが変わりません。</p>
            <main>{children}</main>
            <footer>
              © {new Date().getFullYear()}, Built with
              {` `}
              <a href="https://www.gatsbyjs.org">Gatsby</a>
            </footer>
          </div>
        </>
      )
    }
    
    Layout.propTypes = {
      children: PropTypes.node.isRequired,
    }
    
    export default Layout

    headerImage.jpgはファイル名なので、ご自身で付けた名前に変更してください。
    以下の様な画面になっていれば、成功しています😊


    ページを追加してみる

    では次に、実際にページを追加してみましょう😊
    pagesディレクトリに、

    • about.js
    • policy.js

    以下の2つのファイルを追加して、それぞれ下記のように修正します。

    about.js

    import React from "react"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const AboutPage = () => (
      <Layout>
        <SEO title="About" />
        <h1>Aboutページです</h1>
      </Layout>
    )
    
    export default AboutPage

    policy.js

    import React from "react"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const PolicyPage = () => (
      <Layout>
        <SEO title="Policy" />
        <h1>Policyページです</h1>
      </Layout>
    )
    
    export default PolicyPage

    追加したらsrc/components/nav.jsのコードを、以下のように修正してください。

    import React from "react"
    import { Link } from "gatsby"
    
    const Nav = () => (
      <nav
        style={{
          maxWidth: 960,
          margin: `0 auto`,
          padding: `1.45rem 1.0875rem`,
        }}
      >
        <Link to="/">Index</Link>
        <Link to="/about">About</Link>
        <Link to="/policy">Policy</Link>
      </nav>
    )
    
    export default Nav

    以下のようにリンクが追加されて、ページ遷移ができれば問題ないです。
    Gatsby.jsはルーティングも自動的に行ってくれます😊


    プラグインを使ってみる

    Gatsby.jsには便利なプラグインがたくさんあります。
    WordPressのプラグインと同じようなものですね。
    これを使う事で、ブログに便利な機能を追加する事ができます😊

    では早速使ってみましょう❗️
    今回は、Gatsby.jsでGoogle Analyticsを使えるようにします😀

    プラグインをインストールする

    ターミナルを開いて、以下のコマンドを入力してプラグインを追加します。

    $ npm install gatsby-plugin-google-analytics

    設定ファイルを変更する

    gatsby-config.jsを開いて、以下のようにコードを変更します。

    module.exports = {
      siteMetadata: {
        title: `Gatsby Default Starter`,
        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`,
      },
      plugins: [
        `gatsby-plugin-react-helmet`,
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `gatsby-starter-default`,
            short_name: `starter`,
            start_url: `/`,
            background_color: `#663399`,
            theme_color: `#663399`,
            display: `minimal-ui`,
            icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
          },
        },
        // Google Analytics追加
        {
          resolve: `gatsby-plugin-google-analytics`,
          options: {
            trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
          },
        },
      ],
    }

    後はYOUR_GOOGLE_ANALYTICS_TRACKING_IDを、Google AnalyticsのトラッキングIDに変更すればOKです😊

    プラグインはこちらで探せます😆


    ブログを作ってみる

    Gatsby.jsにはMarkdownを追加するだけで、かんたんにブログを作れる機能があります。
    早速ブログ機能を追加してみましょう😆
    ここから少し難しいかもしれませんが、頑張ってついてきてください💦

    プラグインを追加する

    ターミナルを開いて、以下のコマンドを入力してプラグインを追加します。

    $ npm install gatsby-transformer-remark

    gatsby-config.jsを編集する

    追加したら、gatsby-config.jsを以下のように編集して、追加したプラグインを使えるようにします。
    また、ブログを格納するディレクトリも指定します。

    module.exports = {
      siteMetadata: {
        title: `Gatsby Default Starter`,
        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`,
      },
      plugins: [
        `gatsby-plugin-react-helmet`,
        {
          resolve: `gatsby-source-filesystem`,
          // options変更
          options: {
            path: `${__dirname}/src/markdown-pages`,
            name: `markdown-pages`,
          },
        },
        // gatsby-transformer-remark 追加
        `gatsby-transformer-remark`,
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `gatsby-starter-default`,
            short_name: `starter`,
            start_url: `/`,
            background_color: `#663399`,
            theme_color: `#663399`,
            display: `minimal-ui`,
            icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
          },
        },
      ],
    }

    ${__dirname}/src/markdown-pagesが、ブログを格納するディレクトリです。

    Markdownファイルを追加する

    srcディレクトリにmarkdonw-pagesディレクトリを追加します。
    追加したディレクトリに、新しくpost-1.mdと`post-2.mdファイルを追加します。

    post-1.mdを、以下のように編集します。

    ---
    slug: "/blog/my-first-post"
    date: "2019-05-04"
    title: "My first blog post"
    ---
    
    これは最初のブログページです。

    post-2.mdを、以下のように編集します。

    ---
    slug: "/blog/my-second-post"
    date: "2019-05-06"
    title: "My second blog post"
    ---
    
    これは2番目のブログページです。

    ブログテンプレートを作る

    実際のブログページの雛形となる、テンプレートページを作ります。

    srcディレクトリに、新しくtemplatesディレクトリを追加します。
    追加したディレクトリに、新しくblogTemplate.jsファイルを追加します。

    blogTemplate.jsを、以下のように編集します。

    import React from "react"
    import { graphql } from "gatsby"
    import Layout from "../components/layout"
    
    export default function Template({
      data, // this prop will be injected by the GraphQL query below.
    }) {
      const { markdownRemark } = data // data.markdownRemark holds your post data
      const { frontmatter, html } = markdownRemark
      return (
        <Layout>
          <div className="blog-post-container">
            <div className="blog-post">
              <h1>{frontmatter.title}</h1>
              <h2>{frontmatter.date}</h2>
              <div
                className="blog-post-content"
                dangerouslySetInnerHTML={{ __html: html }}
              />
            </div>
          </div>
        </Layout>
      )
    }
    export const pageQuery = graphql`
      query($slug: String!) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
          html
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            title
          }
        }
      }
    `

    gatsby-node.jsを編集する

    gatsby-node.jsを開いて、以下のコードを追加して作成したブログテンプレートを使えるようにします。

    exports.createPages = async ({ actions, graphql, reporter }) => {
      const { createPage } = actions
      const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
      const result = await graphql(`
        {
          allMarkdownRemark(
            sort: { order: DESC, fields: [frontmatter___date] }
            limit: 1000
          ) {
            edges {
              node {
                frontmatter {
                  slug
                }
              }
            }
          }
        }
      `)
      // Handle errors
      if (result.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`)
        return
      }
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: node.frontmatter.slug,
          component: blogPostTemplate,
          context: {
            // additional data can be passed via context
            slug: node.frontmatter.slug,
          },
        })
      })
    }

    index.jsを編集する

    最後にsrc/pages/index.jsを編集して、追加した記事が読み込まれるようにします。

    import React from "react"
    import { Link } from "gatsby"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const IndexPage = ({ data }) => {
      const { edges: posts } = data.allMarkdownRemark
      return (
        <Layout>
          <SEO title="Home" />
          <h1>Indexページです</h1>
          <ul>
            {posts.map(({node: post}) => {
              return (
                <li>
                  <Link to={post.frontmatter.slug}>
                    {post.frontmatter.title} ({post.frontmatter.date})
                  </Link>
                </li>
              )
            })}
          </ul>
        </Layout>
      )
    }
    
    export const query = graphql`
      query IndexQuery {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
        ) {
          edges {
            node {
              id
              frontmatter {
                date(formatString: "MMMM DD, YYYY")
                slug
                title
              }
            }
          }
        }
      }
    `;
    
    export default IndexPage

    以下の様な画面になっていれば、成功しています😊


    index


    ブログ個別ページ


    まずはReact.jsを学んでみるのがいい

    ここまでざっとGatsby.jsの使い方を解説しましたが、まずはGatsby.jsの技術元である「React.js」の使い方を学ぶのがいいと思います。
    Gatsby.jsには冒頭でも説明した通り、

    • SPAでブログが作れる
    • デザインを自由に切り替えられる
    • ルーティングを自動で行ってくれる
    • プラグインがある

    などの機能が最初からついていますが、まずReact.jsの技術を学ばないと、恩恵がどれぐらいあるかわからないと思います。
    「ルーティング」とかまずどのような技術なのか、わからないと思うので😅
    React.jsの技術はそのままGatsby.jsに転用できるので、学んでおいて損はないです😊

    React.jsの技術は、以前僕が書いたこちらの記事で学習できます😊
    【月単価90万エンジニアへの道】create-react-appを使って、簡単にReactのプロジェクトを作る

    React.jsが使えるエンジニアは、単価でいうと大体「月60万〜90万」ぐらいみたいですね😊

    なお、今回記事にさせていただきましたソースコードは、こちらのRepositoryに公開しております。

    ではでは、またね〜🤗

    • 【月単価90万+αのエンジニアへの道】Gatsby.jsを使って、簡単にイケてるブログを作る

    広告