世界最速で Astro SSR を Amplify Hosting で動かしてみた - エムスリーテックブログ

2023/11/22 14 users アーキテクト SSR エムスリーテックブログ AWS 園田

こんにちは。エムスリーエンジニアリンググループのコンシューマチームでアーキテクトをしている園田です。 本日はコンシューマチームのブログリレー 1 日目です。 2023/11/20 (日本時間だと本日) に AWS の Amplify Hosting で Next.js/Nuxt.js 以外の SSR サポートが発表されました。 aws.amazon.com aws.amazon.com ... 続きを読む

package by feature のススメ

2023/10/29 38 users ススメ Components hook API page

# package by layer src/ ┝ page/ │ └ recordList/ │ └ Page.tsx ┝ components/ │ └ recordList/ │ ┝ DailyAverage.tsx │ ┝ Graph.tsx │ └ Table.tsx ┝ api/ │ └ recordList/ │ └ fetchRecord.ts └ hook/ └ recordList/ └ useRecords.ts ちなみに、nuxt.js はこの package by layer になっています。 package by feature... 続きを読む

Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた

2023/04/02 12 users Cloudflare Workers ORM Remix

Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。 Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を... 続きを読む

ペイトナー請求書のフロントエンドにスナップショットテストを導入した話 - Paytner Tech Blog

2023/03/02 13 users フロントエンド スナップショットテスト Jest 本稿 導入

はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドの品質改善の一つとして、最近実施したスナップショットテストの導入についてご紹介させて頂ければと思います。 この記事の対象読者 Vue.js / Nuxt.jsでJestのスナップショットテストを実装する... 続きを読む

Nuxt 3 アップデートで VeeValidate v3 から v4 に移行するには - ANDPAD Tech Blog

2022/12/05 9 users ANDPAD Tech Blog Nuxt 3 Vue 小泉

この記事は ANDPAD Advent Calendar 2022 の 5日目の記事となります。 ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。Vue / Nuxt.js での開発を行っています。 さて、Vue・Nuxt 界隈でこの年末ホットな話題と言えば、何といっても Nuxt 3 が正式リリースされたことではないでしょうか。 nuxt.c... 続きを読む

Nuxt.js の既存プロジェクトの型チェックを厳格化した話 ～vue-tsc と tsconfig/strictest 導入までの道のり～ - ANDPAD Tech Blog

2022/06/29 15 users tsconfig 道のり 既存プロジェクト 導入

ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなもの... 続きを読む

150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話

2021/07/26 29 users Next.js フェーズ 機能開発 仮説検証 フロントエンド

Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全... 続きを読む

Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）

2021/05/25 334 users React フレームワーク キカガク Vue.js ベース

はじめに 2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきまし... 続きを読む

Next.jsでページ共通の処理をする（useEffectを使う例）

2021/01/25 13 users Middleware TypeScr TSX カスタマイズ

Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScr... 続きを読む

設定不要でNext.jsとNuxt.jsの内部リンクを型安全に取得できる最強ライブラリ「pathpida」

2020/12/24 23 users frourio TypeScript製 Next.js 新作

Qiita TypeScript Advent Calendar 2020 最終日の記事です。 TypeScript製の内部リンク取得ライブラリ「pathpida」 最近ちょっと話題になった frourio と aspida を開発したSolufaです。 Zenn初投稿を記念して、新作ライブラリ「pathpida」を紹介します。 と言っても完全な新作ではなく、初回リリースからもうすぐ1年が... 続きを読む

最近のNuxt.js関係の仕事内容 - Lorem ipsum

2020/11/09 13 users Lorem Ipsum Rails タスク Note 現行

最近の Rails 関係の仕事内容 - r7kamura.com 最近の Rails 関係の仕事内容｜はっさんブログ｜ note を参考に、自分も書いてみます。 ここ最近は Nuxt.js を用いた開発の仕事をしており、新規機能開発や現行の機能の改修のほかに、開発体験をよくするためのタスクを消化していくことが多いです。 以下に、改善系のタスク... 続きを読む

Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル

2020/10/23 12 users AWS Fargate Ruby on Rails 備忘録

プライベートで、 Nuxt.js × Rails のアプリケーションを開発し、AWS Fargate にデプロイしました。そこで得た知見・学びを output し更に理解を深める & 備忘録として残しておこうと思い、この本を執筆しました！ 続きを読む

はじめに｜Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル

2020/10/23 15 users AWS Fargate Ruby on Rails 備忘録

はじめに ご覧いただきありがとうございます。 私は普段、Ruby on Rails を用いて開発しております。 プライベートで、 Nuxt.js × Rails のアプリケーションを開発し、AWS Fargate にデプロイしまして、そこで得た知見・学びを output し更に理解を深める & 備忘録として残しておこうと思い、この本を執筆しました。 環... 続きを読む

JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由 | potato4d D(iary)

2020/09/20 231 users iary dayjs 拙作 Moment.js Day.js

JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由 2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Da... 続きを読む

AWS LambdaとNuxt.jsでServer Side Renderingする（2020年版） - Sweet Escape

2020/09/18 13 users AWS Lambda Sweet Escape

サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。... 続きを読む

レガシーなフロントエンド環境をリプレースするためにチームでやっていること｜食べログ フロントエンドエンジニアブログ｜note

2020/08/31 17 users Note ロク フロントエンド環境 TypeScript 金野

はじめに はじめまして！食べログFE（フロントエンド）チームの金野と申します。 普段は、食べログフロントエンドの設計・開発や、新規事業・食べログテイクアウトの技術サポートなどを行っています。 食べログテイクアウトについては、Nuxt.js + TypeScriptの開発について記事を書いているので、興味がある方はぜひ御覧... 続きを読む

池田 泰延 / Yasunobu Ikeda on Twitter: "noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 Google

2020/08/14 164 users SSR 外野 引き金 Note 泰延

noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE 続きを読む

サーバーレスでサーバーサイドレンダリング 前編 - Sweet Escape

2020/08/07 10 users サーバーレス React Vue サーバーサイドレンダリング

はじめに サーバーレスアプリケーションにおけるフロントエンド SPAの課題 サーバーサイドレンダリング Jamtack サーバーフル? サーバーレス? サーバーレスでサーバーサイドレンダリング Nuxt.jsでの例 次回 はじめに サーバーレスでサーバーサイドレンダリングの話です。ReactとかVueを使ったシングルページアプリケー... 続きを読む

Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita

2020/07/14 90 users GAS Qiita Pwa API ガラケ

はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 （こちらからの声かけ後を含め）QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケ... 続きを読む

「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX(旧SCOUTER)開発者ブログ

2020/03/26 20 users ROXX コーポレートサイト SSR 旧SCOUTER 勘違い

back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、... 続きを読む

今あえてTypeScriptのビルド＆バンドルツールを探してみる | Future Tech Blog - フューチャーアーキテクト

2020/03/19 14 users TypeScript フューチャーアーキテクト React

ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています... 続きを読む

とても簡単にドラッグアンドドロップが実現できる Vue-draggable を使ってみた ｜ Developers.IO

2020/01/27 6 users meetup ドラッグドロップ ドラッグアンドドロップ 西田

西田@大阪です 以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Vue.js でドラックドロップでリストを入れ替えることができる Vue-draggable を使ってみました SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js プロジェクトの作成 Vue.jsのプロジェク... 続きを読む

Vue Fes Japan 2019 サイトのソースコードを公開した - 彼女からは、おいちゃんと呼ばれています

2019/12/25 11 users Qiita おいちゃん github.com https 彼女

この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している... 続きを読む

とあるラーメン店のWordpressサイトをNuxt.js+Firebaseで作り直した話 - Qiita

2019/11/15 36 users WordPress Qiita ご存じ https ラーメン

有名ラーメン店の Wordpress サイトを Nuxt.js で作り直した話 お店と Web サイトの紹介 中華そば四つ葉 https://yotsuba628.com/ ラーメンが好きならご存じの方もいらっしゃるのではないでしょうか。 最寄駅から徒歩 90 分という衝撃のアクセスの不便さ。 にもかかわらず多数の祭事出店、テレビ出演、都内から足繁く通... 続きを読む

【JavaScript】[第1回] Vue.js 入門 〜Hello World編〜 – 株式会社ライトコード

2019/11/11 80 users Vue.js 入門 JavaScript フレームワーク 宮田

Vue.js を始めてみよう！ 宮田 (株) ライトコード Webエンジニアの宮田です。 今回、 JavaScript のフレームワークの一つであるVue.js（ビュージェイエス） を触ることになったので、学習したことを書いていきたいと思います。 最終的には Vue.js に基づいたフレームワークの Nuxt.js（ナクストジェイエス） を利用した... 続きを読む