開発用チュートリアル

サイトの構成

使用しているツールとその用途を簡単に紹介します。次のようになっています。

• Gatsby.js(React.JS) - WEBサイトの構築
• GraphQL - 記事データの読み込み

チュートリアル

配布されたプロジェクトファイルを開きます。サイトの見た目、即ちフロントエンドに相当する部分のコードはsrc/に格納されています。src/以下にあるソースはHTMLとJavascriptを組み合わせて作られており、。今回はindexページを例に説明します。src/pages/index.jsがそれに相当します。

次のコードはその一部です(最後の方)

        <Link to="/archive/2" id="archive-link">
          More Articles  
          <FaAngleDoubleRight className="icon-right" />
        </Link>{" "}
        <br />
      </Layout>
    )
  }
}

export default IndexPage

例えばMore Articlesの部分を次の記事へと変更し保存します。すると

だったところが次のように文言が変化しているのが確認できます。

続いてサイトのフッターの部分を変更します。サイト内の複数のページに共通して存在するようなパーツはComponentとして取り扱われています。実際のコードはsrc/components/footer.jsです。

        <div>© {new Date().getFullYear()} どっかのエンジニア</div>
      </div>
    </footer>
  )
}
export default Footer

どっかのエンジニアの部分を適当な文言に変更して確認してみてください。比較画像は割愛しますが、変化が確認できるはずです。src/components/layout.jsを確認します。