Gatsbyでブログをはじめよう

React製静的サイトジェネレーター「Gatsby」について。
「Reactを始めたい」「ブログをはじめたい」という方向けにGatsbyのメリットを少しだけ紹介したスライドです。

Transcript

1. Gatsby Gatsby Gatsby Gatsby Gatsby Gatsby でブログをはじめよう でブログをはじめよう でブログをはじめよう でブログをはじめよう でブログをはじめよう でブログをはじめよう 2019-03-03 2019-03-03 2019-03-03 2019-03-03 2019-03-03 2019-03-03 フロントエンド× ビアバッシュ初心者勉強会 フロントエンド× ビアバッシュ初心者勉強会 フロントエンド× ビアバッシュ初心者勉強会 フロントエンド× ビアバッシュ初心者勉強会 フロントエンド× ビアバッシュ初心者勉強会 フロントエンド× ビアバッシュ初心者勉強会 @inouetakumon @inouetakumon @inouetakumon @inouetakumon @inouetakumon @inouetakumon 1 / 13
2. 自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 名前： 名前： 名前： 名前： 名前： 名前： たくもん（ たくもん（ たくもん（ たくもん（ たくもん（ たくもん（@inouetakumon @inouetakumon @inouetakumon @inouetakumon @inouetakumon @inouetakumon ） ） ） ） ） ） 仕事： 仕事： 仕事： 仕事： 仕事： 仕事： システムエンジニア システムエンジニア システムエンジニア システムエンジニア システムエンジニア システムエンジニア 言語： 言語： 言語： 言語： 言語： 言語： Java, JavaScript Java, JavaScript Java, JavaScript Java, JavaScript Java, JavaScript Java, JavaScript 趣味： 趣味： 趣味： 趣味： 趣味： 趣味：ブログ ブログ ブログ ブログ ブログ ブログ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) ( 最近はGatsby, AppSync, Vue.js 関連の記事が多い) その他： その他： その他： その他： その他： その他：Qiita Qiita Qiita Qiita Qiita Qiita, , , , , , GitHub GitHub GitHub GitHub GitHub GitHub                               2 / 13
3. React 製静的サイトジェネレーター React 製静的サイトジェネレーター React 製静的サイトジェネレーター React 製静的サイトジェネレーター React 製静的サイトジェネレーター React 製静的サイトジェネレーター WordPress のようなもの WordPress のようなもの WordPress のようなもの WordPress のようなもの WordPress のようなもの WordPress のようなもの
4. 自分の 自分の 自分の 自分の 自分の 自分のブログ ブログ ブログ ブログ ブログ ブログもGatsby 製です もGatsby 製です もGatsby 製です もGatsby 製です もGatsby 製です もGatsby 製です https://takumon.com https://takumon.com https://takumon.com https://takumon.com https://takumon.com https://takumon.com ← ブログURL ← ブログURL ← ブログURL ← ブログURL ← ブログURL ← ブログURL https://github.com/Takumon/blog https://github.com/Takumon/blog https://github.com/Takumon/blog https://github.com/Takumon/blog https://github.com/Takumon/blog https://github.com/Takumon/blog ← ブログソースコード ← ブログソースコード ← ブログソースコード ← ブログソースコード ← ブログソースコード ← ブログソースコード 4 / 13
5. 今回は 今回は 今回は 今回は 今回は 今回は 「React を始めたい」 「React を始めたい」 「React を始めたい」 「React を始めたい」 「React を始めたい」 「React を始めたい」 「ブログをはじめたい」 「ブログをはじめたい」 「ブログをはじめたい」 「ブログをはじめたい」 「ブログをはじめたい」 「ブログをはじめたい」 という方向けに という方向けに という方向けに という方向けに という方向けに という方向けに Gatsby のメリットを少しだけ紹介します。 Gatsby のメリットを少しだけ紹介します。 Gatsby のメリットを少しだけ紹介します。 Gatsby のメリットを少しだけ紹介します。 Gatsby のメリットを少しだけ紹介します。 Gatsby のメリットを少しだけ紹介します。
6. Gatsby とは Gatsby とは Gatsby とは Gatsby とは Gatsby とは Gatsby とは React React React React React React 製静的サイトジェネレーター 製静的サイトジェネレーター 製静的サイトジェネレーター 製静的サイトジェネレーター 製静的サイトジェネレーター 製静的サイトジェネレーター 記事はMarkdown で書く 記事はMarkdown で書く 記事はMarkdown で書く 記事はMarkdown で書く 記事はMarkdown で書く 記事はMarkdown で書く データ取得は データ取得は データ取得は データ取得は データ取得は データ取得はGraphQL GraphQL GraphQL GraphQL GraphQL GraphQL 経由 経由 経由 経由 経由 経由 SSR SSR SSR SSR SSR SSR 対応 対応 対応 対応 対応 対応 Lighthouse での得点はほぼ100 点、 Lighthouse での得点はほぼ100 点、 Lighthouse での得点はほぼ100 点、 Lighthouse での得点はほぼ100 点、 Lighthouse での得点はほぼ100 点、 Lighthouse での得点はほぼ100 点、Blazing fast （爆速） Blazing fast （爆速） Blazing fast （爆速） Blazing fast （爆速） Blazing fast （爆速） Blazing fast （爆速）                              
7. 1/5 スグにそれっぽいブログが作れる 1/5 スグにそれっぽいブログが作れる 1/5 スグにそれっぽいブログが作れる 1/5 スグにそれっぽいブログが作れる 1/5 スグにそれっぽいブログが作れる 1/5 スグにそれっぽいブログが作れる 以下コマンドを実行 以下コマンドを実行 以下コマンドを実行 以下コマンドを実行 以下コマンドを実行 以下コマンドを実行 $ npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog $ npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog $ $ cd cd blog blog $ $ npm npm run develop run develop http://localhost:8080 http://localhost:8080 http://localhost:8080 http://localhost:8080 http://localhost:8080 http://localhost:8080 にアクセス↓ にアクセス↓ にアクセス↓ にアクセス↓ にアクセス↓ にアクセス↓
8. 2/5 ブログを作りながら学べる 2/5 ブログを作りながら学べる 2/5 ブログを作りながら学べる 2/5 ブログを作りながら学べる 2/5 ブログを作りながら学べる 2/5 ブログを作りながら学べる ブログをカスタマイズするために学ぶことは多い ブログをカスタマイズするために学ぶことは多い ブログをカスタマイズするために学ぶことは多い ブログをカスタマイズするために学ぶことは多い ブログをカスタマイズするために学ぶことは多い ブログをカスタマイズするために学ぶことは多い React React React React React React GraphQL GraphQL GraphQL GraphQL GraphQL GraphQL SEO(Search Engine Optimization) SEO(Search Engine Optimization) SEO(Search Engine Optimization) SEO(Search Engine Optimization) SEO(Search Engine Optimization) SEO(Search Engine Optimization) ホスティング(GitHub Pages, Netlify) ホスティング(GitHub Pages, Netlify) ホスティング(GitHub Pages, Netlify) ホスティング(GitHub Pages, Netlify) ホスティング(GitHub Pages, Netlify) ホスティング(GitHub Pages, Netlify) etc... etc... etc... etc... etc... etc... 学ぶ → 作る → 公開する 学ぶ → 作る → 公開する 学ぶ → 作る → 公開する 学ぶ → 作る → 公開する 学ぶ → 作る → 公開する 学ぶ → 作る → 公開するのサイクルで学習を進められる のサイクルで学習を進められる のサイクルで学習を進められる のサイクルで学習を進められる のサイクルで学習を進められる のサイクルで学習を進められる                                    
9. 3/5 React の学習にはうってつけ 3/5 React の学習にはうってつけ 3/5 React の学習にはうってつけ 3/5 React の学習にはうってつけ 3/5 React の学習にはうってつけ 3/5 React の学習にはうってつけ React 学習時に最初に躓くのはRedux （状態管理） React 学習時に最初に躓くのはRedux （状態管理） React 学習時に最初に躓くのはRedux （状態管理） React 学習時に最初に躓くのはRedux （状態管理） React 学習時に最初に躓くのはRedux （状態管理） React 学習時に最初に躓くのはRedux （状態管理） 静的サイトなのでReact をHTML テンプレートエンジンとして使える 静的サイトなのでReact をHTML テンプレートエンジンとして使える 静的サイトなのでReact をHTML テンプレートエンジンとして使える 静的サイトなのでReact をHTML テンプレートエンジンとして使える 静的サイトなのでReact をHTML テンプレートエンジンとして使える 静的サイトなのでReact をHTML テンプレートエンジンとして使える 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも 慣れてきたらRedux を使ってインタラクティブな部品の作りこみも できる できる できる できる できる できる                  
10. 4/5 コードを書く感覚でブログが書ける 4/5 コードを書く感覚でブログが書ける 4/5 コードを書く感覚でブログが書ける 4/5 コードを書く感覚でブログが書ける 4/5 コードを書く感覚でブログが書ける 4/5 コードを書く感覚でブログが書ける GitHub のIssue, PullRequest による管理 GitHub のIssue, PullRequest による管理 GitHub のIssue, PullRequest による管理 GitHub のIssue, PullRequest による管理 GitHub のIssue, PullRequest による管理 GitHub のIssue, PullRequest による管理 ブログを書きながらコードをいじれる ブログを書きながらコードをいじれる ブログを書きながらコードをいじれる ブログを書きながらコードをいじれる ブログを書きながらコードをいじれる ブログを書きながらコードをいじれる ブログを書いてGtiHub の草が生える ブログを書いてGtiHub の草が生える ブログを書いてGtiHub の草が生える ブログを書いてGtiHub の草が生える ブログを書いてGtiHub の草が生える ブログを書いてGtiHub の草が生える                  
11. 5/5 自分仕様にカスタマイズできる 5/5 自分仕様にカスタマイズできる 5/5 自分仕様にカスタマイズできる 5/5 自分仕様にカスタマイズできる 5/5 自分仕様にカスタマイズできる 5/5 自分仕様にカスタマイズできる 豊富なプラグイン（716 種類） 豊富なプラグイン（716 種類） 豊富なプラグイン（716 種類） 豊富なプラグイン（716 種類） 豊富なプラグイン（716 種類） 豊富なプラグイン（716 種類）で簡単にカスタマイズ で簡単にカスタマイズ で簡単にカスタマイズ で簡単にカスタマイズ で簡単にカスタマイズ で簡単にカスタマイズ プラグインの自作も可能 プラグインの自作も可能 プラグインの自作も可能 プラグインの自作も可能 プラグインの自作も可能 プラグインの自作も可能 React コンポーネントを自作して思い通りのデザインにできる React コンポーネントを自作して思い通りのデザインにできる React コンポーネントを自作して思い通りのデザインにできる React コンポーネントを自作して思い通りのデザインにできる React コンポーネントを自作して思い通りのデザインにできる React コンポーネントを自作して思い通りのデザインにできる                  
12. Gatsby でブログをはじめよう！ Gatsby でブログをはじめよう！ Gatsby でブログをはじめよう！ Gatsby でブログをはじめよう！ Gatsby でブログをはじめよう！ Gatsby でブログをはじめよう！
13. ご清聴ありがとうございました ご清聴ありがとうございました ご清聴ありがとうございました ご清聴ありがとうございました ご清聴ありがとうございました ご清聴ありがとうございました