Sansan Tech Blog

Sansanのものづくりを支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信

フロントエンド

レガシーに向き合う - Reactのクラスコンポーネントを置き換える前にやるべきこと

こんにちは。Eightでエンジニアをしている藤野です。 Sansan Tech Blogに最後に記事を書いたのが2020年12月なので、約3年ぶりの投稿になります。時の流れって恐ろしい。 今回は、Reactのクラスコンポーネント(Class Component)を関数コンポーネント(Function…

Floating UIのすすめ: 特徴と使い方を紹介

こんにちは。2023年にSansanに新卒として入社し、Eightでエンジニアをしている徳永です。人生初ブログとなるのでドキドキしながら書きました。ユーザーがボタンなど特定の要素をクリックまたはタップしたときに表示される、小さなウィンドウやボックスの UI …

StorybookでReactコンポーネント分割の粒度を見極めよう

はじめまして!技術本部 Bill One Engineering Unit の杉崎と申します。技術ブログ初投稿なのでとても緊張しますね! 普段はフロントエンド成分強めの開発をしており、フロントエンドギルド(チームを横断して特定技術領域の改善やスキルアップをしていく取り…

Eight の Node.js を 16 から 20 にアップデートしました

こんにちは。 Eight でエンジニアをしている鳥山(@pvcresin)です。 今回は、Eight で使用している Node.js をアップデートした際の手順や、ハマったところについてお話ししたいと思います。

フロントエンドの本番ビルドに SWC を導入して、ビルド時間とメモリ使用量を同時に削減する

こんにちは。 Eight でエンジニアをしている鳥山(@pvcresin)です。 今年はいくつも BBQ の予定がたっていて、コロナ禍前の日常に戻りつつあることを実感しています。 BBQ ならラムチョップが好きです。 今回は、Web フロントエンドの本番ビルドに SWC を導…

Vol.06 Connect によるスキーマ駆動開発のススメ - connect-web フロントエンド編

はじめに こんにちは、技術本部 Bill One Engineering Unit の江川です。 普段は、Bill OneでWebアプリケーション開発をやりつつ、フロントエンド周りの技術的な改善に向き合ったりしています。 今回は、バックエンド編の続きとして、フロントエンドにおける…

Vol.03 Component 総数 1000 件を超える Bill One の React フロントエンドに Chromatic を用いた VRT を導入した話

はじめに こんにちは! 技術本部 Bill One Engineering Unit の市川です。 Bill One に Join してから早いもので 1 年が経ちました 今回は 2022 年 9 月ごろから 3 カ月かけて実施した、 Bill One の React フロントエンドにおける Visual Regression Testi…

複数のサービスを横断して Web フロントエンド開発の支援を行う、Frontend Enabling 業務の紹介

こんにちは。 Eight でエンジニアをしている鳥山(@pvcresin)です。 最近は芸人のラランドのラジオにハマっています。「お母さんヒス構文」が好きです。 さて今回は、私が普段行っている Frontend Enabling 業務の紹介をしたいと思います。

レスポンシブなクリスマスツリーの作り方

本記事は Sansan Advent Calendar 2022 15日目の記事です。 こんにちは。技術本部Digitization部データ化グループでエンジニアをしている池田力です。 背景 複雑なレイアウトのUIを作る場合、CSSだけで実装するのには限界があります。そうして限界を迎えた時…

今さら聞けないビジュアルリグレッションテストをChromaticで始める

Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケー…

Eight で Internet Explorer のサポートを終了するために行ったこと

こんにちは。Eight でエンジニアをしている鳥山(@pvcresin)です。 2022 年 6 月 15 日、Internet Explorer(IE)のデスクトップアプリの提供が終了しました。 それに伴い、PC 版 Eight では IE のサポートを完全に終了し、閲覧することができなくなりまし…

ハイフンに似た文字が Shift_JIS でエンコードできない問題とその解決策

初めまして! 2022年の3月に入社しました渡邉です。 現在はデータ戦略部という部署に所属しておりまして、多種多様なデータを収集・活用するためのサービス開発に携わっています。タイトルにある通り、今更になって Shift_JIS と格闘する羽目になったのです…

esbuild-loader 試してみたら開発ビルドが 2〜3 倍速くなった話

こんにちは。Eight でエンジニアをしている鳥山(@pvcresin)です。 散歩が趣味なので、暖かくなってきて嬉しい今日このごろです。 さて今回は Web フロントエンドのビルド時間短縮のため、esbuild-loader を導入した話をしたいと思います。

ビルドシステムをcreate-react-appからViteに移行した話

こんにちは、技術本部 Bill One Engineering Unitの江川です。 2021年4月に新卒としてSansanに入社したのですが、早いものでもう1年が経ってしまいそうで驚いています。 今回は、そんな早かった1年に思いを馳せつつ、Bill Oneフロントエンドのビルド周りを高…

変更に強いコンポーネント設計の方針と規約(Webフロントエンド)

技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど2枚目のモニターも買ったので、モニター2台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設…

GIF しか残ってなかったオリジナルのローディングを CSS アニメーションで再現した話

こんにちは。 Eightでフロントエンドエンジニアをしている鳥山(@pvcresin)です。 気づいたら開発者体験(DX)向上の取り組みばかり記事にしていたので、たまには実装の記事も書いていこうと思います。 今回は、ローディングを CSS アニメーションで実装し…

EightからjQueryが消えた日

Eight Engineering Unitで主にEightのWebフロントエンドを担当している青山です。 今回はEightが長年利用していたjQueryを依存から削除した、という内容を、その経緯を交えながらお伝えします。 レガシーコードをリファクタリングされているエンジニアの方々…

TypeScript を導入して 1 年が経って感じた良かったこと・困ったこと

こんにちは。Eight でエンジニアをしている鳥山(@pvcresin)です。 最近は、デザインとエンジニアリングの距離をもっと近くにできないかということばかり考えています。 なかなか難しい課題で、すぐには答えが出そうにありません。 さて今回は、以前書いた…

TypeScript / JavaScript の import を自動でソートする

こんにちは。Eight でエンジニアをしている鳥山(@pvcresin)です。 マイブームはコンビニで買える GODIVA のベルギーダークチョコレート(アイス)を食べることです。 濃厚で甘すぎず、量も多すぎないところが気に入っています。 今回は TypeScript や Java…

Internet Explorer 11 (IE11) に対応するためにやったこと

こんにちは。DSOC サービス開発部 Bill One Entryグループの山﨑です。 クラウド請求書受領サービス『 Bill One 』で取り込まれた請求書のデータ化システム『 Bill One Entry 』を開発するチームでエンジニアをしています。 bill-one.com Bill One Entry の…

Visual Regression Testingで安心できるフロントエンド環境を作る

こんにちは。Eight事業部で主にフロントエンドを担当している青山です。 今回はEightのWebフロントエンドコンポーネント集にVisual Regression Testingを導入した事例を紹介します。 他社さんの事例や勉強会を見るに敷居も下がってきているようで、遅ればせ…

まだ間に合う!node-sass(LibSass)から sass(Dart Sass)への移行

こんにちは。 Eight で エンジニアをしている鳥山(@pvcresin)です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass(LibSass)か…

compass-mixins から PostCSS の Autoprefixer に移行する

こんにちは。 Eight でフロントエンドエンジニアをしている鳥山(@pvcresin)です。 最近、事業部長に Slack の絵文字をプレゼントするという実績を解除しました。 早く使われないかなとそわそわしています。 さて今回は、Sass の mixin を集めたライブラリ…

eslint-loader の使用をやめることで、ビルド時間を短縮した話

こんにちは。 Eight 事業部でエンジニアをしている鳥山(@pvcresin)です。 最近は、持ち手部分に適度な厚みと重さがあるいい感じのカトラリー(食卓用のナイフ・フォーク等)を探すのにハマっています。 おすすめのものがある方はご一報いただければ幸いで…

Eight 、TypeScript はじめました

こんにちは。Eight でフロントエンドエンジニアをしている鳥山(@pvcresin)です。 最近は UI デザインとアプリケーションのパフォーマンス改善、ビルド時間の短縮に興味があります。 Eight の Web フロントエンドは JavaScript(JS)で書かれていましたが、…

新規事業開発での技術選定の意思と意図 (フロントエンド編)

こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意…

© Sansan, Inc.