Vueアドベントカレンダー23日目の記事です🎄 はじめに こんにちは！ ねぎなす（@neginasu_grid）です。 普段のお仕事ではReactを使っていますが、Vueのコミュニティに関わることが増え、もっと知りたい！と思い勉強を始めました🙌 そこで、今回はVueを勉強し始めて詰まったこと・疑問に思ったことをまとめてみました。 Options APIとComposition APIとは？ まず最初に 「どんなところが違うのか？」 「どちらから勉強すれば良いのか」 と言う疑問を持ちました🤔 Options APIとは Vue2まで採用されていた方法で、公式には Options APIでは、data、methods、mounted といった数々のオプションからなる 1 つのオブジェクトを用いてコンポーネントのロジックを定義します。 これらのオプションによって定義されたプロパティには、コ
Vue.js最新動向 by @kazupon — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 ではVue.jsの最新動向ということで、話していきたいと思います。早口の紹介になりますが、スライドは後日じっくり読んでいただければと思います。 まず自己紹介なんですけども、@kazuponと言います。PLAID株式会社というところで働いています。 Vue.jsのコアチームメンバーで、Nuxtのコミュニティチームに参加していたり、Vue.js日本ユーザーグループのオーガナイザーもしています。
Evolving flat config with extends - ESLint - Pluggable JavaScript Linter
When ESLint v9.0.0 was released in April 2024, we enabled the new configuration system by default. We knew that there would be a period of challenges as the ecosystem switched over. In the ensuing months, we reviewed feedback and released compatibility utilities and the configuration migrator to help ease some of the transitional pain. Slowly, we started to see people migrating to the new configur
Announcing pkg.pr.new
Announcing pkg.pr.new We’re excited to introduce pkg.pr.new, a GitHub app to get instant preview releases of your packages. It allows your contributors and users to test continuous releases of each commit in your project’s main branches and on every Pull Request! We built pkg.pr.new to provide developers with a faster way to work together to test and validate changes. Currently, there is a lot of
AWSインフラ構築時のエラー対処備忘録 ECSコンテナサービスを作成中、バックエンド（Rails、Nginx）のサービス作成時に発生したエラーについて記録します。具体的には、NginxのCloudWatchログに以下のエラーが発生しました。 connect() to unix:///app/tmp/sockets/puma.sock failed (111: Connection refused) while connecting to upstream, client: 10.0.3.73, server: localhost, request: "GET /api/v1/health_check HTTP/1.1", upstream: "http://unix:///app/tmp/sockets/puma.sock:/api/v1/health_check", host: "10.
Hono Conference 2024参戦レポート
こんにちは、あさひです。 今回はナウでイケてると話題？の Hono のカンファレンスに潜入してきましたので雰囲気やどんな流れだったかをまとめようと思います。 Hono🔥 って？ Hono - means flame🔥 in Japanese - is a small, simple, and ultrafast web framework built on Web Standards. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. 公式のドキュメントには上記のようにあります。 様々なランタイムで動く Web 標準のシンプルで高速なフレームワークです。 筆者自身
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう 2024.05.26 SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。 SvelteKit は、Svelte と Vite で構築されたフレームワークです。SvelteKit と Svelte の関係は、Next.js と React、Nuxt.js と Vue.js の関係に似ています。SvelteKit は Web アプリケーションを開発するために必要な以下の機能を提供します。 ル
【Cloudflare】Cloudflareが公開した2024年のインターネット年次レビューが興味深い - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Cloudflareが先日Year in Review 2024という年次レビューを発表しました。 Cloudflareにホストされているデータ、DNSリゾルバ1.1.1.1、そしてそれ以外の様々な指標を元にインターネット全体での様々な情報を分析した調査報告ということです。 Year in Review 2024 Internet Traffic Growth 昨年比のインターネットトラフィックです。 昨年に比べて17.2%増加しました。 8月まで前年と同じくらいなのに、その後急激に増えてますね。 Internet Services 1
Storybook 8.5 is packed with powerful features to enhance your development workflow. This release makes it easier than ever to build accessible, well-tested UIs. Here’s what’s new: 🦾 Realtime accessibility tests to help build UIs for everybody 🛡️ Project code coverage to measure the completeness of your tests 🎯 Focused tests for faster test feedback ⚛️ React Native Web Vite framework (experimen
[[toc]] It's not a secret that open-source projects are now a critical part of almost every software project. While most open-source projects are maintained by volunteers, the sustainability of these projects becomes a big concern. The recent xz/liblzma vulnerability accident is a great example that shows the importance of open-source projects and how severe the problem could be. There are multipl
- Nuxt Tutorial
GuideFilesEditorInitializing WebContainerMounting filesInstalling dependenciesStarting Nuxt serverWaiting for Nuxt to readyTerminal
こんにちは、keigoです。 先日リリースされたNuxt3.12では、Nuxt4 Opt-inの機能が提供されています。 今回は、Nuxt4 Opt-inに移行する際の手順や概要をご説明するとともに、Nuxt4 Migrationにかかるコスト感を掴んでいただければと思います。 Nuxt4変更点について Nuxt4の重大な変更として、デフォルトのディレクトリ構造変更があります。(後方互換性あり) これまでアプリケーションルートに存在していた components/, pages/, assets/, ...などといったディレクトリが、app/配下にまとめられるようになりました。 Nuxt3のディレクトリ構造 .output/ .nuxt/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/
この記事は、📅 Vue Advent Calendar 2024 の 14 日目の記事です。 1. はじめに はじめまして、haba です。 Vue 3 から登場した「Composable」をご存知でしょうか？ Vue アプリケーションの文脈で「コンポーザブル（composable）」とは、Vue の Composition API を活用して状態を持つロジックをカプセル化して再利用するための関数です。 （公式ドキュメントより） Composable は、状態やロジックを簡潔にまとめ、再利用可能な形で Vue コンポーネント間で共有できる便利な仕組みです。例えば、VueUse のようなライブラリには、数多くの便利な Composable が提供されています。これらを活用することで、開発効率を大幅に向上させることができます。 この記事では、Composable の「使い方」ではなく、「内部
Nuxt Scripts provides better performance, privacy, security, and developer experience for third-party scripts. The Nuxt team, in collaboration with the Chrome Aurora team at Google, is excited to announce the public beta release of Nuxt Scripts. Nuxt Scripts is a better way to work with third-party scripts, providing improved performance, privacy, security, and developer experience. Getting to Nux
WordPress + Vue.js 3.2 + TypeScript の開発環境を Docker Compose を使って用意する
Vue.js を使っていると Firebase のような BaaS だったり Serverless な環境ばかりになっていて、バックエンドの環境構築をする機会がしばらくありませんでした。 久しぶりに WordPress を扱うことになり、せっかくなので利用機会の少ない Docker Compose を使って環境構築をしようかなと。 WordPress で構築したサイト内で JavaScript で実装したい機能がいくつかあるので Vue.js 3.2 を動かすところまでやってみましたので一連の流れを記録しておきます。 環境構築の全体的な流れ WordPress は Docker Compose で WordPress は PHP, MySQL で動作しているため、普段使いの Mac に 少なくとも MySQL を入れる必要があります。また PHP が入っていることは知っていますが、バージョ
AstroとヘッドレスCMSのビルド時間を短縮してみた
最近Astroを使い始めました。 以前はNuxtを使っていたのですが、Nuxtが使いづらいな〜と思っていた矢先にAstroはかなり開発体験も良く、ビルド時間も短縮できておそらく2024年時点では最高の静的サイト生成フレームワークだと思います。 実際にサイトを開発している中でページ数が多くなるとビルド時間が長くなる問題があるかと思います。 特に今回作ったサイトでは日本語、英語に加え、中国語、韓国語の計4つの言語に対応しなくてはいけません。 仮に、トップ、アバウト、プロジェクト(40ページ)、コンタクトの普通のコーポレートであれば生成されるページ数は100を超えます。 今回はそんなサイトのビルド時間を4.5m → 1mまで短縮した方法を備忘録として記載していきます。 前提条件 今回は以下の構成で実装しました。 node@18.18.2 Astro@4.16.6 microcms-js-sdk@
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
はじめに 2024年9月1日に Vue 3.5 がリリースされました。本記事では、Vue 3.5 で導入された新機能と主要な改善点について詳しく解説します。 公式ブログも合わせてご覧ください： Vue 3.5 の主な新機能 Reactive Props Destructure 新しい API の導入 useTemplateRef() onWatcherCleanup() カスタム要素関連: useHost(), useShadowRoot() Deferred Teleport Vue 3.5 の主な機能改善 Reactivity System の改善 SSRの改善 Lazy Hydration useId() data-allow-mismatch Custom Elements の改良 それでは、各機能について詳しく見ていきましょう。 新機能の詳細 1. Reactive Props
SPAにおけるアクセシビリティ課題について シングルページアプリケーション（SPA）は、1つのHTMLファイルに対してJavaScriptとWeb APIを活用して、ユーザーに素早いページ切り替えの体験を提供するウェブアプリケーションの一形態です。 しかし、SPAにはアクセシビリティの課題があります。例えば、視覚障害のあるユーザーが使うスクリーンリーダーという支援技術ではページが遷移したことを認識できないことがあります。これは、JavaScriptを使ってページを切り替える際に発生する問題です。 具体的には、ユーザーがあるページから別のページへ移動した際、スクリーンリーダーが新しいページに移動したことを認識しないことがあります。 この問題を解決するために、JavaScriptとWAI-ARIAという技術を使って、Route Announcerという方法があります。これを活用することでページ
Announcing Nuxt Content 3.0We are thrilled to announce the first stable version of Nuxt Content 3.0.0 ✨ 🚀 Performance ImprovementsNuxt Content v3 moves away from a file-based storage approach to an SQL database system. Using a database instead of the file-based storage reduces many I/O operations when querying large datasets. The new database system enhances the way your data files are stored and
1. はじめに この記事はNuco Advent Calendar 2024の20日目の記事です。 この記事では、2024年最新のフロントエンド開発に必要な知識を得られるおすすめ資料を初心者向けにまとめます。 これからフロントエンド開発を始めたい人はもちろん、ベテランエンジニアの方でも役に立つ情報もありますので、ぜひ目を通してもらえると嬉しいです。 2. フロントエンドの基礎 HTML Webページの構造を作る言語で、見出し、段落、画像、リンクなどを配置するために使います。 フロントエンド開発をする以上、ブラウザでHTMLを表示する、という仕組みから離れることはできません。少しでもHTMLの知識に不安がある人は、以下の資料で知識の再確認をすることをお勧めします。 文系大学生のためのHTML／CSS入門 HTMLとCSSの基礎はもちろんのこと、IT用語の注釈など情報系の知識がない人でもとても
Nuxt Scriptsを使用してGoogle Tag Managerを設定する - Pepabo Tech Portal
こんにちは、GMOペパボのkeigoと申します。NuxtアプリケーションでGoogle Tag Managerを設定する際、さまざまなモジュールが存在しており、かつNuxt3に対応しているかどうかが分からず困ったことはありませんか？ 今回は、公式が提供しているNuxt Scriptsを使用してGoogle Tag Managerを設定する方法をご紹介します。 ※Nuxt Scriptsは、記事執筆時点（2024年9月11日）ではパブリックプレビュー段階にあります。 Nuxt Scriptsについて Nuxt Scriptsは、サードパーティスクリプトを使用する際に、パフォーマンスやプライバシー、セキュリティ、そして開発者体験を向上させることが可能なNuxtモジュールです。 https://scripts.nuxt.com/ こちらの記事でもわかりやすく紹介されています ⬇️ https:/
Chrome 127 betaの公開など: Cybozu Frontend Weekly (2024-07-09号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/07/09のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 React & Codemod Announcement React 19への移行を支援するツール（codemod）が公開されました。例えば、次の移行作業を自動化してくれます。 Context.ProviderをContextに置き換え forwardRefの削除 useContextをuseに置き換え next-cache-toolbar Next.jsのData Cacheの中身を視覚的に見れるツールです。 Diving
Vue Fes Japan 2024 に参加してきた
こんにちは。 コワーキングスペース茅場町 Co-Edo の田中弘治です。 ここ数年、土日にCo-Edo以外で行われるイベントの参加はできていなかったのですが、ことしは参加できることになり、念願の Vue Fes Japan に参加してきました。 ちなみに昨年は個人スポンサーとしての費用は払いつつ、当日の参加チケットを購入しないという（おそらく僕だけであろう）形で応援していました。 そんなこんなで、はじめて参加できることになった Vue Fes Japan 2024 たっぷり楽しんできましたので、その一部をレポートいたします。 そもそも Vue Fes Japan とは Vue Fes Japan は、日本最大級の Vue.js カンファレンスです。 昨年、コロナ禍を経て5年ぶりにオフライン開催され、今年は会場を大手町プレイス ホール＆カンファレンスに移し、より大きな規模での開催となっていま
普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up
普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up
UIT INSIDE ep.158『プロダクトの負担を最小限に。複数サービスにまたがるUIコンポーネントのVue 3移行戦略』
@potato4d が @ytamemot に、PayPayカードと保険サービスにまたがるUIコンポーネントのVue 3マイグレーション戦略について話を聞きました。 About ゲスト紹介 tamemoto さん（デザインエンジニア） 2022年にヤフー株式会社に新卒入社、現在はPayPayカード株式会社に出向 マイグレーションの背景 Vue 2のEOLとセキュリティの観点からの移行必要性 PayPayカードのWeb版とミニアプリ版の両方でVueを使用 共通UIコンポーネントのnpmパッケージ化とそのマイグレーション マイグレーションの概要 約1か月半の期間で実施 機能開発と並行して行う 課題と解決策 カード側のVue 2からNuxt 3への移行 保険側のVue 2からVue 3への移行 ViteとWebpackの両対応の必要性 プロトタイプ機能を使った共通インターフェースの実装 特に苦労
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel. — Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第
Amazon Web Services ブログ AWS Amplify によるフルスタック開発の進化 高速でパーソナライズされた体験を提供するために、Web アプリケーションの構築とレンダリング方法は、長年にわたって大きく進化してきました。その過程で、Web アプリケーションを構築する開発者の役割も、この進化を反映して変化してきました。本記事では、フルスタックの Web 開発の進化過程と、急速に変化する Web アプリケーションエコシステムやユーザーのニーズに対し、開発者が AWS Amplify を使って適応する方法について説明します。 Server-Side Rendering の黎明期 1990 年代とインターネットの初期段階では、Web アプリケーションは主にサーバー側でレンダリングされるアプリケーションでした。これは、HTML ファイルがサーバーに格納され、ブラウザクライアントが
We've heard developers voice the same pain points time and again: it's hard to integrate your app's frontend with your backend, you need to tackle an ever-expanding technical scope in your daily workload, and it's tough to navigate the breadth of cloud offerings. While backend-as-a-service offerings provide an easy onramp, they often require developers to migrate away from them as their company sc
先日、Nuxt の公式から以下のようなブログポストがありました。 この中で、Nuxt4 が 2024/06 にリリース予定であるとの言及がありました。 また、合わせて変更予定の内容が以下から確認できるようになっていたので、簡単にではありますがまとめてみました。 利用者目線での注目すべき変更点 ※ 利用者とは、Nuxt を利用してアプリケーションを開発している人を指します。プラグイン開発者などは含まれません。 ディレクトリ構造の改善が特に大きな変更で、大抵の Nuxt プロジェクトで影響を受けるはず。 その他は小さな変更が中心。以下は利用者に関係がありそうな変更点であり、利用していたら影響を受けるはず。 Data fetching composables から params の削除 Data fetching composables の返り値から pending の削除 composable
GitHub - unovue/inspira-ui: Build beautiful website using Vue & Nuxt.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue初心者が勉強し始めて詰まったところの話🤔
AWSインフラ構築時のエラー対処備忘録 - Qiita
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう
Release v8.5.0 · storybookjs/storybook
Initiative on Sponsorship Forwarding
Nuxt4への移行はそんなに大変じゃなさそう！ (Opting in to Nuxt 4)
Vue の Composable、内部で何が起きてるのか追ってみた！
Introducing Nuxt Scripts · Nuxt Blog
Vue 3.5: パフォーマンスと開発体験を革新する包括的アップデート
SPAのアクセシビリティを強化するNuxtのRoute Announcer機能
Announcing Nuxt Content version 3
【保存版】フロントエンド初心者がまず読むべき資料まとめ【2024年最新】 - Qiita
なんでもSPAにするんじゃねぇ！という主張のその先 | Memory ice cubes
AWS Amplify によるフルスタック開発の進化 | Amazon Web Services
Introducing a New Fullstack TypeScript DX for AWS
Nuxt4 で予定されている変更点まとめ（2024/04現在）