はじめに こんにちは、がんがんです。 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でESLint Flat Configはどうすれば良い？ nuxt
はじめに こんにちは、がんがんです。 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 不要
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
平素よりOLTAおよびFINUX（INVOY）のサービスをご利用いただき誠にありがとうございます。 2023年11月7日（火）に判明した、弊社関連会社（FINUX）が提供するクラウド請求書プラットフォーム「INVOY」において特定の条件に該当した一部のユーザー様の顧客情報が他のINVOYユーザー様から閲覧できる状態になっていた事象について、恒久対応が完了しましたので再発防止策とあわせてご報告いたします。 本事象の解消に向けて2023年11月7日（火）18時10分より緊急メンテナンスのためサービスを一時停止しておりましたが、2023年11月8日（水）2時58分に復旧し、現在は通常通りご利用いただけます。 なお、他ユーザー様が閲覧できる状態にあった可能性がある情報は、ご登録のメールアドレス、ユーザー名、ユーザーの種別と権限（管理者か否か）であり、第一報よりお伝えの通り、クレジットカード情報など
Nuxt 3 に直接移行するか Nuxt Bridge を使うか
結論 以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。 コンポーネントやページ数が多く、比較的大きなアプリケーション Nuxt 3 へ移行するためのリソース（人員、工数）がない 上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。 はじめに Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。 Nuxt Bridge を使って Nuxt 3 へ移行する Nuxt 3 へ直接移行する Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。 Nuxt Bridge を使った方がいいと思うケース コンポーネントやページ数が多く、比較的大きなアプリケーション
Slides for Vue Fes Japan 2023
フロントエンドエンジニアの小林和弘です。 去年の 4 月に「Web アプリを 3 つ使ったサービスを 3 ヶ月でつくりたい」という話が降ってきて、無茶を現実にした話をします。 新規サービス「やくばと」で Workspaces のモノレポを使って、医療機関画面、薬局画面、患者画面の 3 つの Nuxt を構築しました。 やくばととは 医療機関、薬局、患者さまの間でやり取りされる医療機関起点の薬局向け処方せん画像事前送信サービスです。処方せんに関する業務負荷を軽減すると共に、患者さまの大きな負担である医療機関、薬局での待ち時間を軽減するということを主な目的としたサービスです。 医療機関、薬局の DX を進め、患者さまの負荷軽減に貢献できる素晴らしいサービスになっています。 開発チームでは医療機関、薬局、患者さまに提供している Web 画面をそれぞれ医療機関システム、薬局システム、患者システムと
Nuxt3 + 開発環境構築 + 基本 - Qiita
はじめに 公式ドキュメントをしっかり読もう。 なんとなくで始めても良いけど、結局、公式ドキュメントに戻ることが多かった・・・。 理解度によるんだろうけど。 ハイドレーション サーバーサイドレンダリング(SSR)などで事前にサーバー側で作られたHTMLを、JavaScriptで動的にしていくプロセスのこと。 ①サーバーサイドで作られたHTMLをブラウザが受け取る。 ②javascriptがサーバーサイドで作られたHTMLと期待しているHTML（ブラウザに表示されているHTML)をチェックする。 違っていれば、javascriptが再度レンダリングする。 ③期待するHTMLに対してjavascriptのイベントを登録していく。 個人的に詳細まで理解できていないので、SEOが心配なときはcurlでhtmlを確認するのが良さそうな気がする。（心配性） インストール node.jsのバージョンは、1
一休.com、Yahoo!トラベルのNuxtをNuxt3にアップグレードしました - 一休.com Developers Blog
CTO室プラットフォーム開発チームの山口(@igayamaguchi)です。 プラットフォーム開発チームではさらに内部でプロジェクトチームが分かれており、私はフロントエンド改善チームというチームでリーダーをしています。 フロントエンド改善チームでは主に一休.com、Yahoo!トラベルのフロントエンドの改善を行っております。 今回は一休.com、Yahoo!トラベルで使用しているNuxtのバージョンを2から3にアップグレードしたお話をさせていただきます。 一休.com、Yahoo!トラベルではトップページや検索ページ、ホテル・旅館の詳細ページなど主要なページのフロントエンドはNuxtで開発されています。 NuxtのバックエンドにはGo+gqlgenでGraphQLのサーバーを立てており、NuxtからはApolloを使用してバックエンドと通信を行っています。 このNuxtのバージョンは2とな
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
Node.jsのバージョンを16に更新した時にはまってしまったこと - RareJob Tech Blog
はじめに こんにちは。APP/UXグループの大谷と申します。 寒くなってきてグラコロが美味しい季節ですね。年がわりで発売されるデミグラスソースがかかっているバージョンより、ノーマルバージョンのグラコロが個人的には好みです。 バージョンといえば先日Node.jsのバージョンを更新した際に困ったことについて書いていきたいと思います。 何が起きたか 弊社では一部の機能の画面をNuxtを使って提供しており、server middlewareをBFFとして利用しAPIリクエストはserver middlewareを経由して投げられています。 (詳しい構成についてはこちらの記事に添付の資料をご参照ください) 今回はNode.jsのバージョンを v12 → v14 → v16に段階的に更新する作業をおこなっていました。(バージョンが一部歯抜けになっているのは依存関係の解消の関係でやりやすかったバージョン
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
祝 🎉 両方とも正式リリース！ GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
GEEKERS NITE #2 で発表したスライドです。 https://geekersnites.connpass.com/event/265046/
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
Announcing Nuxt 3.0 stableWe are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class TypeScript support and the result of more than two years of research, community feedback, innovation, and experiment to make a pleasant full-stack Developer Experience for Vue development to everyone. [Read M
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
概要 Nuxt3の開発環境をDockerを使って構築してみます。 ※ Nuxt3が正式にリリースしたので2023/2/1に最新版に更新しました。 環境 macOS Ventura 13.2 Docker version 20.10.22 Docker Compose version v2.15.1 成果物 GitHub 構成 今回は最終的に以下のような構成になります。 . ├── docker │ └── nuxt │ └── Dockerfile ├── docker-compose.yml └── front ├── README.md ├── app.vue ├── node_modules ├── nuxt.config.ts ├── package.json ├── tsconfig.json └── yarn.lock
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
Nuxt.js の既存プロジェクトの型チェックを厳格化した話 ～vue-tsc と tsconfig/strictest 導入までの道のり～ - ANDPAD Tech Blog
ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなものも少しずつ増えてきました。 そういった状況を改善するアプローチの1つとして、Nuxt.js の既存リポジトリにおける型チェックのルールをより厳しい設定に変更する、という取り組みを2ヶ月ほどかけて行いました。 今回はその取り組みにおける道のりを振り返って、苦労したことや良かったことなどを書いてみたいと思います。 導入を決めるまでの流れ きっかけは noUncheckedIndexedAccess を知ったことから 弊社のSlackにはtimes文化
この記事は何？ これは「Next.jsのISRを独自に実装する」という記事の続編になります。 この記事では、上で紹介しきれなかった、CSRなページ・SPAなコンテンツをスタティックなページに変換して配信するということについて紹介していきます。 前提となる情報は上の記事で述べられているため、まずはそちらをご覧ください。 全体像 上の記事にでも説明されていた概要図をそのまま引用しています。 本記事で説明するのは、Cloudflare Workers以外の部分です。 ここではオリジンをNext.jsにしていますが、Create React Appで作ったようなプレーンなSPAサイトでも構いません。 Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~ Workerとオリジンとの間にレンダリングミドルウェアを挟むことで、事前に代理レン
📝 Nuxt 3 公式ドキュメント 日本語訳
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
Nuxt Bridgeを使ったNuxt3の導入調査してみた - for Startups Tech blog
こんにちは。エンジニアの大野です。主にフロントエンド周りを担当しています。 去年の話題にはなりますが、2021年10月にNuxt3のベータ版がリリースされました。 Nuxt3beta 公式のリリーススケジュールでは、このブログを書いている2022年3月にrc版、 そして2022年6月には安定版をリリースする予定となっており、着々とバージョンアップへの準備が進められている雰囲気が伺えます。 弊社にもNuxt2の環境で運用しているプロジェクトがあるのですが、vue3のリリース直前に作成した環境であるため、Composition Api やTypeScriptは別途runtimeやbuildのモジュールを個別に入れたりしており、package.json やnuxt.config.ts の設定周りがやや煩雑になっていました。 Nuxt3ではこのあたりのモジュールが標準搭載されるということもあり、チ
はじめに こんにちは、メルペイフロントエンドチームの @tokuda109 です。 この記事は、メルペイフロントエンドチームで取り組んでいるパフォーマンス改善について紹介するシリーズ記事の第3弾の記事で、ブラウザ上の Nuxt.js アプリケーションの初期化処理について紹介します。 前回の記事のおさらい 前回の記事で JavaScript がブラウザ上でどのように処理されるのかを紹介しました。 マイクロタスクは、Promise の then 等のハンドラに実装されたコールバック関数を指します。 JavaScript のランタイムの振る舞いとして、マイクロタスクキューに積まれたマイクロタスクは1サイクル内で空になるまで JavaScript エンジンで優先して実行されます。 図1の Run Microtasks という処理ブロックは、Promise の処理が行われていて、他の処理をブロックし
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
ushironoko.me
ushironokoのブログです。技術・ゲーム・趣味・仕事など。
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 ユーザー待望の Nuxt 3 が公開されました。 （Vue 2 対応だった Nuxt 2 の Vue.js 3 対応版です） Nuxt 3 は、TypeScript のネイティブサポートをはじめとした開発体験の向上など、多数の改善がなされています。 もっとも注目したいのは Nitro によるデータ取得やレンダリング周りの機能向上があります。 Nitro により、いわゆる ISG （Incremental Static Generation インクリメンタル静的ページ生成）も可能です。Nuxt 3 は、とてもシンプルに（意識することなく）活用する
サイボウズフロントエンドエキスパートチームのウェブサイトを作りました | サイボウズ フロントエンドエキスパートチーム
こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って
Nuxt2をNuxt/Bridge対応したかった
yarn add nuxt-edge@latest yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge typescript npx nuxi prepare npx nuxi prepare で型定義生成後、プロジェクトに応じて nuxt.d.ts と nuxt-shims.d.ts を作る https://zenn.dev/link/comments/196aa7b7a89dca nuxt.config.js(ts) で defineNuxtConfig import { defineNuxtConfig } from '@nuxt/bridge'; export default defineNuxtConfig({...}) 型周りが変わっているものがあるので注意 buildModules から @nuxtjs/composition-
The Intuitive Vue Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 ↑私が10年以上利用している会計ソフト！ 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった頃にWordPressの勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPressでなくてもいい気がしてきていました。また、WordPressやPHPのバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsby
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
Vue.jsベースのNuxt.jsとReactベースのNext.jsは、人気のフロントエンドフレームワークとしてよく比較されますが、実際どんな違いがあるのか、様々な角度から表とグラフにまとめてみました。 2021/07/03、雇用需要比較の情報を更新しました。
2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
Nuxt Auto-imports機能の深淵を求めて
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
【INVOY】顧客情報流出に関するご報告とお詫び（続報3 再発防止策について） | OLTA株式会社
Deep Dive to UnJS and Nuxt 3
2ヶ月半で Nuxt サービスを 3.5 個つくった話 - メドピア開発者ブログ
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
Announcing 3.0 · Nuxt Blog
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
Nuxt3 × Docker環境構築（正式版） - Qiita
Nuxt 3 + TypeScript で状態管理（useState編）
Next.jsのISRを独自に実装する ~ レンダリングミドルウェアによるCSR/SPAサイトの高速化編 ~
Nuxt.jsの初期化処理について | メルカリエンジニアリング
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
Nuxt 3 を今すぐオススメしたい 15 のポイント
Nuxt 3 の useFetch() と useAsyncData() の使い方
Nuxt 2 - The Intuitive Vue Framework
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
ポートフォリオサイトをNuxt + Netlifyに移行しました
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた! - Qiita
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク