GraphQLとPersisted Query - Qiita
最近、GraphQL APIをインターネット上に晒す上で何を考慮したらいいのだろうか、的なことを考える機会が多く、空いた時間でチマチマと素振りしています。 今日はGraphQLのクライアント - サーバー間に挟むリバプロ的な機能について書いてみようと思います。 やりたいこと 1. 想定しないクエリの排除 例えばECやメディアサイトのような、未ログインでも情報の閲覧が可能なサービスのWeb API層をGrahpQLで実装したとします。ECにしろメディアにしろ、詳細ページでの回遊率を上げるため、詳細同士を関連付けるようなスキーマ設計となるのは自然なことでしょう。 GrahpQLのスキーマ定義で書くと、下記のようなイメージです。 type Product { id: ID! name: String! relatedProducts: [Product] } type Query { produ
TypeScript 3.1 の Mapped Tuple Typeについて
気付いたら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
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
TypeScript 2.8 の Conditional Types について - Qiita
今日はTypeScript2.8で導入されたConditional typesについて書きます。 TypeScriptの型システムへの機能追加という意味では、keyofやMapped Types以来の変更と言ってよいでしょう。 お察しのとおり、こういう機能追加をぶち込んでくるのはAnders Hejlsberg御大です1。
わかりやすい画像のdiffを求めて - Qiita
どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説
Angular Component Dev Kit 入門
はじめに 何やかんやでAngularネタを書くのはわりと久しぶりです。 長らくbetaだったAngular MaterialもいよいよRCを迎えています。 今日は、Angular MaterialのサブプロジェクトであるAngular Component Dev Kit（以下CDK）について簡単に紹介していきます。 CDKを学ぶべき理由 Angular Materialのステータスアップデート にもあるとおり、 CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。 CDKはUIライブラリ開発にありがちな機能を、コンポーネント開発基盤としてまとめたパッケージです。 「CSSをデザイナが提供してくれる
Angular2でModal作る - Qiita
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
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e 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を直接操作するライブラリが色々と出始めていますね。この系統は、chr
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
build を制するものはAngularを制する - Qiita
About Me Name: @Quramy Angular力: ドラゴンボールで言うと餃子くらい(そこら辺の幼稚園児よりは書けるけどナッパみたいなやつにはかてない) 趣味: 自作したVimのTypeScript用プラギンをメンテすること TL;DR; 「ビルドタスクを書ける奴はPrjに1人いればいい」 ...マジで言ってんの？ 自分で書けるようになった方が良い Today's theme: Module bundler Weapon of choice? v2.xからはTree Shaking(import した対象のみbundleする機構)がデフォルトで利用可能に。angular-cli等、公式でも採用されている。 「何でも出来てしまう」ツールなので、使い方を間違うとwebpackと心中する羽目になる. Rollup ES2015に最適化されたTree Shakingは魅力。Webpa
Werckerでnpm-scriptsが実行できなくなったときは - Qiita
@Quramy です。 「アドカレやろうぜ」とか言い出した割には書くネタが全く思い付かないので、少し前に Wercker でドはまりした話を書きます。 Node.js でフロントエンドの開発をしていると、npm-scriptsにタスクを定義しておき、npm test や npm run deploy のように利用することは多いと思います。 "scripts": { "test": "mocha", "deploy": "webpack && gh-pages -d dist" }, "devDependencies": { "gh-pages": "^0.12.0", "mocha": "^3.2.0", "webpack": "2.2.0-rc.1", ... }, npm run では、./node_modules/.bin にPATHが通るので、ローカルにnpm iした mockaや
TypeScriptにpluginがやってくる 使ってみよう編 - Qiita
はじめに どうも、 @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される すなわち、
AngularとZone.jsとテストの話 - Qiita
どうも @Quramy です。このエントリはAngular Advent Calendar の3日目向けに書いています。 はじめに Angularにおいて、Componentのテストコードは少し癖が強いですね。少なくとも僕はそう感じました。 次のComponentを例としてみましょう。ngModel を使って name プロパティをバインディングしただけのシンプルなComponent です。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-form', template: `<input [(ngModel)]="name">` }) export class MyFormComponent { name: string = ''; } このComponent に対して、「name プロパテ
Angular で template内補完やエラーチェックできるようになったよ - Qiita
どうも @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のコードを書いて
TypeScript 2.1のkeyofとかMapped typesがアツい - Qiita
About me @Quramy フロントエンドエンジニア的なことをして生きています。 TypeScript + AngularでSPA作ってます。 2.1 RC is coming! 2016.11.08現在、2.1 RCがリリースされた。 TypeScript blogによると、 async/awaitのDown transpileがES5/ES3でも利用可能に(~2.0ではES2015以上をtargetにしないと使えなかった) 型推論がより賢くなった と書いてある。 2.1.1にどのような変更が入ったかは、 @vvakame先生の記事 に詳しく記載されてる 2.1.4 2.1のRoadmap を読むと、 Static types for dynamically named properties Mapped types というのが載っている。今日の本題はこいつら。 Static ty
Angular AoTガイド - Qiita
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか？ とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
Angular2 + webpack でLazy Loading(AoTもあるよ!) - Qiita
先日公開されたAngular2 rc.6から、RouterのLazy Module Loading機能が強化されています。 AngularJS 1.xでは、oc-lazy-loadなどの3rd Party製の仕組みはあったものの、公式なLazy Load機能は用意されていなかったため、個人的には期待度の高い機能でした。 そこで今日はwebpack環境でのAngular2 のLazy Loadingについて書いてみようと思います。 ちまちま書いたので若干長くなってしまったので、先にレポジトリのURL貼っておきます。 Quramy/ng2-lazy-load-demo なお、上記のレポジトリではwebpackは1.xではなく、2.x(2016.09.03現在beta版)を利用しています。AoTを使わないのであれば、1.xでも問題ありません。 Lazy Loadingって？ webpackに限ら
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular + Storybook でコンポーネントガイドを作ろう - Qiita
TypeScript Transformerについてのお話 - Qiita
