GatsbyJS hands-on

2019/01/08にサポーターズで行われた『Gatsbyで今風ウェブサイトの開発ハンズオン』のハンズオン資料です。

https://supporterzcolab.com/event/659/

Transcript

1. GatsbyJS HandsOn モダンウェブサイトの開発ハンズオン 2018.01.08 Supporterz Colab
2. #spzcolab GatsbyJS HandsOn 事前準備 • Node.jsのインストール • GitHubの登録 • CodeSandboxの登録 • Netlifyの登録
3. TypeScript, React, Gatsby, Ruby on Rails エンジニアの登壇を応援する会 write-blog-every-week, JS Ninja Gatsby, Gridsome, Nuxt etc. お仕事 コミュニティ OSS mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介
4. Gatsby製のブログで書いています mottox2.com
5. Contributions to Gatsby
6. 技術書典への参加
7. #spzcolab GatsbyJS HandsOn 普段、どういった分野を担当していますか？ 質問 フロントエンド、バックエンド、インフラ、モバイルアプリ等
8. #spzcolab GatsbyJS HandsOn 1⼈で参加者全員をサポートするのは難しいです。 出来た⼈は近くの⼈のサポートをお願いします。 お願い
9. #spzcolab GatsbyJS HandsOn ベストプレイヤー賞、あります。 イベント中に良い質問やツイートをした参加者1⼈にプレゼント。 判断基準は⾃分の独断と偏⾒です。質問する際には名前をアピールしてください。
10. #spzcolab GatsbyJS HandsOn 今⽇の流れ • Gatsbyの説明 5分 • Reactのおさらい 10分 • Gatsby⼊⾨ 20分 • GitHub APIを使ったサイト作成デモ 10分 • 覚えておいて欲しいこと 5分 解説 解説 解説
11. #spzcolab GatsbyJS HandsOn 1 Gatsbyとは？
12. #spzcolab GatsbyJS HandsOn Gatsbyとは？ • Build blazing fast, modern, beautiful, secure apps and websites with React. • あるいはBlazing fast modern site generator for React • Reactでモダンなウェブサイトやアプリケーションが作れるフレームワーク。 • 静的サイトジェネレーターの⼀種とされているが、Gatsby公式ではsite generatorではあ るがstatic site generatorとは⾔っていない。 • Next.jsやNuxt.jsと同列にアプリケーションフレームワークと捉えるといいかも。本番環 境にサーバーが必要としないという点が違い。
13. #spzcolab GatsbyJS HandsOn Gatsbyのやってくれること • サイトのデータソースを収集。
14. #spzcolab GatsbyJS HandsOn Gatsbyのやってくれること • Datastoreからデータを受け取りReactに⼊れて静的ファイルを⽣成 • これをデプロイすればサイトを公開できる。
15. #spzcolab GatsbyJS HandsOn Gatsbyのやってくれること • HTMLをそのまま表⽰した後、JSを読み込む。 • JSが実⾏されるとSPAとして動作する。
16. #spzcolab GatsbyJS HandsOn 何がモダンなのか？ • SPA開発で成熟したReact.js, Node.jsの資産が利⽤できる。 • バックエンドとフロントエンドが分離する前提になる。 • 近年重要性が⾼くなっている⾼速なサイトが作れる。 • Webアプリケーションを作るようにWebサイトが作れる。
17. #spzcolab GatsbyJS HandsOn Gatsbyが利⽤されているサイト • https://reactjs.org • https://gatsbyjs.org • https://airbnb.io • https://mottox2.com
18. #spzcolab GatsbyJS HandsOn Reactのおさらい 2
19. #spzcolab GatsbyJS HandsOn プロジェクトの作成 • https://codesandbox.io/ にアクセス、会員登録して「New Sandbox」をクリック。 「React」を選択しましょう。
20. #spzcolab GatsbyJS HandsOn プロジェクトの作成 • 正しい操作をするとこの画⾯が表⽰されます。エディタでコードを修正すると右ペインの プレビューに反映されます。 プラグインの追加はここから
21. #spzcolab GatsbyJS HandsOn • このApp関数が基本的なコンポーネント。こういったコンポーネントを組み合わせてウェ ブサイトやアプリケーションをつくっていく。 コンポーネント import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); src/index.js
22. #spzcolab GatsbyJS HandsOn • 関数の返り値はJSXという記法で書くことが多い。 • <div className=“App"> = React.createElement(“div”, { className: “App”}) のように 変換されている。 • HTMLとの差分 • return直下には単⼀要素のみ。 • 閉じタグが常に必要。 • classではなくclassNameにする必要がある。 • {}で囲んだ部分はJSとして評価されます。 JSX
23. #spzcolab GatsbyJS HandsOn コンポーネント 新しいコンポーネントを作る import React from "react"; import ReactDOM from "react-dom"; import Hello from "./Hello"; import "./styles.css"; const App = () => { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Hello name="Taro" /> <Hello name="Kumi" /> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); import React from "react"; const Hello = props => { return <p>Hello {props.name}</p>; }; export default Hello; src/index.js src/Hello.js
24. #spzcolab GatsbyJS HandsOn スタイル • いろいろな⽅法がありますが、Gatsby公式でも採⽤されているemotionというライブラ リを推奨しています。 • ⽇本の企業においてはstyled-componentsを採⽤している会社も多いです。 • が、時間の関係上、今⽇は省略。 • https://emotion.sh/docs/install
25. #spzcolab GatsbyJS HandsOn デプロイ • Netlifyを利⽤してデプロイします。 • GitHubにあるリポジトリと紐付けるだけです。 • デモします。
26. #spzcolab GatsbyJS HandsOn Gatsby⼊⾨ 3
27. #spzcolab GatsbyJS HandsOn プロジェクトの作成 • CodeSandboxの⼈はNew Sandboxで「Gatsby」を選択。 • ローカル開発の⼈ • npx gatsby new gatsby-hands-on を実⾏しましょう。 • cd gatsby-hands-on; npm run develop
28. #spzcolab GatsbyJS HandsOn ディレクトリ構成 • gatsby-config.js • サイトやプラグインの設定を⾏う • gatsby-node.js • Gatsbyの動作を変更するファイル • gatsby-browser.js • Browser上の動作を変更するファイル • gatsby-ssr.js • SSR時の動作を変更するファイル
29. #spzcolab GatsbyJS HandsOn ルーティング • Gatsby上でのルーティングはsrc/pages以下のファイルに従って設定される。 src/pages/ index.js => / about.js => /sample about/profile.js => /about/profile ※ 動的なページ⽣成は後述します。 例
30. #spzcolab GatsbyJS HandsOn データ層 • Gatsbyで扱うデータを保存しておく層 • Viewやgatsby-node.jsからGraphQLを通して呼べる • gatsby-node.jsやSource Pluginを利⽤してデータを⼊れる。 • すべてのデータがGraphQLという統⼀された呼び出し⽅が出来て嬉しい。
31. #spzcolab GatsbyJS HandsOn プラグイン • 主にgatsby-node.js, gatsby-browser.js, gatsby-ssr.jsを含んだnpmパッケージ。 • npm installに加えてgatsby-config.jsに記述して利⽤する。 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Site description`, author: `@gatsbyjs`, }, plugins: [ { resolve: "gatsby-plugin-xxxx", options: { option1: "sample option" }, }, ], } gatsby-config.js プラグインの名前と オプションを⼊⼒する
32. #spzcolab GatsbyJS HandsOn ソースプラグインの利⽤ • プラグインの中でもGatsbyで利⽤できるソースデータを作成するプラグインをSource Pluginと呼ぶ。命名も gatsby-source-xxxxx となっている。 • Gatsbyに限りませんが、ライブラリを利⽤するときはREADME.mdを読みましょう。 ソースプラグインとは？ ※ データを加⼯するTransformer Pluginというものも存在しますが、今⽇は扱いません。
33. #spzcolab GatsbyJS HandsOn ソースプラグインの利⽤ • 今回は試しに gatsby-source-rss-feed を利⽤します。 • https://github.com/mottox2/gatsby-source-rss-feed • 1. gatsby-source-rss-feed をインストール。 • 2. README.mdに従ってgatsby-config.jsに記述を追加。 • 今回はurlに「https://mottox2.com/rss.xml」nameに「BlogPost」を設定します。 • 3. ここでgatsby developを再起動。 • CodeSandboxの⼈は「Server Controll Panel > Restart Sandbox」 プラグインを利⽤する
34. #spzcolab GatsbyJS HandsOn ソースプラグインの利⽤ • npm run developで/___graphqlのページを確認 • Gatsbyのデータ層で持っているデータを確認できる。 GraphiQLで確認 URL末尾に「___graphql」を追加 この欄にクエリを書く
35. #spzcolab GatsbyJS HandsOn この欄にクエリを書いて実⾏ 結果が表⽰される
36. #spzcolab GatsbyJS HandsOn • src/pages/index.jsを編集します。 • queryという定数にGraphQLを⼊⼒し
 exportします。 • props.dataの中にクエリの結果が⼊る。 Reactでデータを利⽤する αΠτ্ʹGraphQLͰಘͨ৘ใΛදࣔͰ͖Δ 1 import React from 'react' 2 import { Link, graphql } from 'gatsby' 3 import Layout from '../components/layout' 4 5 export default props => ( 6 <Layout> 7 {props.data.allFeedBlogPost.edges.map(edge => { 8 const post = edge.node 9 return ( 10 <p key={post.guid}> 11 <Link to={`/posts/${post.guid}`}> 12 {post.title} 13 </Link> 14 </p> 15 ) 16 })} 17 </Layout> 18 ) 20 export const query = graphql` 21 { 22 allFeedBlogPost { 23 edges { 24 node { 25 guid 26 title 27 } 28 } 29 } 30 } 31 `
