Gatsby

tags : React, JavaScript

Project 開始時にやること

プロジェクト作成

npm init gatsby

node バージョン固定

nodenv local 14.4.0

TypeScript 導入

TypeScript のインストール

yarn add -D typescript

tsconfig を作成

yarn run tsc --init

tsconfig の内容を下記に

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "downlevelIteration": true,
    "typeRoots": ["node_modules/@types", "src/@types"]
  },
  "include": [
    "src"
  ]
}

Gatsby プラグインの導入

gatsby-plugin-ts-config のインストール

yarn add -D gatsby-plugin-ts-config

gatsby-config.js を下記に

const { generateConfig } = require('gatsby-plugin-ts-config')
 
module.exports = generateConfig({
  configDir: 'gatsby', // or wherever you would like to store your gatsby files
  projectRoot: __dirname,
})

gatsby/gatsby-config.ts を作成し、下記に

import { ITSConfigFn } from "gatsby-plugin-ts-config";
 
const activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
 
require("dotenv").config({
  path: `.env.${activeEnv}`,
});
 
console.log(
  `Using environment config: '${activeEnv}', ENV_NAME: '${process.env.ENV_NAME}'`
);
 
const gatsbyConfig: ITSConfigFn<"config"> = ({ projectRoot }) => {
  return {
    pathPrefix: process.env.PATH_PREFIX || ``,
    // TODO: metadata記入
    siteMetadata: {
      title: "Debug title",
      description: "Debug discription",
      siteUrl: `https://debug.com/`,
    },
    plugins: [
      "gatsby-plugin-emotion",
      "gatsby-plugin-image",
      "gatsby-plugin-react-helmet",
      "gatsby-plugin-sharp",
      "gatsby-transformer-sharp",
      {
        resolve: "gatsby-source-filesystem",
        options: {
          name: "images",
          path: "./src/images/",
        },
        __key: "images",
      },
      {
        resolve: `gatsby-plugin-manifest`,
        // TODO: manifest記入
        options: {
          name: "Debug name",
          short_name: "Debug short name",
          start_url: "/",
          display: "standalone",
          orientation: "any",
          background_color: "#000",
          theme_color: "#000",
          icon: `src/images/favicon.png`, // This path is relative to the root of the site.
        },
      },
    ],
  };
};
 
export default gatsbyConfig;

google font を使う場合、typography.js を導入する

yarn add gatsby-plugin-typography react-typography typography
yarn add -D gatsby-plugin-typography
typesync
yarn install

src/utils/typography.ts を作成し下記に 使うフォントに適宜修正

import Typography from 'typography'
 
const typography = new Typography({
  googleFonts: [
    {
      name: 'Noto Sans JP',
      styles: ['400', '500'],
    },
    {
      name: 'Montserrat',
      styles: ['600', '700'],
    },
  ],
})
 
export default typography

gatsby/gatsby-config.ts に下記を追加

{
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography.ts`,
  },
},

ESLint 導入

eslint インストール

yarn add -D eslint
typesync
yarn intall

.eslintrc.yml 作成

$ yarn eslint --init
 
yarn run v1.22.4
warning ../package.json: No license field
$ /Users/sumisonic/Works/Repository/gitlab/ayda_2021/node_modules/.bin/eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · YAML
The config that you've selected requires the following dependencies:
 
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.yml file in /Users/sumisonic/Works/Repository/gitlab/ayda_2021
✨  Done in 105.85s.

.eslintrc.yml の内容を下記に

env:
  browser: true
  es2021: true
extends:
  - 'plugin:react/recommended'
  - standard
  - 'plugin:import/errors'
  - 'plugin:import/warnings'
  - 'plugin:import/typescript'
  - 'plugin:@typescript-eslint/recommended'
  - 'plugin:@typescript-eslint/recommended-requiring-type-checking'
  - 'prettier'
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  project: './tsconfig.eslint.json'
  sourceType: 'module'
  tsconfigRootDir: '.'
plugins:
  - react
  - '@typescript-eslint'
  - 'import'
  - 'jsx-a11y'
  - 'react'
  - 'react-hooks'
root: true
rules:
  no-use-before-define: 'off'
  '@typescript-eslint/no-use-before-define': 'error'
  "@typescript-eslint/explicit-function-return-type": 0
  "@typescript-eslint/explicit-module-boundary-types": 0
 
  "@typescript-eslint/no-misused-promises":
    - error
    - checksVoidReturn: false
 
 
  quotes: 'warn'
  '@typescript-eslint/ban-types':
    - error
    - extendDefaults: true
      types:
        '{}': false
        object: false
  'react-hooks/rules-of-hooks': 'error'
  'import/no-extraneous-dependencies':
    - error
    - devDependencies:
        ['.storybook/**', 'stories/**', '**/*/*.story.*', '**/*/*.stories.*', '**/__specs__/**', '**/*/*.spec.*', '**/__tests__/**', '**/*/*.test.*']
overrides:
  - files: ['*.tsx']
    rules:
      'react/prop-types': 'off'
settings:
  react:
    version: 'detect'

プラグインを導入

yarn add -D eslint-config-standard eslint-plugin-react @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks @typescript-eslint/parser eslint-plugin-promise eslint-config-prettier eslint-plugin-node

tsconfig.eslint.json を作成

内容を下記に

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json の scripts に lint を追加

"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"

.eslintignore ファイルを作成する

無視するファイルがある場合下記のように記述する

src/webgl/ffes/**/*
src/webgl/libs/**/*

lint を実行し動くか確かめる

yarn lint

gatsby/gatsby-config.ts に下記を追加。これで gatsby develop で lint が走る

yarn add -D gatsby-plugin-eslint

{
  resolve: 'gatsby-plugin-eslint',
  options: {
    stages: ['develop'],
    extensions: ['js', 'jsx'],
    exclude: ['node_modules', '.cache', 'public'],
    // Any eslint-webpack-plugin options below
  },
},

prettier 導入

prettier のインストール

yarn add -D prettier
typesync
yarn install

.prettierrc を作成し、内容を下記に

singleQuote: true
trailingComma: "all"
semi: false
printWidth: 120

Chakra UI 導入

https://chakra-ui.com/docs/getting-started

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 @chakra-ui/theme-tools

recoil の導入

yarn add recoil

gatsby-plugin-layout 導入

yarn add -D gatsby-plugin-layout

src/layout/LayoutContent.tsx を作成し、下記に

src/layout/Layout.tsx を作成し、下記に

gatsby/gatsby-config.ts に下記を追加

{
  resolve: 'gatsby-plugin-layout',
  options: {
    component: require.resolve(`${projectRoot}/src/layout/Layout.tsx`),
  },
},

graphql-codegen の導入

yarn -D add @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-resolvers

package.json に以下を追加

"gql-codegen": "graphql-codegen --config codegen.yml",
"gql-codegen:watch": "graphql-codegen --config codegen.yml -w",

/codegen.yml を作成し下記に

overwrite: true
schema: 'http://localhost:8000/___graphql'
documents:
  [
    './src/**/*.tsx',
    './src/**/*.ts',
    './gatsby/**/*.ts',
    './node_modules/gatsby-transformer-sharp/src/*.js',
    './node_modules/gatsby-image/src/*.js',
  ]
generates:
  types/graphql-types.d.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
    config:
      skipTypename: true
      maybeValue: T | null
  ./schema.json:
    plugins:
      - 'introspection'
hooks:
  afterOneFileWrite:
    - prettier --write

storybook 導入