はてなブックマーク

これは GraphQL アドカレ2019 の記事です。 アドカレを覗いたとき、最終日だけ空いていたので予約しておいたのですが、最終日のエントリとするにはかなりニッチなネタになってしまった気がしないでもないです。 GraphQLのDirectiveとは 知っている人も多いと思いますが、GraphQLのDirectiveというのは文中に @include のように@マークをつけて注釈をつけるための機能です。 query ProfileView($renderingDetailedProfile: Boolean!){ viewer { handle # These fields will be included only if the check passes: ... @include(if: $renderingDetailedProfile) { location homepageUrl

今年のAngularアドカレはテストの話題が豊富ですね。 Angular8 ユニットテストが動かねぇ！ や はじめてのユニットテストを書く前にモック実装で手が止まってしまわないために など、テストコードを書く上での知見が色々と紹介されています。 僕自身も3年前のアドカレで、Zone.jsがいかにAngularのテストに貢献しているかとかを書いたりしたことがあり、Angularの色々な機能の中でもテスト周りは特に好きな部分の1つだったります。 さて、Angularで直近ホットだった話題といえば、やはりIvyは外せません。 Ivy自体は基本的に内部構造の変更であるため、アプリケーションコードの書き方そのものに影響する話ではないですが、AoT(Ahead of Time)コンパイルをデフォルトにするための布石であり、バンドルサイズの削減やビルドプロセスがシンプルになる、といった効果については聞い

はじめに 少し前にPrisma 2のpreviewがアナウンスされたので、素振りがてら調べてみました。 まだPreviewのため、実装やAPIは大きく変更される可能性があります Prisma 1 v.s. Prisma 2 Prisma 1 ってなんだっけ そもそもPrisma is 何をおさらいしておくと、Prismaは元来graphcoolというGraphQL as a Serviceのバックエンド部分を切り出したフレームワークです。 https://www.prisma.io/blog/prisma-raises-4-5m-to-build-the-graphql-data-layer-for-all-databases-663484df0f60 より また、prisma - 最速 GraphQL Server実装にも書いてある通り、 GraphQL の形をした ORM MySQL/

最近、GraphQL APIをインターネット上に晒す上で何を考慮したらいいのだろうか、的なことを考える機会が多く、空いた時間でチマチマと素振りしています。 今日はGraphQLのクライアント - サーバー間に挟むリバプロ的な機能について書いてみようと思います。 やりたいこと 1. 想定しないクエリの排除 例えばECやメディアサイトのような、未ログインでも情報の閲覧が可能なサービスのWeb API層をGrahpQLで実装したとします。ECにしろメディアにしろ、詳細ページでの回遊率を上げるため、詳細同士を関連付けるようなスキーマ設計となるのは自然なことでしょう。 GrahpQLのスキーマ定義で書くと、下記のようなイメージです。

最近、空いた時間でチマチマとApolloを触っているのだけど、どうも腑に落ちないことがあったのでメモを残しておきます。 先に言っておきますが、特に何の結論もないです。 GraphQLのFragment colocationとは 僕が直面している課題感を説明するために、クライアントサイドGraphQLにおけるFragment colocationについて整理してみましょう。 "colocate" という単語自体、普段はそうそう耳にしないと思います（僕もGraphQLの文脈以外で使ったことがない）。「一緒に配置する」といった意味のようです。 では、何と何を一緒に配置するのでしょうか。それはGraphQLクエリとコンポーネントです（ここでのコンポーネントは、ReactやAngularにおけるViewの部品単位を指します）。 GraphQLの大きな特徴の1つに「クエリのレスポンスに含まれるデータは

先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /

気付いたらTS 3.1.1がしれっとリリースされていたので、今回導入されたMapped Tuple Typeについて書いてみようと思います。 対応するPRはこちら。 今回のMapped Tuple Typeは、TypeScript 2.1で導入されたMapped Typeの強化版です。 ちなみに「Mapped Type is 何」という人は、以前に解説記事を書いたのでこれを読むと良いかと。 さて、Mapped Tuple Type、別に新しい記法とかが追加されたわけではありません。 次のコードは上記のPRに記載されているサンプルです。 type Box<T> = { value: T }; type Boxified<T> = { [P in keyof T]: Box<T[P]> }; type T1 = Boxified<string[]>; // Box<string>[] type

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

clangdとは clangのLanguage Server Protocol 実装。 LSPはMicrosoftが提唱しているIDE支援のための統一プロトコル。 Language "Server"とあるとおり、言語支援のためのサーバーが常駐する。この手の機構を個別に備えた言語として、TypeScriptのtsserverとか、C#のOmniSharpなどが挙げられるけど、それの汎用版。 clangdはLLVMのフロントであるclangをベースとしたサーバーで、LLVMプロジェクトが公式に開発している。 コンパイラなので、コンパイルエラーの検出はもちろん、コード補完やフォーマット、定義ジャンプと参照元ジャンプ等には対応している。 なので、clang-formatやRTagsといったclang系ツールも、LSPクライアントを導入してしまえば、これらの個別設定をしなくてよい。 clangdのイ

どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お前は今までスクショした画像の枚数を覚えているのか？ こんにちは。WACULでフロントエンドエンジニアをしている @Quramy です。 冒頭のやつは書いてみたかっただけです。気にしないでください。ちなみに僕はDIOよりも吉良吉影派です。 11月末に、Node学園祭で Introduction to Visual Regression Testing というLTをさせて頂きました。 この時は大分話題を絞っての発表でしたので、今日は弊社で実施しているフロントエンドの画像回帰テストについて、LTでは割愛した部分も含めてヌルっと書いていこうと

皆さん、Yahoo!検索大賞 2017はご覧になりましか？ このアワードで大賞に輝くと、「今年の顔」の名誉を手に入れることができるんです。 そんな栄えある今年の大賞は、ブルゾンちえみとのこと。 他にも、俳優部門は高橋一生、女優部門は吉岡里帆、といった具合に各分野毎に受賞者がいます。 ところで、僕はあまりテレビを観ないので、誰が誰やらわかりません。 このままだと安心して2018年を迎えることができないので、画像を読み込んでそれが誰なのか判定するアプリが必要です。 一目見れば区別つきそうなものですが、僕の濁った目で直接見るよりも、機械に判定させた方がよいに決まっていますので、作ってみました。 実際の動きはこちらから確認できます。 今回はブルゾンちえみも含め、Yahoo!検索大賞の受賞者から以下の5人をピックアップし、判別できるようにしています。 ブルゾンちえみ(お笑い部門) 高橋一生(俳優部門

はじめに 何やかんやでAngularネタを書くのはわりと久しぶりです。 長らくbetaだったAngular MaterialもいよいよRCを迎えています。 今日は、Angular MaterialのサブプロジェクトであるAngular Component Dev Kit（以下CDK）について簡単に紹介していきます。 CDKを学ぶべき理由 Angular Materialのステータスアップデート にもあるとおり、 CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。 CDKはUIライブラリ開発にありがちな機能を、コンポーネント開発基盤としてまとめたパッケージです。 「CSSをデザイナが提供してくれる

はじめに このエントリは、画像解析ライブラリであるOpenCVをWeb Assemblyとしてビルドしてブラウザで動かす、というのを一通りやってみたメモです。 主なコンテンツとして下記を含みます。 OpenCVのwasmビルド方法、.wasmのカスタマイズ方法 性能改善(モジュールのキャッシュ、Web Workersなど) 動作はここから確認できます。 お題 主な主眼は「ブラウザでOpenCV動かす」部分で、build筋鍛えること自体が目的なので、題材は正直なんでもいいのですが、ここでは2枚の特徴点を抽出してマッチングする、というのをJavaScriptでやってみることにしました。インターネッツに山のようにサンプルが転がっていますが、Pythonで書くと下記です。 import cv2 img1 = cv2.imread('img1.png') img2 = cv2.imread('img

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chromyや、やはり先日GitHubでトレ

絶対に忘れる自信があるので今のうちにメモっておく。 Lerna is 何 Lerna はmonorepoを管理するためのツール Babelのように、単一レポジトリで複数のnpmパッケージを管理できる レポジトリ内パッケージ間の依存関係をsimlinkにより解決してくれる（勝手に npm link してくれるイメージ） やりたいこと 開発者がmasterへコード修正commit(PRのmergeなど) CIでテスト実行 開発者がリリース意思表示 CIでリリース実行 lerna publish が実行されて、npmへpublish完了! 今回はCIサービスにはCircleCI(2.x)を選択。 特にCircleCIにこだわっているわけでもなく、workflow的な仕組みが備わっているCI Serviceであれば問題ないはず。WerckerCIとか。 準備 lerna publish は下記を逐

import * as ts from 'typescript/lib/tsserverlibrary'; const factory: ts.server.PluginModuleFactory = (mod: { typescript: typeof ts } ) => { const pluginModule: ts.server.PluginModule = { create: create, }; return pluginModule; } function create (info: ts.server.PluginCreateInfo): ts.LanguageService { return info.languageService; } export = factory; create という名前の関数を用意して、そいつがLanguageServiceを返せばいいだけで

はじめに どうも、 @Quramy です。 前回の投稿から随分日が経ってしまいましたが、この投稿はある意味で前回投稿の続編的な内容になります。 今日はTypeScript 2.3から導入されるLanguage Service Extensibilityと呼ばれている機能についてまとめてみようと思います1。 どのような変更なのか TypeScript Roadmapのリンクを辿っても、https://github.com/Microsoft/TypeScript/pull/12231 に行き着くだけで、パッと見は何の機能なのかよく分かりません。 このPRの実装を眺めると、次の機能が見えてきます。 tsconfig.jsonのcompilerOptionsに"plugins"というキーが追加されている pluginsに指定した内容は、TypeScript本体からresolveされる すなわち、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

どうも @Quramy です。 さて、今日も今日とてAngular + エディタ関連ネタです。そろそろAngular 2というと怒られるらしいのでAngularと書きます。 先に成果を見てもらうのが手っ取り早いですね。コイツを見れ。 見ての通り、Angular Componentのテンプレート中でプロパティ名補完とエラーチェックを行えるようにしてみました。 上図はVimのキャプチャですが、もし、これを読んでる貴方がVisual Studio Codeユーザーであるならば、これ以降は全く読まなくてよいです。https://github.com/angular/vscode-ng-language-service にVSC用のpluginが転がっているので、こいつを入れればいいさ。 今日の想定読者は、Emacs, Vim, Sublime Text あたりを使ってAngularのコードを書いて

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

どうも。WACULでフロントエンジニアをしている @Quramy です。 このエントリはWACUL Advent Calendar 2016の8日目の記事として書いています。 さて、RxDBというデータベースをご存知でしょうか？ 僕もつい先日知ったばかりなのですが、2016年12月になって、急激にGitHubのtrend入りしてきたプロダクトです。 RxDBの概要 RxDBは以下の機能をもった、主にフロントエンド向けのデータベースです。 Reactive (rxjs) Replication / Sync Schemas (jsonschema) Mango-Query (MongoDB) Encryption Level-Adapters Import/Export (.json) MultiWindow-Support データベースといってもRxDB自体が決まったデータストアを持ってい

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Angular2でモーダルを自作したメモ。 要件: Angular以外のライブラリには頼らない モーダルを開く時はServiceとして扱いたい モーダルの内側はComponentとして開発したい モーダルを閉じた場合、Promise(or Observable)をresolveしたい。 要するに、下記のようなコードを書きたいのだ。 import { Component , Input } from "@angular/core"; import { ModalContext } from "./modal"; @Component({ selector: "greeting", template: ` <div> <section> <input [(ngModel)]="message" placeholder="Message"> </section> <footer> <button

createInternal(rootSelector:string):import2.AppElement { const parentRenderNode:any = this.renderer.createViewRoot(this.declarationAppElement.nativeElement); /* A. DOM要素の生成 */ this._el_0 = this.renderer.createElement(parentRenderNode,'h1',(null as any)); this._text_1 = this.renderer.createText(this._el_0,'',(null as any)); this._expr_0 = import7.UNINITIALIZED; this.init([],[ this._el_0, this._text