37. #spzcolab GatsbyJS HandsOn 動的ページの⽣成 • gatsby-node.jsでソースプラグインで得た
 データを元に動的にページを⽣成する。 gatsby-node.js gatsby-config.js 1 const path = require('path') 2 3 exports.createPages = ({ graphql, actions }) => { 4 const { createPage } = actions 5 const post = path.resolve('./src/templates/post.js') 6 return graphql(` 7 { 8 allFeedBlogPost { 9 edges { 10 node { 11 guid 12 } 13 } 14 } 15 } 16 `).then(result => { 17 console.log(result.data.allFeedBlogPost.edges) 18 result.data.allFeedBlogPost.edges.forEach(post => { 19 createPage({ 20 path: `/stories/${post.guid}`, 21 component: post, 22 context: { 23 guid: post.guid 24 } 25 }) 26 }) 27 }) 28 }
38. #spzcolab GatsbyJS HandsOn 動的ページの⽣成 • src/templates内にpost.jsを作成 • gatsby-node.jsを利⽤しデータ層の
 データを元に動的にページを⽣成する。 • query内の$guidはcreatePageで渡された
 context内のguid テンプレートの作成 1 import React from 'react' 2 import { graphql } from 'gatsby' 3 4 export default props => { 5 const post = props.data.feedBlogPost 6 return ( 7 <div> 8 <p>{post.title}</p> 9 <div 10 dangerouslySetInnerHTML={{ 11 __html: post.content.replace('\n', '<br/>'), 12 }} 13 /> 14 </div> 15 ) 16 } 17 18 export const query = graphql` 19 query($guid: String!) { 20 feedBlogPost(guid: { eq: $guid }) { 21 title 22 content 23 } 24 } 25 ` src/templates/post.js
