フロントエンド

新規プロダクトの開発に Nuxt 3 を採用して良かったこと

ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だった…

Next.js で react-dropzone を使ってファイルアップローダーを作ってみよう

この記事は ANDPAD Advent Calendar 2023 の 10日目の記事です。 どうもこんにちは。フロントエンドエンジニアの蓮子です。今回は、Next.js におけるドラッグ & ドロップできるファイルアップローダーの作り方の紹介です。 使用するライブラリは react-dropz…

ANDPAD のデザインシステム「Tsukuri」の Web 向け実装について - 現状と今後

1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する最後の記事です。 tech.andpad.co.jp tech.andpad.co…

ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - リポジトリの構成・開発ツール

1. はじめに 2. リポジトリ全体に関して 2.1. ディレクトリの構造 2.2. パッケージマネージャ 2.3. Node.js 2.4. スキャッフォールディングツール 2.5. そのほかの モノレポツール 3. ビルド・バンドルツールに関して 4. ドキュメンテーションに関して 5. テ…

Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート

Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉(@ykoizumi0903)です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています…

ANDPAD のデザインシステム「Tsukuri」の Web 向け実装について - UI コンポーネントの開発

この記事の概要 Lit を用いて Web Component を実装しています Custom Element Manifest の情報を元に Vue や React のコンポーネントを機械的に実装しています デザイナーと開発者がデザインシステムの語彙を用いてコミュニケーションを取りやすいような設…

フロントエンドエンジニアがモバイルアプリ開発に参画した話

私はアンドパッドでフロントエンドエンジニアとして働いている大西です。VueやNuxtを利用したフロントエンド開発を担当しています。 アンドパッドではフロントエンドの開発を1年ほど行ってきました。しかし、今年からはフロントエンドだけでなくモバイルア…

ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介

この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します ア…

React Hook Form を使って、チェックボックスで1つ以上のチェックを必須とするフォームを作ってみよう

この記事は ANDPAD Advent Calendar 2022 の 22日目の記事です。 はじめまして、私フロントエンドエンジニアのはつし(蓮子)と申します。盟友&尊敬するマネージャーの櫻井賢司こと KJ からバトンを受け取り、22日目を担当させていただきます。slack上のニ…

知見ゼロからプロダクションコードを書くまでの研修を考えてみた

この記事は ANDPAD Advent Calendar 2022 の 15日目の記事です。 soe-j です。 前回勢いで書いたので、2回目は落ち着いて書こうと思って投稿数日前。そんなもんですよね。 アンドパッドでは新卒採用を始めたこともあり、新たな挑戦の機会に立ち会うことが多…

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

この記事は ANDPAD Advent Calendar 2022 の 5日目の記事となります。 ANDPADでフロントエンドエンジニアをしている小泉(@ykoizumi0903)です。Vue / Nuxt.js での開発を行っています。 さて、Vue・Nuxt 界隈でこの年末ホットな話題と言えば、何といっても …

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

ANDPADフロントエンドエンジニアの小泉(@ykoizumi0903)です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるよう…

Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン

どうもこんにちは! 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vu…

Vue + JSX + Nuxt Composition API で最高のフロント開発体験

はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり…

Vue Composition APIをチームで導入して得られたメリット

前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7…

塵も積もれば山となる、Vue.js製スプレッドシートのパフォーマンス改善記

はじめに はじめまして、オクトのフロントエンドエンジニアの小泉です。約1年前に入社し、Vue.js(Nuxt.js)でプロダクトのWebフロント開発に携わっています。 初めて会社のブログに寄稿するにあたって、自分がオクトでどんなことをしているかを書こうと思っ…

NuxtのSSRモードでメモリリーク?原因はaxios?

はじめに 最近金髪から黒髪に戻して更生しました藤井(フロントエンドエンジニア)でございます。久々にテックブログに貢献させて頂きます! 今はメインの施工管理機能の改修の傍ら、新機能開発にも携わっておりまして、フロント側はSSRモードのNuxtを採用し…

ANDPADにおけるVue.js活用事例だよ

はじめに どうもー、工程管理チームの藤井です。先週とあるイベントで登壇予定だったのですが、台風の影響により無くなってしまいました・・。致し方ない。。 せっかく作った資料ですし、こちらで公開させて頂きます! 資料だよ 弊社におけるVue.jsの活用事…

フロント側エラー対応にBugsnag活用

はじめに フロントエンドチームの藤井です。 今回は、Bugsnagの導入について紹介します。 Bugsnagとは アプリケーションのエラー監視ツールですね。 www.bugsnag.com 以前よりANDPAD本体には導入してされておりましたが、フロント側の一部分をVueに置き換え…

新横断工程表プロジェクトが始まりました!(Nuxt & TypeScript)

新規プロジェクト本格的に始動 どうも、フロントエンドチームの藤井です。 いよいよ、ANDPAD施工管理開発チームの目玉の一つである、「横断工程表」というサービス開発が始まりました。3月にリリースした、案件ごとに作れる「工程表」というサービスをより使…

施工管理チームにおけるVueコンポーネント設計

どうも、施工管理チームのフロントエンドを担当している藤井です。 今回うちのチームで取り組んでいるVueプロジェクトのコンポーネント設計の移り変わりについてご紹介したいと思います。 別で存在する新規プロジェクトチームの方では、Vue/NuxtやTypeScript…