###「いのちを守る 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 を開いてみましょう.
import React from "react"
export default () => <div>Hello world! </div>
divタグの中身を Welcome to Gatsby ! に書き換えて、保存してみましょう. すると、すぐにブラウザに変更が反映されます. これがいわゆる hot reloading というものです.
さて、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 ページを追加します.
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 タグを使ってリンクを作ってみましょう.
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 で書き換えてみましょう
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 とコンポーネントについて、学びたいと思います !
ここまでご覧いただき、ありがとうございました :)