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

結論 要約 背景 本文 MVCが考えられた時代 PDSとMVC 現代Webフロントエンドの複雑さ PDS適用の困難さ PDSの放棄とプレゼンテーションモデル 結論 宣伝 結論 fluxのstoreは、（意味があって）「プレゼンテーションとドメインの分離」（PDS）に則っていないので、MVCのモデルではありません。 要約 MVCが考えられた時代では、プレゼンテーションロジックとドメインロジックが同等、もしくはドメインロジックの方が多かったです。その場合、PDSが有効でした。 現代のWebフロントエンドでは、プレゼンテーションロジックの方が圧倒的に多いです。プレゼンテーションロジックが9割ということも珍しくありません。この場合は、PDSは役に立ちません。 プレゼンテーションロジックの中で状態を持つ部分と、画面を描画する部分を分離する方が合理的に分割できます。この分離された「プレゼンテーションロ

TL;DR MVCもレイヤで捉えて関係性の設計をするといいのでは 普通のRubyオブジェクトを積極的に使いたいですね 「パーフェクト Rails」に期待しましょう 長くなって面倒くさくなり、途中から手抜き感が半端ないですが許してください この記事の位置付けなど 7 Patterns to Refactor Fat ActiveRecord Models - Code Climate Blog [翻訳] エリック・エヴァンスのドメイン駆動設計 エンタープライズ アプリケーションアーキテクチャパターン これらの参考文献を踏まえてRailsアプリケーションのリファクタリングをしていて、だいぶ方向性や考え方がまとまってきたので、これからチームに合流する人を想定読者に、Qiitaがどんな感じで作られているのかを文書化したものです。（参考文献の一覧は記事の最後にあります） 内容的には文献[2,3]を踏

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

2018年3月29日 iOS Test Night #7に「アプリを十数個作った僕が初めて書いたテストの話」という内容で登壇してきました！ iOSエンジニアの小菅です。 2018/03/26（月）に行われたiOS Test Night #7に登壇してきたので、スライドを紹介しつつまとめ記事を書きました。 公の勉強会での登壇は久しぶりで、しかも80人以上の方が参加されていたのでとても緊張しました。 当日は�Youtubeのリアルタイム配信も行われていたらしく（当日知った）賑やかで楽しい会でした！ 自分は�５分のLT枠で発表させて頂きました。 他の登壇者の発表タイトルを見て、テストのテクニックやらTDDやらがある中で�初心者向けのネタで大丈夫かなと不安にもなりましたが、問題なかったです。 みんな優しかったです。 発表内容 Speaker Deckにあげさせて頂きました。 当日話した内容にプラス

RubyOnRailsを触れる過程でMVCという概念を学び その後、他のフレームワークでMVCやMVP、MVVMというものを知ったのですが Railsで語られるMVCと他で語られるMVCのニュアンスが若干違うので そこを基点にMVCの違い、そしてMVP、MVVMとは何なのかをまとめてみました。 MVC(Model,View,Controller) 定義としてのMVC 上記でも挙げた通りMVCは使う場面やフレームワークによって ニュアンスが異なっています。 そのため根本的な「MVC」の一般的な定義は一体どんなものなのかを見てみました。 Wikipediaからまとめると以下のとおり。 アプリケーションソフトウェアの内部データを ユーザーが直接参照・編集する情報から分離する。 そのためにアプリケーションソフトウェアを 「Model」「View」「Controller」の3つに分割する。 ・Mod

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

新着記事を（無料で）LINEへお届けします。以下のリンクからLINEで友達登録してください。 https://line.me/R/ti/p/%40pap3801g ---------------------------- 最近はアメリカで、大型の株式上場が相次いでいます。つい先日はDropboxを取り上げましたが、今日は音楽ストリーミング界最大手のSpotifyを取り上げたいと思います。 今回、Spotifyがニューヨーク証券取引所に上場申請を行った際の申請書が公開されました。 Spotify Technology S.A. FORM F-1 REGISTRATION STATEMENT 今回のSpotifyの株式上場は、通常の株式上場とは若干異なり、新規に株式を発行せず、既存の株式を証券取引所に上場するという形をとっています。これをDirect Listing(ダイレクト・リスティング、

個人的にちょうど該当の問題を取り扱ったので、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

