PROGRAMMING

Gatsby.jsでウェブサイトを作成する!【Gatsby.jsの始め方】

今日はGatsby.jsを使ってウェブサイトを作っていこうと思います。

前回まではReactを使ってウェブサイトを作成していましたが、SEO対策を考えてGatsby.jsを使うようにしました。

使い方などはReactとほとんど変わりません。

今回の記事でわかること
・Gatsbyの良さについて
・Gatsbyの始め方

今回はこんな感じの内容でやっていこうと思います。

参考文献

Gatsby.jsのインストール

Gatsby.jsとは

まずはGatsbyってなんだっていうところからやっていきたいと思います。

Gatsby.jsについてめちゃくちゃわかりやすく書いてあるのが下記のサイトです。

すごい参考になります。これを読んでSEOとかを考えてGatsbyにしようと思いました。

GatsbyとはReactのウェブフレームワークのことです。

ウェブフレームワークは、ウェブサービスやサイトを作るために必要な機能をまとめたツールのことを意味します。有名なところでは、Ruby言語を利用したRuby on Railsというフレームワーク、Python言語を利用したDjangoというフレームワークなどがあります。

なぜGatsby.jsにしたのか

1.  速度

Gatsbyのサイトを読み込む速度は超速で有名なくらいとても早いとのことです。

実際に動画とかでもいろいろ紹介をみてみましたが、React.jsよりも早いです。

2. プラグイン

Gatsbyの公式ウェブサイトでは、驚くほど便利なプラグイン多くあるそうです。いくつかの便利なプラグインをあげてみます。

  • gatsby-plugin-manifest :このプラグインを使用して、サイトをインストール可能にし、PWAにします。
  • gatsby-plugin-offline :このプラグインを使用してサイトをオフラインで実行します。
  • gatsby-plugin-google-analytics :このプラグインであなたのウェブサイトにGoogleアナリティクスを使用してください
  • gatsby-remark-embed-youtube :YouTube動画をウェブサイトに埋め込む

この他にも多くの便利なプラグインがあるそうです。

聞いていてすごくワクワクします。

3. スターターとテンプレート

GatsbyJs Starterリポジトリとテンプレートは十分な量あり、それらのコンテンツのクローンを作成して変更するのと同じくらい簡単。

このようにして、Webサイトを非常に迅速かつ効率的に完全に開発できるとのこと。

ドキュメントもとてもわかりやすくて、ドキュメントで学んでみるのもいいとのことです。(英語です。)

4. Reactベース

GatsbyでReactの既存の手法とコンポーネントを使用できます。

ReactJsコミュニティは強力で、ワンクリックで多くの既存のコンポーネントを利用できます。

Gatsby.js自体が新しすぎるという心配をする必要がないため、これは大きな利点です。

5. SEO対策

GatsbyJsを使用すると、Webサイトで内部コードで使用される多くの最適化手法を利用できます。

これにより、あなたのウェブサイトは検索エンジンで上位にランク付けされます。

これを後押しするのに役立つプラグインもたくさんあるとのことです。


以上がGatsbyを選ぶ利点ですね。

一方で、頻繁に更新されるサイトや動的なウェブサイトにはあまり向かないようです。

今回はどちらの要素には当てはまらないので、Gatsbyを使います。

下記はGatsbyの公式サイトです。

まさに今の私向きのフレームワークですね。

Gatsbyについておおまかにわかったので、Gatsbyのインストールをしていきます。

Gatsby.jsインストール

npmコマンドを使ってGatsbyJSのCLI(コマンドラインインターフェイス)のインストールを行います。

$ sudo npm install -g gatsby-cli

サイトの作成

サイトの作成はインストールを行なったgatsbyコマンドで行います。gatsbyコマンドの書式は下記の通りです。

$gatsby new サイト名 ディレクトリ名(※任意)

ディレクトリ名は入力しなくてもいいので、私の場合は下記のように作成しました。

$gatsby new gatsby-website

このコマンドでgatsby-websiteというサイトが作成することができました。

サーバーの起動

次に、サーバーを起動していきます。

まずはサイトの場所に移動して、サーバーを起動しましょう。

 $ cd gatsby-website
 $ gatsby develop
 
**********************************************

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/

**********************************************

これでサイトの作成は無事にできましたね。

まとめ

今回はGatsby.jsについてを紹介していきました。

日本ではマイナーらしいですが、海外では結構流行っているらしいです。

もし興味があれば、英語で検索してみるといいと思います。

最後まで読んでいただきありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.