Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped. It doesn’t mean that it’s ready for production, or that nothing will change between now and 5.0. But if you’ve held off on dabbling with Svelte 5 during the public
<script> import { createCollapsible, melt } from '@melt-ui/svelte' const { elements: { root, content, trigger }, states: { open } } = createCollapsible() </script> <div use:melt={$root}> <button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button> <div use:melt={$content}>Obi-Wan says: Hello there!</div> </div> こんな感じで使うみたいです。シンプルですね。 createCollapsibleとuse:melt={$xxx}を見たところ、どうやらelementsとstatesから
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆さんこんにちは。昨今の技術選定においては、「シンプルさ」が重視されることが良くあります。 特に「イージー VS シンプル」という対立軸が持ち出されることが多く、規模の大きなアプリケーションを作る際には「シンプル」側の技術を選定するほうが有利だという論調がよく見られます。 本当にそうなのか、あるいはそもそも「シンプル」とはどういう意味なのかについては皆さんそれぞれの考えがあるでしょうから、この記事では深入りしません。 代わりに、実際どのような技術がシンプルなのかが気になるところです。そこで、今回は筆者が比較的得意なWebフロントエンドの
先日 SvelteKit のコンパイルの仕組み について調査しました。そのときに Vite というビルドツールによって ES モジュールをインポートする形でページが構成されていることもわかりました。Vite の バックエンドとの統合 というドキュメントには従来のバックエンドに Vite アプリケーションを組み込む方法について説明されています。 SvelteKit アプリケーションも Vite アプリケーションの1つです。エンドポイントのパスやエントリーポイントを調整することで組み込みできないか？というのが本稿の主題です。 マイクロフロントエンドの動機づけ考察を始める前に マイクロフロントエンド というキーワードもよくみかけるので一緒にみておきましょう。マイクロサービスのフロントエンド版という、大雑把な理解でもそれほど間違っていないと思えますが、メルカリ社の記事がわかりやすかったので紹介しま
この記事はnote株式会社 Advent Calendar 2023の5日目の記事です。 僕はnoteで働いているエンジニアで、主にABテストで改善を繰り返す業務をやりつつ、フロントエンドのリアーキテクチャにも取り組んでいます。 趣味はコーヒーとエレキギターで、どちらも物欲が尽きることはありませんが、最近は新しい焙煎機とエスプレッソマシーンを買いたくてあーでもないこーでもないと悩みながら商品検索を繰り返しています。 Svelteを使っている背景さて、noteではSvelteを使って一部のコンポーネントを実装しています。Svelte自体の詳しい解説は省きますが、開発体験がよくコンパクトなコード にトランスパイルできるUIライブラリです。 現在2023年12月時点でもnoteのフロントエンドの大部分はNuxtで実装されていますが、様々な問題があるためアーキテクチャそのものから見直し、主にNex
はじめに Svelte DevToolsがSvelte公式から2023年11月にリリースされました！ 今までSvelte DevTools自体はRedHatter氏が最初に作成されて利用されていましたが、メンテナンスされなくなってしまって、最新のSvelteやSvelteKitでは動作しないものになってしまっていました。 その後、コードリポジトリをSvelteチームに移管されて、アップデートされました！ インストール 現在、Svelte DevToolsはGoogle Chromeのみで利用することが可能です。 下記のリンクから拡張機能を追加しましょう。 使い方 インストール後、デベロッパーツールにSvelteのタブが表示されます。このタブには、ページにレンダリングされたSvelteコンポーネント、HTMLxブロック、DOM要素のツリーが表示されます。ツリー内のノードを1つ選択することで、
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
If you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0? The answer: never. This was slightly tongue-in-cheek — as the talk explains, it’s really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from
フロントエンドの技術選定 によって Svelte と SvelteKit を使って管理画面を作ることに決めました。Unicorn Cloud ID Manager (以下UCIDM) の管理画面を SvelteKit を使って開発しています。 UCIDM のフロントエンドのアーキテクチャBFF (Backend For Frontend) サーバーに Node.js を配置し、サーバーサイドレンダリングを採用したフロントエンドを提供しています。マイクロサービスでは一般的なアーキテクチャだと思います。 エンドユーザー (ブラウザ) は BFF サーバーに対して認証を行い、BFF サーバーが UCIDM API サーバーと認証します。エンドユーザーは透過的に UCIDM API サーバーが返す情報を参照できますが、直接 UCIDM API とは通信できません。これはセキュリティを担保する上での
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
