Help us understand the problem. What is going on with this article?

Gatsbyの超高速テンプレート(PWA, MDX, TypeScript対応)を作ったヨ!

Gatsby.jsって?

この記事はGatsby.js Advent Calendar 2019 3日目の記事です。

実は1日目も記事を書いてます(Reactの最強フレームワークGatsby.jsの良さを伝えたい!!)。中1日です。高野連に怒られるやつです。カレンダーが空いていたので記事を書きます。

よければGatsbyの良さを叫んだ上の記事も合わせてご覧ください!

改めてとなりますが、Gatsby.jsReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。

Gatsbyはとても凄いので、プラグインなどをブチ込むと簡単にPWA対応した超高速サイトが作れたりします。もはや静的サイトジェネレータとしてだけでなく、create-react-appに代わるフレームワークとして使えるなと思っている次第であります。

そんなこといいつつも、プラグインの選定をしたり、TypeScript対応をしたりと、新しくプロジェクトを始めるときは面倒ごとが多いものです。Gatsbyが初めての人にこそ、こういうめんどくささを省いたわかりやすいテンプレートが必要です。

というわけで急造ではありますが、簡単なテンプレートを作成しました。テンプレートというよりスケルトンと言った方が正しそうなほど薄いものですが、以下の項目をバッチリ実現しています。

  • PWA(Progressive Web Application)対応
  • SEO対策(各種metaタグ,twitter ogpなど)
  • TypeScript(v3.7.2)対応
  • MDX(JSX in Markdown)対応
  • EsLint, Prettier対応
  • Netlifyへのデプロイ用ファイルをあらかじめ用意、Netlifyでのhttp/2対応
  • emotion(CSS-in-JSライブラリ、styled-componentsより色々出来る)対応
  • ResetCSSやsiteのconfig用のコンポーネントをあらかじめ用意

スケルトンなのでサイトスピードは早くて当然といえば当然ですが、lighthouse(chromeの拡張機能、サイトのパフォーマンス測定が出来る)のスコアは以下のようになっています。ぶっちぎりの最高得点。

スクリーンショット 2019-12-03 23.41.41.png

lighthouseってオールグリーンだとめでたい感じにエフェクト出るんですね...(知らなかった)

このスケルトンのGitHubリポジトリはこちらです。

GitHub: https://github.com/hppRC/gatsby-starter-hpp

また、実際にNetlifyにデプロイしてあるので、そちらでも動作確認が出来ます。

実際のサイト: https://gatsby-starter-hpp.netlify.com/

見た目がきらびやかな訳ではないですが、シンプルな分結構いじりやすいと思うので、ぜひこのテンプレートをもとに超高速で楽しいサイトを作ってみてください!!

まとめ

本記事は以下の記事、リポジトリを多分に参考にさせていただきました。ありがとうございます!!
まだ出来ていませんが、のちほどGitHubのリポジトリにも明記しておきたいと思います。

Gatsby.js を完全TypeScript化する
https://www.lekoarts.de/
LekoArts/gatsby-themes

最後に...

Gatsbyはいいぞ!!!!!!!!!!!!

明日の記事担当者は未定です!でも多分僕が書くと思います。進捗が産めたら書きます!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした