「あれ？これよくわからないなー。Googleで検索しよっと！」

検索ワードを入力して検索！「どれどれ〜？」といったっ感じで良いサイトがないか１つ１つ探していきます。記事名と詳細の説明を読んで、なんだか良さげなリンクをクリックしました。

「………なにも表示されない」

1秒…2秒…まだ止まっています。5秒…6秒…DIO様より時間を止められてしましました。そうして待っているとだんだん不安になってきます。ネットが切れたのかな？、危ないリンクを踏んでしまったかな？、などなど。

このようにウェブサイトを訪問した時に、そのページが表示される速度が遅いと人は不安になります。特に初めて訪問したユーザーは二度と戻ってくることはないでしょう。

本当かどうかわかりませんが、表示速度が0.1秒遅くなると、売上が1%落ちるなんて話もあるぐらいです。

ウェブサイト作成するのにWordpressは人気がありますが、Wordpressを利用していると感じることもあります。…それはウェブサイトの表示が遅いということです。Wordpressは、ページを表示するときに、ページを1から生成する動的なウェブサイトです。

データベースからデータを引っ張ってきたり、プラグインでの処理を行なったり、途中で色々やって、最終的にページが表示されるわけです。特別なことをやろうとすればするほど、遅くなってしまうわけです。

Wordpressのような動的ウェブサイトとは異なり、静的なウェブサイトは、用意されたページをそのまま表示するだけで終わります。つまり、高速にウェブサイトを表示することが可能になるわけです。

静的Webサイトのメリットとデメリット

静的なウェブサイトには、（どんなものにもありますが）メリットとデメリットが両方あります。

１つは、表示が非常に高速になるということです。余計な処理がないので、サーバーの負荷も軽くなります。ただ表示するだけで良いのですからね。表示が早いサイトは、GoogleのSEOにも良い影響があると言われています。

2つ目は、脆弱性対応も楽になるということです。Wordpressはオープンソースなので、脆弱性のコードが公開されており、悪用されやすいといえます。そのため、迅速に最新バージョンに更新していなければ、攻撃の影響を受けやすくなっています。

また、プラグインによっては、最新バージョンで動かなくなることもあるので、アップデートをしたくてもできないこともあります。でも静的サイトでは複雑なことはあまりしないので、脆弱性が混入する可能性は低くなります。

逆にデメリットとしては、動的なウェブサイトでできることが、できないことが多いということですね。例えば、コメント機能などは静的Webサイトだけでは実装できず、外部サービスを利用したりする必要が出てきます。

とはいえ、やっぱり表示が速いというのは、それだけで魅力的です。あなたがページを表示するまでに与えられている時間は、2秒もないのですから。

Gatsbyのインストールと初期設定

この記事では、Gatsbyと呼ばれる静的サイトジェネレーターを利用して、静的ウェブサイトを作成していきます。

もちろん静的ウェブサイトなので、極端な話、HTMLファイルを書いていくだけで作成できてしまいます。でも、それだけだと面倒なことがたくさんあるので、Gatsbyを使うことで、より効率的に作成していくことができるようになります。

Node.jsのインストール

GatsbyはJavascriptで実装されています。もっというと、ReactというJavascriptのフレームワークを利用しています。そのため、Node.jsと呼ばれるJavascriptの実行環境が必要になります。

というわけで、まずはnpm(パッケージ管理ツール)でNode.jsのインストールを行います。npmがない場合は、Node.jsのウェブサイトからダウンロードした方がわかりやすいかもしれません。

npmを使ってインストールする場合、以下のコマンドでインストールできます。

npm install -g node

​処理が終わったら、以下のコマンドでインストールされたか確認できます。

node --version

# 実行結果：
# --version
# v16.10.0

gitのインストール

gitはバージョン管理ソフトです。MacOSでXCodeを入れているならgitはすでに入っている可能性があります。もし入っていない場合は、以下のウェブサイトなどを参考に入れておいてください。

後でまた説明しますが、gitをインストールしておくと、コードをアップロードした際に、自動的にビルドとデプロイをしてもらうことができるようになります。

gitが入っているかどうかは、以下のコマンドで確認できます。

git --version

# 実行結果：
# git version 2.24.2 (Apple Git-127)

Gatsby CLIのインストール

続いて、GatsbyのCLIをインストールします。CLIは、コマンド ライン インターフェースの略ですね。Gatsbyから提供される便利な機能を、コマンドラインから使えるようにするツールです。

以下のコマンドを入力してインストールします。

npm install -g gatsby-cli

無事にインストールされたかは、以下のコマンドで確認できます。

gatsby --version

# 実行結果(バージョンは異なる可能性があります)：
# Gatsby CLI version: 3.14.1
# Gatsby version: 4.0.0

これでインストール作業は完了しました。お疲れ様でした！

続いて、最初のGatsbyウェブサイトを作成しましょう。

GatsbyのHello World

新しいフレームワークを覚えるときに、最初に作るものといえば、決まっていますよね。そう、"Hello World"を表示するサイトです(笑)。

もちろん、あなたはもっとすごいウェブサイトを作りたいと思っているはずです。でも、最初にちゃんとインストールが成功して、動くか確かめることは大切なことです。

先ほど、Gatsby CLIをインストールしたので、以下のコマンドが使えるようになりました。このコマンドを使うことで新しいGatsbyプロジェクトを簡単に作成できます。

gatsby new

続いて、プロジェクトの名前やプロジェクトの場所を聞かれますので、適当に名前をつけたり設定してください。

What would you like to call your site?
GatsbyJSTurorialSite

What would you like to name the folder where your site will be created?
GatsbyJSTutorial/ tutorial-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?
(Multiple choice) Use arrow keys to move, spacebar to select, 
and confirm with an enter on "Done"

◯ Build and host for free on Gatsby Cloud
◯ Add responsive images
◯ Add the Google Analytics tracking script ◯ Add page meta tags with React Helmet
◯ Add an automatic sitemap
◯ Generate a manifest file
◯ Add Markdown support (without MDX) ◯ Add Markdown and MDX support
 ─────
▸ Done

CMSやstyling systemは後で追加できるので、"No (or I'll add it later)"を選択します。

最後の質問は、複数選択できます。後で追加していきますので、今回は何も選ばずに"Done"を選択します。

最終確認の画面が出ますので、エンターキーを押せば、ウェブサイトの作成が始まります。

しばらく待つと以下のような表示が出ます。

✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in tutorial-site
🎉  Your new Gatsby site GatsbyJSTurorialSite has been successfully created
at /Users/nishimatsu/Documents/gatsby_tutorial/tutorial-site.

Start by going to the directory with
 cd tutorial-site
 
Start the local development server with
 npm run develop
 
See all commands at
 https://www.gatsbyjs.com/docs/gatsby-cli/

まずは指示通りに、新しく作成されたフォルダに移動して、ローカル開発環境でサーバーを動かしてみましょう。

cd tutorial-site
gatsby develop

gatsby developコマンドを実行すると、ウェブサイトがビルドされて、ローカルサーバーが立ち上がります。うまくいかない場合はGatsby CLIのインストールがうまくいっていない可能性があります。"npm run develop"も試してみてください。

このような表示が出れば成功したことになります。この状態で以下のアドレスにアクセスすれば、ブラウザでGatsbyウェブサイトが表示されます。

http://localhost:8000/

以下のページが表示されれば、最初のウェブサイトの作成は完了です。

…え？Hello Worldじゃないって？

せっかくなので、"Hello World!"を表示するように、少しだけこのページを変更してみましょう。上の画像にも書かれているように、このトップページはsrc/pages/index.jsにあるファイルから生成されました。

つまり、このファイルを開いて、"Hello World!"と書き込めば、それがウェブサイトに反映されるわけですね。

src/pages/index.jsを開いてみましょう。その中で、Congratulationsという文字列を検索してみてください。それをHello World!に書き換えてみましょう。以下の部分になります。

…中略…

// markup
const IndexPage = () => {
 return (
   <main style={pageStyles}>
     <title>Home Page</title>
     <h1 style={headingStyles}>
       Congratulations # Hello World!に変える
       <br />
       <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
       <span role="img" aria-label="Party popper emojis">
         🎉🎉🎉
       </span>
     </h1>
     
…中略…

この部分を変更してファイルを保存すると、ブラウザを更新しなくても、Hello World!という文字列が表示されます！

まとめ

初めてのGatsbyウェブサイトを作成することができました。

index.jsの中身を見ると、自動生成されたページなので、いろいろ書いてあってわかりにくいと思います。次回は新しいページを１から作成してみることにしましょう。

続き↓

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