OK Google, Protocol Buffers から生成したコードを使って Node.js で gRPC 通信して Mercari Advent Calendar 2020 の17日目は、メルカリ WebUX チーム でテックリードマネージャをしている @vwxyutarooo がお送りします。普段はエンジニアリングマネージャやテックリードをしたりフロントエンドエンジニアをしています。今日は Node.js で gRPC 通信します。なぜなら Node.js で gRPC 通信したいからです。 Mercari ではバックエンドに microservices アーキテクチャを採用していて、gRPC も採用されています。多くの microservices は go 言語によって実装されていますが、一部のサービスでフロントエンドエンジニアとのコミュニケーションや on-call 対応の受

Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro Frontends に関して考える機会があったので、Micro Frontends とはなんなのか。何をどのように解決しようとしているのかという内容を紹介します。 Micro Frontends とは Micro Frontends という考え方は ThoughtWorks Technology Radar にて2016年に初めて登場したと言われています。日本語で言うときは複数形は無視して "マイクロフロントエン

フロントエンドエンジニアの @vwxyutarooo (Yutaro) です。11月の7-8日に San Francisco にて行われた GrahpQL Summit 2018 に参加してきましたのでその様子をお伝えします。 フロントエンドからは私とチームメイトの @carlos の2名、バックエンドからも3名参加しました。 現在のメルカリ Web では GraphQL は使われていませんが、アーキテクチャを刷新する Re-Architecture というプロジェクトにおいて GraphQL を使用しています。 トークの内容は YouTube にて公開される予定ですので、全体の雰囲気と私が気になったトークをいくつか紹介します。 GraphQL Summit とは GraphQL Summit 2018 GraphQL Summit は2016年から始まり今年で3年目となります。Graph

ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし

はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹

個人的にちょうど該当の問題を取り扱ったので、TypeScript 2.7.1 で導入された esModuleInterop　オプションの役割と背景についてまとめておく。 なお、本来は export と import の両方に影響するオプションだが、この記事では外部の npm パッケージを import する状況のみを取り上げる。 TL;DR Node.js 環境で import/export を使う場合、 esModuleInterop オプションを積極的に有効にする。 関数や class を export するモジュールを import する場合、import * as _ from '_' のかわりに import _ = require('_') を使う。 モジュールの互換性 先にTypeScript の ES6 modules の解釈と allowSyntheticDefaultI

2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

こんにちはソウゾウ社な@vvakameです。 今回はちょっと遅くなってしまいました…。 TypeScript 2.7.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ！ 変更点まとめ クラスのフィールドの初期化チェックをより厳密に行う Stricter class property checks --strictPropertyInitialization が追加 --strict に含まれる ? 無しの場合コンストラクタ内で初期化しないとダメ 変数末尾に ! をつけることで初期化チェックを割愛できる Definite assignment assertions CommonJSなモジュールのimportがbabelとか互換になる Easier ECMAScript module interoperability -

2017年9月29日 Workbox で Service Woker のキャッシュを導入してみた話し、Webpack を添えて はじめに Webkit の ServiceWorker (以下 SW) in develop 事件以来、SW にも希望が持てるようになってきました。PWA という言葉もちょっとバズワードっぽくなっているのでここで PWA というワードもさり気なく入れてみます。 Nagisa でも マンガZERO というサービスの Web 版で Workbox を使って SW を使ったクライアントキャッシュを導入してみたので、Workbox の使い方など紹介します。 環境 マンガZERO Web の環境はざっくりこんな感じです。 Vue.js 2.0 Vuex SPA Webpack でビルド Express で SSR UA 判定でのデバイス切り替え (PC・SP) Webpac

WordPressサイトの運営引き継ぎ！確認しておきたい10のポイント 2013.06.28 | WordPress | 制作あるある 雨の日はやる気70%OFF。梅雨は苦手なエメラルドです。 中〜大規模のサイトでもWordPressはたくさん使われています。ポータルサイトなどを中心に、月額契約でWordPressで作られたサイトの定期的なデザインやシステム改修の運営のご相談をいただくことが増えてきました。 長いお付き合いになるクライアントです。見積もりを出すのにもいくつか確認しておきたいなーというポイントを制作に関すること中心でまとめてみました。 全てクライアントが答えられるわけでもないので、可能であれば一度調査としてソースや管理画面を見て自分で確認してみるのがいいでしょう。 1. コアファイルを修正していないか 今時コアファイルをいじる制作者の方はいないと思いますが、大幅に直されている