Zenn
Open3

Svelteに入門した

Svelte
まなさすまなさす
  • svelteとかsolidjsに入門してReactやVueと使い勝手を比較したいので、まずはsvelteに入門する
  • とりあえず下記のようなド定番のTwitterライクアプリ作る
まなさすまなさす
  • ベースとしてははじめてのSvelte - 基礎から応用まで | www.twilio.comを参考にした
  • ↑から改造する点は下記
    • 上記のサイトで利用されているベースのリポジトリが『npm init viteからsvelteを選んでね！』と記載しているので、npm init viteを利用。道中でts利用できたので、ts化
    • ついでにscss化。npm init viteを利用したものはscssを利用するためのベースが整っているので、styleタグに lang="scss"を付与するだけ
    • あとは黙々実装するだけ
まなさすまなさす
  • Vueのようにscript(js), htmlテンプレート, cssを１ファイルにいれる形式だが、Vueより圧倒的にシンプル
  • HTMLテンプレート部分の書き方もシンプル。if文がタグに依存しない / ifの中が1タグ縛りがないので、無駄なtemplateタグや<></>を使わなくていいのが良い。
  • scriptはletで定義して関数で上書きするとリアクティブになるというシンプルさ
    • storeの召喚もsvelte/storeで定義して普通にimport { variableName } from "./../store";で呼び出して$variableNameで呼び出して直接変数みたいに再代入ができるシンプル仕様
      • storeの配列をコンポーネント側で$storeArray[i].text = newTextで書き換えできる。
  • React/Vueに比べて圧倒的にシンプル
    • 参考時のSvelteを使うメリットで記載されてる『真のリアクティブシステム』や『記述するコードを少なくできる』は、ちょっと試しただけでも実感ができて、『おおお…！』と思わせるものがある。
  • 個人的には再代入をすることになるところに不安を感じるが、再代入というよりはsetがお手軽になってるだけという説はあるので、案外コレでいいのかもしれない…という気はしつつある。
  • シンプルさが圧倒的なので最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();で『いまフロントエンドやるなら最初に覚えるべき！』にSvelteがチョイスされているのは非常にわかる
    • バニラからはじめた人がVue.jsで折れがちなポイントである双方向バインディングがうまくシンプルになっているのがポイント高い
    • Reactは個人的にはサーバサイド出身の人がフロントエンド転向する時の言語だと思っているので好きではあるがバニラフロントエンドをはじめた人の次のステップとしてのフレームワークじゃないよな…と思ってる。
  • TODO
    • storeに対してTypeScriptの型がどこまで効くか
    • propsらへん