Web

ZOZOTOWNのネットワークをDirect Connect 10Gから100Gに移行した話

はじめに こんにちは、技術本部SRE部フロントSREブロックの柳田です。オンプレミスとクラウドの構築・運用に携わっています。 ZOZOTOWNでは、既存システムのリプレイスプロジェクトを進行中です。リプレイス過渡期の現在、オンプレミスのネットワークとAWSの…

新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題

新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題について紹介します。

ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見

はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」とい…

ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定した話

はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地(@hiro0218)です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています1。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課…

WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行

はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。

ZOZOTOWNのWebサーバを、EC2 Windows Serverで自動構築する

ZOZOTOWNのWebサーバをAmazon EC2上にWindows Serverで自動構築するために、検討したことを紹介します。

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話

こんにちは。ZOZOTOWN部フロントエンドチームの菊地(@hiro0218)です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部…

Chrome 92以降のSharedArrayBuffer警告に対するZOZOTOWNが実施した調査と解決策

Web

こんにちは、ZOZOTOWN部フロントエンドチームの高橋(@anaheim0894)です。 Chrome 92から「SharedArrayBuffer」の仕様が変更されます。それに伴い、ZOZOTOWNの対応方針と解決策をご紹介いたします。そもそも「SharedArrayBuffer」が何のことなのか分からず…

React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化

ZOZOTOWNではキャンペーンページを高頻度で公開しています。このページ作成のノーコード化をReactとmicroCMSを用いて実現しましたのでご紹介します。

【ZOZOTOWN UI/UX改善PJ】「改善を自分達で考えて実装・リリースするPJ」の作り方

こんにちは、ZOZOTOWN部フロントエンドチームの高橋(@anaheim0894)です。 2020年5月からZOZOTOWN部では、「UI/UX改善プロジェクト」を立ち上げ、小さなUI改善を進めるチームを発足しました。 そこでこのプロジェクトの紹介をしながら、その工夫したポイン…

Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips

こんにちは。ECプラットフォーム部のMA(マーケティングオートメーション)アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤(@snagasawa_)です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1…

髪型別コーデ検索におけるSPAの開発

こんにちは、WEAR部の繁谷です。 普段はバックエンドのエンジニアとしてWEARの開発を行っています。 ZOZOテクノロジーズは4月7日に「髪型別コーデ検索」をリリースしました。 プレスリリースは是非こちらを御覧ください。 髪型別コーデ検索のフロントエンド…

Google Apps Scriptを使ってWebアプリケーション風の検品ツールを作ってみた

こんにちは! 開発部の手塚(@tzone99)です。普段は社内ERPシステムの開発をしながらその周辺の業務ツールの制作を担当しています。こちらの記事ではGoogle Apps Script(GAS)を使ってアパレル商品の検品結果を登録するツールを作る中でポイントとなった部分…

Androidエンジニア/Webエンジニア/PMのGoogle I/O 2019おすすめセッションまとめ

こんにちは! Google I/O 2019から3週間ほど経ちましたが、全国各地でGoogle I/O報告会が行われておりまだまだGoogle I/O熱はまだまだ続きそうですね。 Google I/Oには弊社からも3名(@rllllho, @ysk_ur、山田)が参加しました。 参加レポートはすでに多くあ…

Vue.js+Vuex+TypeScriptのWebフロントエンド開発現場を前向きに改善した話

こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロ…

Puppeteerを使用したHeadless Chromeの操作

こんにちは、フロントエンド開発部の荒井です。 先日VASILYでは開発合宿が行われました。本記事では私が合宿で使用したHeadless Chrome + Puppeteerを紹介したいと思います。

コーポレートサイトをリニューアルしました

既にお気づきの方も多いと思われますが、VASILYのテックブログは今月から装いを新たにしています。これは先日行った弊社コーポレートサイトのリニューアルに合わせたものです。この記事では、今回行ったコーポレートサイトリニューアルについて実装面から紹…

HTML5における画像のレスポンシブ対応方法まとめ

Web

こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応…

Railsアプリでクロールディレクティブを安全・効率的に設定する仕組み

こんにちは、フロントエンジニアの茨木です。 本記事ではRailsアプリでクロールディレクティブを安全・効率的に設定する仕組みをご紹介したいと思います。 Web上にあるページは、クローラーと呼ばれるロボットに巡回されて検索エンジンにインデックス登録さ…

デザインデータに忠実にCSSコーディングするためのテクニック

Web

フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現…

AMPの導入と効果について

Web

こんにちは、エンジニアの荒井です。 2016年はAMP(Accelerated Mobile Pages)の正式サポートがアナウンスされ、導入した方も多いのではないでしょうか。VASILYでもAMPを導入し数ヶ月運用しています。AMPの導入に関しては、関連記事も多く存在しますが、導…

CSSコーディング規約を導入して1年半運用した話

Web

フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1…

JavaScriptで商品画像の拡大プレビュー機能の実装

今回は弊社で開発中の新サービスで実装した商品画像の拡大プレビュー機能の実装について、その方法を順を追って説明します。

iQONのviewportを一気に書き換えた話

Web

フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。

WebアプリのAPIリクエスト効率化

iQONのWebアプリのAPIリクエスト部分の仕組みを改善したことについて紹介します。

Facebook ネイティブアドのスマホサイトへの導入方法

Web

Facebookがモバイルページ向けのAudience Networkをオープンβで開始していたので、提供されている形式の一つであるネイティブアドを試してみました。

3ヶ月でDAUを倍にしたサイト最適化の話

Web

Merry Christmas! フロントエンド開発の荒井です。今回はフロントエンド開発陣が3ヶ月で行ったサイト最適化を紹介したいと思います。短期間で多くの変更を施したため、今回は取り組みやすく、特に大きなインパクトがあったと思われる内容2つを紹介します。 …

iQONのエラーレートを0.003%以下まで減らした話

Web

VASILYのWebフロントチームがWeb版iQONのエラーレートを0.1%から0.003%以下まで減少させた際に、行った取り組みについて紹介します。今回行った取り組みはAPIモックを用いたテストの廃止、テストの高速化、New Relicの活用です。

アプリを使わなくてもPush通知が来る!

VASILYでインターンをしている茨木です。 3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。ブラウザからスマホにプッシュ通知が送れるというものです。 スマホ向けウェブサービスをやっている方…

カテゴリー