Slide 1

Slide 1 text

ReactͰ ੩తαΠτδΣωϨʔτ 2018-09-15

Slide 2

Slide 2 text

ReactͷͨΊͷ ੩తαΠτδΣωϨʔτ Ͱ͸ͳ͍

Slide 3

Slide 3 text

react-static Gatsby Next.js

Slide 4

Slide 4 text

クライアントで処理しない

Slide 5

Slide 5 text

メリット Reactコンポーネントが再利用できる 軽量・高速

Slide 6

Slide 6 text

デメリット Reactが活きてない やってる人が別にいない

Slide 7

Slide 7 text

仕組み

Slide 8

Slide 8 text

サーバーサイドレンダリング するだけ

Slide 9

Slide 9 text

const writeFilePage = async ({ filename, Page }: { filename: string, Page: Component }): Promise<{ path: string, html: string }> => { const content = ReactDOMServer.renderToStaticMarkup(); const html = `${content}`; const path = `public/${filename}`; await fs.mkdirp(dirname(path)); await fs.writeFile(path, html); return { path, html }; };

Slide 10

Slide 10 text

ReactDOMServer.renderToStaticMarkup

Slide 11

Slide 11 text

簡単

Slide 12

Slide 12 text

つらいこと

Slide 13

Slide 13 text

CSS Module 採用したらつらかった

Slide 14

Slide 14 text

CSS Module 雑に言うと • CSSセレクタ用のクラス名が被らない • JS上でimportできる

Slide 15

Slide 15 text

CSS Moduleの 仕組みを雑に

Slide 16

Slide 16 text

.article { font-size: 16px; } goro.css

Slide 17

Slide 17 text

CSS Moduleとして処理すると

Slide 18

Slide 18 text

._article_xkpkl_10 { font-size: 16px; } goro.css

Slide 19

Slide 19 text

{ "article": "_article_xkpkl_10", } 一緒にこんなjsonができる感じ

Slide 20

Slide 20 text

使うとき

Slide 21

Slide 21 text

import { article } from ‘./goro.css' # 実質生成された.jsonを読み込む感じ () =>
Goro
Javascript

Slide 22

Slide 22 text

Goro
出力

Slide 23

Slide 23 text

Import するのは css であって jsonではない CSSとJSを事前処理しないといけない 困る点

Slide 24

Slide 24 text

解決策 Webpackのloaderが対応している

Slide 25

Slide 25 text

• nodejs向けのコードを生成するようにする • target: 'node' (webpack.config.js) • 生成されたコードを実行する • node main.js Webpackの導入

Slide 26

Slide 26 text

{ "scripts": { "build": "webpack && node dist/main.js" } } package.json

Slide 27

Slide 27 text

他につらいこと

Slide 28

Slide 28 text

解析用のJavaScriptの挿入

Slide 29

Slide 29 text

// @flow import React from 'react'; export const GTMInit = ({ id }: { id: string }) => ( ); export default GTMInit;

Slide 30

Slide 30 text

·ͱΊ

Slide 31

Slide 31 text

Reactで静的サイト そんなに難しくない

Slide 32

Slide 32 text

やりこむとつらい