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
タイトル通り、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 正式リリース直後ということもあって、かなり詳細な背
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
追記 コメントありがとうございます、ご指摘を参考に読みやすくなるように修正しました！ はじめに (本記事は初歩的な内容ですが、少なくとも僕は引っかかったので記事化したものです) Cookie に HttpOnly という属性があります。 この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。 ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。 いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！ いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが... ということで見ていきます。 実装例(
Announcing Vite 5
Vite 5.0 is out! November 16, 2023 Vite 4 was released almost a year ago, and it served as a solid base for the ecosystem. npm downloads per week jumped from 2.5 million to 7.5 million, as projects keep building on a shared infrastructure. Frameworks continued to innovate, and on top of Astro, Nuxt, SvelteKit, Solid Start, Qwik City, between others, we saw new frameworks joining and making the ec
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog
はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
Nuxt Auth Utils でサーバーサイドの認証を（OAuth・マジックリンク・ワンタイムパスワード）
Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの
バクラクの Vue3 移行戦略と詰まったポイント #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。LayerX バクラク事業部 バクラク申請・経費精算チーム エンジニアの @tatane です。 最近10万円超えのヘッドホンを買ってしまい、しばらく離れていたオーディオ沼にまた片足を突っ込んでしまいました。 この記事は LayerXテックアドカレ2023 21日目の記事です。前回は @serima が「LayerXの発信の"のびしろ"とCasual Nightのウラガワの話」を書いてくれました。次回は同じチームの @upamune が「エラーログ祭り改善の話」を書いてくれる予定なのでご期待ください！ 今回はバクラク事業部で進めている Vue3 移行の話をご紹介します。 バクラクの Web フロントエンドの技術スタックについて LayerX が提供している SaaS であるバクラクシリーズでは複数プロダクトを提供しており、それらの Web フロントエンドの技術スタックにはバリエ
Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"! This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new
【個人開発】ChatGPT × Text-to-Speech（Google）で知育サービスを作ってみた
概要 久しぶりに個人開発をしました！ 娘が「コペル」という幼児教室に通っています。 その幼児教室で「コペルギネス」というゲームがあります。 ゲームの内容は下記のようなゲームになります。 50個の(食べ物・動物等)絵が描いてある表を見て、順に作ったお話を先生がお話してくれます。それを２回聞いて、覚えます。自分の手元にも同じカードが５０個あるのでそれを子供が１人で回答用の表に順番通りに並べて貼っていくと言うゲームです。50個のカードのうち何個同じ場所に置けていたかを制限時間内に競います。正解した数が多かった人の勝ちです。 単語と単語にお話をつけ、繋がったストーリーでイメージすることで記憶しやすくする効果があるそうです。 このコペルギネスの練習をするとき、あらかじめ物語を作っておかないと、同じ絵を登場させてしまったり、答えを覚えていなかったりと結構大変なので、それを自動化するWebアプリを作りま
Co-Edo終了報告サイトをCloudflareで開発するとき使った NuxtHub がとっても便利！
こんにちは。田中弘治です。 僕は2013年よりコワーキングスペース茅場町 Co-Edoというのを運営してきているのですが、実はまことに残念なことに、ビル建て替えに伴い本年中に終了することとなりました。 これまでご活用いただいたみなさま、本当にありがとうございます。 その報告をする専用サイトを作ろうと思い、どうせならCo-Edoへのメッセージを送れるようなものをと考えてたところで Cloudflare を活用しようと思いました。 D1 や KV といったエッジで動く技術は今後広まっていくと思うので、今後 Cloudflare 中心の開発をしていくための準備でもあります。 作ったもの 1週間も2週間もかけてつくるものではないので、あっさりしたものを作りました。 作っていくうちに、いろいろやりたくなり、結果的につぎのような機能を持つサイトになりました。 メッセージを送る機能 今後の最新情報を受け
こんにちは！Vue.js 日本ユーザーグループ代表の kazupon です。 2023年10月28日(土)に中野セントラルパークカンファレンスでVue Fes Japan 2023を開催しました。 去年2022年はオンラインカンファレンス開催でしたが、今年2023年は COVID-19 が落ち着き、初開催した2018年より5年ぶりに日本でようやくオフラインカンファレンスを開催することができました。 当日多くの方に参加頂き、1日のカンファレンスを通して盛り上がりました。 協賛して頂いた各社、団体、個人スポンサーの皆様、スピーカーの皆さん、そして参加された皆さん、本当にありがとうございました。 カンファレンス開催から1ヶ月以上経ってしまいましたが、改めてカンファレンスを振り返ってみたいと思います。 レポート今年のカンファレンス参加状況ですが以下になりました。 全参加者数: 587名 一般参加者
以前（まだ Nuxt 3 がベータリリースだった頃）に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 （現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し
JSer.info #704 - WebdriverIO v9がリリースされました。 WebdriverIO v9 Released | WebdriverIO 新しい機能として、WebDriver BiDiのサポート、urlコマンドの追加、addInitScriptコマンドの追加、setViewportコマンドの追加、ShadowRootのサポートなどがあります。 また、emulateコマンドでClockのエミュレーションサポートや、要素がinteractiveになるまで自動的に待機する変更も含まれています。 Node.js v22.7.0がリリースされました。 Node.js — Node v22.7.0 (Current) 新しい機能として、--experimental-transform-typesフラグによるTypeScriptのenumとnamespaceの変換をサポートしまし
UnJS のライブラリ多すぎて結局何を使えば良いのかわからないという方は、とりあえずこの unkit を入れてみましょう。 31～40 31. 🛣️pathe ── あらゆる環境で統一的に使えるファイルパスモジュール resolve('../') のようなパス解決を行うモジュール。 node:path と同じようなことができますが、パスの区切りに使われる文字が、Windowsではスラッシュではなくバックスラッシュで書かれることがあり、どちらの書き方でも認識できるようになります。 第2引数でエイリアスを渡せる resolveAlias 関数なども提供されています。 ちなみに11/12時点で radix3 の Star数を抜いているので既に30位です。 32. 👂listhen ── HTTPリスナーを提供するパッケージ npx listhen -w ./index.ts のようなコマンド
はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights. ✨ Experimental shared asyncData when prerenderingWhen prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manua
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
What happens on June 30th, 2024?After this date, Nuxt 2 will continue to be available on the NPM package manager, but will no longer receive updates, such as security and browser compatibility fixes. In other words, your applications will continue to work, but you may get deprecation warnings from your package manager reminding you that Nuxt 2 is no longer a supported version. What’s Next?Nuxt 3 h
Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン
Dockerを使わない、Remix / Next.js 14 など最新ウェブフレームワークのAWS完全サーバーレス構成と環境構築方法 | ブログ | Serverless Operations
Remix / Next.js 14 など最新ウェブフレームワークをAWS Lambda にデプロイして、固定費のかからない完全サーバーレスな環境を構築する方法を紹介します。Dockerを使わなくてもできます。 SPA（Single Page Application）が主流だったフロントエンド開発トレンドがSSR（Server-side rendering）とエッジコンピューティングに向けた最適化が進むなど、多様化しています。開発手法自体は JavaScript / TypeScript をベースとしたフレームワークを利用することが多いと思いますが、AWSを利用したサーバーレスの文脈では、開発トレンドが SSR に変わっていくところに関して、少し悩みが出てくることもあるのではないでしょうか。 サーバーレスの定義を広げるとECS Fargate や App Runner のようなマネージドサ
Nuxt3のモジュール開発は意外と簡単？ | ドクセル
Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス
個人開発が失敗に終わった3つの理由
こんにちは、ネットではウマたんというハンドルネームで活動していて普段はスタビジというメディアやスタアカという教育サービスを運営しています。主に基本AIデータサイエンスについて発信する活動をしています。 最近は色んなサービス開発や海外事業の立ち上げに挑戦しているのですが、やっぱりそう簡単にうまくはいかない。ということで様々な挑戦をする中で失敗に終わったサービスについて自分のための備忘録もかねてつらつらと書き連ねていきたいと思います！ （正直失敗と書いてますが、サービス開発の厳しさを知るめちゃくちゃいい経験だったので失敗だとは思っていません。笑 どんどん失敗しよう！） いい感じにグロースしているサービスもあるのでそれについては別の回で書く予定です。 失敗したサービスTracky（トラッキー）とは Tracky（トラッキー）は自分の書いた記事を他の競合と比較して文字数を増やした方がよいよーとかキ
はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
はてなブログ独自の集計による人気記事のランキング。1月14日（日）から1月20日（土）〔2024年1月第3週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 AIにプログラミング作業を奪われている - k0kubun's blog by id:k0kubun 2 万城目学氏、直木賞を受賞する - この門をくぐる者は一切の高望みを捨てよ by id:Tomio 3 マンガ「神引きのモナーク」がとても面白い - 誰かの肩の上 by id:daydollarbotch 4 PostgreSQLの仕組みから学ぶために必要な資料 - そーだいなるらくがき帳 by id:Soudai 5 Amazonのデジタルコンテンツが保証期間1年（かもしれない）件 - 妄想科學倶樂部 by id:DocSeri 6 山崎元さんと「お金」と「怒り」について - いつか電池がきれるまで by id:fu
はじめに 早速ですが... :deep 機能について :deep 機能のつらいところ そんなあなたに PrimeVue PrimeVue の Pass Through 機能 Pass Through の利用方法 最後に 出典 はじめに こんにちは！ContractS株式会社の北原です。 フロントエンドのリードとして、プロジェクトの技術選定や品質保守等を担当しています。 早速ですが... みなさまは Vue 3 をお使いになられていますか？ これには、以前の Vue 2 と比較して多種多様な改善がふんだんに盛り込まれています。 2020/09/18 にリリースされてから暫く経っているので、実際の業務や個人で触られた方も多いと思います。 例えば、 Composition API の正式採用 script setup 構文の対応 メモリ使用量削減による負荷軽減 その他色々ありますが、以上のような
MedPeerの開発をしている栗崎 (Ryohei Kurisaki (@0ryo0ryo) / X )です。 11月7日(火)に弊社オフィスにて、MNTSQ株式会社、株式会社hacomonoと３社合同でVue Fes Japan 2023 After Meetup を開催しました。 5年ぶりのオフライン開催となった Vue Fes Japan 2023の感想や思い出を語り合いました。 セッションのハイライト メインセッション Vue Fes Japan 2023のオーガナイザーであるkazuponさんによる 「Vue & Vite Rustify」のお話でした。 まずはViteの現状の課題についてお話されていました。 productionビルドが遅い dev環境とproduction環境のbundleの一貫性がない ※ dev環境はesbuild, production環境はRollup
🏘️ Route GroupsWe now support naming directories with parentheses/brackets to organise your routes without affecting the path. For example:
Vue Fes Japan 2023 参加レポ
はじめに 2023/10/28 に東京都中野で開催された Vue Fes Japan 2023 に参加してきたので、レポート記事を書いてみようと思います。 今年の Vue Fes はコロナ禍以降初となるオフライン開催で、前回はなんと 2018 年だったようです。 （2019 年はコロナ禍以前ですが、運悪く台風と重なってしまって中止になっていたようです。） このレポートでは、各発表の詳細というよりも、全体を通して感じたことを中心に書いていきます。 各発表の資料は下記にできる限りまとめてみたので、ぜひご覧になって見てください。 発表者の方々のアカウントをフォローしたり、いいねをしたりして応援していきましょう！ 近いサポート終了 - 各社のマイグレーションとの戦い 今回の発表のうち、最も多かったテーマは Vue3 / Nuxt3 へのマイグレーションについてでした。 Vue2 は 2023年12
TypeScript 5.6の更新点など: Cybozu Frontend Weekly (2024-09-03号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年9月3日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Nuxt Bridge を活用して Nuxt 3 へ移行しました STORESがNuxt 3への移行を完了した旨を報告する記事です。2022年12月の報告の続編になります。 刷新における工夫点や、移行により得られた恩恵などが紹介されています。 Announcing TypeScript 5.6 RC TypeScript 5.6でリリース予定の新機能が紹介されています。 例えば、if文の条件文が常にtrue/falseのときに
Cloudflare R2についてことはじめ
はじめに 今回はCloudflare R2について今更ながら解説します。 この記事はHIKKYアドベントカレンダー3日目の記事です。 3日目の夜に書いてます。なんでや。 色々な記事が出る予定ですので是非ご覧ください。 2日目はSakamotoさんによるメタバースイベントサイト開発、Webアプリケーション開発、個人開発で得た、Nuxt3の「わがった！」と「わがんない」です。良ければこちらもご確認くださいませ また明日はFukuroさんによる「爆速デプロイ！？Cerebriumについて」についてです。こちらもお楽しみに。 Cloudflare R2について 要は「S3互換システム」のうちの一つで、Cloudflareがサービスを提供しているものです。S3互換システムを名乗っていることもあって、コマンドのほとんどの部分がS3クライアントと互換性があります。 小噺: 語源について Cloudfla
🚀 Testing Nuxt 4 changesNuxt 4 is on the horizon, and it's now possible to test out the behaviour changes that will be coming in the next major release (#26925) by setting an option in your nuxt.config file: As we've been merging PRs for Nuxt 4, we've been enabling them behind this flag. As much as possible we're aiming for backwards compatibility - our test matrix is running the same fixtures in
こんにちは。メルペイのフロントエンドエンジニアの@tokuda109です。 この記事は、Merpay Advent Calendar 2023 の15日目の記事です。 Merpay Advent Calendar 2020 の「Merpay Frontend のこれまでとこれから」という記事で、メルペイのフロントエンドチームが2020年までに取り組んできたチーム組成やプロダクトの品質改善の話が紹介されました。(以下、前回の記事) 早いもので前回の記事が公開されてから3年が経ち、当時からチームの状況は大きく変わり、チームメンバーの人数が半数以下になるという危機的状況も経験しました。 この記事は、前回の記事の続編として、2020年以降にフロントエンドチームが取り組んできたことを紹介すると共に、危機的状況を乗り越えた経験から長期的に安定したチーム運営を行う上で重要だと感じたことを説明します。 M
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js と Nuxt の 2023年まとめ
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
Vuex から Pinia への移行を行いました - every Tech Blog
VueFes Japan 2023イベントレポート | gihyo.jp
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ
Announcing Vue 3.4 | The Vue Point
Vue Fes Japan 2023 を開催しました！｜kazupon
Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）
2024-08-25のJS: WebdriverIO v9、Node v22.7.0(TS `enum`と`namespace`の対応)、Deno 1.46(Last 1.x)
UnJS にどんなツールがあるのかすべて紹介してみた（後編）
Nuxt Auto-imports機能の深淵を求めて
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Nuxt 3.10 · Nuxt Blog
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Nuxt 2 End-of-Life (EOL) · Nuxt Blog
Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog
Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
【JavaScript】JavaScript ライジングスター 2023 - Qiita
今週のはてなブログランキング〔2024年1月第3週〕 - 週刊はてなブログ
【Vue.js】Painless なコンポーネント開発のプラクティス - ContractS開発者ブログ
Vue Fes Japan 2023 After Meetupを開催しました！ - メドピア開発者ブログ
Nuxt 3.13 · Nuxt Blog
Nuxt 3.12 · Nuxt Blog
Merpay Frontend のこれまでとこれから: 2023年版 | メルカリエンジニアリング