最近やってること.pdf

Transcript

1. 最近やったこととか 2018-09-16
2. Րଜ ஐ඙ Twitter eielh GitHub eiel Facebook ద౰ʹ͕ͯ͞͠
4. 広島リモート
5. 広島リモート Scalaえんじにあ (?)
6. 吹田市 在中
7. 心臓移植の待機をしています
9. 参考価格 1860万円
10. 人工心臓が扱える病院 救急車で2時間以内 に住まないといけない
12. 救急車が200km/h で走れば帰れそう
13. ଞͷ଴ػऀʹ͘Β΂ͯ (ͨͿΜ)͍ͨ΁Μͳͱ͜Ζ
14. 0歳児がいる 家に帰れない 車がない
15. 0歳児がいる 介助者が機能してない疑惑 迫りくる怪獣
16. 子育てはたいへん 母親だけに任せるのはダメ
17. 家に帰れない 鹿児島、北陸、東北などにも 人工心臓装着者はいるらしい 実は広島にもいる (病院によっては新幹線で2時間も許可されている)
18. 家に帰れないと 住宅ローン + 家賃 頼りやすい親戚が近くにいない 住宅ローン控除が対象外
19. 車がない お金ないし タクシーのほうが コスパが良さそう
20. ところで 移植の待機期間
21. 実績上 平均3年
22. IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9
23. IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9 累計が放物線
24. 毎年、移植数の2倍増えてる
25. 今から移植希望する人は もっとたいへん
26. 最近やってること
27. グリーンリボンを応援する会
29. 広島弁が得意な人が 作ってくれた (@NeXTSTEP2OSX)
30. 移植医療のために頑張る人 たちをこっそり応援する
31. せっかく協賛するし なにか宣伝しよう
32. 1日でも早く移植ができるなら できることやろうぜ
33. やったことたか Reactで静的サイトジェネレート でサイトつくる Google Data Studioで可視化
34. https://datastudio.google.com/u/1/reporting/ 1YCQdi28HyJGmZwJPQtNzZnwKsNJdlDeX/page/sPeX Google Data Studio
35. Reactで静的サイトジェネレート
36. Reactのための 静的サイトジェネレート ではない
37. react-static Gatsby Next.js
38. クライアントサイド処理は しない
39. メリット Reactコンポーネントが再利用できる 軽量・高速
40. デメリット Reactが活きてない やってる人が見当たらない
41. 仕組み
42. サーバーサイドレンダリング するだけ
43. const writeFilePage = async ({ filename, Page }: { filename: string, Page: Component }): Promise<{ path: string, html: string }> => { const content = ReactDOMServer.renderToStaticMarkup(<Page />); const html = `<!DOCTYPE html>${content}`; const path = `public/${filename}`; await fs.mkdirp(dirname(path)); await fs.writeFile(path, html); return { path, html }; };
44. 簡単
45. つらいこと
46. CSS Module 採用したらつらかった
47. CSS Module 雑に言うと • CSSセレクタ用のクラス名が被らない • JS上でimportできる
48. 雑に仕組み
49. .article { font-size: 16px; } goro.css
50. CSS Moduleとして処理すると
51. ._article_xkpkl_10 { font-size: 16px; } goro.css
52. { "article": "_article_xkpkl_10", } 一緒にこんなjsonができる感じ
53. 使うとき
54. import { article } from ‘./goro.css' # 実質生成された.jsonを読み込む感じ () => <div className={article} >Goro</div> Javascript
55. <div class="_article_xkpkl_10">Goro</div> 出力
56. Import するのは css であって jsonではない CSSとJSを事前処理しないといけない 困る点
57. 解決策 Webpackのloaderが対応している
58. • nodejs向けのコードを生成するようにする • target: 'node' (webpack.config.js) • 生成されたコードを実行する • node main.js Webpackの導入
59. { "scripts": { "build": "webpack && node dist/main.js" } } package.json
60. ·ͱΊ
61. 可視化楽しいで
62. 可視化楽しいで 可視化は楽しい
63. Reactで静的サイト まあまあ楽しい
64. できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク
65. できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク YES か NO かは関係ない
66. 移植医療の普及してないため 病院側の環境が整ってないから
67. まずは 移植医療を たくさんの人が理解すること
68. 意思表示している登録数が 公開されるインターネットで 意思表示を IUUQTXXXKPUOXPSKQ