{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2019-11-05-ブログページに前後のリンクをつくる/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"甲府駅から成田空港へ 朝の6時45分。13時30分発の飛行機に乗るため早起きです。 甲府駅からは成田空港までの直通バスが出ていて、それに乗っていきます。 一本遅らせると成田空港に13時30分着のバスになってしまうので仕方ありません。 事前に予約ができ、コンビニ支払いにするとコンビニで乗車券がもらえます。 ついでにコーヒーを買って飲みました（フラグ）。 途中で10分の休憩があります。石川。 この時点で早朝に飲んだコーヒーのせいか、尿意がすさまじかったです。 一応バスの中にもトイレはあるのですが、あれは緊急用。バスの中でトイレはしたくないでしょう？ バスをトイレの近くに止めてくれたので、迷うこともなくサッとすますことができました。 成田空港 成田空港第２ターミナル4Fのスターバックスにて出発の便まで待ちます。 時間帯のせいかコロナの影響かわかりませんが成田空港は静かでした。 2F…","id":"b7694056-4422-57ed-aad4-91b273fd623a","fields":{"slug":"/blog/2020-03-05-熊本出張旅行　day-1/"},"frontmatter":{"title":"熊本出張旅行　Day 1","templateKey":"blog-post","date":"March 05, 2020","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcdIsJnQLf/EABoQAQACAwEAAAAAAAAAAAAAAAEAAgMSIgT/2gAIAQEAAQUC1smbmIEfRvBZ3Y//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGH/8QAHRAAAQQCAwAAAAAAAAAAAAAAAAECESISIVGBkf/aAAgBAQAGPwKdtYo22SHJZk9lUgScfD//xAAaEAEBAAMBAQAAAAAAAAAAAAABEQAhMZGx/9oACAEBAAE/IXWlJXmauQQAkyKR06OSvyDzIgiTi4Wr61j/2gAMAwEAAgADAAAAEKwf/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oACAEDAQE/ELiv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERMf/aAAgBAgEBPxBtpD//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhMcFRYXGh/9oACAEBAAE/EDkjKHx3MYIG8CPuacaR0KIP0yvCS0Qa52lwtHl5NJdd43NAlVDxn//Z","aspectRatio":1.3333333333333333,"src":"/static/b1c0ca3fce6ba35b7bbca8adae9b821a/bb41f/s__88080397.jpg","srcSet":"/static/b1c0ca3fce6ba35b7bbca8adae9b821a/d3f3e/s__88080397.jpg 30w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/9cab2/s__88080397.jpg 60w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/bb41f/s__88080397.jpg 120w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/eb15c/s__88080397.jpg 180w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/53d18/s__88080397.jpg 240w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/c1a81/s__88080397.jpg 4032w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"デモ Github 白い丸をドラッグすると移動させることができます。 CocosCreator HTML5ゲームを作成する上で最も簡単だと思われるゲームエンジンです。推しです。 詳細はこちら シーン Wall, Pack, Malletを配置。 PhysicsColliderComponentをアタッチ。 各種パラメーターを調整。 Malletのタグを１とした。 Pack ▼Pack.ts Mallet ▼Mallet.ts","id":"13eb331a-079d-55ba-b4b1-ab25b90ef6af","fields":{"slug":"/blog/2020-02-04【CocosCreator】physicsを使ってみる/"},"frontmatter":{"title":"【CocosCreator】physicsを使ってみる","templateKey":"blog-post","date":"February 04, 2020","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"Github ダウンロード スクリプトファイルと実行ファイルがダウンロード可能です。 Clone or Download => Download ZIP からどうぞ。 動画","id":"af05d24e-30aa-5dab-87e4-d851ddac9c01","fields":{"slug":"/blog/2020-02-04【Unity】VRMファイルを読み込んでオリジナルの弾幕を張るゲーム開発中/"},"frontmatter":{"title":"【Unity】VRMファイルを読み込んでオリジナルの弾幕を張るゲーム開発中","templateKey":"blog-post","date":"February 04, 2020","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"主張 Webゲーム開発に最適なのはcocoscreatorだと思います。\n特にUnity経験者に向いています。 なぜcocoscreatorなのか？ HTML5ゲームエンジンといえばいくつかあります。 PlayCanvas Phaser CocosCreator BabylonJS いずれも有名ですが、どれがディファクト開発環境かと聞かれて、即答できる人は少ないと思います。\nそこで今回は\"とっつきやすさ\"で比較していきたいと思います。 CocosCreator PlayCanvas Phaser BabylonJS 費用 〇 △ 〇 〇 学習コスト 〇 〇 △ × 3D △ 〇 × 〇 GUI 〇 〇 〇 〇 独断と偏見により各種ゲームエンジンの特徴を表にまとめました。 BabylonJSはNode.jsを立ち上げたりEditorの癖が強かったりして学習コストが高いです。 Phaser…","id":"c34a975c-cf9a-5f6d-b113-afa9eb9a1e52","fields":{"slug":"/blog/2020-01-23-【cocos-creator】web-html5-ゲーム開発に最適なゲームエンジン/"},"frontmatter":{"title":"【Cocos Creator】Web(HTML5)ゲーム開発に最適なゲームエンジン","templateKey":"blog-post","date":"January 23, 2020","featuredpost":true,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAea1apoIF//EABgQAQADAQAAAAAAAAAAAAAAAAECEBEA/9oACAEBAAEFAlloypre/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEhIDL/2gAIAQEABj8CjKzp4//EABwQAAICAgMAAAAAAAAAAAAAAAARATEhcUFRof/aAAgBAQABPyG8FswGPY5CVnMC9en/2gAMAwEAAgADAAAAEAwP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEDAQE/EFR//8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EAB0QAQACAQUBAAAAAAAAAAAAAAEAESExQWGB0bH/2gAIAQEAAT8QStExlLQXwdfYe6vs7EGmDcilZkf/2Q==","aspectRatio":1.59533527696793,"src":"/static/2ece7369fb8eba2bc148affbb8027baa/bb41f/cocoscreator.jpg","srcSet":"/static/2ece7369fb8eba2bc148affbb8027baa/d3f3e/cocoscreator.jpg 30w,\n/static/2ece7369fb8eba2bc148affbb8027baa/9cab2/cocoscreator.jpg 60w,\n/static/2ece7369fb8eba2bc148affbb8027baa/bb41f/cocoscreator.jpg 120w,\n/static/2ece7369fb8eba2bc148affbb8027baa/eb15c/cocoscreator.jpg 180w,\n/static/2ece7369fb8eba2bc148affbb8027baa/53d18/cocoscreator.jpg 240w,\n/static/2ece7369fb8eba2bc148affbb8027baa/0b7f5/cocoscreator.jpg 2736w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"prismjsとは Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.公式サイト 　ようするに、最新のめっちゃ軽いシンタックスハイライターです。 　公式サイトにいくつかテーマがあり、それをインポートすればかっこいいシンタックスハイライトが実現できます。 　もちろんcssをオーバーライドすればカスタマイズすることも可能です。 gatsby-remark-prismjsの導入 　コンソールで以下のコマンドを実行すれば、gatsby-remark-prismjsをインストールすることができます。 ▼コンソール 　次に、gatsby-config.jsでgatsby-remark-prismjsをgatsby-transformer-remark…","id":"d8545ee2-a7c7-50ab-b897-c28fe9e247b8","fields":{"slug":"/blog/2019-12-26-netlifycms-gatsby製ブログにシンタックスハイライトを導入する方法/"},"frontmatter":{"title":"NetlifyCMS + Gatsby製ブログにシンタックスハイライトを導入する方法","templateKey":"blog-post","date":"December 26, 2019","featuredpost":false,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"タップしている指の座標を取得する Input.touches :\n最後のフレーム間ですべてのタッチ情報のオブジェクトリストを返します（読み取り専用）[リファレンス] とあるので二本指の座標は以下のようにして取得することができます。 2点間をベクトルとして、1フレーム前のベクトルとのなす角を求める 　まず、最初のタッチでは前フレームのベクトル(_beforeVec)がないので、それを決定したらreturnで処理を終了するようにします。 Vector3.Angle : 2点間（ from と to ）の角度を返します\nVector3.Cross : 2つのベクトルの外積\n[リファレンス] とあるので、Vector3.Angleによって角度を求めた後に外積のzの値を用いて正負を決定します。 少し面倒ですがVector3.Angleは0～18…","id":"3021dc48-5ee2-534b-9a29-6bc1acbfe8ef","fields":{"slug":"/blog/2019-12-23-【unity】二本指でオブジェクトを回転させる方法/"},"frontmatter":{"title":"【Unity】二本指でオブジェクトを回転させる方法","templateKey":"blog-post","date":"December 23, 2019","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"インスタンス化 → Destroy は重い 　Unityで安直にPrefab（弾）をインスタンス化し、それを発射してDestroy()をするとどうなるでしょうか。 　同時に発射する弾が少なければ問題はありませんが、弾幕を張ろうものなら……はい、処理落ち地獄ですね！ 　処理落ちの主な原因はインスタンス化（instantiate() ）です。したがって、インスタンス化を事前にしておき、それを使いまわすという方法が王道です。 オブジェクトプール 　事前にオブジェクトを用意することをオブジェクトプールといいます。 　具体的には、Start()やAwake()関数でインスタンス化を行なっておき、あとはgameObject.SetActive…","id":"bea9bd27-233f-57a1-af3b-151000d3c755","fields":{"slug":"/blog/2019-12-17-【unity】-低負荷で弾幕を処理-形成したい　【オブジェクトプール】/"},"frontmatter":{"title":"【Unity】 低負荷で弾幕を処理/形成したい　【オブジェクトプール】","templateKey":"blog-post","date":"December 17, 2019","featuredpost":true,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQDBQb/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABdbzkl0+UoP8A/8QAGxABAAICAwAAAAAAAAAAAAAAAgEDERIABCL/2gAIAQEAAQUC3DjfFb7AyvKTU18//8QAFhEBAQEAAAAAAAAAAAAAAAAAABES/9oACAEDAQE/AYw//8QAFhEBAQEAAAAAAAAAAAAAAAAAABES/9oACAECAQE/AbW3/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAExAhARISL/2gAIAQEABj8CboMshs50Tb//xAAaEAEAAgMBAAAAAAAAAAAAAAABACExUWGh/9oACAEBAAE/IaMVyBDVPVBM5K4wwtnLuE//2gAMAwEAAgADAAAAEGDf/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAEDAQE/EK4f/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARQXH/2gAIAQIBAT8QSOWei//EAB0QAQEAAgIDAQAAAAAAAAAAAAERACExUUFxgbH/2gAIAQEAAT8QS1XSVwdE5s3Nc+sq1MNpP3GwAdKY2tEIAjpfONn3P//Z","aspectRatio":1.7768115942028986,"src":"/static/1b9ea10da969bca125a05c46903b9c24/bb41f/danmaku.jpg","srcSet":"/static/1b9ea10da969bca125a05c46903b9c24/d3f3e/danmaku.jpg 30w,\n/static/1b9ea10da969bca125a05c46903b9c24/9cab2/danmaku.jpg 60w,\n/static/1b9ea10da969bca125a05c46903b9c24/bb41f/danmaku.jpg 120w,\n/static/1b9ea10da969bca125a05c46903b9c24/eb15c/danmaku.jpg 180w,\n/static/1b9ea10da969bca125a05c46903b9c24/53d18/danmaku.jpg 240w,\n/static/1b9ea10da969bca125a05c46903b9c24/d2e85/danmaku.jpg 1226w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"ある日、iPhoneで自分のブログを確認していたところ、細かい所ですが少しイラっとくる点に気づきました。 以下の画像を見てください。分かるでしょうか。 右側に僅かですが、謎の余白が生まれてしまっています。 これが原因で横スクロールできてしまい、ガクガクしてしまうときがありました。 　また、markdown のコード表示が非常に見づらいです。 これら修正します。 スタイルの追加 　軽く調べたところ、htmlとbodyに overflow: hidden を適用すればいいみたいです。 　なのでLayout.js とall.sass に以下のようなコードを追記しました。 　2019/12/25 追記：コードを見やすくするのには\"gatsby-remark-prismjs\"を導入するべきです。後日記事にしたいと思います。 ▼Layout.js　(Helmetタグ内) ▼all.sass…","id":"074fc5f9-43ab-5f1f-8cf2-dab117c65ebe","fields":{"slug":"/blog/2019-11-06-スマホページの横揺れ と markdownのコード表示のデザインを修正する/"},"frontmatter":{"title":"スマホページの横揺れ と markdownのコード表示のデザインを修正する","templateKey":"blog-post","date":"November 06, 2019","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,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","aspectRatio":0.5622188905547226,"src":"/static/548cc2b07f083b1addd67f9837c7a04e/c0382/img_6523.png","srcSet":"/static/548cc2b07f083b1addd67f9837c7a04e/5dcac/img_6523.png 30w,\n/static/548cc2b07f083b1addd67f9837c7a04e/6919b/img_6523.png 60w,\n/static/548cc2b07f083b1addd67f9837c7a04e/c0382/img_6523.png 120w,\n/static/548cc2b07f083b1addd67f9837c7a04e/8fd0d/img_6523.png 180w,\n/static/548cc2b07f083b1addd67f9837c7a04e/cca1d/img_6523.png 240w,\n/static/548cc2b07f083b1addd67f9837c7a04e/6065c/img_6523.png 750w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"今回はブログページの下部に前後のブログ記事のリンクをつくりたいと思います。\n記事の一覧ページはBlogRoll.jsに実装されていたのでそれを参考にします。 blog-post.js の編集 queryにBlogRoll.jsのqueryをコピペして追加します。 データの取得部分を以下のように追記 前後ページリンクの設置 確認 これで以下のように前後記事へのリンクを貼ることができました。 あとはデザインをなんとかしたいですね。","id":"37d9ab1d-1dbf-503b-9676-e11e619d5bb1","fields":{"slug":"/blog/2019-11-05-ブログページに前後のリンクをつくる/"},"frontmatter":{"title":"ブログページに前後のリンクをつくる","templateKey":"blog-post","date":"November 05, 2019","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAYF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdpHosEeP//EABgQAAMBAQAAAAAAAAAAAAAAAAACEQEg/9oACAEBAAEFArhVKvH/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAADAQEAAAAAAAAAAAAAAAAAATIgMf/aAAgBAQAGPwLqKRSx/8QAGBABAAMBAAAAAAAAAAAAAAAAAAER8cH/2gAIAQEAAT8hmeezQaClKf/aAAwDAQACAAMAAAAQjD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxCI/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERUdHxof/aAAgBAQABPxB0fn04PTh9IUiFIhSP/9k=","aspectRatio":1.9638728323699421,"src":"/static/3a35e6183665d45e02f9b253bb535513/bb41f/zengolink.jpg","srcSet":"/static/3a35e6183665d45e02f9b253bb535513/d3f3e/zengolink.jpg 30w,\n/static/3a35e6183665d45e02f9b253bb535513/9cab2/zengolink.jpg 60w,\n/static/3a35e6183665d45e02f9b253bb535513/bb41f/zengolink.jpg 120w,\n/static/3a35e6183665d45e02f9b253bb535513/eb15c/zengolink.jpg 180w,\n/static/3a35e6183665d45e02f9b253bb535513/53d18/zengolink.jpg 240w,\n/static/3a35e6183665d45e02f9b253bb535513/b5765/zengolink.jpg 1359w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"GatsbyJs とは？ GatbyJsとは、Reactを使った静的サイトジェネレータのことです。 静的サイトジェネレーターは他にもHUGO、Hexo、Jekyllなどがありますが、GatsbyJsの大きな特徴は、リソースデータの取得にGraphQLを使っている点とReactを使っている点です。 Netlifyとは？ 静的サイトのホスティングサービスです。 GitHub / GitLab / Bitbucket のリポジトリと連携することができ、リポジトリを更新すると自動でデプロイしてくれます。 つくる Netlify CMSというものがあります。これはWeb上でMarkdownの記述ができ、そのまま更新ができるというものです。今回はそれを使用するテンプレートを使います。 以下のリンクからGitのリポジトリにそのテンプレートをfolkできます。 netlifycms.org/docs…","id":"9ec9ad6b-de40-507e-8e22-73417f80619f","fields":{"slug":"/blog/2019-11-01-GatsbyJs と Netlify でブログをつくる/"},"frontmatter":{"title":"GatsbyJs と Netlify でブログをつくる","templateKey":"blog-post","date":"November 01, 2019","featuredpost":true,"featuredimage":{"childImageSharp":null}}}}]},"markdownRemark":{"id":"37d9ab1d-1dbf-503b-9676-e11e619d5bb1","html":"

今回はブログページの下部に前後のブログ記事のリンクをつくりたいと思います。\n記事の一覧ページはBlogRoll.jsに実装されていたのでそれを参考にします。

\n

blog-post.js の編集

\n
\n

queryにBlogRoll.jsのqueryをコピペして追加します。

\n
export const pageQuery = graphql`\n  query BlogPostByID($id: String!) {\n    allMarkdownRemark(\n      sort: { order: DESC, fields: [frontmatter___date] }\n      filter: { frontmatter: { templateKey: { eq: \"blog-post\" } } }\n    ) {\n      edges {\n        node {\n          excerpt(pruneLength: 400)\n          id\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            templateKey\n            date(formatString: \"MMMM DD, YYYY\")\n            featuredpost\n            featuredimage {\n              childImageSharp {\n                fluid(maxWidth: 120, quality: 100) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n    ...\n  }\n`
\n


データの取得部分を以下のように追記

\n
const BlogPost = ({ data }) => {\n  ...\n  const { allMarkdownRemark: AMR } = data\n\n  return (\n    <Layout>\n      <BlogPostTemplate\n        ...\n        id={post.id}\n        amr={AMR}\n      />\n    </Layout>\n  )\n}\n\nBlogPost.propTypes = {\n  data: PropTypes.shape({\n    ...\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.array,\n    }),\n  }),\n}
\n


前後ページリンクの設置

\n
export const BlogPostTemplate = ({\n  ...\n  id,\n  amr,\n}) => {\n  ...\n  if(amr && \"edges\" in amr){\n    var posts = amr.edges;\n    var myPost = posts.find((v) => v.node.id === id);\n    var myIndex = posts.indexOf(myPost);\n    var maxIndex = posts.length;\n  }else{\n    var myIndex = 0;\n    var maxIndex = 1;\n  }\n  \n\n  return (\n      ...\n            {<div width=\"100%\">\n              {myIndex>0 &&\n                <Link className=\"button\" to={posts[myIndex-1].node.fields.slug}>\n                  ← 前の記事\n                </Link>}\n              {myIndex<maxIndex-1 &&\n                <Link className=\"button\" to={posts[myIndex+1].node.fields.slug}>\n                  次の記事 →\n                </Link>}\n            </div>}\n            \n      ...\n  )\n  \n}
\n

確認

\n
\n

これで以下のように前後記事へのリンクを貼ることができました。

\n

\n \n