Gatsby 初めて触ってみました💻チュートリアルから進めていこうかと思います

こんにちは、Yuuichiです。

今回はReactベースのオープンソースフレームワークであるGatsbyについて、Getting Startからローカルブラウザで表示できるところまでやっていこうと思います。

Next.jsは触っていたのですが、Gatsbyは今日が初です😀ワクワク

Gatsbyとは？

まずはざっと公式サイトのトップを読んでかいつまんでみました。

・Reactベースの無料のオープンソースフレームワークとのことです。

・Gatsbyのプラグインが2000以上あるようです。Plugin 一覧へ

・Gatsby CloudというGatsbyで作成したアプリケーションをデプロイするサービスがあるようです。GitHubやGitLabアカウントと連携して利用するようです。

個人的に気になった点だけピックアップしてみました。

詳しくは、以下の公式サイトをご参照ください。

Gatsby公式サイト：https://www.gatsbyjs.com/

ここからは、さっそく手を動かしていこうと思います。

Getting Start

学習も兼ねて、公式サイトのチュートリアルに沿って、今回はMac Bookで作業していこうと思います!!

まずはgatsby-cliをグローバルでインストール。

$ npm install -g gatsby-cli
...省略

$ gatsby -h
...コマンドオプション確認

$ gatsby -v
Gatsby CLI version: 2.16.0
...今回はこちらのバージョンでやっていきます

少しヘルプを見てみたところ、開発サーバーを起動したり、プロジェクトのビルド・ビルドしたGatsbyサイトの確認・開発環境(自分のマシンなど)の環境情報をみたり出来るようです。

また必要に応じて、この辺りのコマンドは把握していこうかと思います。

Quick Start

どうやら3コマンドでGatsbyのベース環境は構築できるそうなので、やっていきます。

$ npm init gatsby
npx: 1個のパッケージを2.637秒でインストールしました。
create-gatsby version 0.2.0

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /XXXXX/XXXXX with the setup you select. Let's answer some
questions:


What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ gatsby_tutorial/ my-gatsby-site
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)
✔ Would you like to install additional features with other plugins?No items were selected


Thanks! Here's what we'll now do:

   🛠  Create a new Gatsby site in the folder my-gatsby-site

✔ Shall we do this? (Y/n) · Yes
✔ Created site from template

コマンド実行後にサイトの呼び名・作成するフォルダ名・CMSを利用する場合は対象のCMSを選択したり、サイトのスタイリングシステムの選択などがありますが、今回は特に何も利用する予定はないため、選択せずに進みました。

npm init gatsbyが完了すると以下のようなメッセージが表示されます。

...省略
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in my-gatsby-site
🎉  Your new Gatsby site My Gatsby Site has been successfully created
at /Users/yuichi/webProject/gatsby_tutorial/my-gatsby-site.
Start by going to the directory with

 cd my-gatsby-site

Start the local development server with

 npm run develop

...省略

上記のメッセージから作成されたディレクトリへ移動します。

// ここのディレクトリは、initした際に付けた名前によって変わりますので、ご自身が決めたディレクトリ名になると思います。
$ cd my-gatsby-site

ローカルサーバを立ち上げてみます。

$ npm run develop
...省略
You can now view my-gatsby-site 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 - 22.793s

起動できました😀

ローカルホストの8000番ポートにアクセスして、ブラウザで確認してみます。

http://localhost:8000/

公式通り進めただけなのですが、無事にブラウザで確認できました!!

最初のinstallからさほど時間経ってません...ベース構築はめちゃくちゃ早い!!

作成されたプロジェクトを少し触ってみる

Visual Studio Codeなどで開いて、src/pages/index.jsをいじってみました。

ちょっと文字変えただけですが...コード編集してブラウザで確認しながら作業できるので楽ですねぇ!!

初期ディレクトリ構成

treeコマンドで構成を見てみました。

$ tree -I "node_modules|.cache" my-gatsby-site/
my-gatsby-site/
├── LICENSE
├── README.md
├── gatsby-config.js
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   ├── page-data
│   │   ├── 404
│   │   │   └── page-data.json
│   │   ├── 404.html
│   │   │   └── page-data.json
│   │   ├── dev-404-page
│   │   │   └── page-data.json
│   │   └── index
│   │       └── page-data.json
│   ├── render-page.js
│   ├── render-page.js.map
│   └── static
└── src
   ├── images
   │   └── icon.png
   └── pages
       ├── 404.js
       └── index.js

10 directories, 15 files

まだGatsbyのコードをどう書いて行くかや何がどこにあってどの設定をいじっていくのかを知らない状態ですが....

思ったよりシンプルそうですね。

gatsby-config.jsに利用するプラグインなどを設定をしたり、src配下のコードを編集してビルドすると恐らく公開フォルダ(public)にビルドしたファイルが作成されるのではないかと予想ができました。

まとめ

初めてGatsbyを触ってみましたが、環境構築も簡単でしたし、ディレクトリ構成もシンプルでわかりやすそうだなぁと感じました。

まだまだソースの内部を細かく見たりしていないので、今後は引き続き公式サイトのtutorialを進めたり、Gatsby Cloudへデプロイを試してみようかと思いました。またアウトプットしながら学習していこうと思います。

最後までお付き合いいただき、ありがとうございました😀

また、次回の投稿でお会いしましょう!!