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
セーフティ・JavaScript・プログラミング
Search
e_ntyo
May 26, 2018
Programming
0
220
セーフティ・JavaScript・プログラミング
https://hojiro-lt.connpass.com/event/88352/
e_ntyo
May 26, 2018
Tweet
Share
More Decks by e_ntyo
See All by e_ntyo
論文紹介 "My Mouse, My Rules - Privacy Issues of Behavioral User Profiling via Mouse Tracking"
e_ntyo
1
140
論文紹介 - Towards Memorable Information Retrieval (ICTIR ‘20)
e_ntyo
0
48
Introducing Type Providers
e_ntyo
0
16k
slamdata/purescript-halogen の紹介
e_ntyo
0
95
Other Decks in Programming
See All in Programming
Piniaの現状と今後
waka292
5
1.5k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Writing Fast Ruby
sferik
626
61k
Building Adaptive Systems
keathley
38
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Typedesign – Prime Four
hannesfritz
39
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Transcript
None
はなすこと 1. @e_ntyoとは 2. なぜJavaScriptなのか 3. 何をもって”安全”とするのか 4. 安全にJavaScriptを書くために ◦
関数型プログラミング ◦ 静的型 ◦ fp-tsの紹介 5. まとめ
1. @e_ntyoとは • オタク(アイドル, アニメ, バンド) • 走る異常性癖 •
普段はTypeScriptを書いている ◦ 最近はHaskell, GraphQLに興味
2. なぜJavaScriptなのか • 活躍する機会が豊富 ◦ web browser, v8 engine, mobile,
etc… ▪ メディアプログラミングの環境としても優秀 ◦ Webアプリケーション開発における莫大な資産(ドキュメント, ライブラリ, FW, 知見) • 特になし
2. なぜJavaScriptなのか • そもそも出来ることならJavaScriptなんて書きたくない ◦ AltJSを使おう(後述) ◦ もうすぐwasmの時代がやってくるらしい
• それでも今は、書かなくてはならない ◦ 今、本格的なWebアプリケーションを開発・運用するなら、JSからは逃げられない ▪ 既存の手法を利用し、早く作って早く公開する必要に駆られることは多い ◦ あなたの大好きなプログラミング言語のコードを読める人は会社に何人いるか
3. 何をもって”安全”とするのか • プログラミング言語の文脈での”安全” ◦ メモリ安全性, 型安全性, null安全, etc… ◦
使うプログラミング言語に依存するところが大きい • “安全な言語とはプログラミングの最中にうっかり自分の足を撃つことが不可能 な言語” - Benjamin C. Pierce 著/住井英二郎 監訳/遠藤侑介・酒井政裕・今井敬吾・黒木裕介・今井宜洋・才川隆文・今井健男 訳 『型システム入門 プログラミング言語と型の理論』 (オーム社、978-4-274-06911-6、2013年) ◦ うっかり”危険”な操作をしないよう、適切な抽象を提供する ▪ スコープ違反 ▪ nullを含む型エラー ▪ セグメント違反, 配列の無効なアクセス
3. 何をもって”安全”とするのか • 型安全 != 実行前に危険な/誤った箇所がわかる ◦ 実行時にエラーで教えてくれるタイプ == 動的型付け言語
◦ 環境(使用する言語やツール)に依存 ◦ 静的型の表現力にも限界はある ▪ どこまで実行前にチェックするか ▪ 依存型やモナドで表現力を高めていく • 今回扱う”安全”は、”TypeScriptで担保される安全”`
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc… TypeScriptでこれらの”危険”は回避できるのか?
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc… transpile
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc…
4. 安全にJavaScript を書くために • JavaScriptでの”危険”とは何か ◦ Null, undefinedの扱い ◦
等価性判定 ◦ var, letで宣言した変数への 再代入 ◦ 存在しないプロパティへの アクセス・代入 ◦ etc… • with, eval ◦ やめようね! ◦ neverを使うとマシに • dead code ◦ 論理的に到達不可能なコードは 検出される • if, switchの条件分岐の漏れ ◦ if, caseブロック内で 値を返す関数の場合、 それは網羅的でないといけない ▪ もちろん検出される
4. 安全にJavaScriptを書くために • でもお高いんでしょう? ◦ “Your TypeScript is JavaScript”
▪ 既存のJSのコードをそのままtscを噛ませると、エラーが出ても必ず出力される ▪ TSの導入にコストはかからない • 安全性以外の特典 ◦ 型がコードのドキュメントのようにはたらく ◦ 最新のECMAScriptの機能が使える ▪ babelいらず ◦ 既存のたくさんのJSライブラリの型ヒント ▪ 補完だけ欲しい人にも
4. 安全にJavaScriptを書くために • さらに”安全”にやっていくために ◦ 副作用のないコード ▪ いちいち関数の返した値を変数に束縛したくない
◦ テスタブルで再利用性の高いコード ▪ well-testedな関数の組み合わせで書けばバグりにくいはず ◦ 文脈を型で表現したい ▪ Option<T>くんはどこ…?
4. 安全にJavaScriptを書くために • さらに”安全”にやっていくために ◦ 副作用のないコード ▪ いちいち関数の返した値を変数に束縛したくない
◦ テスタブルで再利用性の高いコード ▪ well-testedな関数の組み合わせで書けばバグりにくいはず ◦ 文脈を型で表現したい ▪ Option<T>くんはどこ…?
4. 安全にJavaScriptを書くために • いつものパターン ◦ fp ▪ むやみにグローバルな状態を作らない ▪
副作用を出さない • ケースによってはReactive Extensionsもアリかと ▪ 複雑な機能はwell-testedな小さな関数の組み合わせで実現 ▪ カリー化 ▪ 高階関数 ▪ 関数合成 ▪ オライリーから本が出ているが古い • Webのドキュメントを漁ったほうが良い
4. 安全にJavaScriptを書くために • モテない男が気休めに使うみじめな道具 ◦ モナドライブラリ(TypeScript) ▪ Option<T>, Either<T>,
Writer<T>, etc… ▪ monapt, TSMonad, fp-ts
4. 安全にJavaScriptを書くために • gcanti/fp-ts ◦ 最近出てきたさいつよモナドライブラリ ▪ さいつよ: Star,
機能数, 更新頻度 ◦ PureScript, fantasy-land, static-land, Scalaにインスパイアされた ◦ 最新のTypeScriptの機能を取り入れている ◦ interfaceで高階型を表現し、Applicative, Monadを提供 ◦ Option<T>, Either<T>, Reader<T>, Writer<T>, State<T>, Task<T>, Debug.Trace(), etc… ◦ この前記事を書いたので読んでください
4. 安全にJavaScript を書くために • gcanti/fp-ts ◦ Either<L, R> ▪ 失敗系と成功系を
型で表現 ▪ Promiseとの親和性
4. 安全にJavaScript を書くために • gcanti/fp-ts ◦ Option<T> ▪ Nullableな型 •
T | null ▪ 他のモナドと 組み合わせられる
5. まとめ • プログラミング言語の安全性の定義は難しい ◦ 言語により様々な”危険”があるため • もしJSを書くときは、TSやfpを使い、JSの”危険”なコードを握り潰そう ◦
fp-tsを使うと便利である