<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます（構文として
ATOM開発チームのバックエンドエンジニア、にゃんと申します。 現在のWebアプリケーション開発ではバックエンドとフロントエンドで職種が別れているのが一般的になってきましたが、バックエンドエンジニアだからと言ってフロントの知識が不要というわけではありません。私も自分なりに様々なフロントエンドフレームワークに触れていますが、バックエンドをメインとするエンジニアとって1番使いやすいのはSvelteではないかと考えています。 というわけで今日はバックエンドエンジニアが見たSvelteという話をしたいと思います。 Svelte（すべると）って何？ SvelteはReactやVueなどと同じコンポーネントベースのフロントエンドのアプリケーションフレームワークです。以下のような特徴があります。 コンパイル時にコードを最適化することで、小さく、高速なアプリを構築できる リアクティブプログラミングを簡単に
はじめに 今後爆発的人気になるかもしれないし、ならないかもしれないSvelteの基本的な記述のやり方についてまとめてみました。 フロント開発に関わっている方や、フロント開発を勉強中の方に読んでいただけたらと思います。 ※ReactやVueでの開発経験があったほうが、よりわかりやすい内容となっています。 注意 この記事はSvelteの基本的な記述のみをまとめているため、Svelteの概要や、アニメーションの使い方などは割愛していますのでご了承ください。 「やりたいことから」リンク集 ■基本情報 プロジェクト作成 HTML、CSS、JSの記述 ■データ reactive値を扱う 再計算、再実行させる ■コンポーネント コンポーネントの作成、呼び出し(通常、slot) propsを扱う ■イベント DOMイベントと関数を紐づける コンポーネントからイベントを発信させる ■ロジック 表示を分岐させ
lib/Counter.svelteのファイル先頭に<svelte:options tag="my-counter" />を追加してコンポーネントをカスタム要素としてコンパイルするようにします。 tagで指定した文字列が、Web Componentsの名前となります。 <svelte:options tag="my-counter" /> <script lang="ts"> let count: number = 0 const increment = () => { count += 1 } </script> <button on:click={increment}> Clicks: {count} </button> <style> button { font-family: inherit; font-size: inherit; padding: 1em 2em; color:
はじめに 最近、フロントエンドでたまに聞く、Svelteというライブラリについての紹介記事です。 ReactやVue.jsのような宣言的にUIを記述できるので、簡単にWebアプリケーションやUIを作れる。かつ、バンドルサイズやランタイムが小さく、高いパフォーマンスが期待できるライブラリです。 まだコミュニティやエコシステムが成熟しているわけではないので、不都合はありますが、小さなアプリケーション開発のようなケースでは活躍するのではないかと思っています。 Svelteで作成したToDoアプリのサンプルプロジェクトを以下のリポジトリで確認できます。 Svelteとは Svelteはコンパイラ 「Svelteはコンパイラです」と説明されることが多いので、立ち位置が難しいですが、ReactやVue.jsではなくSvelteを採用する。そういうイメージです。 なので、ライブラリとしての立ち位置として
実は最近まとまった時間ができたので、フロントエンド勘を取り戻すためにも、ずっと気になってたSvelteを触ってみてる。 一通りDocsやTutorialに目を通しきったところで、備忘録も兼ねて記事を書いておこうかと思った次第。 Svelte 3: Rethinking reactivity Svelteは`3`が最新のメジャーバージョンで、これがリリースされたのは2019年の4月のこと。 なんと1年も前の話なのでぜんぜん今さらではあるけど、まだ1年しか経ってないとも取れる・・はず。 モチベーション 冒頭の記事の中にある、Rethinking reactivityっていう公演の動画を見てハッとしたから。 動画の説明文を引用するとこんな具合。 Modern JavaScript frameworks are all about reactivity. Change your applicati
SvelteJavaScriptcompiler Who is this for? Overview 1. Parsing source code into AST Where can I find the parser in the source code? Where can I learn about parsing in JavaScript? 2. Tracking references and dependencies a. Svelte creates a `Component` instance. b. Traverse the instance script and module script AST c. Traverse the template d. Traverse the instance script AST e. Update CSS selectors t
スマートキャンプでエンジニアをしている瀧川です！ 2月に育休を取得し、3月に復帰したと思ったらコロナでリモートワーク、そしてチーム異動となかなか落ち着かない今日このごろ。 みなさんいかがお過ごしでしょうか？ 今回家にいる時間が多くなり、せっかくだから新しいことしたいよなーということで、以前から気になっていた Svelteを触ることにしました！ Svelteの紹介記事では、「Vue.jsと構文が似ているため習熟が簡単」「Vue.jsの50倍早い」みたいなところにフォーカスされることが多いかなと思いますが、本記事ではSvelteのTutorialをやるなかで、フレームワーク(ライブラリ)の機能として普段Vue.jsを利用している私がおもしろいなーと思ったものをご紹介したいと思います。 Svelteとは 基本文法 特徴的な機能 propsやclassの省略記法 Await Block React
この記事は「Svelteで始める頑張らないフロントエンド生活 前編」の続きです。読み進める前に、先にそちらをご覧ください。 前編のおさらい 「Svelteで始める頑張らないフロントエンド生活 前編」ではSvelteの基本的な使い方を学びました。 Svelteでは、変数のバインド、コンポーネントの作成、分岐表示処理などを簡単に実現することができました。Svelteは他のフレームワークほど強力な機能を持っているわけではありませんが、シンプルなアプリを作る際には心強い機能を提供してくれます。 今回作るもの ノートアプリ Svelteの基本的な使い方については習得したので、今回はノートアプリを作ってみましょう。以下のようなイメージです： シンプルですが、ウェブアプリを作る上で重要なことを制作過程で学べます。 Single Page Application(SPA) Single Page Appl
フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした
compiled Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps. compact Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well. complete Built-in scoped styling, state management, motion primitives, form bi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
