Tweet
Tweet

Slide 1

Slide 1 text

最近やったこととか 2018-09-16

Slide 2

Slide 2 text

Րଜ ஐ඙ Twitter eielh GitHub eiel Facebook ద౰ʹ͕ͯ͞͠

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

広島リモート

Slide 5

Slide 5 text

広島リモート Scalaえんじにあ (?)

Slide 6

Slide 6 text

吹田市 在中

Slide 7

Slide 7 text

心臓移植の待機をしています

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

参考価格 1860万円

Slide 10

Slide 10 text

人工心臓が扱える病院 救急車で2時間以内 に住まないといけない

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

救急車が200km/h で走れば帰れそう

Slide 13

Slide 13 text

ଞͷ଴ػऀʹ͘Β΂ͯ (ͨͿΜ)͍ͨ΁Μͳͱ͜Ζ

Slide 14

Slide 14 text

0歳児がいる 家に帰れない 車がない

Slide 15

Slide 15 text

0歳児がいる 介助者が機能してない疑惑 迫りくる怪獣

Slide 16

Slide 16 text

子育てはたいへん 母親だけに任せるのはダメ

Slide 17

Slide 17 text

家に帰れない 鹿児島、北陸、東北などにも 人工心臓装着者はいるらしい 実は広島にもいる (病院によっては新幹線で2時間も許可されている)

Slide 18

Slide 18 text

家に帰れないと 住宅ローン + 家賃 頼りやすい親戚が近くにいない 住宅ローン控除が対象外

Slide 19

Slide 19 text

車がない お金ないし タクシーのほうが コスパが良さそう

Slide 20

Slide 20 text

ところで 移植の待機期間

Slide 21

Slide 21 text

実績上 平均3年

Slide 22

Slide 22 text

IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9

Slide 23

Slide 23 text

IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9 累計が放物線

Slide 24

Slide 24 text

毎年、移植数の2倍増えてる

Slide 25

Slide 25 text

今から移植希望する人は もっとたいへん

Slide 26

Slide 26 text

最近やってること

Slide 27

Slide 27 text

グリーンリボンを応援する会

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

広島弁が得意な人が 作ってくれた (@NeXTSTEP2OSX)

Slide 30

Slide 30 text

移植医療のために頑張る人 たちをこっそり応援する

Slide 31

Slide 31 text

せっかく協賛するし なにか宣伝しよう

Slide 32

Slide 32 text

1日でも早く移植ができるなら できることやろうぜ

Slide 33

Slide 33 text

やったことたか Reactで静的サイトジェネレート でサイトつくる Google Data Studioで可視化

Slide 34

Slide 34 text

https://datastudio.google.com/u/1/reporting/ 1YCQdi28HyJGmZwJPQtNzZnwKsNJdlDeX/page/sPeX Google Data Studio

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Reactのための 静的サイトジェネレート ではない

Slide 37

Slide 37 text

react-static Gatsby Next.js

Slide 38

Slide 38 text

クライアントサイド処理は しない

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

デメリット Reactが活きてない やってる人が見当たらない

Slide 41

Slide 41 text

仕組み

Slide 42

Slide 42 text

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

Slide 43

Slide 43 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 44

Slide 44 text

簡単

Slide 45

Slide 45 text

つらいこと

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

雑に仕組み

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

CSS Moduleとして処理すると

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

使うとき

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Goro
出力

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

·ͱΊ

Slide 61

Slide 61 text

可視化楽しいで

Slide 62

Slide 62 text

可視化楽しいで 可視化は楽しい

Slide 63

Slide 63 text

Reactで静的サイト まあまあ楽しい

Slide 64

Slide 64 text

できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク

Slide 65

Slide 65 text

できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク YES か NO かは関係ない

Slide 66

Slide 66 text

移植医療の普及してないため 病院側の環境が整ってないから

Slide 67

Slide 67 text

まずは 移植医療を たくさんの人が理解すること

Slide 68

Slide 68 text

意思表示している登録数が 公開されるインターネットで 意思表示を IUUQTXXXKPUOXPSKQ