Enigmo Advent Calendar 2018 の4日目の記事です。 この記事の目的 Enigmoが運営している BUYMA では古代から運用している jQuery の他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを

宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクト では、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定

こんにちは。 普段はdelyのAndroidアプリの設計、実装とかその他もろもろを担当している梅森です。 最近弊社では、長期的な技術的な意思決定や技術的課題の可視化・解決の支援など、技術的な側面においてdelyの開発チームが成長していけるような取り組みを考えて実施しています。本稿ではそのうちの取り組みの一つをご紹介します。 エンジニアは普段の機能実装と並行して長期的なプロダクト改善を行うための施策を行っていたりしますが、アーキテクチャの移行やリファクタリング、自動テストといった施策は短期的には成果が見えに

こんにちは。サーバサイドエンジニア兼QAエンジニアの斉藤（@saik1010）です。 弊社QAチームでも取り組みを始めた、 Selenium を使用したブラウザテスト自動化について、 環境構築〜簡単なプログラムを実行するまでをご紹介しようと思います！ 動作環境 環境 バージョン macOS Sierra 10.12.6 Ruby 2.4.2 rbenv 1.1.1 RSpec 3.7.0 Capybara 2.16.0 Selenium Webdriver 3.60 ChromeDriver 2.35 も

こんにちは。スタメンでデザイナー兼フロントエンドエンジニアをしているナガキです。 以前、 スタメンの開発環境について お話させていただきましたが、デザイナー兼フロントエンドエンジニアという立場から、スタメンではどのように TUNAG をデザイン、開発しているかご紹介させていただきます。 デザイン制作 大きな機能開発が必要な場合、まずは手書きのワイヤーフレームで必要な要素や画面遷移、機能を確認します。その後、実際にデザインデータを作成しますが、この時に主に使用するソフトは、 Sketch Adobe Pho

こんにちは。エンジニアのmickey-STRANGEです。 今回はめんどくさがりによるめんどくさがりのための スマホ アプリ開発 についてお話したいと思います。 とはいえ、このブログの内容では スマホ アプリは作りません。 タイトル詐欺ぎりぎりですが、嘘はついていませんので、そういう認識でお楽しみいただけますと幸いです。 構成 GitHub Pages Web Storage IndexedDB 1.DBに接続する 2.オブジェクトストアにアクセスする 3.IndexedDBの注意点 まとめ 構成 先に書

こんにちは、サーバーサイドエンジニアの菅原です。 今回はJavaScriptの非同期処理について今更ながら学んでみました。昔ながらのCallback、ES6から追加されたPromise、ES7から追加されたasync await、さらにはRxJsについても調べてみました。 背景 昨今はUXの需要の高まりから非同期処理を書くことが多くなり、リアルタイム性やチャット機能、パフォーマンス改善のためにも非同期処理のコードを書くことが増えています。ただ非同期処理のJavaScriptのコードは処理が増えるごとにコー

こんにちは。　スタメンでエンジニアをしてます 市川 です。 今回はスタメンの開発環境や利用しているツール等を紹介したいと思います。 こんな環境で開発してるんだなぁーと、なんとなくイメージいただれば幸いです。 コンセプト : いかにサービスの開発に注力するか ベンチャーは人手も時間も足りません。　スタメンでは、少ない人数で いかに(ラクをして)サービスの開発に注力するか をコンセプトに、下記のような方針をとっています 便利な外部サービスがあれば積極的に使う サービスの根幹部分についてはしっかり作り込む 自動

本記事は、 一休.com Advent Calendar の23日目です。 宿泊事業本部フロントエンドエンジニアの宇都宮です。 先日(12/19)、一休の宿泊予約サービス（以下、一休.com）のスマホ版の予約入力画面リニューアルをリニューアルしました。本記事では、 どのような方針で どのような技術を使って どのような設計で どのように実装していったか を紹介します。 Before/After リニューアル前 ファーストビュー エラー通知 次の画面へ進む前に、alert() リニューアル後 ファーストビュー

この記事は 一休.com Advent Calenrad 2017 の2日目です。 宿泊事業本部フロントエンドエンジニアの宇都宮です。 一休.comの宿泊予約サービス（以下、一休）では、以下のようなスタックでWebフロントエンドの開発を行っています。 言語：ES 2017 ライブラリ・ フレームワーク ：古いところは jQuery 、新しいところはVue.js ビルドパイプライン：Webpack + Babel 一休では、主要導線のE2Eテストは整備されています *1 。一方、フロントエンド( JavaS

はじめに 皆さん初めまして、新卒一年目のFM_Harmonyと申します。 今回はマルチブラウザという観点から、 最近の JavaScript について調べました。 jQuery の登場や、主要なブラウザが標準仕様への準拠を進めたことで、エンジニアが JavaScript の動作環境を気にすることが、以前に比べ減りました。しかし調べていくと、今後は トランスパイル や AltJS による対応が、 JavaScript において必要になっていくのだということが分かりました。 このまとめが、 最近Webアプリケ

こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介します。 はじめに RetinaディスプレイなどのDPR（Device Pixel Ratio）の高いディスプレイの普及に伴い、Webサービス側でもその対応が必要となっています。基本的には高解像

mediba制作部 メディアクリエイティブグループ所属、フロントエンジニアの土方です。 Webページの制作および成果物の監修を担当しております。 jQueryでAjaxリクエストした際のレスポンスヘッダーについて、getAllResponseHeaders()で取得しようとした時、同一ドメインでは取得でき、クロスドメインの場合には取得できないヘッダーがあります。 今回、この件について紹介させていただきます。 ヘッダーの相違 仮に http://www.example.jp/index.html からAja

はじめまして、エンジニアの高松です。 今回は先日リリースした、「色・サイズ改修」でのフロントエンド開発についてお話したいと思います。 概要 「色・サイズ改修」は、主に以下を目的としたプロジェクトです。 購入可能な色やサイズが、ひと目で分かるようにする 次期リリースで、色とサイズを選択して購入できるようにすることで、誤注文を減らす 商品の色・サイズのデータを蓄積し、運営に活かす リリース時のお知らせが こちら です。 BUYMA はC2Cのショッピングサイトなので、改修は大きく出品側と購入側に分かれます。

どうも上津原です。 今回は、実装時に初心者だから（だと思う）つまずいたポイントと、どう解決したかをUnity操作、Oculus Rift対応それぞれに分けて紹介していきたいと思います。 教える立場の人は、完全初心者が3Dゲームに手を出すとどういうところにぶつかるのか？ これから始める人は、ぶつかる前にどこを押さえておけばいいのか？ それらの参考になれば嬉しいです。 では、Unity操作編、始まりです！ 3Dゲームの基本 3Dゲームには、Z軸や重力、当たり判定、ライティング、カメラ…いろいろな要素が絡みます