---
title: #__PURE__に入門
tags: 
author: [kazuhi-ra](https://www.docswell.com/user/kazuhi-ra)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PER2LR1L79.jpg?width=480
description: Kyoto.js 19で発表した資料です。 https://kyotojs.connpass.com/event/282651
published: January 31, 24
canonical: https://www.docswell.com/s/kazuhi-ra/KW1QGQ-2024-01-31-211950
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PER2LR1L79.jpg)

#̲̲PURE̲̲に入門
kazuhi̲ra


# Page. 2

![Page Image](https://bcdn.docswell.com/page/P7XDWRG6JX.jpg)

普段あまり
人前で話さないので


# Page. 3

![Page Image](https://bcdn.docswell.com/page/37KXVR4GJD.jpg)



# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ35M8L575.jpg)



# Page. 5

![Page Image](https://bcdn.docswell.com/page/8JDD6MNYJG.jpg)

貴重な機会を
ありがとうございます


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VEPXYR52J8.jpg)

・東京在住
・生まれ育ちは関西
・SUZURIの開発
kazuhi̲ra
・好きなメソッド
・String.prototype.repeat()


# Page. 7

![Page Image](https://bcdn.docswell.com/page/27VLGRPXEQ.jpg)

・東京在住
・生まれ育ちは関西
・SUZURIの開発
kazuhi̲ra
・好きなメソッド
・さぼ


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5JGX8MPR7L.jpg)

・東京在住
・生まれ育ちは関西
・SUZURIの開発
kazuhi̲ra
・好きなメソッド
・console.log(ʼ🌵ʼ.repeat(10))


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47Q89R2YEP.jpg)

最近


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KE42X8LZ71.jpg)

会社の新卒研修
サポート


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L71MN2LDJG.jpg)

Reactの話が
中心


# Page. 12

![Page Image](https://bcdn.docswell.com/page/G7W34RV872.jpg)

そうすると


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JZV2R4973.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/YE65VR3DJV.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/GE5YD8L8E4.jpg)



# Page. 16

![Page Image](https://bcdn.docswell.com/page/972G8KLV7R.jpg)

この辺の話を
することになる


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DJYV6NQQJM.jpg)

知識としては
知っている


# Page. 18

![Page Image](https://bcdn.docswell.com/page/V7NMZXK2E8.jpg)

しかし


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YJ9NZ8VDJ3.jpg)



# Page. 20

![Page Image](https://bcdn.docswell.com/page/GJ8K18P5ED.jpg)

これは
bundleされた
最後の姿


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LJLZQR137R.jpg)

中間成果物を
見たことがない


# Page. 22

![Page Image](https://bcdn.docswell.com/page/47MV1RWM7W.jpg)

やってみよう


# Page. 23

![Page Image](https://bcdn.docswell.com/page/P7R2LRYLJ9.jpg)

やった


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PJXDWR46EX.jpg)



# Page. 25

![Page Image](https://bcdn.docswell.com/page/3JKXVRZGED.jpg)



# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE35M8D5J5.jpg)

……？


# Page. 27

![Page Image](https://bcdn.docswell.com/page/8EDD6MPYEG.jpg)

#̲̲PURE̲̲


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V7PXYRN2E8.jpg)

誰？


# Page. 29

![Page Image](https://bcdn.docswell.com/page/2JVLGRKX7Q.jpg)

#̲̲PURE̲̲に入門
kazuhi̲ra


# Page. 30

![Page Image](https://bcdn.docswell.com/page/5EGX8MQRJL.jpg)

検索する


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4JQ89RKY7P.jpg)



# Page. 32

![Page Image](https://bcdn.docswell.com/page/K742X8PZJ1.jpg)



# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJ1MN29DEG.jpg)



# Page. 34

![Page Image](https://bcdn.docswell.com/page/GJW34RQ8J2.jpg)



# Page. 35

![Page Image](https://bcdn.docswell.com/page/4EZV2RW9J3.jpg)

Pure Annotation


# Page. 36

![Page Image](https://bcdn.docswell.com/page/Y765VRGDEV.jpg)

for dead code
elimination


# Page. 37

![Page Image](https://bcdn.docswell.com/page/G75YD8V874.jpg)

さらにいろいろ検索


# Page. 38

![Page Image](https://bcdn.docswell.com/page/9J2G8K3VJR.jpg)

̲̲PURE̲̲に携わるツール
2種類


# Page. 39

![Page Image](https://bcdn.docswell.com/page/DEYV6N1QEM.jpg)

・コメント(#̲̲PURE̲̲)入れる係
・コンパイラが担う
・Babel, SWCなど
・コメント使う係
・mini erが担う
fi
・terser, uglify-jsなど


# Page. 40

![Page Image](https://bcdn.docswell.com/page/VJNMZX2278.jpg)

コメント入れる係


# Page. 41

![Page Image](https://bcdn.docswell.com/page/YE9NZ81DE3.jpg)

Babel


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GE8K18457D.jpg)

babel-traverse/src/scope/index.ts


# Page. 43

![Page Image](https://bcdn.docswell.com/page/LELZQR63JR.jpg)



# Page. 44

![Page Image](https://bcdn.docswell.com/page/4JMV1R5MJW.jpg)

いろいろなpure判定
fi
if (isIdenti er(node))
if (isClass(node))
if (isClassBody(node))
if (isBinary(node))
if (isArrayExpression(node) || isTupleExpression(node))
if (isObjectExpression(node) || isRecordExpression(node))
if (isMethod(node))
if (isProperty(node))
if (isUnaryExpression(node))
if (isTaggedTemplateExpression(node))
if (isTemplateLiteral(node))


# Page. 45

![Page Image](https://bcdn.docswell.com/page/PJR2LR3LE9.jpg)

pureの定義
未使用ならその呼び出しを
削除できるもの


# Page. 46

![Page Image](https://bcdn.docswell.com/page/PEXDWR967X.jpg)

条件にマッチしたら
̲̲PURE̲̲挿入


# Page. 47

![Page Image](https://bcdn.docswell.com/page/3EKXVRPG7D.jpg)

コメント入れる係
完


# Page. 48

![Page Image](https://bcdn.docswell.com/page/L735M8X5E5.jpg)

コメント使う係


# Page. 49

![Page Image](https://bcdn.docswell.com/page/87DD6M2Y7G.jpg)

fi
mini er


# Page. 50

![Page Image](https://bcdn.docswell.com/page/VJPXYR1278.jpg)

input: {
function foo() {
var u = pure(1);
var x = pure(2);
var y = pure(x);
var z = pure(pure(side_effects()));
return pure(3);
}
}


# Page. 51

![Page Image](https://bcdn.docswell.com/page/2EVLGRYXJQ.jpg)

input: {
function foo() {
var u = pure(1);
var x = pure(2);
var y = pure(x);
var z = pure(pure(side_effects()));
return pure(3);
}
}


# Page. 52

![Page Image](https://bcdn.docswell.com/page/57GX8M9REL.jpg)

input: {
function foo() {
var u = pure(1);
var x = pure(2);
var y = pure(x);
var z = pure(pure(side_effects()));
return pure(3);
}
}
output: {
function foo() {
side_effects();
return pure(3);
}
}


# Page. 53

![Page Image](https://bcdn.docswell.com/page/4EQ89RWYJP.jpg)

input: {
function foo() {
var u = pure(1);
var x = pure(2);
var y = pure(x);
var z = pure(pure(side_effects()));
return pure(3);
}
}
output: {
function foo() {
side_effects();
return pure(3);
}
}


# Page. 54

![Page Image](https://bcdn.docswell.com/page/KJ42X8KZE1.jpg)

まとめ


# Page. 55

![Page Image](https://bcdn.docswell.com/page/LE1MN2XD7G.jpg)

(口頭で)


