BACK
|Gatsbyチュートリアル

Gatsby使い方　Step2

Gatsby JS logo image

Gatsbyjsを使い始める前に

インストール済の方もいらっしゃるとは思いますが、Gatsbyを楽しく使うためにコードエディターVSコードをインストールしましょう。 私は英語版を使っていますが（日本語訳が分かりにくい時があるため）、日本語版のリンクはこちらです。英語版を使ってみたいと思うかた、是非こちらからダウンロードしましょう。

私も使っていて、Gatsbyのウェブサイトでもお勧めされてるエクステンションがPrettierと言って、Gatsbyjsで使うコードを気持ちよくハイライトしてくれます。エクステンションは下記の赤で囲ってあるアイコンをクリックすると、検索ウィンドウが表示されるので、そこにPrettierとタイプしてみましょう。一番上に表示されるはずですので、見つけたらインストールをクリックするだけで、あとは自動的にハイライトしてくれます。

Gatsbyのインストールが終わったら、今度はGatsbyの構造を理解しましょう。GatsbyがただのJSライブラリーと思って使うと失敗します。Gatsbyのビギナーが使う前にまず知って置くべきことは下記です。

  1. Gatsbyjsは基本的には静的ウェブページを生成してくれるウェブサイトビルダーであり、ユーザーはGatsbyが最終的に作成するウェブページの構造を作成してる。
  2. Gatsbyjsで実際にページを生成するにはbuild（ビルド）コマンドを使うが、ビルドには時間がかかるので、develop（デベロップ）コマンドがあり、コードの変更をリアルタイムで確認できるようになっている。
  3. 実際に生成したページはHTML、CSS、JSであり、PUBLICホルダー内に生成される。よって、ウェブでホストする際に必要なのはこのフォルダだけ。
  4. フォルダの構造やプラグインのインストールの仕方には決まりがあって、Gatsbyのドキュメンテーション・チュートリアルをちゃんと理解する必要有り。
  5. Gatsbyjsはデータをクエリするのにグラフキューエル（GraphQL）を使っており、テンプレートを作ったら、ダイナミックにページが生成されるように設計されている。つまりGatsbyのグラフキューエルの使い方をマスターする必要有り。

Gatsby構造の基本その１　ーindex.jsがHTMLファイルのindex.htmlの役割にデフォルトで設定

このデフォルト設定は変えられますが、基本的にsrc > pages > index.jsをデフォルトでホームページとしてGstabyは認識します。まずindex.jsを開いてみましょう。 Gatsbyjs starter のフォルダ内

  1. Hello World を今度は「Hello World from GatsbyJS!」に変え、今度はVSコード上でターミナルを開いてみましょう。VSコードのメニューからターミナルタブをクリック.

VSコードのターミナルウィンドウの使い方

  1. ターミナルが表示されたら早速「gatsby develop」をタイプしてエンターキーを押し、ウェブブラウザーのURLに 「localhost:8000」 をタイプして エンターキーを押します。

VSターミナルからGatsbyのDevelopコマンドを使う

そうしたらチュートリアル１で紹介した「Hello World」のページが見えますか？ ここに表示されている内容がステップ１のindex.jsに書かれてるコードです。ここを編集しましょう。

ご存知かもしれませんが、リアクトJSはindex.jsに下記のコードが書かれてることが一般的でバックエンドを一緒に書くのが通常です。

ReactDOM.render(<App />, document.getElementById('root'));

Gatsbyjsの場合は、src > pagesホルダに書いたJSを自動的にページだと認識してページを生成するのです。下記のコードを試してみましょう。

import React from 'react'

const HomePage = () =>{
    return(
        <div>
            <h1>Gatsbyjsで作る最初のページ</h1>
            <h2>Gatsbyjsをマスターしよう！</h2>
        </div>
    )
}

export default HomePage

以下を書くもしくはコピペしたら、今度は保存して、またブラウザで「localhost:8000」をチェックしましょう。 下記のようなページが表示されるはずです。

Gatsbyjsチュートリアルビギナー

  1. 新しいページを足していこう！

src > pages にページを足していきましょう。ここでは下記の三つを足しますよ。

  • about.js
  • blog.js
  • contact.js

Gatsbyjsチュートリアルビギナー・ページの追加

ここで大切なのは、Gatsbyはデフォルト、最初のセッティングでこの.jsの前、つまりabout,blog,contactをスラグとして認識します。もちろん変えられますが、最初の設計ではそうなっていると言うことを覚えておいてください。

それではabout.jsに下記のコードを追加しましょう。

import React from 'react'

const AboutPage = () =>{
    return(
        <div>
            <h1>Flamingod Newsについて</h1>
            <p>Flamingod Newsはアメリカの最新ウェブ開発技術を日本語でエンジニア向けにお届けします。</p>
        </div>
    )
}

export default AboutPage

次にcontact.jsには下記のコードを追加しましょう。

import React from 'react'

const ContactPage = () =>{
    return(
        <div>
            <h1>お問い合わせ</h1>
            <p>Flamingod Newsに関してのお問い合わせはcontact@flamingod.newsまで。</p>
        </div>
    )
}

export default ContactPage

blog.jsには下記のコードを追加しましょう。

import React from 'react'

const  BlogIndexPage = () =>{
    return(
        <div>
            <h1>ブログ一覧</h1>
            <p>ここに後からブログの一覧が追加されます。</p>
        </div>
    )
}

export default BlogIndexPage

保存したら、ウェブブラウザに戻って「localhost:8000/about」とタイプしてみましょう。

Gatsbyjsチュートリアルビギナー・ページの追加とスラグ

この章で作成したGatsbyのファイルはこちらからダウンロード頂けます。

次のチュートリアルはリアクトのコンポーネントをGatsbyjsに足していきます。

  1. Gatsbyjsの使い方　ビギナー編　Step１ Gatsbyjsとは？また、インストールの仕方
  2. Gatsbyjsの使い方　ビギナー編　Step２　Gatsbyjsでページを生成してみよう！
  3. Gatsbyjsの使い方　ビギナー編　Step３　Gatsbyjsでフッターとヘッダーを作って、リンクオブジェクトを使ってみよう！
  4. Gatsbyjsの使い方　ビギナー編　Step4 Gatsbyでスタイルを設定しよう！
*Flamingod NewsはアメリカITの最新のニュースを日本語で紹介します。
...

Follow us @FlamingodN