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

最近やってること.pdf

1a679952cdf455ecd6a15cbde7ae80d5?s=47 Tomohiko Himura
September 15, 2018
Programming
0
73

 最近やってること.pdf

1a679952cdf455ecd6a15cbde7ae80d5?s=128

Tomohiko Himura

September 15, 2018
Tweet

More Decks by Tomohiko Himura

See All by Tomohiko Himura
大きめな病気になったときの医療費と収入源の話
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
1
370
Reactで静的サイトジェネレート
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
0
98
静的型なきJS界を救う英雄たちの話
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
0
830
入院中の勉強の仕方
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
0
1.3k
<ハ-ドル低めカスタムエレメントの始め方 />
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
1
980
React + Material-UIで遊んだ感想と recomposeで遊んだ話
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
0
780
Firebase Hostingの紹介
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
1
1.1k
ガトリングを撃ちまくりたいお年頃
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
2
790
すごい広島大賞
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
0
81

Other Decks in Programming

See All in Programming
WindowsコンテナDojo：第2回 Windowsコンテナアプリのビルド、公開、デプロイ
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
140
CIでAndroidUIテストの様子を録画してみた
46b3bc302e3a40f8df60cfb60d59c313?s=48 mkeeda
0
170
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
PRO
28
18k
UI State Modeling 어떤게 좋을까?
Afcab07a7473e163949d85424a81cb85?s=48 laco2951
1
220
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
1.1k
LOWYAの信頼性向上とNew Relic
F95bdf0d9003fa506a9f7448335da1af?s=48 kazumax55
4
340
Nix for Scala folks
08f642741fba006656cb86fb61c160b3?s=48 kubukoz
0
120
Where and how to run UI tests (Droidcon London, 2021)
E20836b1ea89956e0b96362046e2b564?s=48 nonews
0
210
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
1
310
Kotlin KSP - Intro
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
1
470
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
130
近況PHP / PHP in now a days
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
4
1.7k

Featured

See All Featured
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
910
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
410k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
24
6.2k

Transcript

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

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

  3. None

  4. 広島リモート

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

  6. 吹田市 在中

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

  8. None

  9. 参考価格 1860万円

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

  11. None

  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. グリーンリボンを応援する会

  28. None

  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