Gatsbyのインストールから、簡単ないじり方まで

17871 ワード
HTML gatsby HTML テキストリンク

この記事でやること

  • 試しにgatsby-starterを導入する
  • ローカル上にホームページを公開する
  • Visual Studio codeを導入する
  • gatsby-starterをいじってみる

この記事は【Gatsby】JS歴ゼロ秒から始める、ポートフォリオサイト構築 - Qiitaの続きです。
理解が追いつかなかったらこちらも合わせてどうぞ。

Gatsby のスターターを見てみよう

GatsbyにはStarterという便利なものがあります。
カードゲームでもよくありますよね、スターターパック。
ニュアンスとしては似たような感じで捉えて良いと思います。

試しにgatsby-starterを導入してみる

  1. とりあえず、一番基礎的なスターターである
    gatsby-starter-defaultを導入してみましょう。
    ターミナルで、どこでもいいのでわかりやすい場所に移動します。
    じゃあとりあえず、デスクトップにしましょうか。

  2. gatsby-starter-default: Gatsby Starter | Gatsby
    にInstall this starter locally:とありますので、
    そこにあるコマンドをターミナルにコピペします。


# 1.
# 任意のパス
$ cd desktop

# 2.
$ gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

すると、先程1.で移動したフォルダ、今回の例であればデスクトップに
2.によって作成された、gatsby-starter-defaultというフォルダがあると思います。

中身はこんな感じです。

gatsby-starter-default
├── LICENSE
├── README.md # 読んでね的文章、英語
├── gatsby-browser.js # 設定、ホームページの見栄えとか
├── gatsby-config.js# 設定、プラグインの管理とか、ホームページの名前とか
├── gatsby-node.js# 設定、ブログを作るときにいじりまくる
├── gatsby-ssr.js # 気にしなくていい
├── node_modules# 気にしなくていい
├── package-lock.json # 気にしなくていい
├── package.json# 気にしなくていい
└── src # ホームページの中身

どのファイルがどういう役割を果たすのか
ぼんやりなんとなくわかったと思います。

ローカル上にホームページを公開してみる

ではさっそく、ホームページを公開してみましょう。
早いなぁ！！と思うかもしれませんがご安心ください。
公開、といってもテスト環境上に見れる状態にしておく、といった感じです。

# 1.ターミナル上でgatsby-starter-defaultに移動する
$ cd gatsby-starter-default

# 2.ホームページをテスト環境上に見れるようにするコマンド
$ gatsby develop

gatsby developを実行するといろいろ出てきますが、
今回注目すべきは以下の文字列です。

You can now view gatsby-starter-default 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

ざっくり説明すると、

  • http://localhost:8000/にアクセスするとお前のホームページが確認できるやで
  • http://localhost:8000/___graphqlにアクセスすると GraphiQL ってやつに飛べるで

と言っています。
ちなみにこれを Twitter とかで公開してもあなたのホームページは見ることができません。
localhost:8000はインターネットもなにもない、あなたの PC 上のみで見れるもの、と思ってください。

では、早速http://localhost:8000/にアクセスして、
あなたのホームページを見てみましょう。

ジャン！！
こん感じに表示されると思います。

試しに下にあるGo to page 2をクリックしてみましょう。

なんとなーく、このホームページがどういう構成になっているか把握できたと思います。

  • index(最初に表示されるホームページ)がある
  • page-2がある
  • 確認してないけどもういっこのリンクからusing-typescriptに飛べそう

といった感じの構成ですね。
把握できたところで、テスト公開をやめてみましょう。

ターミナル上でctrl+Cを押下すると、
現在実行しているコマンドを停止することができます。
cmd+Cではなく、ctrl+Cです。

実際に HTML をいじりに行く

それでは、本格的に Gatsby いじりを始めていきましょう。

…前提として HTML の知識が多少必要となりますので、
はじめての HTML (全 14 回) - プログラミングならドットインストール
などで HTML を勉強しておくと話がスムーズに進みます。
今回は、書くのは厳しいけど、とりあえずがんばって読めるよ！というレベルを前提とします。
<body>に<h1>,<br>とかが理解できてればいいです。