39. #spzcolab GatsbyJS HandsOn ビルド＆デプロイ • `gatsby build`でpublish/以下に静的ファイルを⽣成してくれる。 • デプロイはNetlifyがおすすめ。 • ⾒せます。
40. #spzcolab GatsbyJS HandsOn 4 GitHub APIを利⽤したサイト作成
41. #spzcolab GatsbyJS HandsOn 何をつくるのか？ • GitHubのIssueを作成すると、サイト上のコンテンツとしてデプロイされるサイト。 • なぜ作る？ • GitHubはWebエンジニアならお⼿軽に使えるデータストア。 • 各⼈、この構成を元にデータストアを変えてほしい。 • デモ⾒せます。
42. #spzcolab GatsbyJS HandsOn ⼿順 • GitHubのAPI Tokenを取得 • gatsby-source-githubを利⽤する • GraphiQLでデータを確認 • ⼀覧ページの作成 • 詳細ページの作成 • Netlifyにデプロイ
43. #spzcolab GatsbyJS HandsOn GitHubのAPI Tokenを取得 • 1. https://github.com/settings/tokens にアクセス。 • 2. 「Generate new token」をクリックしてTokenの設定画⾯に遷移します。 • 3. Token descriptionに適当な説明（ex. supporterz）を⼊⼒し、「Generate Token」を クリック。Public RepositoryであればScopeの設定は不要です。 • 4. このTokenを後ほど利⽤するので保管しておいてください。
44. #spzcolab GatsbyJS HandsOn • 1. プロジェクトを作成します • CodeSandboxの⼈はNew Sandboxで「Gatsby」を選択。 • ローカル開発の⼈は npx gatsby new gatsby-github-blog を実⾏しましょう。 • 2. gatsby-source-graphqlをインストールします。 • GitHubはGraphQL形式のAPIを提供しています。このプラグインはGraphQLのAPIで得 られたデータをソースとして扱うためのプラグインです。 Gatsbyのプロジェクトを⽤意
45. #spzcolab GatsbyJS HandsOn gatsby-source-graphqlの導⼊ • gatsby-config.jsにプラグインの設定をします。次のコードを追記してください。
46. #spzcolab GatsbyJS HandsOn • npm run develop で開発環境を⽴ち上げてGraphiQLを起動 • GraphQLを⼊⼒してデータが帰ってくるか確認します。 • GitHub APIのクエリは https://developer.github.com/v4/explorer/ で確認できる。 GraphiQLでデータの確認 • 起動する際に環境変数を渡す • `GITHUB_TOKEN=[先程取得したToken] npm run develop`
47. #spzcolab GatsbyJS HandsOn ⼀覧ページの作成 • src/pages/index.jsを次のように編集
 します。 • queryという定数にGraphQLを⼊⼒し
 exportします。 • コンポーネントのprops.dataに
 データが渡されます。
