Reactで静的サイトジェネレート

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

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

react-static Gatsby Next.js

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

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

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

仕組み

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

ReactDOMServer.renderToStaticMarkup

簡単

つらいこと

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

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

CSS Moduleの仕組みを雑に

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

CSS Moduleとして処理すると

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

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

使うとき

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

<div class="_article_xkpkl_10">Goro</div> 出力

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

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

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

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

他につらいこと

解析用のJavaScriptの挿入

// @flow import React from 'react'; export const GTMInit =
({ id }: { id: string }) => ( <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){ w[l]=w[l]|| [];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l! ='dataLayer'?'&l='+l:'';j.async=true;j.src='https:// www.googletagmanager.com/gtm.js? id='+i+dl;f.parentNode.insertBefore(j,f); }) (window,document,'script','dataLayer', "${id}");` }} /> ); export default GTMInit;

·ͱΊ

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

やりこむとつらい

Reactで静的サイトジェネレート

Reactで静的サイトジェネレート

Tomohiko Himura

More Decks by Tomohiko Himura

Other Decks in Programming

Featured

Transcript

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

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

react-static Gatsby Next.js

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

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

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

仕組み

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

const writeFilePage = async ({ ﬁlename, Page }: { ﬁlename:

ReactDOMServer.renderToStaticMarkup

簡単

つらいこと

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

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

CSS Moduleの仕組みを雑に

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

CSS Moduleとして処理すると

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

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

使うとき

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

<div class="_article_xkpkl_10">Goro</div> 出力

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

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

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

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

他につらいこと

解析用のJavaScriptの挿入

// @flow import React from 'react'; export const GTMInit =

·ͱΊ

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

やりこむとつらい