svelte

はじめに Svelte+SvelteKit の環境がコマンド 1 つで構築できるので、その構成を軽く見てみようと思います Web フレームワークのSvelteKitはSapperの後継で将来的にこちらに置き換わります この記事の@sveltejs/kitのバージョンは1.0.0-next.151です まだ β 版です セットアップ npm init svelte@next Project-name インタラクティブに環境をセットアップできる 以下を選択 Which Svelte app template? SvelteKit demo app Use TypeScript? Yes Add E…

Svelte 公式の TypeScript 化したプロジェクトで、.svelte テンプレート内で自作の TypeScript ファイルをインポートしたらコンパイルエラーになってしまいました。 Svelte の TypeScript 化 公式のテンプレート README に書かれているスクリプトを実行しただけ $ npx degit sveltejs/template svelte-app cd svelte-app $ node scripts/setupTypeScript.js 環境 "svelte": "^3.0.0", "typescript": "^4.0.0", "rollup"…

LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定するのにちょいハマったのでメモ。 Svelte プロジェクトの作成 $ npx degit sveltejs/template my-project $ cd my-project $ npm install # TypeScript 化 (設定勝手にやってくれる) $ node scripts/setupTypeScri…

こんにちは。 SaaS Product チームの板倉です。 SaaS Productチームでは開発運用しているサービスのマイクロサービス/マイクロフロントエンド化を進めています。 マイクロフロントエンドを実現する技術として採用しているフレームワークはAngular(TS, Dart)、Vue.js、Reactとなっています。 どれも素晴らしいフレームワークだと思いますが、私たちが進めているマイクロフロントエンドのやり方だと他にも良いフレームワークがあるんじゃないかと感じることがありました。 以前から気になっていたSvelteをブログにまとめながら自分でもキャッチアップしてみようと思ったのが今回…

morishitaです。 今回は JavaScript の UI フレームワーク Svelte を紹介します。 アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。 プロジェクトの初期化から、次を使えるようにするまでを書きたいと思います。 typescript pug sass jest eslint Svelte とは Web フロントエンド開発のための UI フレームワークです。 2019 年にリリースされた Svelte3 で大幅にアップデートされたようです。Vue の SFC によく…

いつものtaanatsuです。 今日は、Electronの代替（に、なるであろう）Rust製の クロスプラットフォームデスクトップアプリケーション作成フレームワーク 「TAURI」で遊んでみましょう。 Electronに変わる、つまり、HTML/CSS/JavaScriptでUIを組めるということです！ さらにさらに、TAURIはChromiumを使わずOSが備えているWebViewの機能を用いるため、吐き出されるファイルも軽量になるようです！ 胸熱ですね！！ そして今回、Windows版の記事はあったので、それを見ながらMacでやっていきます。 それではやっていきましょうか。 事前準備 Ru…

こんにちは、あるいはこんばんは(アーニャ声)。 突然ですが認証認可周りの設計・実装は毎回全然違った要件に沿って違った感じでやっていく感じになるのでおもしろいですよね。 この記事では、先日Musubi Insightチームが社内向けに作成したコンソールの設計・実装について認証認可周りに絞ってまとめたいと思います。 認証認可はCognito User Groupベースで実装したのですが、意外とネットの情報が少なかったので参考になれば幸いです！ なおブログ中に登場する画面のスクショについてなのですが、普段フロントエンドをほぼ触らない筆者がサクッと作ったものですので、デザインなどあれな部分もあるかと思…

