Reactの開発関連の勉強などをしていく中で、SWCなどを適用するかどうかなどの文言が出てきました。
導入すると開発でメリットがあるようなのですが、どんなことができるのか理解していないため勉強のためにまとめます。
【初心者用】SWCについて
1. そもそもSWCって何？
今回疑問に思った点であるSWCとは何か以下にまとめていきたいと思います。
1-1. SWCとは
SWCはRust製の高速な動作をするトランスコンパイラになります。
最近だとNext.js、Deno・Viteなどの様々なツールの内部で採用されており注目されています。
1-2. ダウンレベルコンパイラ
ダウンレベルコンパイラとは、新しい構文を古い構文に置き換える役割のこと
トランスコンパイラではもともとJavaScript製のBabelというツールが使用されているようで、Babelには強力なプラグインシステムがあります。
これによりダウンレベルコンパイラとしてではなく、メタプログラミングのツールとしても広く使用されています。
SWCのプラグインシステムに関しては2022年ごろから実装が始まり、現在に関してはReactのフレームワークのNext.jsなどを含め幅広く利用可能な状態になっています。
SWCはBabelとはちがいRustで書かれており、Babelよりも速度を非常に重視しているため差異が多くあります。
また、SWCはコンパイルとバンドルの機能の両方で使用が可能となっています。
コンパイルに関しては最新のJavaScript機能を元にJavaScriptとTypeScriptのファイルを受け取ります。
これにより、主要なブラウザのすべてでサポートされる有効なコードの出力をします。
上記によりコンパイルに関しては、JavaScriptとTypeScriptからほとんどのモダンブラウザでサポートされているコードを出力できます。
2. トランスコンパイラとは
今回SWCなどのトランスコンパイラについてまとめたいと思います。
トランスコンパイラとは、とあるプログラムのソースコードを違うコードへ変換する動作を行うプログラムを指します。
ですので、トランスコンパイルを行うものなのでトランスコンパイラといいます。
プログラムの開発や勉強をしている人であれば、コンパイルという用語はよく聞く言葉だと思います。
このコンパイルとは、人間が読める言語で書かれているソースコードを、PCが読むことができるバイナリファイルに変換して実行可能なファイルを作成することを言います。
2-1. バイナリファイル
バイナリファイルとは、特定の文字コードの範囲に収まらない任意のビット列を含むバイナリデータを保存したファイルのこと。
テキストファイル以外のファイルはすべてバイナリファイルであり、実行形式のプログラム、画像、音声、動画などのファイルの多くが該当する。
バイナリファイルはコンピュータプログラムによって読み書きや処理を行うことを前提に、文字コードの規約を用いずに任意のビット列によって構成されているデータを格納する。
■上記引用元
https://e-words.jp/w/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB.html
また、トランスコンパイラはTypeScriptのソースコードをJavaScriptのソースコードに変換する作業のことを言います。
同じプログラミング言語としても、JavaScriptのバージョンES6からJavaScriptのバージョンES5のソースコードに変換する作業に関してもトランスコンパイルといいます。
こちらに関してソースコードを整形・サイズを圧縮するなどのことはトランスコンパイルとは呼びません。
別の種類やバージョンにプログラム言語のコードを変換する作業のことをトランスコンパイルといいます。
3. BabelとSWCの違いとメリット
BabelからSWCへの移行に関する違いとしては、元々SWC自体がBabelの機能を使用できるのでほぼほぼ変化はありません。
以下にBabelとSWCの違いについて簡単にまとめます。
・Next.jsなどがSWCの仕様を推進しているため
現在Wantedlyの最新世代のフロントエンドアーキテクチャなどではNext.jsが使用されています。
Next.jsはSWCの仕様を今後推進していくと宣言しているため、Babelを使用するよりSWCを使用する方がよいかと思います。
・開発効率の向上
SWCはBabelよりも高速に動作するように開発されています。
ですので、Babelよりもローカル環境での動作確認やユニットテスト前のビルド・CI/CDなどのビルドにかかる時間を短縮することができます。
ビルド時間の短縮ができれば開発を効率よくするために大きく関係してきます。
4. Rustとは
Rustとはプログラミング言語で、特徴としては不正なデータアクセスをコンパイル時に防止できることです。
RustはFirefoxを開発しているMozillaが支援しているオープンソースのプログラミング言語です。
2006年に開発がスタートし当初はMozilla所属のグレイドン・ホアレ氏の個人プロジェクトで、2009年からはMozillaが支援に加わり公式プロジェクトになりました。
その後は、後方互換性を重視した6週間隔のリリースサイクルを保持し、すべてのファイルがGitHubで公開されています。
また、MicrosoftやGoogleもwindowsとAndroidの開発にRustを採用しています。
OSのコア部分の開発はC言語やC＋＋言語と決まっていましたが、そこにRustも採用されるようになりました。
CやC＋＋でのOS開発では、OSのセキュリティ上の問題があります。
セキュリティ上の脆弱性の多くは、メモリ利用でのバグに起因しておりCやC＋＋を使用する場合はこれらの特性からの克服は難しいとされています。
そこで、Rustでは独自の言語設定によりメモリ安全性を実現しています。
MicrosoftやGoogleはメモリ安全性を一番に評価をして、Rustの採用を開始しています。
5. React-swcについて
Reactでの開発中にReact版のSWCについての解説があったので追加でまとめます。
ReactはBabelを使用していたのですが、React用のSWCが開発されBabelの代わりとなるコンパイラーとなりました。
SWCは単一すれどでBabelの約２０倍高速でコンパイルができ、４コアで７０倍高速に動作をするとのことです。
このように、SWCのプラグインを使用して開発することで高速で効率よく開発が進められる。
6. まとめ
Reactで実際に開発をして勉強する中で、知らないことが多く出てきて良い学びになります。
今回もSWCがどのようなものかまとめるまでは、あんまりよくわからないまま使用していました。
プラグインやプログラム言語等の開発する際に、使用する技術などはどうしてその技術が必要なのか理解してた方がよいと感じました。
理解して使用することにより、特定の開発をするさいに最適な状況を意識して選択することができます。
今後の開発の際にはSWCのプラグインを使用しようかなと思います。