並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 1154件

新着順 人気順

Vue.jsの検索結果1 - 40 件 / 1154件

  • ViteでVueコンポーネントテスト用のカスタム属性を削除する

    はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか? Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい! そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;

      ViteでVueコンポーネントテスト用のカスタム属性を削除する
    • Vue Vaporモード近況 | gihyo.jp

      本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM(Virtual DOM, VDOM)と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM(V-tree)をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更(patch)します。 しかし、UIが複雑になってくると仮想DOMも大き

        Vue Vaporモード近況 | gihyo.jp
      • 静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築

        静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン

          静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
        • First-class Vue support with Volar and Storybook 8

          💡Summary: Storybook 8 integrates Vue’s official language tools to improve how Storybook generates controls and documentation in Vue Vite projects. Get started by upgrade your Vue Storybook docgen configuration today!Thanks to the great work of our Vue maintainers (Chakir, Lars, and Kasper), Storybook 8 significantly improves how we generate controls and documentation in Vue projects. We're using

            First-class Vue support with Volar and Storybook 8
          • Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト

            AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する

              Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
            • Vue 3.4

              Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)

                Vue 3.4
              • NuxtHub: Build full-stack Nuxt apps, on the edge.

                export default eventHandler(async (event) => { const database = hubDatabase() const blob = hubBlob() const kv = hubKV() // Do your magic here return { hello: 'world' } }) All you need to start shippingNuxtHub provides you with all the tools you need to build and deploy your Nuxt apps, on the edge with zero configuration.

                  NuxtHub: Build full-stack Nuxt apps, on the edge.
                • 【徹底比較】Vue.js と React でレンダリングされる値、されない値

                  *1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式(実行環境によって異なる可能性あり)。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you

                    【徹底比較】Vue.js と React でレンダリングされる値、されない値
                  • フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog

                    はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート

                      フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
                    • Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita

                      はじめに フロントエンジニア3年目(総エンジニア歴6年)を迎えるにあたり、Nuxt / パフォーマンス / SEO など、Web アプリケーション開発について、たくさん学んできました。 今回は、Nuxt におけるパフォーマンスにフォーカスした話を記事にしたいと思います。 きっかけとしては、下記の記事を読んだ時でした。 医療のマスターDBを爆速で検索するWebサービスを爆速で作った こちら、本当に素晴らしい記事でした。。。 上記記事を読んだ時、「Nuxt でも同じように爆速で稼働するアプリケーション開発が可能では?」と思い、すぐに手をつけました。 注意点 本記事は公開されてから月日が経つにつれ、Nuxt での情報は古いものとなっていくので、本記事を確認する際は公開日をしっかり確認していただければと思います。(ただ、キーワードとしては、バージョン関係なくヒントにはなるので、そう言ったものはキャ

                        Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita
                      • 【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】

                        【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか? この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない!自分で考えなさい!」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。

                          【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
                        • VueFireを使ってGoogleログインを実装する

                          // firebase.ts import { initializeApp } from 'firebase/app' const firebaseConfig = { // この中はfirebase consoleからコピペ }; export const firebaseApp = initializeApp(firebaseConfig); import { createApp } from 'vue' import { VueFire, VueFireAuth } from 'vuefire' import App from './App.vue' import { firebaseApp } from './firebase' const app = createApp(App) app.use(VueFire, { // imported above but could als

                            VueFireを使ってGoogleログインを実装する
                          • Vue Beginners について

                            🔰 Vue Beginners について みなさん初めまして! Vue Beginners です! この記事では、私たち Vue Beginners について紹介します。 🔰 Vue Beginners とは Vue Beginners は、Vue.js 初学者向けの情報を発信する Zenn アカウントです。 Vue.js の学び方や、Vue.js を使いこなすためのヒントなどを発信します。 主に、以下のような人に向けて情報を発信しています: 🎯 ターゲット これから Vue.js を学びながらエンジニアを目指す人 (業務経験なし) Vue.js をすでに使っているが、まだまだ初心者の人 (業務経験あり) ❌ ターゲットではない人 すでに Vue.js を使いこなしている人 すでに Vue.js 以外のライブラリやフレームワークを使いこなしている人 💁‍♂️ なぜ明確にターゲットを

                              Vue Beginners について
                            • Testing · Get Started with Nuxt

                              Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via @nuxt/test-utils, a library of test utilities and configuration that currently powers the tests we use on Nuxt itself and tests throughout the module ecosystem. InstallationIn order to allow you to manage your other testing dependencies, @nuxt/test-utils ships with various optional peer dependencies. For e

                                Testing · Get Started with Nuxt
                              • 新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog

                                ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ

                                  新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
                                • Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング

                                  2022年末に正式リリースされた Nuxt 3 ですが、数多くの強力な機能を備えており、リリース後にもマイナーバージョンアップを続けているため、意外と知られていない機能が眠っていたりします。 今回はその中でも、かなり多くの方がその恩恵を受けられるはずなのに、少し知名度の低い印象のある、Typed Pages 機能について紹介したいと思います。 Typed Pages とは Typed Pages は、<NuxtLink> や useRoute() などの Vue Router を利用したルーティング管理において、指定したパスが実際に存在しているかどうかを厳格にチェックしてくれるようになる機能です。 Nuxt 3 で型安全なルーティングを実現する方法として、Nuxt Typed Router というモジュールもありますが、これとは別に、実は追加ライブラリを入れなくても Nuxt 自体がビルト

                                    Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング
                                  • Vue.js と Nuxt の 2023年まとめ

                                    2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。 (数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します) 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision

                                      Vue.js と Nuxt の 2023年まとめ
                                    • 2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ

                                      JSer.info #675 - Vue 3.4 がリリースされました。 Announcing Vue 3.4 | The Vue Point Vue 3.4ではVueテンプレートのパーサーのパフォーマンス改善、watchEffectの改善、defineModelがStable APIに変更されています。 また、v-bindが同名の場合の省略記法を追加、Hydrationのエラー表示を改善などの変更も含まれています。 破壊的な変更として、global JSX namespaceの型を定義しないように変更、実験的な機能だったReactivity Transformの削除なども含まれています。 関連して、Vue 2.x は2023年12月31日にサポートが終了し、End of Life(EOL)となりました。 Vue 2 Has Reached End of Life 最終バージョンは2.7.

                                        2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
                                      • Nuxt 3.9 · Nuxt Blog

                                        Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more. A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄 We have lots of features packed into v3.9 and can't wait for you to try them out. ⚡️ Vite 5This release comes with Vite 5 and Rollup 4 support. Module authors may ne

                                          Nuxt 3.9 · Nuxt Blog
                                        • ライブラリを気軽に導入しないこと|Katashin

                                          本をよく読むエンジニアであれば、ライブラリの導入には慎重になるべきだということは共通の認識になっていると思う。しかし、どういったライブラリを導入すべきかという選定基準は自分の中ではまだ言語化できてないことに最近気がついた。絶対的な基準を設けるのではなく、ある程度柔軟に考えるべきだと思うが、自分がどう考えて選定するかを考えてみる。 品質 テストが書かれているか 自分のプロダクトでテストを書いているのであれば、ライブラリにもテストを求めるべき 長い間継続してメンテナンスされている(いた)か 急に出てきてセンセーショナルな売り文句で注目を浴びるライブラリは怪しむべき コードの品質は悪くないか 導入する前にライブラリのコードは読むべき 効果 その後の実装効率をどれだけ上げるか 導入しない場合と大して変わらないのであれば不要 自分でそれを書いた場合と比べてどうか 短時間で同じようなものを書けるのであ

                                            ライブラリを気軽に導入しないこと|Katashin
                                          • 一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

                                            宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理(composables)の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中(id:kentana20)です。 このエントリーは一休.com Advent Calendar 2023の14

                                              一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
                                            • TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説!

                                              本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS(コンパイルしてJavaScriptにする言語)であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散

                                                TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説!
                                              • Vue & Vite Rustify

                                                プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production

                                                  Vue & Vite Rustify
                                                • 「Vueって何?」から始めるVue.js入門 - Qiita

                                                  「Vueって何?」から始めるVue.js入門 はじめに ※この記事は「RUNTEQ Advent Calendar 2023」 の1日目に参加しております。 今年のテーマは 『 初めて学んだ技術 』とのことで、Vue.jsに触れてみました! ポートフォリオの技術選定の際、正直JSとReactやVueの違いもよく分からなかった経験から、今回は「Vueって何?」というところから記事を書いていきたいと思います。 本記事はエンジニア未経験者が、同じエンジニア未経験者に向けて「なるべく分かりやすく、イメージを掴むことができる」ことを重視して書いております。正確でない部分もあるかと思いますが、マサカリ大歓迎ですので、ぜひコメント欄にて補足や訂正をいただけますと幸いです。 で、Vueって何? 公式によると、 The Progressive JavaScript Framework Web ユーザーインタ

                                                    「Vueって何?」から始めるVue.js入門 - Qiita
                                                  • Nuxt DevTools v1.0 · Nuxt Blog

                                                    Since this release, Nuxt DevTools is now enabled with Nuxt v3.8 and onwards by default. Generally available to all Nuxt projects! You can start playing with it by upgrading to the latest Nuxt, and press Shift + Option + D (macOS) or Shift + Alt + D (Windows) in your browser to open the DevTools. By default the floating panel is hidden to reduce the distraction. You can enable it inside Nuxt DevToo

                                                      Nuxt DevTools v1.0 · Nuxt Blog
                                                    • Vue Fes Japan 2023 参加レポート - BASEプロダクトチームブログ

                                                      エントランスで集合写真を撮るBASE株式会社メンバーの様子 こんにちは。 最近めっきり寒くなってきて布団が恋しい季節になってきましたね。 皆さんはいかがお過ごしでしょうか。 さて、この度BASE株式会社は2023/10/28(土)に開催された Vue Fes Japan 2023 にシルバースポンサーとして協賛させていただきました。 今回は参加レポートとして会場の様子やセッションの感想についてお届けします。 Vue Fes Japan 2023とは Vue Fes Japan は 2018 年に誕生した日本最大級の Vue.js カンファレンスです。 今年は4年ぶりとなるオフライン開催となり、当日のセッションは立ち見が出るほど盛り上がっていました。 今年はゲストスピーカーとしてVue.js/Viteの作者であるEvan You氏やVueエコシステムのコアメンバーの方が来日し、キーノートやセ

                                                        Vue Fes Japan 2023 参加レポート - BASEプロダクトチームブログ
                                                      • UnJS にどんなツールがあるのか、上位30件すべて紹介してみた

                                                        タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう! という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背

                                                          UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
                                                        • 7 Quick Tips about Vue Styles You (Might) Didn’t Know

                                                          Single file components consist of three distinct entities: template, script and styles. All of them are important but the latter is often being neglected even though it can become complex and often cause frustration and bugs. A better understanding can improve code reviews and decrease debugging time. Here are 7 tips to help you with that: Styling Scoped And Slotted ContentScoped Selector Performa

                                                            7 Quick Tips about Vue Styles You (Might) Didn’t Know
                                                          • Vue.js

                                                            優先度B: 強く推奨 ​これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ​ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。

                                                              Vue.js
                                                            • Deep Dive to UnJS and Nuxt 3

                                                              Slides for Vue Fes Japan 2023

                                                                Deep Dive to UnJS and Nuxt 3
                                                              • Vue Fes Japan 2023 資料 X ポストまとめ

                                                                フロントエンドエンジニア。TypeScript と Vue をよく使っています。Storybook 大好き。フロントエンドの開発体験向上や品質向上に取り組んでいます。

                                                                  Vue Fes Japan 2023 資料 X ポストまとめ
                                                                • Vue Language Server から生まれた Volar.js と、それが秘める可能性

                                                                  Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。

                                                                    Vue Language Server から生まれた Volar.js と、それが秘める可能性
                                                                  • Figma でデザイン、そのままデモ、そのまま実装! - Qiita

                                                                    みなさん、デザインツールの Figma を使っていますか? 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位

                                                                      Figma でデザイン、そのままデモ、そのまま実装! - Qiita
                                                                    • AWS Amplifyを使ってWebサイト制作の開発工数削減する方法を解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

                                                                      Amplifyで開発工数を削減できる理由 Amplifyを使えば、「インフラ構築工数」「バックエンド構築工数」「フロントエンド構築工数」の削減が可能です。それぞれについて詳しく説明します。 インフラ構築工数の削減 まず、Amplifyのアプリケーションサーバー自体がサーバーレスアーキテクチャのため、インフラエンジニアによるプロビジョニングが不要となります。ただし、Amplify CLIを通じてのサービスの立ち上げは最低限必要となることに注意しましょう。 また、ミドルウェアレベルの物理サーバー管理もAWS側で実施可能です。アクセス過多が発生した際のスケーラビリティの管理や、ミドルウェアのセキュリティ管理(例:各種ミドルウェアのアップデートや脆弱性診断など)からエンジニアが解放されるため、工数削減につながります。 バックエンド構築工数の削減 コマンドラインでバックエンドを構築できるインターフェ

                                                                        AWS Amplifyを使ってWebサイト制作の開発工数削減する方法を解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
                                                                      • chibivue

                                                                        chibivueStep by Step, from just one line of "Hello, World". powered by VitePress

                                                                          chibivue
                                                                        • Vue 3 Vapor Mode News

                                                                          What is Vapor Mode? 🧐 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js. It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output. When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size. ✅ Benefits More performant Uses less memory Requires less runtime support code. Solid

                                                                            Vue 3 Vapor Mode News
                                                                          • 一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog

                                                                            ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ

                                                                              一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
                                                                            • 静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能

                                                                              静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ

                                                                                静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
                                                                              • Faster Vue.js Execution in Firefox – Mozilla Hacks - the Web developer blog

                                                                                Speedometer 3 is a cross-industry effort to build a modern browser benchmark rooted in real-world user experiences. Its goal is to focus browser engineering effort towards making the Web more smooth for actual users on actual pages. This is hard to do and most browser benchmarks don’t do it well, but we see it as a unique opportunity to improve responsiveness broadly across the Web. This requires

                                                                                  Faster Vue.js Execution in Firefox – Mozilla Hacks - the Web developer blog
                                                                                • Nuxt Server Components を試す

                                                                                  設定ファイルと app.vue だけのごく質素なプロジェクトが生成された(こんな感じ)。前はもっと色々なファイルがあった気がする。慣れている人には余計なものがなくてよさそうだが、Nuxt を初めて使うような場合は途方に暮れそう。 公式ドキュメントに貼られている動画の内容を再現していく。 0:53 まずは通常通りにコンポーネントを作る。 これはマークダウンの文字列を HTML にパースして表示するコンポーネントで、変換には markdown-it というファイルサイズが大きいライブラリを使う。 <script setup lang="ts"> import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const string = `# my component - markdown list - rendered a

                                                                                    Nuxt Server Components を試す