この活動は自分個人の趣味であり、所属する企業や組織の立場、戦略、意見を代表するものではありません。 こんなの作ってました。たのしかった(小並感 milliooon.ryusa.app リリースしてからしばらく経ったので、少し技術的な選定の話とかをまとめておきます。尖ったことはあまりしてないのでアレですが……🤔 Question. そもそもなんで作ったの？ Answer. 久しぶりにフロントエンド作りたかったから🤪 ここ最近はKubernetesやDNSなどのインフラストラクチャーばかり触ってたので、たまにはリフレッシュしたいな〜と…… 要件と技術選定を進める 今回の要件はこんな感じでした。個人…

React.jsに関するQ&A(よくある質問)をまとめました Reactでお困りの際はこの記事で問題解決を試みて下さい。 これらの質問はReact初学者が質問する、よくある質問をまとめた記事となります。 ※注意点 当記事の質問に対する回答は、必ずしも最善の方法という訳ではございません。 最も簡単で適切な方法を解説しております。 Reactよくある質問 最も多い質問 機能に関する質問 関数コンポーネント(フック)に関するよくある質問 クラスコンポーネントでよくある質問 最後に Reactよくある質問 最も多い質問 Reactとは何ですか？ Reactは2013年にFacebookのソフトウェアエ…

ちょっぱやだと噂の Vite で React のプロジェクトを作ってみた素振りのメモ Vite とゎ？ 昨今の巨大な JavaScript のプロジェクトはモジュールバンドルのパフォーマンスがボトルネックになってきていた。 従来のものは更新頻度の少ないファイルも全てバンドルして提供していた。 開発サーバーでは10倍から100倍高速である esbuild を用いて依存関係を事前にバンドルし、 native ESM を利用することで頻繁に更新されるファイルを Dynamic import するようにして高速化させている。 Production ではコード分割やCSSの処理が成熟している Rollu…

Astro のコードを読む Part.1 - console.lealog(); この続き。概況について把握できたので、次はCLIのコマンドを読んでいく。一ヶ月でバージョンが`1.0.0-beta.9`から、`1.0.0-beta.27`になっており・・・、この時点でのハッシュは`9ef92e0a3d604c479bb325eab073e7d3c896d388`でした。さて、CLIで利用できる主なサブコマンドは次のとおり。 `add` `docs` `dev` `build` `preview` `check` `telemetry` `check`と`dev`と`build`以外は、自明なの…

フロントエンドフレームワーク関連で、人によって読み方に揺らぎがある子達。 会話していて本当に同じものを指しているのか不安になったので一般的な読み方と用途を整理しておく Next.js：ネクスト.ジェーエス（React系） OSSのSPA/SSR開発用Webアプリケーションフレームワーク。TypeScriptで書ける。 公式：https://nextjs.org/ GitHub：https://github.com/vercel/next.js Nuxt.js ：ナクスト.ジェーエス（Vue.js系） OSSのSPA/SSR開発用Webアプリケーションフレームワーク。TypeScriptで書ける…

つまり、名前付きスロットを`.astro`なコンポーネントで使うとき、 --- import Layout from "..."; --- <Layout> <h2 slot="after-header">After header</h2> <h2>Default slot</h2> <h2 slot="after-footer">After footer</h2> </Layout> これが想定通りに動作するのは、`Layout`コンポーネントも`.astro`のときだけ、という話。たとえば`Layout`コンポーネントが`.svelte`だったりすると、名前付きスロットに渡したコンポーネン…

「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTMLのこれからについて考えていることをまとめたものである。 本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。 creators.bengo4.com

なぜReactはテンプレートを使わないのか JSファースト(思想) ReactではJavaScriptで一貫してviewのレンダリングも行います。 JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。 HTML テンプレート派 AngularJS、Angular、Vue.js、Ember.js、Aurelia、Svelte など JS ファースト派 React、Preact、Mithril、Cycle.js、hyperapp など JSファーストのメリット 決まりごとが少なく、JavaScriptの表現を活用してより短いコ…

GitHub - withastro/astro: Build fast websites, faster. 🚀🧑‍🚀✨ 読みはじめた時点でのコミットは`21926278ba664d8362694efe51943968dfcb4b26`で、バージョンでいうと`1.0.0-beta.9`です。（めちゃめちゃ頻繁に更新されるので、今はもう最新ではないはず）