Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
最近やってること.pdf
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Tomohiko Himura
September 15, 2018
Programming
120
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
最近やってること.pdf
Tomohiko Himura
September 15, 2018
More Decks by Tomohiko Himura
See All by Tomohiko Himura
Marpでmermaidは簡単だときいたけど
eiel
1
2.4k
バイナリ読むのにElixirしてみた
eiel
0
110
アジャイルはさておきMake People Awesomeしたい
eiel
0
220
レビューは最優先にするようにしている
eiel
0
350
再考 Fourkeys メトリクス
eiel
2
720
Test mockをSnapshot testする
eiel
0
170
devenvに入門した
eiel
1
170
関数プログラミングの考え方
eiel
1
380
逆コンウェイ作戦はフィードバックループを作るために 逆向きの流れをつくること (5分版)
eiel
0
490
Other Decks in Programming
See All in Programming
キャリア迷子上等 ─ "ない道"は自分で作ればいい
16bitidol
3
2k
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
390
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
130
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5k
dRuby over BLE
makicamel
2
330
AI時代のUIはどこへ行く?その2!
yusukebe
21
7.1k
Claspは野良GASの夢をみるか
takter00
0
190
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
terryu16
0
260
The ROI of Quarkus for Spring Boot Applications
hollycummins
0
110
さぁV100、メモリをお食べ・・・
nilpe
0
140
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
3
1.3k
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
540
Featured
See All Featured
The SEO identity crisis: Don't let AI make you average
varn
0
490
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
240
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
330
Designing Experiences People Love
moore
143
24k
Docker and Python
trallard
47
3.9k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
390
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
160
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
240
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.8k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
160
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
130
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