アプリケーション概要
今回作成するアプリケーションは、Markdownで書いたブログを表示するシンプルなアプリケーションになります。ページは下記の2つのみとなります。
- トップページ
- 記事詳細ページ
システム構成
アプリケーションの構成は、以下のようになります。
Headless CMS
ブログのデータは、Headless CMSと呼ばれるコンテンツ管理システムに保存されます。
従来のアプリケーションのデータベースの代わりとなります。
データベースを用いる場合、下記のような作業に時間がかかってしまいます。
- データベースの用意
- データ入力/更新用の画面作成
- データ入力/更新用のバックエンドロジックおよびサーバーの用意
Headless CMSではブラウザやAPIからデータの管理ができます。データベースやサーバーを用意する必要はなく、従来のデータベースを用いる場合に比べ作業時間を減らすことができます。
GraphQL
Headless CMSからのデータの取得には、GraphQLというクエリ言語を用いて問い合わせを行います。GraphQLはGithubやFacebookなど多くの起業で導入が進んでいている注目のクエリ言語です。
GraphQLを使うメリットは以下が挙げられます。
- APIの仕様や設計をシンプルに構築できる
- ツールが用意されており、開発時のテストがしやすい
言葉だけでは、メリットを感じづらいかもしれませんが後ほど使う段階で体感していただけると思います。
Gatsbyでは、GraphQLを標準採用しているのでぜひ使いこなしていきましょう！
プロジェクトの作成
作成するブログ用にプロジェクトを新規作成しましょう。
次のページからは、いよいよアプリケーションの実装に着手していきます。
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world