gatsby入門  チュートリアルをこなす ソースプラグインの作成（１）

# チュートリアルをこなす！
以前にgatsbyの基本のチュートリアルをこなしたのですが、まだチュートリアルが残っているので最後までやっていこうと思いました。
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/plugin-and-theme-tutorials/
https://www.gatsbyjs.com/tutorial/source-plugin-tutorial/
早速やっていきましょう。
#Plugin & Theme Tutorials
https://www.gatsbyjs.com/tutorial/plugin-and-theme-tutorials/
ここではプラグインとテーマのチュートリアルの概略が記載されていました。
ざっくり言うと
プラグインは、Gatsby APIを実装するNode.jsパッケージ。
テーマは、事前設定された機能やデータソーシング、UIコードをギャツビーサイトに追加するプラグインの一種。
要はサイト構築に便利な物が作れまっせ（しかも共有出来まっせ）ってことで理解しました。
次行きましょう。
#Creating a Source Plugin
https://www.gatsbyjs.com/tutorial/source-plugin-tutorial/
ここでは独自のソースプラグインを作成するようです。
ソースプラグインについてはチュートリアルにこう書かれています。

>ソースプラグインは、任意のソースからのデータをGatsbyが処理できる形式に変換します。 Gatsbyサイトでは、いくつかのソースプラグインを使用して、興味深い方法でデータを組み合わせることができます。

つまり構築サイト内のソースからデータを抜き出して、良い感じのデータに変換できるってことかな？
とにかく次次！
##How to create a source plugin
なんだか色々な事を書いてあるけど英語よくわかんねぇから、とりあえず実技に進もう。
###Set up an example site
以下コマンドでサンプルサイトを作成
```gatsby new example-site https://github.com/gatsbyjs/gatsby-starter-hello-world```
![2020-09-09_01h30_27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/238b3dcb-112e-3d07-8420-fab9e11b2071.jpeg)
###Set up a source plugin
以下コマンドでソースプラグインを作成
```gatsby new source-plugin https://github.com/gatsbyjs/gatsby-starter-plugin```
![2020-09-09_01h54_05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/54bb7fec-a797-e032-097a-164ca2447e97.jpeg)
###Install your plugin in the example site
サンプルサイトにソースプラグインをインストールします。
example-site/gatsby-config.jsを以下のように修正します。

```js:example-site/gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: [require.resolve(`../source-plugin`)],←ここ修正
}
```
example-siteを起動します。example-siteディレクトリに移動して以下を実行
```gatsby develop```
![2020-09-09_02h03_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/2ef04c43-712d-b131-8b39-816a652b3fbf.jpeg)
ロードされてる！
このログはsource-plugin/gatsby-node.jsに出力コマンドがあります。

```js:source-plugin/gatsby-node.js
exports.onPreInit = () => console.log("Loaded gatsby-starter-plugin")
```
###Source data and create nodes
source-plugin/gatsby-node.jsを以下のように書き換え

```js:source-plugin/gatsby-node.js
// constants for your GraphQL Post and Author types
const POST_NODE_TYPE = `Post`

exports.sourceNodes = async ({
  actions,
  createContentDigest,
  createNodeId,
  getNodesByType,
}) => {
  const { createNode } = actions

  const data = {
    posts: [
      { id: 1, description: `Hello world!` },
      { id: 2, description: `Second post!` },
    ],
  }

  // loop through data and create Gatsby nodes
  data.posts.forEach(post =>
    createNode({
      ...post,
      id: createNodeId(`${POST_NODE_TYPE}-${post.id}`),
      parent: null,
      children: [],
      internal: {
        type: POST_NODE_TYPE,
        content: JSON.stringify(post),
        contentDigest: createContentDigest(post),
      },
    })
  )

  return
}
```
再起動
graphqlを見ると
![2020-09-09_02h17_38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/f80e96a5-e441-567e-c75b-6895db294bcd.jpeg)
allPostという項目が増えています。
チュートリアル通りのクエリを実行するとこんな感じ。
うん。source-plugin/gatsby-node.jsに書かれたPost情報が記載されてる。
postもあるね。
なるほどね。サイトのディレクトリとファイルの内容だけでＳＱＬみたいなクエリ作って取得するようにイメージしておこう。

だめだ超眠い。

今回はここまで。

ありがとうございました。

# gatsby 過去の作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)