Upgrade to Pro — share decks privately, control downloads, hide ads and more …

最近やってること.pdf

 最近やってること.pdf

Tomohiko Himura

September 15, 2018
Tweet

More Decks by Tomohiko Himura

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 広島リモート

    View full-size slide

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

    View full-size slide

  5. 吹田市 在中

    View full-size slide

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

    View full-size slide

  7. 参考価格 1860万円

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 実績上
    平均3年

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 最近やってること

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. react-static
    Gatsby
    Next.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. つらいこと

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. 雑に仕組み

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 使うとき

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 可視化楽しいで

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide