【Gatsby.js】Gatsby.jsで気持のいいサイトを作りましょう！（準備編）

はじめに

今回、このGatsbyについての投稿をしようと思ったきっかけからお話していきたいと思います。
簡単にことの経緯を説明すると、私自身Web制作者として駆け出しの段階でありますが、HTML&CSS、JavaScript、WordPressの基本的なところを習得した（つもり）で、次はどの方向に進もうかなと考えた時にいくつかの選択肢が目の前に浮上してきました。PHPを鍛えてWordPressさんと仲良くなるか。three.jsとかに手を出してみてグラフィックに挑戦してみるか。はたまたJavaScriptのフレームワークを学んでSPA（シングルページアプリケーション）に挑戦してみるか。。といった感じでしたが、私のミーハーな部分が出てしまい今流行りのフレームワークに飛び込むことに決めました。有名どころで言うとReact、Vueがでしょうか。結果から言うと、私はReactの静的サイトジェネレーターのGatsbyにお世話になることを決めたのですが、この点に関しては長くなりそうなので後ほどお話していければと思います。ただ、一言で言うなれば、投稿機能付のサイトを制作したい事情があったので、、ということです。
今回は準備へんとしていますので、Gatsbyの特徴とはじめ方までとさせていただきます。
次回以降、サンプルを用いて解説していく予定です。

目次

1. 現段階のSPA界隈
2. Gatsbyの素晴らしさ
3. さっそくはじめてみよう！

1. 現段階のSPA界隈

それでは、現段階のSPA界隈の状況からお話してきたいと思います。
ちなみに、私自身まだ駆け出しWeb制作者ということもありますので、思い違いをしている部分もあると思いますので、お気づきになられたらご指導ご鞭撻のほどお願いいたします。

有名どころでいうと、以下の感じでしょうか？
・Vue.js
　-Nuxt.js
　-VuePress
・React.js
　-Next.js
　-React　Static
　-Gatsby.js

私は上記からどれを学ぼうか迷っていましたが、当時世界的な人気でいうとReactが強かった（日本ではVue）とのことだったので、Reactをかじっていたこともあり、Vueも使いやすそうだけどまた１から学びなおすのもな、、ということで自然とReactを選択することとなったのですが、中でもGatsbyが優れていると感じたので、その点について次章で解説していきます。

他にもこんな感じのものもあるようです。

2. Gatsbyの素晴らしさ

ここからは、Gatsbyの特徴について記述していきます。
・圧倒的スピード
　-SPA
　-SSR
　-PRPL
　-事前ビルド
・モダン技術がいっぱい
　-React
　-Graphql
　-webpack
.便利なおプラグインがいっぱい
　-scssでの記述
　-CMSの導入も可能
・CMSとの相性がいい
　-WordPressやcontentfulと簡単に組み合わせ可能
などなど、、他にもたくさんあると思います。

ただ、このGatsbyは私の当初の目的であった投稿機能付で爆速表示できるサイトは作りたい！という理想にぴったりハマったため習得を決意しましたが、各々目的にあった学習を進めていくことが大切だと思うので、誰にでもGatsbyをやりましょう！とは言えないですね。

そして、このGatsbyは日本であまり聞くことがありませんが、すでに海外で多くの企業が導入済みです。
IBM、PayPal、Braun、Airbnb、Impossible Food （参考）といった世界的な大企業がすでに導入しており、さらにはReactの公式ドキュメント自体もGatsbyで作られているということが衝撃的でした。
日本では、まだまだ通常WordPressでいいや！という風潮が見受けられますが、ユーザーの操作性という「価値」を考えると、表示・遷移スピードは真っ先に改善すべきポイントだと思っています。
なので、日本でも早く流行ることを祈っております。
ただ、まだ現時点で日本語ドキュメントが出ていないのが難点ですが、、（Google翻訳を使いましょう）

3. さっそくはじめてみよう！

ここからようやくGatsbyをはじめられますね！
しかしながら、その導入手順は驚くほどシンプルでものの数分で終わってしまいます。
操作性のみならず、導入も早いのは素晴らしいです！！
基本的には公式ドキュメントのクイックスタートに沿って操作を行えばいいだけですが、一応以下で順でターミナルにコマンドを打ち込んでいくだけです。

1.Gatsby CLIをインストールする

npm install -g gatsby-cli

2.新しいサイトを作成する

gatsby new gatsby-site

3.ディレクトリをサイトフォルダーに変更する

cd gatsby-site

4.開発サーバーを起動

gatsby develop

とまあ、こんな感じで進めていけばあっという間に準備完了です。
ここから実際のサイト作成までは次回以降で解説していければと思います。
最後に参考文献を載せておきます。

参考文献

公式ドキュメント
SPA, SSR, 静的サイトジェネレーターについて
高度なAPIやJSライブラリを使う現代的なウェブサイト作りを助けるGatsby
デザイナーが1人でGatsbyを使ってサイトを作ったよ
GatsbyjsでWordPress風の簡易ブログを作って勉強してみた