バレルファイル 使っていいときわるいとき @berlysia / meguro.es #29 

結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ 

バレルファイル / Barrel files 他のファイルのexportを まとめて再exportする ファイルのこと。 

よく見るパターン utilityを束ねてるやつ componentを まとめてるやつ・隠蔽してるやつ 

最近いろいろ言われがち ● Barrel files and why you should STOP using them now - DEV Community ● Speeding up the JavaScript ecosystem - The barrel file debacle ○ 中身はほとんど「バレルファイルをやめろ」 ● A practical guide against barrel files for library authors - DEV Community ● Please Stop Using Barrel Files | TkDodo's blog ○ ライブラリのエントリファイルならいいんじゃないといってる ● eslint-plugin-no-barrel-filesを導入してBarrel filesをやめた話 | PR TIMES 開発 者ブログ 

何がそんなにダメなのか ● 循環参照を起こしやすい ● 必要ないファイルを読み込んでしまう 

循環参照ってどういうことよ 

必要ないファイルを読み込んでしまう ざっくりふたつにわかれる ● バンドルしない場合 ○ ブラウザ、Node.js、Deno、Bun、…… ○ Viteの開発モードみたいなやつ ■ ● バンドルする場合 ○ webpack、Rollup、esbuild、Rolldown、…… 

バンドルしない場合 barは読み込まれますか？ 

バンドルしない場合 barは読み込まれますか？ 

だから これがやばい 

ディープインポートが好まれる 

Deferring Module Evaluation / Stage 2.7 中身触るまで評価されない提案 

バンドルする場合 ✨Tree Shaking✨ だけで終わるならこんなに嫌われてない 

どうなる？ どうなってほしい？ barに副作用 

どうなる？ どうなってほしい？ barrelに副作用 

Tree Shakingでよく書くやつ ● package.json の sideEffects: false ○ 「副作用がないからTree shakingしていいよ！」とバンドラは解釈する ○ ライブラリでよく使うやつ ■ 副作用があるライブラリでこれをやると信用して副作用ごと消える 

Next.jsが頑張っている 

（記事を読む限り）こう 

たどりつきたい結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ 

一緒に使うならバレルでいい！ 

ちょっとしか使わないならやめとけ！ 

バンドラー向けの裏技 package.jsonをおく 

結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ むやみやたらにやめなくていい 

おまけ）ESMのときにフォルダを参照するやつ 

で、誰 ● berlysia ○ Web engineer (mainly frontend) ○ 妄想を現実にすることをしている ● 株式会社ドワンゴ 教育事業 ○ Webフロントをやる人 ○ Webフロントのためにいろいろやる人 ● TSKaigiの中の人 ○ TypeScriptのカンファレンス TSKaigi 2025 ○ 5月に開催するのでよろしくね ■ CfP募集中！ まってま〜す ■ 締切は明日まで！