技術ブログ株式会社エーピーコミュニケーションズの技術ブログです。エーピーコミュニケーションズの技術ブログです。9日目のエントリです。先進サービス開発事業部の高橋です。フロントエンドエンジニアを担当しています。普段の業務ではReactJSを使っていますが、業務外でちょっとした画面作りにSvelteという最近海外で話題になっているフレームワークを使ってみたのでReactとの違いというか良いと感じた点を書いてこうと思います。公式ドキュメントがとても親切Svelteのドキュメントはかなり親切だと感じます。チュートリアルを一通りやってみれば、それなりに実装できるようになると思います。Exampleが実践的かつREPLで提供されているので実にお手軽にコードの挙動を確かめることができます。Reactのドキュメントも日本語対応(ちょっと怪しい)しているし、不親切なわけではないですが、飲み込むまで結構時間がかかった記憶があります。Componentでできることが増えたことによって、比較的シンプルに書けるようになりましたが、Svelteはさらに簡素に記述できてしまいます。クリックしたらカウントアップするというようなチュートリアルみたいなコンポーネントを例に比較してみましょう。Reactでの記述まずReactから。v1.16.8からHookが使えるようになり、記述がシンプルな関数コンポーネントでもステートやライフサイクルメソッド(のようなもの)が扱えるようになりました。Counter;Svelteでの記述そして、Svelteです。Reactでも十分すぎるほどシンプルなコードがさらに省エネなコードになっています。<div>{count}</div></div>随分と簡単に作れてしまうので、プログラマとしては少し物足りない感じはします。データバインディングに融通がきくReactは親コンポーネントから子コンポーネントへの単一方向のデータバインディングしか許されていませんでした。それはそれで統制の取れた素晴らしい設計思想だと思うのですが、正直めんどくさいと感じる時があります。子要素から親要素にデータの変更を通知するには、reduxを使ってPropsとして親要素に渡すといった遠回りな方法が必要になります。Svelteの場合、原則的にはReactと同じく親から子への単一方向のデータバインディングとなっていますが、例外的に子要素から親要素にデータを渡すことができます。親コンポーネントを見ていきましょう。isCount={isCounting}/>数値を1秒ごとにカウントアップするタイマーの再生・停止ボタンを用意します。Parentコンポーネントではカウントの再生・停止の判断用のisCountというフラグをChildコンポーネントに渡します。値を受け取っています。Value)というメソッドを使い、カスタムイベントを設定します。引数ではイベント名を、第二引数で値を渡すことができます。第二引数で渡した値は、当該イベント発火時に、event.detailという形で受け取ることができます。このようにして、子から親のデータバインドを実現することができます。多用するとデータの流れが複雑化しすぎて帰って面倒になりそうなので、あくまで例外的な処理として活用するのがおすすめです。Viewにロジックに組み込みやすいReactのJSXでは、ロジックを組み込もうとすると少々面倒な記述の仕方になります。その点、Svelteは比較的楽に条件分岐やループの処理をViewに組み込みやすくなっています。Reactがそのような形にしているのは、Viewとロジックを切り分けるという設計思想があり、その思想に賛同しないわけではありません。柔軟にコンポーネントを作れると楽なのになーと思うこともあるわけです。以下違いを記述します。Reactでの記述法JSXの中でループが使えないので、JSXの配列を返す関数を使ってループを実現しています。非同期処理を伴うロジックでは判定用のフラグを用いてレンダリングするDOMを制御しています。Items;Svelteでの記述法SvelteのViewはコンポーネント志向というよりはテンプレートエンジンに近いかもしれません。catchの状態をView上で制御できるのは斬新ですね。いい!と思ったのがこれかもしれない。似たようなサイズ感のアプリケーションできちんと計測したわけではないので、正確なことは言えないですが、react-scriptsのビルドよりも2から3倍以上早いと感じます。デメリットこれまで、良いことばかり言ってきましたが、一応デメリットも。ことや、TypeScriptへの対応もまだまだのようで、実践投入は結構ツライかも。業務で採用していろんな人間とプロジェクトを進めていく場合、ある程度不自由でも統制が取れている方が問題は起こりにくく、その点、Reactはバランスが取れたフレームワークだと思います。所感そのほかにも、パフォーマンスに優れているとか、優れた機能(click|onceとか)などたくさんありますが、一旦はここまでにします。基本的に、シンプルで小規模なサイト制作で活躍しそうなフレームワークだと思います。比較しておいてなんですが、ReactよりもVue.jsの方が近い存在かもしれないですね。既存のモダンフレームワークにはない、斬新さを感じる良いフレームワークだと思います。エーピーコミュニケーションズネットワーク、サーバ、ミドルウェア、仮想化、OpenFlow、DBなどなど、インフラ系メインで提案から構築、運用までをしています。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。