Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
最近やってること.pdf
Tomohiko Himura
September 15, 2018
Programming
0
81
最近やってること.pdf
Tomohiko Himura
September 15, 2018
Tweet
Share
More Decks by Tomohiko Himura
See All by Tomohiko Himura
組織のパフォーマンスを高めるために 第1話 学習と文化
eiel
0
58
チームとチームのチーム
eiel
1
1.6k
大きめな病気になったときの医療費と収入源の話
eiel
1
410
Reactで静的サイトジェネレート
eiel
0
110
静的型なきJS界を救う英雄たちの話
eiel
0
920
入院中の勉強の仕方
eiel
0
1.3k
<ハ-ドル低めカスタムエレメントの始め方 />
eiel
1
1.1k
React + Material-UIで遊んだ感想と recomposeで遊んだ話
eiel
0
820
Firebase Hostingの紹介
eiel
1
1.2k
Other Decks in Programming
See All in Programming
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.8k
Rによる大規模データの処理
s_uryu
2
640
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
110
低レイヤーから始める GUI
fadis
18
9.4k
Gradle build: The time is now
nonews
1
470
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
350
なぜRubyコミュニティにコミットするのか?
luccafort
0
310
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
730
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
190
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Bash Introduction
62gerente
601
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Atom: Resistance is Futile
akmur
256
24k
Designing the Hi-DPI Web
ddemaree
273
32k
Making Projects Easy
brettharned
102
4.8k
Facilitating Awesome Meetings
lara
33
4.6k
Visualization
eitanlees
128
12k
Navigating Team Friction
lara
177
12k
A Philosophy of Restraint
colly
193
15k
Transcript
最近やったこととか 2018-09-16
Րଜ ஐ Twitter eielh GitHub eiel Facebook దʹ͕ͯ͞͠
None
広島リモート
広島リモート Scalaえんじにあ (?)
吹田市 在中
心臓移植の待機をしています
None
参考価格 1860万円
人工心臓が扱える病院 救急車で2時間以内 に住まないといけない
None
救急車が200km/h で走れば帰れそう
ଞͷػऀʹ͘Βͯ (ͨͿΜ)͍ͨΜͳͱ͜Ζ
0歳児がいる 家に帰れない 車がない
0歳児がいる 介助者が機能してない疑惑 迫りくる怪獣
子育てはたいへん 母親だけに任せるのはダメ
家に帰れない 鹿児島、北陸、東北などにも 人工心臓装着者はいるらしい 実は広島にもいる (病院によっては新幹線で2時間も許可されている)
家に帰れないと 住宅ローン + 家賃 頼りやすい親戚が近くにいない 住宅ローン控除が対象外
車がない お金ないし タクシーのほうが コスパが良さそう
ところで 移植の待機期間
実績上 平均3年
IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9
IUUQTEBUBTUVEJPHPPHMFDPNVSFQPSUJOH G'VNW$VUQ88VGTQ/U/,&E:FQ44BQBHFXNL9 累計が放物線
毎年、移植数の2倍増えてる
今から移植希望する人は もっとたいへん
最近やってること
グリーンリボンを応援する会
None
広島弁が得意な人が 作ってくれた (@NeXTSTEP2OSX)
移植医療のために頑張る人 たちをこっそり応援する
せっかく協賛するし なにか宣伝しよう
1日でも早く移植ができるなら できることやろうぜ
やったことたか Reactで静的サイトジェネレート でサイトつくる Google Data Studioで可視化
https://datastudio.google.com/u/1/reporting/ 1YCQdi28HyJGmZwJPQtNzZnwKsNJdlDeX/page/sPeX Google Data Studio
Reactで静的サイトジェネレート
Reactのための 静的サイトジェネレート ではない
react-static Gatsby Next.js
クライアントサイド処理は しない
メリット Reactコンポーネントが再利用できる 軽量・高速
デメリット Reactが活きてない やってる人が見当たらない
仕組み
サーバーサイドレンダリング するだけ
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 }; };
簡単
つらいこと
CSS Module 採用したらつらかった
CSS Module 雑に言うと • CSSセレクタ用のクラス名が被らない • JS上でimportできる
雑に仕組み
.article { font-size: 16px; } goro.css
CSS Moduleとして処理すると
._article_xkpkl_10 { font-size: 16px; } goro.css
{ "article": "_article_xkpkl_10", } 一緒にこんなjsonができる感じ
使うとき
import { article } from ‘./goro.css' # 実質生成された.jsonを読み込む感じ () =>
<div className={article} >Goro</div> Javascript
<div class="_article_xkpkl_10">Goro</div> 出力
Import するのは css であって jsonではない CSSとJSを事前処理しないといけない 困る点
解決策 Webpackのloaderが対応している
• nodejs向けのコードを生成するようにする • target: 'node' (webpack.config.js) • 生成されたコードを実行する • node
main.js Webpackの導入
{ "scripts": { "build": "webpack && node dist/main.js" } }
package.json
·ͱΊ
可視化楽しいで
可視化楽しいで 可視化は楽しい
Reactで静的サイト まあまあ楽しい
できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク
できること 臓器移植意思表示 する人を増やす by 臓器移植ネットワーク YES か NO かは関係ない
移植医療の普及してないため 病院側の環境が整ってないから
まずは 移植医療を たくさんの人が理解すること
意思表示している登録数が 公開されるインターネットで 意思表示を IUUQTXXXKPUOXPSKQ