最近やってること.pdf

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. 広島リモート
   

   View Slide

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

   View Slide

6. 吹田市 在中
   

   View Slide

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

   View Slide

8. View Slide

9. 参考価格 1860万円
   

   View Slide

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

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ところで
    移植の待機期間
    

    View Slide

21. 実績上
    平均3年
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 最近やってること
    

    View Slide

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

    View Slide

28. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. react-static
    Gatsby
    Next.js
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. 仕組み
    

    View Slide

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

    View Slide

43. 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 };
    };
    

    View Slide

44. 簡単
    

    View Slide

45. つらいこと
    

    View Slide

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

    View Slide

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

    View Slide

48. 雑に仕組み
    

    View Slide

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

    View Slide

50. CSS Moduleとして処理すると
    

    View Slide

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

    View Slide

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

    View Slide

53. 使うとき
    

    View Slide

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

    View Slide

55. Goro
    出力
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. ·ͱΊ
    

    View Slide

61. 可視化楽しいで
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide