Nuxt3

こちらの記事は「コドモン Advent Calendar 2023」の 3日目の記事です 🎁 qiita.com こんにちは、コドモンプロダクト開発部の関根(せきねこ)です。Webアプリケーションエンジニアをしています。 突然ですが、みなさんはWebフロント開発のデバッグ、どうしていますか？ debugger *1 でブレークポイントを設定したり、 console.log *2 で値を確認したりしますよね。私も毎日のように使っています。 そこで今回は console.log での確認作業をちょっと楽しくしてくれるライブラリ consola を紹介します。 consolaとは セットアップ 基本…

概要 useFetch で key を設定せずに POST リクエストを送信する実装をしてみたら、 ボタンを何回押しても一度しかリクエストが送信されなくなってしまいました。$fetch を直接使ったり、 key を適切に設定すれば解決しました。 前提知識 TypeScript Nuxt 3 起きた問題 ログインフォームの submit イベントに、以下のようなイベントハンドラを登録しました。 const username = ref("") const password = ref("") const onSubmit = async () => { const formData = new …

日記です。 日記 写真は定食屋みたいなエニタイムフィットネス。 磨き残しが大幅に減ったらしく歯医者で褒められた。 残食料的に5kgの米を買わねばならずお金無いなあと思っていたが、間違えて10kgの値段を見ていたため1,500円ほどの余裕ができた。代わりにみりんや塩昆布を購入した。 動くマウスカーソルに反応するハエトリグモを擬似体験できるWebサイト作りました。 DailyCoding的な成果物、これらも単発の記事で紹介しようかなあ。SNSに投稿して無に消えていく感覚がもったいなく感じている。 審査員の立場の人は、自分はこれが良いと思ったからこれを勝ちにしたんだとはっきり意思表示して、みんな違っ…

よくある ChatGPT を叩くだけのサイトを作ってみる。 環境構築などは前回の記事を参照。 daichan4649.hatenablog.jp /pages/index.vue gist.github.com /server/api/chatgpt.post.ts gist.github.com nuxt.config.ts gist.github.com .env gist.github.com ここまで実装したらデプロイ。 yarn build npx firebase deploy ポイント .env へのアクセス nuxt.config.ts で .env を読み込む 各ソースでは …

どうも。フロントエンドのテックリードをやってるっぽい、みゅーとん(@_mew_ton)です。 nuxt で sentry を使う方法を調べると、 @nuxt/sentry (https://sentry.nuxtjs.org/) に行き着くことが多いかと思われます。 しかし、このライブラリは nuxt2 のみに対応しており、nuxt3 への対応は一向に進んでいない様子が見られます。 そこで、独自に対応しました。以下にその方法をまとめていきます。 TL;DR クライアントサイドは nuxt plugin、サーバサイド(SSR / api) は nitro plugin で実装する アクセス制限を…

ジョギングやボイトレ記録を Pixela でグラフ化 ついでにメモを Notion へ直接保存 週末にこんな LINE Bot を作ってみたら、自分には思った以上に実用的だった🙃 ジョギングをすぐサボっちゃうのを見える化して何とかしたい、Notion 公式アプリは重いのでメモとるのが面倒～と思いついたのがきっかけ。 アプリ名がださい Notion Pixela LINE で入力したらこんな感じで反映される。 (以下、プログラマ向けの内容です) Pixela について 活動記録などを GitHub のコミットログ (草) のように可視化してくれるサービス。 pixe.la API が非常にシンプ…

どうも、フロントエンドテックリードのみゅーとん(@_mew_ton)です。 TypeScript で型でガチガチに固めるのが好きで、よく業務時間内に型パズルを書いてます。 Nuxt3 の useFetch を OpenAPI ベースで型安全にする仕組みができたので、今回はその共有をします。 TL;DR 記事中の Gist をそのままコピーして利用してください. 以下の手順で型安全にする OpenAPI の定義ファイルを openapi-typescript をつかって TypeScript の型にする 型パズルを実装する useFetch でこの型を利用するためのラッパーを作る 対象読者 本記…

エムスリーキャリア（M3C）でインターンをしていた高橋と申します。 2024年6月からエンジニアインターンをさせていただき、早いもので3か月経ちます。 Web開発未経験だった私が、インターンを通して学んだこと、M3Cの環境などをお伝えできればと思います。 エムスリーキャリアの働く環境 M3Cの環境の中でも、特に好きな2つの特徴を紹介します。 1. メンター制度と自分に合った研修 メンター制度が導入されているため、入社した日から常にその方がサポートしてくれます。また、研修は自分に合った課題が用意されるため、最速で成長することができました。 2. 自分専用の Times(分報) が存在し、いつでも…

Gemini nanoで遊んでみるついでで久々にGithub PagesにWebアプリをデプロイしてみたので色々とメモ。 Github Pagesが出始めだったVue1系の時代（今からすると大昔だ・・・）やGithub Actionが始まったNuxt2の時代にも同じようにGithub Pagesを試したことはあったんだけど、 当時と比べてGithub側の機能という意味でもNuxt側の作りという意味でも色々と綺麗に整備されていて、 かなり手軽に遊べるようになりましたな。 ローカルでyarn devで起動してちゃんと動くことを確認できてから以下のことを追加で行う感じ。 リポジトリ側の設定 docs…

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 の機…

リファクタリングが必要になった経緯 運用しているサービスはあまりコーディングルールを決めていなかったために、修正者が変わったタイミングで書き方が変わり可読性が失われてしまっていました。現メンバーが修正した時に同じ処理をしている別の個所の修正漏れがあったり、修正ミスが発生したりと運用がしづらい状況で危ない状況だったので改善が必要になりました。 技術選定をどうするか？ 将来的にどのような機能があればユーザーが使いやすく、サービスの発展につながるかを含めて検討しようと思い開発者や営業などのステークホルダーに意見を聞きました。その結果インタラクティブな機能が必要だったためフロントエンドはnode.js…

ようやくolcarのNuxt3アップデートverをリリース出来た。今回は時間捻出などいろいろ工夫した点もあるので備忘録として 期間 コミット開始の3/14から7/28までの4ヶ月半。実際ほNuxt3の勉強もしたので約5ヶ月掛かってる。Nuxt2のサポート切れに間に合わんかった😭 時間の取り方 仕事も忙しく、子どもの寝かせ付けは交代でやっているので時間が取れなさすぎて1日30分〜1時間を週3ぐらいで開発した。さらに4月からジム行き始め、子供が寝た22時すぎから週3ぐらいでジムに行くので開発に集中出来ていない。ただ時間がないからと言って1時間以上はやらず、きっちりやめるということを徹底した。結果的…

複数のフローティングパネルを表示する例フロントエンドエンジニアのゆう（@aose_developer）です。 ヤプリのCMSにはBlock UIという、直感的かつフレキシブルにアプリを制作できる基盤があります。 Yappliの新基盤「Block UI」 のご紹介 個人的にはノーコードツールというだけでかなり楽しい開発ですが、中でもこのBlock UIはより複雑なUIや機能を作ることになるので、フロントエンドエンジニアとしてやりがいを感じています。 そこで今回は、Block UIでの開発を進めていく中で誕生した 卍最強のフローティングパネル卍 *1 について、最強たる所以をご紹介すると共に実装す…

今回はlake.biの開発チーム2名に「最近の仕事はどんなことをしていたか」を聞いた開発者インタビューです！ では、さっそくいってみましょう！ lake.biの概要はこちら techblog.cartaholdings.co.jp 今回の登場人物 秋本 昌利（あきもと）: 2020年 株式会社サイバー・コミュニケーションズ（現株式会社CARTA COMMUNICATIONS）に中途入社。ソフトウェアエンジニアとしてlake.biの開発・運用に従事。現在はフロントエンドのリプレイスを担当。 大前 直士（おーまえ）: 2023年 CARTA HOLDINGS 新卒入社。株式会社CARTA COMM…

フロントエンドエンジニアのこん(@k0n_karin)です！今回はNuxt3でSentryを扱ったときに遭遇した事象について投稿します。 ※NuxtとSentryそのものの説明は割愛します。 ※本記事執筆時点のバージョンは以下のとおりです。 nuxt: 3.12.2 @sentry/vue: 8.13.0 解決策 先に解決策です。事象の解説も見たい方は次の章以降を参考にしてください。 Nuxt3で@sentry/vueを使う際、エラー発生時に500エラーの画面を表示したくない場合は、Sentry.init()の前にapp.config.errorHandlerに任意の関数を代入しましょう。 （…

はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nu…

こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の…

はじめに この記事は、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用の新しい状態管理ライブラリです…