BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

フロントエンド

Vue 2 + TypeScript 環境に Testing Library を導入する

Vue 2 でコンポーネントテストを書くために こんにちは。プログラミングをするパンダ(@Panda_Program)です。本記事は BASE アドベントカレンダー 2022 の4日目の記事です。 本記事では Vue 2 + TypeScript 環境に Testing Library を導入する方法をご紹介…

BASEフロントエンド Monorepo 化の取り組み

はじめに フロントエンドエンジニアの @mk0812 です。自分は普段BackOfficeというチームで新規機能開発を担当しています。 この記事ではBASEのフロントエンド周りの事例として「Monorepo」を紹介します。 エンジニアの皆さんなら1度は聞いたことあるかもしれ…

Vue Fes Japan Online 2022 に BASE からエンジニアが登壇及び協賛、スタッフ参加しました!

この度、 2022/10/16(日)に開催された Vue Fes Japan Online 2022 に BASE から2名のエンジニアの登壇およびゴールドスポンサーとして協賛しました! 本記事では2名の登壇者のコメントと、参加したメンバーの感想・コメントをお届けします! Vue Fes Japan…

Vue Fes Japan Online 2022 に BASE から2名のエンジニアが登壇及び協賛します

2022/10/16(日)に開催される Vue Fes Japan Online 2022 で BASE に所属する2名のエンジニアが登壇します。 vuefes.jp BASE では 2018年頃から Vue.js を使ったプロダクト開発を行ってきており、これまでいくつか Vue.js に関連するテックブログ記事やイベ…

SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開

こんにちは。Pay ID Devの大木 (@roothybrid7)です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、SWC(Speedy Web Compiler)やRelease Pleaseを利用して開…

フロントエンドのコードからの情報漏洩を防ぐための工夫

基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも…

Docker 環境から webpack-dev-server に繋いで HMR する

BASE Advent Calendar 2021 9日目の記事です。 フリーランスのフロントエンドエンジニア 坪内です。 BASE のお手伝いをさせていただくようになって 1ヶ月が経ち、色々見えるようになってきた中で最も気になっていた点の 1つが、 「HMR されていない」 でした…

Storybook と Chromatic でビジュアルリグレッションテストを実施する

Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより…

2021年に行ったアクセシビリティやっていき

この記事は BASE Advent Calendar 2021 の6日目の記事です。 フロントエンドエンジニアの @rry です。 今年の4月に BASE にジョインしてから、アクセシビリティに関する取り組みを少しずつ行ってきました。 BASE ではこれまでアクセシビリティに関する取り組…

Browserslist でサポートブラウザを設定しよう

この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会…

今度は「WebOTP」についてFrontend Weekly LT(社内勉強会)でお話しました

はじめましての人ははじめまして、こんにちは!フロントエンドエンジニアのがっちゃん( @gatchan0807 )です。 今回は社内勉強会 Frontend Weekly LT にて、WebOTP / OTPの概要と使い方について発表をしたので、その内容を皆さまにも共有できればと思って記…

TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF(Component Story Format)に置換した

BASE株式会社 Owners Experience Frontend チームのパンダ(@Panda_Program)です。 BASE では社内用コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されていましたが、TypeScript Compiler …

Frontend Weekly LT(社内勉強会)で「Vite」について LT しました

はじめまして、フロントエンドエンジニアの @rry です。 BASE では社内勉強会として「Frontend Weekly LT」を毎週開催しています。 今回は Vite 特集で LT をしたので、Frontend Weekly LT の紹介も兼ねて内容を発信していきたいと思います。 Frontend Weekl…

Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える

BASE株式会社 Owners Experience Frontend チームのパンダ(@Panda_Program)です。 BASE では BASE の UI を構築するための社内コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されています…

フロントエンド複数人のプロジェクトでリモートモブプロをやってみた話

この記事はBASE Advent Calendar 2020の16日目の記事です。 devblog.thebase.in はじめに こんにちは。BASE株式会社フロントエンドチームに所属している田中です。 こちらの記事にもあるように、BASEではここ一年弱の間、リモートワークメインの働き方でした…

Multi-root Workspacesで、React monorepoプロジェクトのautoimportをいい感じに動作するようにする

この記事はBASE Advent Calendar 2020 15日目の記事です。 devblog.thebase.in こんにちは、Native Application Groupの大木です。最近React.jsを使ったフロントエンドアプリケーションの開発に取り組んでいますが、プロジェクトをmonorepoで管理しています…

Vue.js 3 アップデート対応の現状報告

この記事はBASE Advent Calendar 2020の2日目の記事です。 devblog.thebase.in こんにちは、BASEのフロントエンドチーム エンジニアの加藤です。 先日、弊社松原のこちらのブログにて、「既存のVue.jsによる資産は積極的にメンテナンスしつつ、その時その時…

Internet Explorer のサポート終了とその後の BASE の進化

フロントエンドチームの右京です。サービスの利用者向けには BASE U にて告知いたしましたが、2020 年 11 月 15 日をもって BASE は Internet Explorer 11 (以下 IE11) のサポートを終了しました。サポート終了と聞くと基本的にはネガティブな印象になりがち…

BASEの日付ライブラリについて

自己紹介 こんにちは。BASE株式会社のフロントエンドチームの谷口です。 本日は、BASEのフロントエンドで使用している日付ライブラリについてお話しします。 BASEの日付ライブラリについて BASEでは、frontendという領域が出来始めた当初、最もメジャーな日…

BASEにおけるVue.jsのこれまでとこれから

前書き こんにちは、BASEのフロントエンドチームでエンジニアリングマネージャーをやっている松原(@simezi9)です BASEではフロントエンドエンジニアの積極採用を行っています。 その過程で、面接を受けに来られた方によく「BASEはVueとTSを採用しているとの…

eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう

フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く…

Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り

この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミ…

GitHub Actions で Storybook をお手軽に共有するやつ作ってみた

この記事はBASE Advent Calendar 2019の8日目の記事です。 devblog.thebase.in エンジニアの右京です! みなさん!Storybook は使っていますか?BASE ではUIコンポーネントの社内展開はもちろん、日々の業務の中でもサンプルの実装を共有したりするために St…

Vue.jsのカスタムディレクティブ作って公開した話

この記事はBASE Advent Calendar 2019の6日目の記事です devblog.thebase.in どうもこんにちは、Frontend Groupの青木です BASEではVue.js+TypeScriptを採用したフロントエンド開発を行っています 今回のブログでは、私が業務で直面したちょっとした課題を、…

エンジニア2年生がリーダブルコードを読んで今年自分が書いたコードを振り返る

この記事はBASE Advent Calendar 2019 の2日目の記事です。 devblog.thebase.in こんにちは!BASEでFrontend Groupに所属している三佐和 です。主にネットショップ作成サービス「BASE」のフロントエンドを担当しています。 2016年に未経験からBASEでインター…

BASEのVue.jsコンポーネントの設計について登壇してきました

前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきまし…

次世代の管理画面を作るフロントエンドの取り組み

フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事で…

Vue Boot Campをやってみました!

この記事は「BASE Advent Calendar 2018」25日目の記事です。 devblog.thebase.in こんにちは。BASEでFrontend Groupに所属している三佐和です。主にネットショップ作成サービス「BASE」のフロントエンドを担当しています。 先日デザイングループのマネージ…