48. #spzcolab GatsbyJS HandsOn 詳細ページの作成 • gatsby-node.jsで動的にページを⽣成するコードを書きます。 • ついでにsrc/templates/detail.jsも書きます。
49. #spzcolab GatsbyJS HandsOn デプロイ • 環境変数の設定に気をつける。 • Settings > Build & Deploy > Environment Variables から設定 • Build hooks の「Add build hook」でデプロイ⽤のURLを⽣成しておく。
50. #spzcolab GatsbyJS HandsOn GitHubのWebhook設定 • https://github.com/mottox2-sandbox/gatsby-github-blog/settings/hooks/new
51. #spzcolab GatsbyJS HandsOn 覚えておいて欲しいこと 5
52. #spzcolab GatsbyJS HandsOn Starter • Gatsbyに存在するテンプレートが収集されている。 • いいテンプレートを⾒つけたら `gatsby new project-name https://github.com/ gatsbyjs/gatsby-starter-blog` のようにGitHubのURLを引数に渡すと展開してくれる。 https://www.gatsbyjs.org/starters
53. #spzcolab GatsbyJS HandsOn Showcase • Gatsbyで作られたサイトが掲載されている。 • ⾃分のサイトを載せることもできるので、つくった⼈はSubmitしよう。 • はじめてのConributeに最適。 https://www.gatsbyjs.org/showcase
54. #spzcolab GatsbyJS HandsOn コードで迷ったら • 実際に動いているコードを参考にする。 • ⼤規模なサイト • gatsbyjs/gatsby/www: gatsbyjs.orgのソースコード • reactjs/reactjs.org: reactjs.orgのソースコード • ⽇本⼈ブログ（Gatsby情報を発信している） • mottox2/website: 弊ブログのソースコード • Takumon/blog: Takumonさんのブログ
55. #spzcolab GatsbyJS HandsOn