Web/DTP
Svelteときどきgsap
うどん
公開日:2024/10/31
どうも、こんにちは。うどんです。
突然ですがSvelteってご存知ですか？
今回はSvelteについての記録です。
Svelteとは
Svelteは2016年から開発がスタートされたフロントエンド向けのJSフレームワークです。
ReactやVue.jsと比べると知名度などなど下なものですが、脱仮想DOMなのに表示速度が激早なサイトができるのだとか。
とりあえず試してみたいと思い、チュートリアル一個ずつやっていきました。
https://learn.svelte.jp/tutorial/welcome-to-svelte
Svelteの特徴1.
冒頭でもお伝えしましたが、なんといっても一番の特徴は脱仮想DOM。
そもそも仮想DOMとはReactやVue.jsで構築する際に利用されているDOM(Document Object Model)の仮想バージョンのことで、React等はこの仮想DOMとDOMを比較して変更された箇所を書き換えWEB上に公開しているため速く表示されるようになっています。
ではなぜSvelteは脱仮想DOMでも早いのかというと、Svelte自体がコンパイラであるため。
ファイル内をコンパイルする際に変更点のみを書き換えているために早く表示されます。
Svelteの特徴2.
Svelteはコンパイラであるため、ファイル拡張子も「.svelte」になるのですが、中はHTMLをそのまま記述したようなファイルのため、初見でみても何を書いているのかがなんとなくわかります。
そのため構築されたサイトをあとから誰かが触るのも、比較的容易そうです。
Svelteの特徴3.
ReactやVue.jsよりも学習コストが低い。
というのも、やっぱりそのままのHTML等を.svelteファイルに記述して完成するのは新たに覚えないとならないコード等が少なくて済むからです。
なんなら記述量が少ない＝バグが少ないとも言えるのではないでしょうか。
番外編特徴
three.js
今回はほかのせっかくなら組み合わせようと思い、Webブラウザ上で3DCGを表現をするならこれって感じでthree.jsも合わせて調べていました。
これでなくても3DCGを表現させる方法はあるのですが、WebGLのライブラリといえばthree.jsというくらい、ブラウザ上でカメラの位置やライトやなんだかいろいろを設定できるのが特徴的なライブラリですよね。
Svelteで使いたい場合は、Svelteでthree.jsを簡単に使うためのThrelte（スレルト）というものが存在していて、これをインストールしておけばパッケージ化されているのもあって使いやすいようです。
gsap
今回のタイトルにも含めたgsap。
フロントエンドで今大人気(？)なアニメーションライブラリです。
最近のサイトでめっちゃ動くなこれみたいなやつは、だいたいgsap使われています。
gsapが人気な理由はCDNでもnpm installでも利用することができるので、どんなサイトにでも取り入れやすく、コードもjsで記述するのですが、CSSアニメーションがよりわかりやすく（あとスムーズに）コード化できることが特徴です。
Svelte使った感想
今回はチュートリアルを試してみての感想ではありますが、便利に感じたものをピックアップしました。
これが便利1.
公式でreplが用意されているのがとてもありがたいと思いました。
またそれだけでなくkitでは、Stack Blitzがチュートリアル用に用意されていました。
npm環境を用意しなくても、チュートリアル用にStack Blitzがあったので、ファイル構造の部分も触りながらでき試しやすく嬉しいかぎりでした。
やっぱり実物のソース触りながらできると理解度があがります。
これが便利2.
Svelte.Kitを用いて構築する場合、特殊な場合を除くとルート設定が不要！
ルート設定、実は面倒だと思いながらいつも設定しているので、しなくていいのはとてもありがたい部分です。
単純なページを作成したい場合はめっちゃ便利でした。
これが便利3.
デフォルトでも簡単なアニメを表現させる機能がついてること。
gsapほどのアニメいらないなら、正直Svelteだけでもいけます。簡単なスライドアニメとかはバッチリです。
これが便利4.
変数をリアクティブに見てくれるので、入力してもらった結果を出す、といったことが得意なこと。
入力している側からバリデーション出せます。
あとはデータ抽出とかにも向いてそうです。
番外編、GSAPのメリット
GSAPのコードは、微調整しやすく、またどのブラウザであっても同じ動きであるのが使うメリットに思いました。
またCSSで動きをつける場合はCSSでまずアニメーション設定をして、そのアニメーション名で別で動きの設定をして、といった流れですが、GSAPだと動きだけ書いたjsファイルに切り分けることもできるので、使い回しもしやすいです。
また、GSAPのいいところは、複数のアニメを組み合わせることも簡単であること！
たとえば、1分は回転するアニメ、そこから30秒間隔をおいたあと、左の画面外に消す、といったアニメもCSSと比較して少ない記述で実施できます！
GSAPとCSSコード比較
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .box { width: 100px; height: 100px; background-color: red; position: relative; animation: moveAndRotate 2s ease-in-out; } @keyframes moveAndRotate { 0% { left: 0; transform: rotate(0deg); } 100% { left: 500px; transform: rotate(360deg); } } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .box { width: 100px; height: 100px; background-color: red; position: relative; } </style> <script> gsap.to(".box", { x: 500, // 500px 右に移動 rotation: 360, // 360度回転 duration: 2, // 2秒で完了 ease: "power1.inOut" // イージング }); </script> |
先がCSSアニメ、後がGSAPです。
GSAPのほうがすっきりしますね。
Svelteが使えそうなシーン
あくまで主観でですが、Svelteを使ってもいいのかなと思えるシーンを書き出してみました。
1.小さなシステム
これはSvelte公式も謳っているのですが、まだまだ発展途中のSvelteは大きいシステムには向いていません。なので、基幹システム以外のシステムで利用するのはありかもしれません。
2.表示速度を速くしたいブログサイト
ヘッドレスCMS等を利用して管理画面はWordPress、表示はSvelteなんてのもいいかもしれません。Vue.jsよりもHTMLで記述しているので、あとから別のウェブコーダーさんになっても編集しやすそうな気がします。
3.WordPressに別DBの情報を取得
ヘッドレスでWordPressを作成している場合のみ、ではありますが、ヘッドレスCMSにしているからこそサーバーとDBを分けることもできるんで、異なるDBのシステムを取得といったことも可能そう。
まとめ
Svelteはまだまだ発展途上のものなのでメイン使いには不向きですが、ReactやVue.jsよりもわかりやすそうなので、ちょっと使ってみようかなもありなフレームワークだと思いました。
・・・あくまでこれも主観です。
それでは！
