こんにちは。今日はイベント開催のご案内です。 12/12(水) に一休.com / 一休レストランの開発事例についてのミートアップイベントを開催いたします。 Ikyu Frontend Meetup 今回は「フロントエンド開発」をテーマとして 一休レストラン スマートフォン検索ページのSPA化 一休.com スマートフォンホテルページのパフォーマンス改善 を軸にNuxt.jsの導入、コンポーネント設計、CSS設計、画像最適化によるパフォーマンス改善などの事例をご紹介いたします。 セッションのほかにも、パネ

BASEでエンジニアリングマネージャーを担当している加賀谷です。普段は採用に携わったり、1on1での経験学習の促進などを通じて、個人と組織のアウトプットが大きくなるようにサポートする仕事をしています。また、サービス開発に関わる体験を良くしていくこともしています。その中で今回は、静的コンテンツのCI/CDでしていることを紹介したいと思います。 静的コンテンツのホスティング 静的コンテンツは、サーバサイドでリクエストに応じてレスポンスする内容を作成しないデータです。主に、サイト内で使う画像、CSS、JS、ラン

一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライ

こんにちは。 一休.com の開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善した話を書きます。 概要編はこちらになります。 user-first.ikyu.co.jp JavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp CSS・その他パフォーマンスチューニング編はこちらになります。 user-first.ikyu.co.jp この記事ではスマートフォンホテル

こんにちは。 一休.com の開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。 概要編とJavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp user-first.ikyu.co.jp この記事ではスマートフォンホテルページリニューアルで実施したCSS・その他細かいチューニングについてお話しします。 ここでお話しする内容 CSS再設計＆

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

こんにちは。 一休.com の開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。 UI部分は既存を踏襲する形をとり、UX・パフォーマンス改善にフォーカスして、所々で様々な工夫をしました。 お話ししたいことが盛りだくさんなので 概要編 JavaScriptパフォーマンス改善編 CSS・その他細かいチューニング編 サーバサイド編 の4つに分けて、お送りしたいと思います。 この記事ではスマートフ

一休で働くことに興味を持っていただくために、一休のサービスやビジネス、開発組織がどうなっているかを紹介する資料を公開しました。 もし興味を持っていただけたら、いつでも話を聞きに来てください！ www.ikyu.co.jp おまけ 先日、弊社のCSSエンジニアの募集がちょっとだけ話題になっていました。 "CSSエンジニア"って求人初めて見た… 「近年のCSSをはじめとするWebフロントエンドの新しい技術、ツール、テクニックを前提とした次世代のWebデザインを提案・実現する役割」 &quo

こんにちは。スタメンでデザイナー兼フロントエンドエンジニアをしているナガキです。 弊社が提供している「TUNAG」 には（オプションで）ビジネスチャット機能があります。 App版チャット PC版チャット ご覧のように、 スマホ アプリ版は非常にシンプルな画面構成ですが、PC版はひとつの画面内に様々な情報を表示する必要があり、どうしても複雑になりがちです。 そんな複雑で大量の情報を CSS の Flexbox を利用してレイアウトしています。 今回は「TUNAG」PC版チャットを例に、 Flexbox の便

こんにちは。 春からスタメンでフロントエンドエンジニアをしております、桑原と申します。 初めての投稿となります。 今後のフロントエンド開発の紹介を意識して、今回は入口となるファイル構成に ついて紹介させていただきます。 前置き デファクトスタンダード から乖離することに悩み踠き苦しみ、何が正解なのかを 日々模索しながら開発をすることは、フロントエンドエンジニアの宿命とも言えます。 ファイル数が肥大化しやすい React-Redux での開発ならば尚のことです。 私のモットーは 可読性の高いコードはファイル

（Icon Credit *1 ） こんにちは。PB開発部インフラチームの @inductor です。最近はすっかり インフラ勉強会 というオンライン勉強会の運営が趣味になっています。 今回はLambda@EdgeというAWSのサービスを使って、CloudFrontへのアクセスを「細かいルール」を設定して振り分けてみたいと思います。 Lambda@Edgeについてもう詳しく知っているよ！　という方は、次のセクションはスキップしてもらって構いません。もしよく知らないという方は、一緒に勉強してみましょう！ A

みなさん、こんにちは。開発本部エンジニアの平木です。こちらのブログの投稿自体はほぼ 1 年ぶりになりそうな勢いですが、みなさまお元気でしょうか? 弊社で定期的に開催してる社内勉強会 TechLunch で自分の順番が回ってきたため、どうしようか迷った末に JavaScript AST ことはじめ という発表をしたので、そのことについて書いていきます。 なぜ JavaScript AST について話そうと思ったのか 現在、弊社のエンジニアメンバーのバックグラウンドで一番多数派なのは「元サーバサイドエンジニア

こんにちは。BASE で Design Group に所属している 三佐和 です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってき

こんにちは。プレスリリースや前回の平山のブログでも紹介がありました、患者とつながるクラウド型電子カルテ「 CLINICS カルテ 」のデザインを担当しているマエダです。 この電子カルテは、医療情報という複雑かつ独特なデータを扱うため、これまで自分自身が取り組んで来たような Web サービスとは違ったデザインのアプローチが必要でした。 今回は、そんなデザイナーの苦悩と葛藤についてお話します。医療に限らず、複雑な業務フローの業界でデザインに悩む人のお役に立てれば嬉しいです。 デザインに取り掛かる前の準備 CL

こんにちは。プレスリリースや前回の平山のブログでも紹介がありました、患者とつながるクラウド型電子カルテ「 CLINICS カルテ 」のデザインを担当しているマエダです。 この電子カルテは、医療情報という複雑かつ独特なデータを扱うため、これまで自分自身が取り組んで来たような Web サービスとは違ったデザインのアプローチが必要でした。 今回は、そんなデザイナーの苦悩と葛藤についてお話します。医療に限らず、複雑な業務フローの業界でデザインに悩む人のお役に立てれば嬉しいです。 デザインに取り掛かる前の準備 CL