Web業界のゲームチェンジャー!?今更だけどSvelteに入門してみた - iimon TECH BLOG

2024/12/10 21 users ゲームチェンジャー iimon tech blog

はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です。 本記事はアドベントカレンダー10日目の記事になります！ 自分が参画しているプロダクトでは普段FWを使っていないのですが、せっかくのアドベントカレンダーなので普段やらないことをやりたい！ということで、少し(?)前から... 続きを読む

よりシンプルになる Svelte の世界

2024/05/24 19 users 設計方針 機能 世界

Svelte v5 で追加された機能を通じて、Svelte の設計方針がどのように変化したのかについて紹介いたします。 続きを読む

TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)

2024/04/24 14 users コンパイラ フレームワーク プレゼンテーション HTML 強化

このPDFは、Svelteというフロントエンド開発フレームワークに関する最新情報を提供するプレゼンテーションの内容をまとめたものです。主な内容は以下の通りです： 【Svelteとは】 HTMLのスーパーセットを使った、コンパイラを活用するフレームワークで、軽量なランタイムをエンドユーザーに提供します。 【チームの強化... 続きを読む

５年生の時にパソコン購入を反対され、それでもプログラミングがしたくてBASIC言語の入門書を見ながらノートにコードを書いてた話

2024/04/05 27 users BASIC言語 プログラミング ノート PMO コード

Kazuyuki @kazuyuki Genies, Inc.｜マイクロSaaSの開発・運営｜PMO - 上場企業含む3社｜生成AI導入支援｜PHP, Svelte, Python｜J.S.A. Wine Expert (2022) Kazuyuki @kazuyuki ５年生の時にパソコン購入を反対され、それでもプログラミングがしたくてこっそり買ったBASIC言語の入門書を見ながらノートにコードを書いてま... 続きを読む

新しい UI テストの手法を提供するテストライブラリ SafeTest

2024/02/25 100 users React angular Jest playwright

新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの... 続きを読む

SvelteはなぜReactよりも優れているのか

2023/09/05 170 users React リアクティブ Vue 浮き彫り モチベーション

Svelte は比較的新しいフレームワークです。主に、仮想 DOM の課題が浮き彫りになってきた後で、それを解消しようというモチベーションで開発されています。なぜ Svelte が React や Vue などのように仮想 DOM を採用していにないのかについて、この記事でまとめてみようと思います。 読み書きしやすい：リアクティブな... 続きを読む

Sveltrisが公開 ー ReactとSvelteの「いいとこ取り」なフレームワーク

2023/07/24 7 users React フレームワーク ソリューション 強み 相互運用

7月21日、Sveltrisを使用して相互運用可能なReactとSvelteアプリを構築する方法が発表されました。 Sveltrisは、ReactとSvelteの独自の強みを組み合わせることで、より効率的でカスタマイズされたソリューションを提供します。 この記事では、Sveltrisの詳細な説明と、ReactとSvelteを組み合わせてアプリを構築する際の... 続きを読む

JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に

2023/06/27 130 users UIフレームワーク 大幅縮小 正式リリース パッケージサイズ

JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に JavaScriptのUIフレームワーク「Svelte」の最新版となる「Svelte 4」が正式にリリースされました。 https://t.co/9qz0sDglCe — Svelte 4 Ever (@SvelteSociety) June 22, 2023 Svelte... 続きを読む

2023-06-11のJS: Rspack 0.2、Modern CSS、polywasm

2023/06/11 8 users Loader output bundler rust Vue

JSer.info #647 - Rustで書かれたwebpack互換のbundlerであるRspack 0.2がリリースされました。 Announcing Rspack 0.2 - Rspack Plugin Hooksの追加、ESM形式のoutputに対応、SplitChunksPluginの実装、Data URIのサポートが追加されています。 また、Vue/Svelte/NestJSのloaderのサポートが追加されています。 Modern ... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users コンポーネントベース Twitter React CSS 反響

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

🌶️ IMHO 🌶️ - Rich Harris on frameworks, the web, and the edge.

2023/04/25 11 users whisper DeepL SvelteKit レビ The

この記事はSvelte/Sveltekitの作者であるRich Harris氏による講演「🌶️ IMHO 🌶️」を翻訳したものです。 この記事の作成には、Whisperによる書き起こし、DeepLおよびChatGPTによる翻訳を補助的に使用しています。 また、本文中には適宜訳注を入れています。 翻訳を許可していただいたRich氏、 またこの翻訳をきめ細かくレビ... 続きを読む

【SvelteKit入門】SvelteKit + Prismaによる掲示板アプリ作成 - RAKUS Developers Blog | ラクス エンジニアブログ

2023/02/09 8 users koki_matsura Prisma SvelteKit

こんにちは！ラクス１年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新... 続きを読む

jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード（基礎編）

2023/01/23 357 users jQuery React Vue 構文 jQuery使い

なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ず... 続きを読む

Qwik(City)を試してみた感想 - console.lealog();

2023/01/23 13 users Qwik 端切れ Kit City 待望

もとい、Svelte(Kit)なプロジェクトを、Qwik(City)で書き直してみての学び。 待望のやつではあるが、端切れの悪いタイトルなのは、移行途中でどうしようもなくハマってしまい、採用を見送ることにしたから・・😇 そういうわけなので、使い込んでみたわけでもまったくないし、最高！とか微妙・・・とかそういう判断という... 続きを読む

次世代のReact？ Solid.jsについて

