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 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