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
お前、GCってまあ別に気にしなくていいだろって思いながらwebサイト作ってるだろ
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
akatsuki1910
May 08, 2025
19
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
お前、GCってまあ別に気にしなくていいだろって思いながらwebサイト作ってるだろ
akatsuki1910
May 08, 2025
More Decks by akatsuki1910
See All by akatsuki1910
機械の気持ちを考えてコードを書こう
akatsuki1910
0
16
サーバーを使って遊ぼう
akatsuki1910
0
23
業務を効率化させるためのAIツール3選(超実践編)
akatsuki1910
0
48
後輩に伝えたいこと
akatsuki1910
0
33
難解(かもしれない)言語
akatsuki1910
1
49
Reactのチュートリアルをしよう3
akatsuki1910
0
39
クソドメインを取ろう
akatsuki1910
0
76
Reactのチュートリアルをしよう2
akatsuki1910
0
34
HTMLとCSSとコンポーネント
akatsuki1910
0
52
Featured
See All Featured
Building Applications with DynamoDB
mza
96
7.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Evolving SEO for Evolving Search Engines
ryanjones
0
220
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
162
27k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.6k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
560
Unsuck your backbone
ammeep
672
58k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.5k
Rails Girls Zürich Keynote
gr2m
96
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.4k
Odyssey Design
rkendrick25
PRO
2
700
Transcript
お前、GCってまあ別に気にしなく ていいだろって思いながらwebサ イト作ってるだろ らり
GCって C 言語のような低水準言語には、malloc() や free() のような低水準のメモリー管理プリ ミティブがあります。これに対して JavaScript では、オブジェクトを作成するときにメモ リーを自動的に確保し、使用しなくなったらメモリーを解放します(ガベージコレクショ
ン)。この自動性が混乱の元になる可能性があります。メモリー管理について心配する 必要がないという誤った印象を開発者に与える可能性があります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Memory_management
メモリー管理について 心配する必要がないという 誤った印象を開発者に与える 可能性があります。
記事は色々ある メモリを気にしているエンジニアもいる https://qiita.com/CRUD5th/items/0809ca2a23850cc4bd31 https://tech.iimon.co.jp/entry/2024/09/17/162225
メモリって? 「スタック領域」と「ヒープ領域」の2つがある • 静的メモリ割り当てをするのはスタック領域 • 動的にメモリのサイズが決まるものはヒープ領域 スタック領域はビルド時に気づける(ファイルサイズがデカいと注意)が、ヒープ領域は実 行時に分かるものなので、事前にいっぱいになりそうなのかを気づくのは難しい https://engineering.mercari.com/blog/entry/20220128-3a0922eaa4/
そんなあなたに、GC JSではGCが不定期にメモリ削除をしてくれるので、メモリリークをすることを防いでくれ る ただ、GCは呼び出すことは不可能であり、GCが走ると一時的にwebサイトが重くなった りするため、極力呼ばれないようなものを作るのが望ましい
じゃあどうすればいいんだよ GCは特段完璧であるわけではないので、GCがいらないものだと分かるものにしてあげ る必要がある そのためには「マークアンドスイープアルゴリズム」というものを学ぶ必要があるが、とて も面倒臭い なんだよグローバル参照云々とかって、ブラウザがなんとかしろよ
抑えておきたい基本概念 • windowオブジェクトから辿った時に参照できないものはGCで消される対象 • 静的メモリ割り当てをするのはスタック領域 • 動的にメモリのサイズが決まるものはヒープ領域
わかりやすい図 arrという配列(動的に中身が変えられる)が 作成された時、メモリアドレス(静的で一度 決めたら変わらないもの)に紐付けされたも のが変数として持つ またその後、null(後述)を代入することで、メ モリが消え、ヒープ領域に何も紐付けされて ない配列が生まれる そのため、この配列はwindowから辿れない ため、削除対象となる
https://tech.iimon.co.jp/entry/2024/09/17/162225
ぬるぽ ガッ null という値は、意図的にオブジェクトの値が存在しないことを表します。これは JavaScript のプリミティブ値の 1 つであり、論理演算では偽値として扱われます。 つまるところ、スタック領域でとどまる 参照を外すだけならプリミティブ型であればなんでもいいが、nullが一番わかりやすい
オタク特有の早口 とは言っても、プリミティブ型であればなんでもいいわけでは無い 例えばdouble型のものは、V8エンジン上ではHeapNumberとして扱われるため、結局 メモリを余分に使う そのため、動的型付けであり型の種類が少ないJSでは知らずに食っていく https://thlorenz.com/v8-dox/build/v8-3.25.30/html/d1/d8c/classv8_1_1internal_1_1_heap_number.html
ただ、めんどくさい 毎度毎度nullを代入するのはだるすぎるので、基本的には何も触らないようにする方法 を取る方が多い あまりに巨大なデータを使う場合はWeakMapやWeakSetを使うことを検討する必要が ある
普通に考えてみて 昨今のブラウザは基本的に優秀でIEが淘汰された今大変開発がしやすい また、V8エンジンの登場で、割と文句が言えない程度には早くなった GCも進化しているため、基本的に気にすることはほぼなくなった ただ、たまーに巨大なデータを扱おうとする時に、デバッグ方法の一種として知っておく 必要はある
どういう時? • メモリサイズが比較的少ないデバイスを使う時 ◦ スマホとかマイコンとか • 一度にデカいオブジェクトを配列に格納する時 ◦ three.jsを使ってる時とか •
ゲームを作っていて、インスタンスをいっぱい生成した時 ◦ abstract classを用意してると知らずに作ってる • https://qiita.com/tkdn/items/ea4f034e0d661def244a#4%E7%A8%AE%E9%A1 %9E%E3%81%AE%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA-j avascript-%E5%85%B1%E9%80%9A%E3%81%AE%E3%83%A1%E3%83% A2%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%AF