Top / 【Gatsy js】いい所 を上げていいく

【Gatsy js】いい所 を上げていいく
April 15, 2020

DEVELOPMENT

web
node
Gatsby
js


React製の静的サイトジェネレーターの Gatsbyjsですが、

Reactの開発環境を整えるために使う等名目だけでも便利ですし、

もちろんmarkdownを使ってブログ・サイトを構築するにしても便利です。

hugoやhexo等だと、blogサイトに非常に適していますが、少し自分で見た目を変えたり、機能つけたりしたくなった場合、とても扱いと感じたことがあるのではないでしょうか?

そんな時React製のGatsbyであれば、自由に実装可能です。

そんなGatsbyのいいところを上げていきたいと思います。

  • Gatsby.jsの開始方法はこちらを参考にして下さい⬇

Gatsby js でブログを作成するのは簡単だった

環境構築

$ yarn add global gatsby-cli
$ gatsby new gatsby-site

これだけです。

面倒なwebpackの設定等は一切必要ありません。


package.jsonを編集してコマンドの設定は不要

通常 reactやvueというような、node のframeworkを使用する際、最終的にビルドする際、webpackの設定や 開発中に使用するコマンドの設定をすると思いますが、

Gatsby jsの場合、コマンドは用意されてます。

  • 開発環境で実装確認

    $ gatsby develop
  • Production用にbuild

    $ gatsby build
  • Productionの確認
$ gatsby serve

Webpackのconfigの設定不要

Webpackを設定する場合、画像ファイルやcssのロード等、必要なパッケージを入れて、自分でconfigに書いていきます。

gatsbyもコンパイル自体はwebpackでされていますが、

設定はとっても簡単です。

  • gatsby-config.js

    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },

    例えばこの場合、markdownの記事の中で、fileを使用する際、 設定してるpathから探して呼んでね。という設定で、これを記述すれば、ファイルがmarkdownファイルの中で読めるようになります。


便利なプラグインがとっても充実している

ここ(Gatsbyプラグイン45選)にまとめてくれていますが、 例えばTwitterやYoutubeの埋め込みなど、pluginを入れて、設定ファイルに数行追記すれば 簡単に表示することができ、サイズや見た目も調整してくれますね。

  • youtubeをmarkdown中に埋め込む場合

    $ yarn add gatsby-remark-embed-youtube
  • gatsby-config.js

    resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-youtube",
            options: {
              width: 800, // 表示サイズ
              height: 400 // 表示サイズ
            }
          }
        ]
      }

  • markdonw ファイルの記述
# Look at this Video:

`youtube:https://www.youtube.com/embed/2Xc9gXyf2G4`

とか

すべてのpluginは、こちらの公式サイトにあります。

意外とあんなものやらこんなものまでありますね


SEOの設定

リリースする際、超重要なのがSEO対策ですね。OGタグや、title description等、基本的には、configファイルに設定すれば、 必要なSEO用のmetaタグ等を出力してくれます。 さらに、favionなどもやってくれますね

ほんと楽です。

  • gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `タイトル`,
    author: {
      name: `名前`,
      summary: `紹介文`,
    },
    description: `サイトのdescription`,
    siteUrl: `サイトURL`,
    social: {
      twitter: `twitterのID`,
    },
  },

ここに書く内容は、追加したりももちろん可能で、どこでタグを出力処理しているかというと、

defaultでは、

  • src/components/seo.jsにいます。
  • GraphQLで、このファイルの内容を取得して、渡し、タグを生成します。

各ページで内容変更にも対応しており、ページのjsファイルで、このseoコンポーネントを呼ぶ際に、propsとして渡せば、metaタグをダイナミックに変更してくれます。


データのやりとは、GraphQL

  • Facebookが開発したクエリ言語「GraphQL」が採用されており、設定されたmeta tagやmarkdownの情報など、すべてのデータはGraphQLを介して取得されます。
  • 参考 ▶ GraphQLを使ってデータを取得する
{
  site {
    siteMetadata {
      title
    }
  }
}
  • こういう定義をした場合
{
  "site": {
    "siteMetadata": {
      "title": "A Gatsby site!"
    }
  }
}

こういう定義をすることにより、Component中でデータを扱うことができますね。


画像の表示方法

  • gatsby-transformer-sharp pluginを使いGraphQLで画像を取得し、画像を取得すべきです
  • static以下に置いて、pathを指定してもいいのですが、これを使うと

const data = useStaticQuery(graphql`
    query BioQuery {
      avatar: file(absolutePath: { regex: "/icon.jpg/" }) {
        childImageSharp {
          fixed(width: 50, height: 50) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      .
      .


  const avatar = data.avatar


  return(
    <div>
      // material uiのAvatar コンポーネント等、pathを渡す場合
      <Avatar aria-label="recipe" className={classes.avatar} src={avatar.childImageSharp.fixed.src} />

      // gatsby のimageコンポーネントを使う場合
      <Img fixed={avatar.childImageSharp.fixed} />
    </div>
  )

この取得の際のフォーマットはたくさんあります。 Gatsbyjs 公式


まとめ

いかがでしたか?他にももっとあるんですけど、随時追加して行こうと思います。 是非つかてって下さい。

🙏よかったらシェアお願いします🙏
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

ホームページ作成、ECサイト掲載、商品ブランディング等、ご依頼やご相談は


CONACT
入力して下さい
WRITTEN BY
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。2020年コロナウイルスの影響で、ゲストハウスとカフェを閉店。現在は、ECサイト新規リリース、運営と、黒毛和牛の牝牛ブランディングをしメディア立ち上げ。牝牛のお肉と、独自食品開発した食品をまもなく販売開始予定。詳細はこちらから

COPYRIGHT © 2021 UKAI CO., LTD. ALL RIGHTS RESERVED.