DEVELOPMENT
目次
React製の静的サイトジェネレーターの Gatsbyjsですが、
Reactの開発環境を整えるために使う等名目だけでも便利ですし、
もちろんmarkdownを使ってブログ・サイトを構築するにしても便利です。
hugoやhexo等だと、blogサイトに非常に適していますが、少し自分で見た目を変えたり、機能つけたりしたくなった場合、とても扱いと感じたことがあるのではないでしょうか?
そんな時React製のGatsbyであれば、自由に実装可能です。
そんなGatsbyのいいところを上げていきたいと思います。
- 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を指定してもいいのですが、これを使うと
- 画像のリサイズ
- 画像の圧縮
- Lazyroad という利点があり、使うべきです。 詳しくはこちらに記載あります
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。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから