Gatsbyのテクノロジーとは？

ReactJSをベースに作られたGatsbyJSとは一体何か？

Gatsbyに実際にどんなテクノロジーが使われているのか、トップページに説明がありますが、内容を掘り下げて説明します。 Gatsbyはそのフレームワークの位置付けを「継続可能静的ウェブサイト生成するもの」ーStatic Progressive Web Apps　Gatsby.js is a static PWA (Progressive Web App)generatorと呼んでいます。平たくいうと、単純にHTMLとCSSで出来ているが（JavaScriptがかけない訳では無い）、マークダウンファイル、API、データベースからデータを全て取ってきた状態で指示どうりにページを生成してくれるジェネレーターなのです。こうしてページを動的に動く要素を極力省くことで早いウェブサイトを作ります。何故早いウェブサイトが重要なのかは私のこのブログをお読みください。

1. ウェブパック（リンクは英語）やノードJSと言ったSEOに必要なライブラリやバンドルがギャッツビー用に用意されており、従来のように一つ一つライブラリをチェックして、インストールして（リアクトや必要なモデュールは予めパッケージされている）、仕様書をみながら組み立てる手間を省いてる
2. Gatsbyは豊富なプラグインエコシステムを用意しており、ファイルシステム作成からイメージの挿入までウェブページ、アプリ作成に必要なモジュールをGatsbyのプラグインとしてオファーしている。また自分の作成したデータやAPIがGraphQLを用いて作りやすいように設計されいる。
3. JAMstack（JavaScript, APIs, and prerendered Markup　ージャムスタック）を使用
4. Gatsbyは前もって別のページのリソースを呼び出しているので、ページ内をクリックした際に、ユーザーにとってより「早い」ウェブサイトに感じさせる

リアクトやNodeJSの知識なしに使えるフレームワークではありませんので、Gatsbyをお使いになりたい方は、少なくともReactJSのチュートリアル日本語のものがありますので、をさらっておくことをお勧めします。

Gatsbyを使いたい方は英語のチュートリアルページ、もしくは私のチュートリアルをご覧ください

静的ウェブサイトとは？

自動でリフレッシュしないウェブサイトです。例えば企業のウェブサイトは静的なものが多いですが、一方でFacebookは動的です。サイトをみてると新しい情報が常にアップデートされていきます。