はじめに

こんにちは。

GatsbyテンプレートからこのWebサイトを立ち上げて早２週間ほどが経とうとしていますが、僕はあることに気がつきました。それは…

コードほとんど触ってないやんけ！！！！！！！！！！！！！！！！！！！！１１

そうです。テンプレートはこちらなのですが、今までに変更を加えたものは

。。。。。。。。。。。。。。。。。。。。。。。。

プログラマーっぽいこと何にもやってない！！！！！！！！！

なので今回はせっかくGatsbyJSに触れるチャンスなので、このテンプレートに１つ要素を加えてアレンジをしたいと思います。

完成図

今回はブログのタイトルをトップページにh1タグとして追加するという修正を行いました。

今回の実装の流れとしては、

です。

まずはHeaderコンポーネントを作ります。

とりあえずはh1タグでタイトルだけを表示させます。

再利用可能なUIコンポーネントとするために、このような書き方をします。

import React from "react"

const Header = props => (
    <div className="header">
        <h1>{props.title}</h1>
    </div>
)

export default Header;

<Layout title={pageTitle} description={siteSubtitle}>
      <Header title="快速スーパーエンジニア行き" />
      <Sidebar isIndex />

コード修正量はそんなに多くないですが、Reactを今までに触ったことが無かったので、コンポーネントやCSS Moludeの概念を理解していなかったので既存のコードを読んで理解するのに圧倒的に時間がかかりました。

今回はh1タグで適当にブログのタイトルを追加しただけですが、今後もGatsby Tutorialなどを進めながらフロントの世界を理解しつつこのブログをモダンにアップデート出来たらなと思います((꜆꜄ ˙꒳˙)꜆꜄꜆ﾊﾟﾝﾁﾊﾟﾝﾁ

ブログにも同じ内容の記事を投稿しているので、良ければそちらもご覧ください(｀･ω･´)ゞﾋﾞｼｯ!!