コメント欄で「Software Design 誌 (2018/12) に寄稿した内容や修正などをこちらの記事にも適用したい」と言ったあと、やるやる詐欺でずっと放置していましたが、三年近く経ってようやく 2021年 7月に大幅に改訂し、同時に Zenn に引っ越すことにしました。 タイムゾーン呪いの書 (知識編) タイムゾーン呪いの書 (実装編) タイムゾーン呪いの書 (Java 編) なにやら長くなりすぎたので三部構成になっています。 この Qiita 版は、しばらく (最低一年は) 改訂前のまま残しておきます。 タイムゾーンの存在はほぼ全ての人が知っていると思います。ソフトウェア・エンジニアなら多くの方が、自分の得意な言語で、タイムゾーンが関わるなにかしらのコードを書いたことがあるでしょう。ですが、日本に住んで日本の仕事をしていると国内時差もなく1 夏時間もない2 日本標準時 (Japa

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 -

大学の授業用のサブ教材として、生徒に「深く考える」トレーニングの資料を作ってる。 思考力というのは、トレーニングで伸ばすことができる。トレーニングでは、まずは自由な思考よりも、フレームワークを使い倒すことが重要だ。数をこなせば、考えることが苦ではなくなる。それが一番重要だと思う。基本的なトレーニングができていない状態で、自由に発想させても、大半の人は途方にくれてしまう。 ここでは何回かのシリーズを通じて、段階的に複雑なことを思考するためのフレームワークを紹介していく。 まず第1回目は、シンプルで誰でもつかえるフレームワーク、The Five Whys（5つのなぜ？） だ。 「5つのなぜ？」ものごとについて、5回「なぜ？」と深堀りをする。 The Five Whys（5つのなぜ？）は、たったそれだけのシンプルな思考ツールだ。 大抵の人間は、2〜3段階深く以上ものごとを考えられない。いままでの

これまでSFC(Single File Component)ではBEMによる命名を使っていましたが、コンポーネントを書くうえでは冗長だと感じました。そこで、ECSSの考え方をベースとして、SFCに合わせてカスタマイズする形に落ち着きました。 SFC向けCSSということでSFCSSと呼ぶことにしています。 scopedでも命名規則は必要 まず前提として、<style scoped>でコンポーネントのスタイルが外に漏れないとしても、命名規則は必要になります。scopedだからといって適当に書いたクラス名のツケは、きっとあとあと払うことになるでしょう。 公式のスタイルガイドに書かれているように、サードパーティのCSSが適用されないようにするためにも、コンポーネント固有のプレフィックスなどをつける必要があります。 ただしSFCでの開発は、通常のwebサイトとは性質がことなりますので、必ずしもプレフ

こんにちわ、Nagisaのデザイナーリーダーの川畑です。 最近FramerやInvisionSTUDIOを筆頭にインタラクション・アニメーションデザインのツールが続々登場して賑わっていますね。 弊社でも各デザイナーが新しいツールを手に取り、どのような制作ができるのかとワクワクしながら積極的に試しています。 その試みの一環として“Protopie”というツールを触っていたのですが、 評判通りとても使い勝手がよく、せっかく触るなら!と公式チュートリアルで紹介されていない動きもチャレンジしてみたので、その作例と手順を紹介したいと思います。 ProtoPieの概要や優れている点を知りたい!という方は公式サイトやこちらの記事をご覧になってください。 ・ProtoPie – 公式サイト ・“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた 今回紹介するもの ス

久しぶりの記事更新です。 今回はかねてより書いてみたかったword2vecについて。 word2vecはとても面白い考え方なのですが、個人的には仕組みがちょっと捉えづらく、理解するのに結構時間がかかりました。 そこで今回は、過去の自分を救えるように、word2vecをできるだけ簡潔に、そして直観的に理解できるように解説していきます。 なお、word2vecについては以下書籍でよくまとまっているので、よろしければ是非！ Pythonと実データで遊んで学ぶ データ分析講座 作者: 梅津雄一,中野貴広出版社/メーカー: シーアンドアール研究所発売日: 2019/08/10メディア: 単行本（ソフトカバー）この商品を含むブログを見る ※追記※ スマホのAMPだと、行列や数式がうまく表示されない可能性がありますので、こちらのリンクかPCから購読頂けますと幸いです。 word2vecを使うと何ができる

2018年1月16日 iOSアプリの画像ライブラリ、NukeのWebP対応版を本家からForkして公開しました 2018/01/19 更新 この記事で紹介しているNuke+WebPをdeprecateして、plugin形式にした Nuke-WebP-Pluginを作成しました。 詳しくはこちらをご覧ください。 はじめに iOSエンジニアの小菅です。 今回の記事は、去年末くらいから名前を聞くようになったNukeをForkして、WebPのデコード処理を組み込んだモノを開発して公開したので、それの紹介と作業手順などを書いていきます。 余談ですが、Nuke[ニューク]の意味を調べたら核兵器って意味らしいです。 Nukeと作ったものの紹介 先にNukeの紹介と作ったもののインストール方法を紹介します。 本家のNukeのレポジトリ 今回、本家がWebP対応をする予定がないとのことだったので、Forkし