ホームページの部品の場所

ホームページの部品はsrcというところに保管されています。

gatsby-starter-default
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── node_modules
├── package-lock.json
├── package.json
└── src# 目的地

ここですね、フォルダになってると思うので開いてみましょう。
中身はこの様になっています。
今夏いじりたいindexとpage-2を探してみましょう。

.
├── components
│ ├── header.js
│ ├── image.js
│ ├── layout.css
│ ├── layout.js
│ └── seo.js
├── images
│ ├── gatsby-astronaut.png
│ └── gatsby-icon.png
└── pages
├── 404.js
├── index.js
├── page-2.js
└── using-typescript.tsx

pagesの中に格納されていると思います。
では、index.jsをテキストエディタで開きましょう。

テキストエディタで js を開く

…あ、テキストエディタについて説明していませんでしたね。
Windows で言うところのメモ帳、Mac で言うところのテキストエディタが
思いつくと思いますが、それではありません。

せっかくなので、プログラムを書くときに使う
テキストエディターを使ってみましょう。

今回僕の環境だと、Visual Studio Code(以下VScode)というものを使用していますので、
同じもので揃えておきましょう。

またドットインストールになりますが、僕が説明するより
こちらの講座を見てもらったほうが早いと思います。
HTML/CSS の学習環境を整えよう [macOS 版] (全 5 回) - プログラミングならドットインストール

では、VScode の使い方がわかったと思うので、
続きを始めましょう。
確か、では、index.jsをテキストエディタで開く、
といった話だったと思います。

VS index.js

index.js
import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)

export default IndexPage

わけが分からなくて困っていると思いますが我慢してください。

一つ一つ現在の状況を整理しましょう。

  • 今回の目的は「index をいじる」、
  • つまり、ホームページの表示を変えることが目的です。
  • ホームページはHTMLをいう言語でできています。
  • このスクリプトの中に HTML がありませんか？
index.js
const IndexPage = () => (
<Layout>
<SEO title="Using TypeScript" />
<h1>Gatsby supports TypeScript by default!</h1>
<p>
This means that you can create and write <em>.ts/.tsx</em> files for your
pages, components etc. Please note that the <em>gatsby-*.js</em> files
(like gatsby-node.js) currently don't support TypeScript yet.
</p>
<p>
For type checking you'll want to install <em>typescript</em> via npm and
run <em>tsc --init</em> to create a <em>.tsconfig</em> file.
</p>
<p>
You're currently on the page "{path}" which was built on{" "}
{data.site.buildTime}.
</p>
<p>
To learn more, head over to our{" "}
<a href="https://www.gatsbyjs.com/docs/typescript/">
documentation about TypeScript
</a>
.
</p>
<Link to="/">Go back to the homepage</Link>
</Layout>
)

ありました。
ここをいじれば、ホームページの内容が変わる、という算段だというわけです。
せっかくなのでわかりやすく、デカデカと

ここは俺のホームページだ！！

と表示させちゃいましょう。

index.js
const IndexPage = () => (
<Layout>
<SEO title="Using TypeScript" />
<h1>俺のホームページだ！！！！</h1>
<Link to="/">Go back to the homepage</Link>
</Layout>
)

ヨシ！
…とにかく、これで 1 ページ目が変わったハズなので、確認しに行きましょう。

覚えていますか？
ターミナルでgatsby develop。

え？なぜか動かない？
cdでプロジェクトフォルダーに飛ぶのを忘れていませんか？

表示が変わりました。
page-2も同じような感じで編集することができます。

つまりどういうことか？

jsファイルの中にhtmlで記述できる箇所があります。
そこをいじることで、ホームページの表示が変わります。

基本的に、このようにしてホームページの表示をいじることができます。

というわけです。

次回予告

  • レイアウトの変更から学ぶGatsbyのしくみ
  • 画像を表示させる
  • リンクを貼る

にてお送りいたします。
それでは、また。