3 ポイント 投稿者 ohah173 3 일 전 | 5件のコメント | WhatsAppで共有

AI時代を迎えて、どう勉強すべきだろうか?
どんな専門性が求められるのか、どのような能力が今の時代に最も価値があるのか、見当がつきませんでした。
開発者を雇う会社も、開発者自身も、明確な基準がわからないという点では同じだと思いますが、

それでも、じっとしていたら確実に損をするという気はしていました。
とりあえず何か作ってみようと思い、
学習用として最初は単純にChrome Remote DevToolsを作るところから始めました。

作っているうちに、React Nativeもリモートデバッガーで対応できるようにしてみよう

-> Metroを知らないので難しすぎる。
-> Metroをクローンコーディングしながら勉強してみよう
-> React NativeでMetroより良いバンドラーを作れないだろうか?
-> Rolldown、swc、bunを通していろいろ触りながら、Metroバンドラーより良いバンドラーを作ろうと努力。

その中ではbun、Rolldownに可能性がありましたが、あれこれメイン側をカスタムしたりフォークを切ったりすることに限界を感じました。

とはいえ、Metroバンドラーと完全互換のWebバンドラーもありません。flow、Hermesエンジンが許容するJavaScript構文、さらに一般的なWebとは違って重要な呼び出し順序など……

ああ……どうせ勉強なんだから、いっそバンドラーも作ってReact NativeのMetroを置き換えてみよう。

バンドラーを作りながら感じたこと。

じゃあ、Webもサポートすればいいんじゃない?

Rolldownが諦めたES5も入れよう
RNを動かす必要があるからFlowパーサーもサポートしよう
wasmもサポートしよう
速度でも bun、Rolldownに勝ってみよう

独自HMRも入れよう

ツリーシェイキングももう少し攻めてみよう
minifyも他のバンドラーより先を行こう

既存のバンドラーをベンチマークで、とりあえず自分が認識している機能については全部上回ろう、という考えで開発しました。

もちろん、多くの部分では負けているだろうとも思っています。

他のバンドラーと比べれば、安定性や機能、対応しているエコシステムやコミュニティなど、上で挙げたtree-shakingやminifyも一部モジュールでは優れていても、一部モジュールでは劣っているなど、当然ながら未完成な部分が多いです。

ただ、ある程度の実行テストの結果、勝っている部分もあり、まだやるべきことは(SSL、MCP、CLI、安定化、APIドキュメントなど)たくさん残っていますが、もともとの目標だったReact Nativeアプリのビルドと動作については、商用アプリ3本でリリースビルド、開発ビルド、開発サーバーを確認した結果、問題なく動作することを確認できたので、このあたりで公開して、そのまま開発を続けてもいいのではないかと思い、この記事を書くことにしました。

それでも開発およびバンドル機能(zntcもzntcでビルドして配布しています)はある程度うまく動いており、
必須機能であるデコレーターや、React Nativeで半ば必須の機能であるworklet、typescript、flowなども、テストしたライブラリは問題なく動いています。
vite、rspack向けプラグインも提供しており、vite、rspackのような開発環境も提供し(RN、Web)、ドキュメントもあり、React HMRもあり、モジュールフェデレーションにも対応していて、などなど
それでも一応、バンドラー/トランスパイラとしての基本機能は備えていると思うので、フィードバックもいただきたく、公開後も継続して開発していくつもりです。

手で書いたコードは0で、すべてAIとの激しい議論の中で開発されました。
どんな製品開発をするときよりもAIを酷使した気がします。
Claudeだけを使っていましたが、後からCodexも使いました。

バンドラー自体の開発期間は約3か月(約3000個のPR)、上で話した思考の流れまで含めると、だいたい6か月ほど昼夜を問わず作業しました。

平日も休日も休まず作業し、ほかのバンドラーとの無駄な比較から来る劣等感?のような意識もあって、
test262 100%などさまざまなテストケースを通すために、テストケースも暴走気味と言えるほど大量に書いて開発しました。

https://ohah.github.io/zntc/

たくさんのフィードバックをお願いします (__)

5件のコメント

 
caniel 2 일 전

Metro の代替としては、RSPack や WebPack を使う Re.Pack もあります。

 
ohah173 2 일 전

取り留めなく書いていて、書き漏らしていました。
おっしゃる通り、Re.pack もかなり参考にしました。

Re.pack と Rspack はどちらも swc ベースなので、flow をネイティブではサポートしていないと認識しています。
Re.pack の場合、バージョン 5 からは Rspack ベースだと理解していますが、同様に Re.pack も swc+babel を使っているため、flow や reanimated、nativewind(zntc は対応予定)など人気の高いプラグインも、依然として Babel でトランスパイルされていると認識しています。

個人的には Babel から脱却したかったので、zntc ではそれを基本対応のオプションとして実装しました。

zntc も Babel 互換性はサポートしていますが、できる限り babel 依存をゼロにしたいと考えていました。

安定性も高く実績のあるコードではありますが、js という制約上、速度面では常にボトルネックになるので。

実際、開発中もずっと他のバンドラーとベンチマークを比較しながら見てきましたし、自分の目でも継続的に体感してきた通り、当然ながら他のバンドラーに比べると機能や安定性、拡張性で劣る部分があるため、この点は今後も改善していきたいと思っています。
ただ、主要な React Native ライブラリのパーサー互換性などが最初から組み込まれているため、Re.pack ではどうしても発生する構造的なボトルネックの区間については、こちらが優位だと考えています!

 
caniel 2 일 전

簡単ではないプロジェクトだと思いますが、応援しています。

 
ohah173 2 일 전

ありがとうございます!!

 
dydwls140 2 일 전

うーん…test262 100%か……バッジだけ見てV8級かと思いました(笑)