2022/04/04 7 users React SOLID 上位 新しいライブラリ 最初

最初に Solid.jsとは Solid.jsとはReactに大きく影響を受けたライブラリであり比較的新しいライブラリです。私が興味を持ったのも2021年のState of JSを見て、Solid.jsの満足度が以下の画像のようにReactやSvelteよりも上位であること似驚き調べたからで、それまでは存在すら知りませんでした。 この記事の目的 Solidに... 続きを読む

SvelteでWeb Componentsを作成し、CDNから配布して使う

2022/01/20 11 users CDN スクリプト サードパーティー ブラウザ 以下

モチベーション SvelteでWeb Componentsを作りたい 作ったWeb ComponentsをCDNで配布して、ブラウザから読み込んで使えるようにしたい サードパーティーのスクリプトを作るのにSvelteが適している理由は以下の記事にわかりやすくまとめられています。 SvelteでWeb Componentsをつくる CounterコンポーネントとClockコン... 続きを読む

高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？

2021/12/28 60 users React Vue 新星 アプリケーション 概要

本連載では、「State of JS 2020」でも注目されているJavaScriptフレームワークのひとつ「Svelte」について、その概要や魅力、Svelteを使用したアプリケーションの開発方法について紹介します。今回は、同じJavaScriptフレームワークであるReactとVueと比較しながら、Svelteの特徴と、2022年にSvelteを使うべき理由につ... 続きを読む

MapLibre, Svelte, Wikipediaデータを用いた地理空間情報可視化の事例 / MIERUNE Meetup mini #01

2021/12/16 16 users 事例

Transcript .BQ-JCSF �4WFMUF �8JLJQFEJBσʔλ�Λ༻͍ͨ� ஍ཧۭؒ৘ใՄࢹԽ�ͷࣄྫ .*&36/&�.FFUVQ�NJOJ����� ����������� !TPSBNJ ඪ௡܊ඪ௡ொ�໺෇܊ผւொʹͯࡱӨ ໺෇൒ౡ 
 ೔ຊ࠷େͷ࠭ᅏ .BQ-JCSF �4WFMUF �8JLJQFEJBσʔλ�Λ༻͍ͨ� ஍ཧۭؒ৘ใՄࢹԽ�ͷࣄྫ .BQ-JCSF �4WFMUF �8JLJQFEJBσʔλ�Λ༻͍ͨ� ஍ཧۭؒ৘ใՄࢹԽ�ͷࣄྫ GIS完全に理解した 初⼼者だけど 改め、 発表タイトル ܦݧ ࣗ ৴ 完全に理解した な... 続きを読む

Reactヘビーユーザーが思うSvelteの良いところ - Qiita

2021/12/13 16 users Qiita React Vue https 皆さん

はじめに https://svelte.jp/ 皆さんはSvelte使っていますか？ 私はReactやVueをよく利用していましたが、最近Svelteにハマっています。 Reactヘビーユーザーの私が感じた、Svelteの良いところ、改善してほしいところを挙げてみました。 Reactを使う上で特に不満があったわけでもないですが、Svelteに乗り換えてみると無... 続きを読む

末尾呼び出し最適化とJavaScript - Speaker Deck

2021/04/23 92 users Speaker Deck JavaScript はなし 趣味

Transcript 末尾呼び出し最適化とJavaScript 2021/04/23 - @kota_yata おれ Kota Yatagai (@kota_yata) 趣味でフロントエンド開発をしてます 暗号系結構好きです ブロックチェーンの勉強はじめました Svelte / Nuxt 2021/04/23 - @kota_yata 今⽇のはなし 再帰関数の最適化を⾏う「末尾呼び出し最適化」の説明をして、今... 続きを読む

Svelte + TypeScript のベストプラクティスを考える

2021/03/17 24 users TypeScript ベストプラクティス セマンティクス

なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌とし... 続きを読む

2020年もJavaScriptは進化、フレームワークやビルドツールでは有力な新顔も登場：CodeZine（コードジン）

2021/01/21 7 users TypeScript ビルドツール CodeZine 新顔

JavaScriptに関する年次調査の2020年版「State of JS 2020」が公開されている。 同調査では、2020年のJavaScriptにおける特筆すべき進化として、Optional ChainingやNULL合体による言語自体の改善や、TypeScriptの普及による静的型付けの普及を挙げた。 フレームワークに関しては、Svelteが急速にその地位を確立しつつあ... 続きを読む

サードパーティの極限環境向け Svelte

2020/12/21 12 users サードパーティ

この記事は、 Svelte Advent Calendar 2020 - Qiita の 22 日目です。 昨今では、フロントエンドの JS を減らす圧が強くなってきています。とくに来年 4 月に導入される Core WebVital は SEO に関わるため、 マーケティング文脈でもフロントエンドの改善施策として、パフォーマンスを上げる圧が強くなっています。 Goog... 続きを読む

Svelteとは | Zenn

2020/09/22 13 users React Zenn バンドルサイズ ライブラリ コミュ

はじめに 最近、フロントエンドでたまに聞く、Svelteというライブラリについての紹介記事です。 https://svelte.dev/ ReactやVue.jsのような宣言的にUIを記述できるので、簡単にWebアプリケーションやUIを作れる。かつ、バンドルサイズやランタイムが小さく、高いパフォーマンスが期待できるライブラリです。 まだコミュ... 続きを読む

Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note

2020/06/27 12 users redux Vuex Sumi 仮想DOM Style

Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） ... 続きを読む