Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
デザイン思考を社内に広める活動紹介 〜 ユーザーファーストな「ものづくり」へ #デザイン思考
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのシステム部門でUXリサーチ、情報設計、UI設計などを担当している、UXデザイナーの近藤です。今回は、ヤフー社内で有志が取り組んでいる、デザイン思考の普及・推進活動についてご紹介します。 活動の背景 ヤフーは「UPDATE JAPAN」をミッションに掲げ、情報技術のチカラで日本をもっと便利にすべく、ユーザーファーストを意識したサービスづくりに日々取り組んでいます。 つくり手の思いつきや思い込みに頼らずお客様に問いながらものづくりを進めていくため、現場ではさまざまな手法やフレームワークが実践・推進されていますが、その中の一つがデザイン思考です。 デザイン思考とは簡単に言うと、ユーザーファーストで問題解決をするための
チームでデザイン力を高めよう！ Weekly UIトレーニングの紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの三崎です。今回は金融統括本部のデザイナーが約3カ月にわたり取り組んだ、Finance Weekly UIというスキルトレーニングをご紹介します。 デザイナーの悩み 業務上同じサービスに長く携わるインハウスデザイナーは似たようなトンマナ・ルールの中でデザインすることが多く、アウトプットの幅が狭くなりがちです。そして事業のフェーズや本人の役割によっては定期的にビジュアルをアウトプットする機会がない場合もあります。また新しいツールやトレンドも、サービスの成長フェーズや既存ユーザーの反応、移行コストを見極めて取り入れる必要があり、アンテナは張っているものの、導入までに時間がかかることもあります。 そんな課題に少しで
Yahoo! JAPANトップで見るウェブデザインの歴史
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年 アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah
ES6時代のNode.js
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 今回、担当しているシステムをNode.js LTS(v4.x)へバージョンアップしました。 それに伴い実施したES6対応の中から3つの事例を紹介したいと思います。 varを撲滅しよう arrow functionを使おう callbackを撲滅しよう varを撲滅しよう varをlet, constに置き換えます。基本はconstに置き換えます。 メリットは以下の点で、コードの品質向上につながると思います。 プログラム中で変更不可である事を明示的に示せる。 誤った使い方をした時にバグとして検出される。 varを利用するとブロック
レガシーコード改善勉強会 開催レポート
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフー株式会社の有地です。 9/27（土）の昼から6時間にもわたり、さまざまな視点から「レガシーコード」について知識を深めるための勉強会を開催いたしました。 「そもそも正しい仕様を知っている人がいない」 「システムのブラックボックス化が留まるところを知らない」 こんな不条理なレガシーコード（テストコードが無いコード）と日々戦うエンジニアも多いことと思います。 今あるレガシーコードをどうやって保守・改善していけばよいのかという課題に本気で取り組んでいる、または取り組みたいと考えている大勢の方々に参加していただきました。 ＜開催趣旨・目的＞ テストコードが無いプロダクションコードをレガシーコードと定義し、テストコードによって保護され、
知っておきたい7つのID連携実装パターン
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ID連携担当のくら（@kura_lab）です。 みなさんはYahoo! JAPANのWeb APIや認証、エンドユーザーの属性取得APIを実装したことがありますか。これらを利用するためにはYahoo! ID連携を用いてアクセストークンの取得やログインの実装が必要になります。単にアクセストークンの取得、ログインの実装といってもWebアプリ、ネイティブアプリにおいていろいろなパターンがあります。 SDKを用いる場合ほとんど意識せずに実装もできますが、提供するサービスのUXやシステムの環境に合わせてより最適な実装をするためには、それぞれの特徴を理解し適切なパターンを選択する必要があります。 Yahoo! ID連携はOAuth
となりの非エンジニアにもうまく伝えたい系エンジニアのコミュニケーション術
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして。もしくはお久しぶりです。ヤフオク!改めまして、リッチラボ兼マーケティングソリューションカンパニーで広告開発をしている光野です。 リッチラボは、2014年9月に発足したばかりのヤフー株式会社の子会社です。 企業内起業家育成制度「スター育成プログラム」を通じて法人化した第1号で、 主にスマートデバイス向けのリッチ広告を開発・販売しています！ 本日はYahoo! JAPAN Tech Advent Calendar 2014 13日目。リッチラボの話題はいったん控えまして、このエントリーではヤフーのエンジニアとして、Yahoo! JAPANを支える「非」技術ネタを投稿いたします。先日までと異なり、プログラムの一行も登場しな
デザイナー必見！ Xcodeで動くモックを作ろう
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog この記事を読むとデザイナーの方でもエンジニアと同じ開発環境で動くモックを作れるようになります！（社内での実績あり） 例えば以下のようなデザインの画面を新規に作りたいとします。そして社内の人に直接触ってもらい感想を聞きたいとします。 さて、あなたならどうやって感想を求めますか？ モックの画像をカメラロールに保存してユーザに見せたりしていませんか？ ですがこの方法だと触っているうちにピンチイン・アウトしてしまいますし、あまり良いやり方とは言えませんよね。 モック作成ツールを使うやり方もありますね。世の中には様々なモック作成ツールがあります。 ですが、モック作成ツールだと実現できないことも多々出てきます（例：画面の固定位置にオーバーレイ
let UIWebView as WKWebView
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog どうも、taketo1024 こと佐野です。現在はヤフーの新しい検索アプリ「SmartSearch」のサービスマネージャ兼 iOS アプリ開発を担当しています。 この記事では SmartSearch のコードでも使っている、UIWebView と WKWebView の分岐処理をキレイに隠蔽（いんぺい）するためのテクニックをご紹介したいと思います。 WKWebViewとは iOS 8 から WebKitFramework が導入され、従来の UIWebView とは別に WKWebView というクラスが使えるようになりました。両者の違いは こちらのスライド でも詳しく解説されていますが、簡単に言うと WKWebView は UI
Yahoo!ボックスAPIをリリースしました！
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ボックスWebAPIリリース こんにちは。Yahoo!ボックスの開発を担当しております。瀬川です。 Yahoo!ボックスではボックスWebAPIをリリースしました。 ボックスWebAPIはYahoo! JAPAN初のオンラインストレージを扱う事ができるAPIです。 今回はボックスWebAPIを使い始める方法から、どのようなAPIがあるかまでご紹介させていただきます。 Yahoo!ボックスとは Yahoo!ボックスとは写真やドキュメントなど、あらゆるファイルをオンラインストレージで管理できるサービスです。 ブラウザー、PCアプリ、スマートフォンアプリで展開しており、マルチデバイスでの利用ができます。 Yahoo! JAPAN IDを
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
デザイナーのためのSubversion/TortoiseSVN入門2 -Subversionでのフォルダーの命名・構成とTortoiseSVNの便利な使い方-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに Yahoo!検索のデザイナー担当の竹内美帆です。前回の記事「もうファイル管理で困らない！ デザイナーのためのSubversion/TortoiseSVN入門」では、「Suvbersionの概要」と「TortoiseSVNのインストールから基本操作」を解説いたしました。今回はさらに一歩踏み込んで、Subversion初心者の多くが疑問を持つ「Subversionのフォルダーの命名と構成」と「TortoiseSVNの便利な使い方」をご紹介します。 目次 Subversionのフォルダーの命名と構成 基本的なフォルダーの命名と構成 柔軟な構成を考えてみる TortoiseSVNの便利な使い方 変更履歴を見る 前回のリビジョンと
HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ「えほんのじかん」（iPad版）の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの「えほんのじかん」の元祖は、「テレビ版」でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
HTML+CSSコーディングが10倍速くなるZen Coding
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 今までZen Codingの基本（マークアップ効率化 - zen-codingでコーディングを倍速に）、Zen Codingの応用（Zen-Codingの応用でもっと超速に- 原稿ありきの変換について）と二つの記事を書いてきましたが、今回もまたZen Codingについての記事となります。 Zen Codingしか知らないわけではないのですが......立て続けの内容ご容赦いただければと思います。 今回は今までの記事とは違って、11月26日（金）発売予定の「HTML+CSSコーディングが10倍速くなるZe
Open TechTalk「Hadoop Hack Night」レポート
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、TechBlog担当の井野です。 3月8日に開催されたOpen TechTalk「Hadoop Hack Night」についてのレポートをお届けいたします。本イベントは、思った以上に多くの方にご応募いただき抽選とさせていただきました。当日は、当選された１００名の方々にお集まりいただきました。ありがとうございました。 さて、本イベントですが、大きく分けて三部構成でお送りいたしましたので、各々ご紹介いたします。本イベントのTwitterハッシュタグ『#hadoophn』も活発にやり取りされておりました。 イベントの詳細は、技術評論社さんの「gihyo.jp」にも掲載されておりますので、 あわせてご覧ください。 Hadoop
Yahoo!検索の「ユーザーインターフェース設計」
分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル
JavaScript の不思議な面白さ - 最終回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog これまで七回に渡って連載を続けてきました。 今回が最終回です。 ここまでが、私の知る JavaScript 開発の手法変化の歴史です。 最近では多くのフレームワークやライブラリが登場し、最近ではこうしたライブラリを利用した開発が一般的になりつつあります。 今回は、ここまでの手法を元にフレームワークを完成させたいと思います。 ＊ フレームワークといっても今回作るのはごく小規模なものです。 大規模に利用する場合にはここにさまざまな機能を付け加えていく必要がありますが、ここまででも必要最低限の機能を備え、HTML を効率よく構築することに特化したフレームワークとなっています。 前回からの変更点は以下の通り ・クラスの継承を利用 ・x-i
JavaScript の不思議な面白さ - 第六回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog JavaScript フレームワークを作ろう 私はフレームワークを、ある特定のコーディングルールを実現する為の手法ともとらえています。 それがなんであれ、世にあるフレームワークには何らかのコーディングルールを満たした状態を容易に維持しながら効率よく開発する為の基盤を提供していると思います。 今回からはフレームワークを実際に作ってみましょう。 題材としてはもちろん、前回まで利用してきたプログラムを使います。 ＊ 前回のプログラムをご覧になった方で勘の良い方はここから「HTML 文字列の効率よい組み立て方」に話の主軸が移ってくることにお気づきだと思います。 まず対象のコードをじっと見つめてみましょう。 var HTMLParts =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
