ことばを学ぶ LEARN GATSBY 週間 #1日目

「いのちを守る STAY HOME 週間」が始まりました.

これを機に、何か アウトプット したいと思い、今回、初めての投稿で、この記事を書くことにしました.

React を知ったのはおよそ1か月前.
学びながら、ブログサイトも作りたいなぁと一石二鳥を狙っていたところ、Gatsby という Reactフレームワーク を知りました.
最初はすごい難しかったのですが、仕組みが分かるととても使いやすいです. (小並感)

静的サイトジェネレーターの一覧サイト ではトータルのフォロワー数が一番多く、海外では結構人気らしいです. なぜか日本ではまだまだな感じです.
どうやら日本語の資料が少ないようです. (Twitterで検索してみました)

Gatsby公式サイトのチュートリアル(英語)、日本語訳 一応あります！

ですが、個人的に何をやっているのかわかりにくかったので、自分の理解のためにも、自分なりのチュートリアルを作り、順次、公開していくことにしました. もしよかったら、スキマ時間に挑戦してもらえると大変うれしく思います.

これを作るにあたり、参考にしている動画があります. 英語でも全然オッケーという方はこちらからどうぞ !

※ 誤字・脱字、それ意味違うよ ! 、これどういうこと ? などあればコメントお待ちしております.

この機会に、日本で、Gatsby Enthusiast が増えれば良いなぁと思っております !

Gatsbyのセットアップ

Node のバージョンは10以降が必要となります.　バージョンの詳細はこちら　
node公式サイトはこちら

gatsby-cli をインストールします.

npm install -g gatsby-cli   もしくは　yarn global add gatsby-cli　

gitHub上の gatsby-starter-hello-worldテンプレートを利用して my-blog という名前で新しいサイトを構築します.

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-hello-world

my-blog ディレクトリに移動します.

cd my-blog

gatsby develop コマンドを実行します. これで開発用サーバーを立ち上げ、ブラウザで確認することができます.

gatsby develop

すると、このような表示が出ると思います.

success open and validate gatsby-configs - 0.013s
success load plugins - 0.056s
success onPreInit - 0.004s
success initialize cache - 0.008s
success copy gatsby files - 0.088s
success onPreBootstrap - 0.014s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.017s
success building schema - 0.126s
success createPages - 0.003s
success createPagesStatefully - 0.055s
success onPreExtractQueries - 0.002s
success update schema - 0.024s   
success extract queries from components - 0.070s
success write out requires - 0.010s
success write out redirect data - 0.002s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 3.722 s
⠀
success run queries - 0.037s - 2/2 53.45/s
⠀
You can now view gatsby-starter-hello-world in the browser.
⠀
>   http://localhost:8000/ 
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
>  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 3.341s

ここで重要なのは、> 印をつけた行です. 最初の > である

 http://localhost:8000/

これが 開発用サーバー です.

そして、二番目の > である

http://localhost:8000/___graphql

これは、Gatsbyが採用している GraphQL というAPIのためのクエリ言語を参照する場所です.　また後に、使い方、書き方を説明したいと思います.

開発用サーバーにアクセスすると、画面左隅に、プログラミングでおなじみの文字が表れています！

ページの編集、追加

さて、my-blog 内にsrc フォルダ (source) 、その中に pages フォルダがあると思います.
pages フォルダにあるファイルは、そのファイル名をパスとして、ブラウザでのページとしてみることができます. (どっかで聞いたことあるような文章)

index.js は / というパス、つまり開発用サーバーを立ち上げたときの最初のページを示し、例えば about.js は /about というパスでみることができます.

早速、 index.js を開いてみましょう.

index.js

import React from "react"

export default () => <div>Hello world! </div>

divタグの中身を Welcome to Gatsby ! に書き換えて、保存してみましょう. すると、すぐにブラウザに変更が反映されます. これがいわゆる hot reloadingというものです.　

さて、index.js を見やすいように書き換えてみます. すこし表示する中身も変えてみました.
(やっていることは上の index.js と同じです.)

index.js

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This is Home  </h1>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home

保存するとすぐに変更が反映されます.(反映されない場合はリロードしてください)

次に、新しいページを追加してみましょう. 試しに src/pages 内に about ページを追加します.

about.js

import React from 'react'

const About = () => {
    return (
        <div>
            <h1>This is About Page </h1>
            <p>About Page coming soon ...</p>
        </div>
    )
}

export default About 

これで about ページが作られました。

では、index ページから about ページへリンクで移動したいと思います。
index.js 内に a タグを使ってリンクを作ってみましょう.

index.js

import React from 'react'

const Home = () => {
    return (
        <div> 
            <h1>This is Home </h1>
+            <a href='/about'>Go to About</a>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home 

実際にリンクを押して移動してみましょう。
移動はできましたが、全体のページがロードされてしまっています。

Gatsby では Link を使ってリンクします。
index.js にて、 a タグを Link で書き換えてみましょう

index.js

import React from 'react'
+import { Link } from 'gatsby'

const Home = () => {
    return (
        <div> 
            <h1>This is Home </h1>
+            <Link to='/about'>Go to About</Link>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home 

これで高速にページを切り替えることができました！　

まとめ

• gatsby develop で開発用サーバーを立ち上げることができる
• pages ディレクトリ内のファイルへは、そのファイル名をパスとしてアクセスできる
• Link を使って高速なページ移動ができる

次回やること

　Layout とコンポーネントについて、学びたいと思います !

ここまでご覧いただき、ありがとうございました :)