RevCommの熊谷です。 AIエージェントを使った開発が当たり前になり、コーディングの速度は確かに上がりました。一方で、フロントエンドは自由度が高いぶん、油断するとすぐに 設計がブレる という次の問題も見えてきます。今回は、それをどうやって抑えているかを書いてみます。私たちのチームではルールを文章で書き下すよりも、「参考実装を指す」ことを軸にしています。 困っていたこと 紹介するのは、MiiTel Admin という管理画面での話です。自社サービス「MiiTel（ミーテル）」を支える、Vue 3 + N

フロントエンドもアーキテクチャに向き合う！ こんにちは！フロントエンドエンジニアの浅川です！ この記事では、社内向け管理画面（以降「社内システム」と呼びます）を段階的に整えながら、今の形へたどり着くまでの考え方を、時系列でまとめてみたいと思います。 この記事でまとめること 各レイヤーの責務と、ディレクトリ構造 「どこに何を置くか」の分割の目安 前提：社内システムの構成 まず、社内システムの技術スタックを簡単に紹介します。 フレームワーク: Vue 3 + Nuxt 4（SPA、SSR なし） バックエンド

SCSKの畑です。 今年度の Web アプリケーション開発関連のテーマは大体書きたいもの書けたからもう良いかなと思ってたんですが、本件がそれなりに大変だったことを今更思い出したので備忘として残しておこうと思います。   背景 本 Web アプリケーションの開発を始めたのが 2024 年の 5 月頃だったと思うのですが、その時点での最新版は Nuxt.js が 3.x 系、Nuxt UI が 2.x 系でした。事前調査で Nuxt.js は 2.x 系と 3.x 系で仕様がかなり異なることが分かっ

この記事は、Amplify Japan User Group の池田 健人 氏 ( @ikenyal ) に寄稿いただきました。 こんにちは、AWS Community Builder 兼 AWS User Group Leaders、そしてAmplify Japan User Groupの運営メンバーであり「AWS Amplify Conference 2026 by Amplify Japan User Group」の実行委員長の池田（ @ikenyal ）です。 2026年1月20日（火）、Ampl

クロスイノベーション本部、新卒1年目の大岡叡です。 今回は、1月29日にプレビュー公開されたAWS Deployment SOPsを使ってみたので、その内容を報告します。 AWS Deployment SOPsを使ってみた結果、簡単なプロンプトを一度与えるだけで静的Webサイトをデプロイでき、CodePipelineのCI/CDについても簡単に構築することができました。この検証を通じて、非エンジニアがインフラ構築をして簡単なアプリケーションのデプロイを行う日も遠くないのではないかと思いました。 AWS M

みなさんこんにちは！ワンキャリアのOC 求人掲載チームで就活支援サービス「ワンキャリア」のフロントエンド開発をしている中野（X： asunaro276 ）です。 昨年11月にワンキャリアにジョインし、今回ブログ初投稿となります。 そんな入社間もない私が今回投稿するのは入社エントリーではなく、昨年11月末にFindyさん主催で開催された「アーキテクチャConference 2025」に2日間現地参加してきた感想とその後の取り組みについてです。

こんにちは！ 株式会社ココナラのフロントエンドエンジニア、はるきです。 はじめに 私は現在エンジニア2年目として、日々開発業務に取り組んでいます。 振り返ってみると、新卒1年目の時に「これをやっておいてよかった」「もっと早くやっておけばよかった」と思うことがたくさんあります。 この記事では、2年目になった今だからこそ分かる、新卒エンジニアが入社後にやるべき重要なことをお伝えします。 特にソースコードのマッピングという、私自身が最初は軽視していたけれども、実は最も重要だった取り組みについて詳しく解説します。

SCSKの畑です。 前回の投稿 に引き続き、3回目として非同期処理部分のフロントエンド実装についてピックアップして説明していきます。 フロントエンドにおける非同期処理実装の方針について まず前提として、同期処理で実装していた部分を非同期処理に変更しても、画面の遷移/見せ方自体は基本的に同期処理時と同一にする必要があります。例えば、テーブルデータの取得処理を非同期にただ変更するだけだと、データ取得が完了しない内にテーブルデータの表示画面に遷移してしまうため、単純に想像すると取得が完了するまで空の表が表示され

SCSKの畑です。期せずして昨年と同じく年明けからの投稿となりますがよろしくお願いします。 まずは昨年度の投稿で主に言及していた Redshift データメンテナンス用の Web アプリケーションについて、今年度も引き続き携わっている中で主に実施していた取り組みについて数回に渡って記載していきたいと思います。 アーキテクチャ概要 一年ぶりの投稿となるので載せておきます。今回はアーキテクチャの変更や改修を伴う内容ではないのですが、AppSync や Lambda が関連する話題となります。要するにバックエン

はじめに こんにちは。 株式会社ココナラのマーケットプレイス開発部 Web開発グループ フロントエンド開発チーム所属のかねごんです。 本記事では、弊社がNuxt 2からNuxt 3へのバージョンアップを行った経緯、そして実施過程での工夫や課題についてお話しします。単なるアップグレード手順ではなく、なぜそのタイミングで、どのようなアプローチで進めたのかという意思決定プロセスから、実装段階での試行錯誤までを、実体験に基づいて共有したいと思います。 Nuxt 2のサポート終了と、バージョンアップの必然性 サポー

プロダクト部User Groupの藤澤です。 今回は、我々のプロダクト「 スタンバイ 」で, Nuxtアップデートをきっかけに顕在化した bfcache（Back/Forward Cache）による計測課題と、 それに対する対応・改善の取り組みについて共有します。 今回の改善により、これまでより正確な数値が取得できるようになり、社内指標の明確化が進みました。 この記事のポイント Nuxtのマイナーアップデートをきっかけに、起きるはずのないPVの変動が発生 原因は、bfcacheから復元した際のログ送信が不

概要 参加を決めた理由 聴いた講演 オープニング キーノート webpack 依存からの脱却！快適フロントエンド開発を Viteで実現する Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計 昼食 生成AI時代のWebアプリケーションアクセシビリティ改善 Inside Vitest: テストフレームワークアーキテクチャの詳細解説 Vue で 3D を楽しむ Vue.jsでつくる実験映像 AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践

こんにちは。@potato4dです。今回は2025年10月25日に開催された Vue Fes Japan 2025 の参加・協賛レポートをお届けします。Vue Fes JapanとはVue Fes J...

みなさんこんにちは！就活支援サービス「ワンキャリア」（学生版） Webチームの北原（X： hakshu25 ）です。 今回は、チームで取り組んだ、ワンキャリア（学生版）で使用しているNuxtのアップデート（Nuxt3→Nuxt4）についてお話しします。 これから Nuxt4 へのアップデートを控えている方々にとって、少しでも参考になれば幸いです。

はじめに こんにちは、2025年4月にソフトウェアエンジニアとして新卒入社した黒高です。普段は デリッシュキッチン に関する開発に携わっています。 ウェブ版のデリッシュキッチンにおいて、クライアント端末の判定ロジックを見直す機会がありました。本記事では、「どのようにクライアントを識別し、どう補完していくと良さそうか」を整理します。 端末で処理を分けたいユースケース スマホとPCで表示を切り替える場面として真っ先に思い浮かぶのはレスポンシブレイアウトですが、これは多くの場合CSSで完結します。JavaScr