「Svelte」の活用に不可欠──プロジェクト構成とコンポーネント利用法を解説！CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
Svelte学習帳 PHP REST-API編
Svelte学習帳 PHP REST-API編 概要 SvelteKitでWebアプリケーションを作ります PHPでREST-APIを作ります fetchで通信します データベースに保存したり読み込んだりします はじめに これは、ローカル環境でREST-APIの練習をするサンプルコードです。 SveltKitで作成したWebアプリケーションに表示されているパラメータを、REST-APIでデータベースに保存します。 以前に投稿した記事「続・コードを書いてステータス画面を表示する」の続編になっています。 参考：続・コードを書いてステータス画面を表示する 動作要件 SvelteKitが動作すること PHP ビルトインサーバーが動作すること PHP Composerが動作すること STEP00 準備します ここでは2つのプロジェクトフォルダを作成します。 SvelteKitのプロジェクトを作成する
Svelte, Vite, TailWind.cssでプロジェクトを作成する
はじめに 目標設定としてSvelte、Vite、Tailwind.cssを扱えるようにする。 なぜTailWind.cssなのか まずは、レスポンシブに対応しているから。これは、自分が新しくアプリを作成する上でCSSを学ぶ時間を短縮できないかと思い、このフレームワークにたどり着きました。 Bootstrapでない理由としては、自分が実務で使用しているのでまだ使用ししたことのないもの、流行りの物を使いたかったのでこちらを採用しました。 なぜViteなのか 上記同様に、webpackは実務で使用しているので別のものを使用したかった。他にも色々ありましたが、Viteの開発者がVueの開発者であったことも参考にしました。esbuildなどのビルドツールもありましたがそちらはGo言語で、自分の好きな言語でもあるのでとても惹かれましたが、、、Viteもesbuildを使用した上で開発されていて、esb
Svelte 初心者用チートシート
概要 自分用に整理しただけ 基本的には公式ドキュメントのチュートリアルから抜粋 普段はVueを書いていて Svelte はド素人の状態で作成したので内容に誤りがあるかも TypeScript, SvelteKit への言及ナシ 開発環境構築 多分 Vite が一番早い yarn create vite my-svelte-app --template svelte cd my-svelte-app/ yarn install yarn dev localhost:3000 でもう動いてる vscode なら Svelte 用の拡張を入れておけば、シンタックスハイライトやコードスニペットが機能する コンポーネントの基本構造 Vue の SFC 同様に、スクリプト、テンプレート、スタイルを一つのファイル (.svelte) に記述する。 <script> const name = 'Svelt
[キャッチアップ] Svelte
概要 普段は Vue を主に扱ってる Webエンジニアが Svelte を今更キャッチアップするスクラップ Svelte ?? なんか凄くシンプルに Vue っぽく書ける新顔フレームワークでしょ？ぐらいの前提知識からスタート 基本的に学習ノート用途 リポジトリ確認 Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM. らしいけど、ここだけ見ると Vue と違いはなさそう。 あとは OSS 周りの話だけなので、公式ドキュメントの方に移って良さそう 公式ドキュメント確認 (トップページ) Wri
![[キャッチアップ] Svelte](https://cdn-ak-scissors.b.st-hatena.com/image/square/9d3c26fea77c415bdd832dd67b3a9d773235e8ce/height=288;version=1;width=512/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2Favatar%2F845fa75ba8.jpeg){kind=avatar}
Vueユーザーが感じたSvelteのおもしろい機能を紹介する - SMARTCAMP Engineer Blog
スマートキャンプでエンジニアをしている瀧川です！ 2月に育休を取得し、3月に復帰したと思ったらコロナでリモートワーク、そしてチーム異動となかなか落ち着かない今日このごろ。 みなさんいかがお過ごしでしょうか？ 今回家にいる時間が多くなり、せっかくだから新しいことしたいよなーということで、以前から気になっていた Svelteを触ることにしました！ Svelteの紹介記事では、「Vue.jsと構文が似ているため習熟が簡単」「Vue.jsの50倍早い」みたいなところにフォーカスされることが多いかなと思いますが、本記事ではSvelteのTutorialをやるなかで、フレームワーク(ライブラリ)の機能として普段Vue.jsを利用している私がおもしろいなーと思ったものをご紹介したいと思います。 Svelteとは 基本文法 特徴的な機能 propsやclassの省略記法 Await Block React
�SvelteのStore入門 | RE:ENGINES
はじめに 前回の記事では、Svelteの概要について紹介しました。そこで、今回はSvelteのStoreについて、どのように定義してどのように使用するかを紹介します。 SvelteにおけるStoreの概要 始めに、SvelteにおけるStoreについて、概要を説明します。 Storeの条件 Svelteでは、以下の条件に当てはまるものがStoreとみなされます。 constとして定義されている subscribe関数および、unsubscribe関数が実装されている また、subscribe関数および、unsubscribe関数には、それぞれ守るべき条件が定められていますが、ここでは割愛します。詳しく知りたい方は、こちらを参照してください。 Storeの種類 Svelteでは、できることが異なる3種類のStoreが定義できます。 writable（値の更新および取得が可能） readabl
SvelteKitのデフォルトプロジェクトから学ぶ | フューチャー技術ブログ
ウェブアプリケーションフレームワークとして最近注目度が少しずつ上がっているのがSvelteです。以前、Svelteをちょびっとサンプルを触ってみた感じ、コードの雰囲気は<script setup> 版のVue 3っぽいなー、という感じです。あとはプロパティ入力のあるコンポーネントでHTMLを生成するという基本構成はReactもAngularもみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。 1コンポーネントでおさまる範囲ではちょっと前にかんたんなアプリの試作をしてみました（毎週何回も使ってるので手間の割に活躍してます）が、じゃあ、一本分のアプリを作るときはどうなんだ、ということでSvelteKitでプロジェクトを新規で作ってみたけど、いろいろな未知の要素がでてきて、これはどうなんだ？ というのをドキュメントから探す、という学び方もまあ
Svelteで使えるUIコンポーネントライブラリをまとめてみた - Qiita
はじめに Svelteで使えるUIコンポーネントライブラリを調べたのでまとめます。 新しく出てきたライブラリを追加したり、1年以上メンテナンスされていないライブラリは削除していきます。 Svelte Material UI サイト：https://sveltematerialui.com/ GitHub：https://github.com/hperrin/svelte-material-ui Skeleton サイト：https://www.skeleton.dev GitHub：https://github.com/Brain-Bones/skeleton Melt UI サイト：https://www.melt-ui.com/ GitHub：https://github.com/melt-ui/melt-ui Flowbite Svelte サイト： https://flowbite
SapperでSCSS（や他のCSSプリプロセッサ）を使う方法 - Qiita
最近マイブームの Sapper （ Svelte ）ですが、 Nuxt の時のように SCSS が使いたくて調べたわけです。 （Sapperのインストールは こちら を） 標準ではSCSSは使えない SCSSをはじめ、Less、StylusなどのCSSプリプロセッサはSapper単体ではサポートしていないようです。 （ :global() を駆使して......という方法ができなくはないみたい） ちなみに、SapperのIssuesに似たようなものがあがっていました。 Global SASS/SCSS/Less/Stylus support #474 NuxtアプリケーションからSapperにコンバートするのでBulma使えないとこまるーみたいな感じです。 このIssuesのなかに、 For SCSS support you might want to have a look at htt
Svelvet
Build interactive, node-based UIs and diagrams in Svelte Svelvet is a lightweight component library for building dynamic, customizable node graphs Beautiful and Customizable Svelvet allows you to easily create intuitive user interfaces and diagrams with pre-built components with node-to-node data flow, seamless zooming and panning, customizable edges and nodes and more! Learn More Get Started Easi
Svelte と Sveltekit を触ってみた
記事を書いてから1年半ほど経過した現在（2022年11月）でも稀にいいねをいただきます。ありがたい限りですが、sveltekit は v1 のリリースがまだであり、本記事に書いてあることは変更される可能性があります。（実際にもうすでに動かない構文もたくさん含まれています） そのため、正確な情報が得たい場合には sveltekit のドキュメント を参照するようお願いします。 追記(2022年12月15日) sveltekit v1 リリースされました！🎉 はじめに こんにちは、久しぶりに Zenn に記事を書くので手が震えてます。 うそです、ZennZenn 緊張してません。 最近、個人ブログ を Sveltekit で作り直しました。 ※自分用メモとしての側面が強いかもしれません。 ということで Svelte と Sveltekit についてまとめていきます。 Svelte とは Sv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Svelte3で問い合わせフォーム作ってみた!｜Svelte｜Javascript｜開発ブログ｜株式会社Nextat（ネクスタット）
Engineering Education
Svelte入門
@storybook/cli - Storybook
svelte-preprocess/docs/getting-started.md at main · sveltejs/svelte-preprocess
AutoAnimate - Add motion to your apps with a single line of code
