サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
qiita.com/Quramy
play function is 何 Storybook 6.4 では、CSF 3.0 や new Story Store など、いくつかの新機能が導入されましたが、その目玉機能の 1 つが play function です。 // RegistrationForm.stories.ts|tsx import React from "react"; import { ComponentStory, ComponentMeta } from "@storybook/react"; import { screen, userEvent } from "@storybook/testing-library"; import { RegistrationForm } from "./RegistrationForm"; export default { /* 👇 The title prop i
これは 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のスキーマ定義で書くと、下記のようなイメージです。 type Product { id: ID! name: String! relatedProducts: [Product] } type Query { produ
最近、空いた時間でチマチマと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
今日はTypeScript2.8で導入されたConditional typesについて書きます。 TypeScriptの型システムへの機能追加という意味では、keyofやMapped Types以来の変更と言ってよいでしょう。 お察しのとおり、こういう機能追加をぶち込んでくるのはAnders Hejlsberg御大です1。
Storybook v3.3.0でAngular対応がリリースされたので、さっそく試してみました1。 Angular CLIプロジェクトへの導入方法 Angular CLIで作成したプロジェクトに導入するのであれば、コマンド一発です。 ng new my-ng-storybook-prj cd my-ng-storybook-prj yarn add @storybook/cli --dev yarn run getstorybook
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への言及を少なくして、中間画像で説
お前は今までスクショした画像の枚数を覚えているのか? こんにちは。WACULでフロントエンドエンジニアをしている @Quramy です。 冒頭のやつは書いてみたかっただけです。気にしないでください。ちなみに僕はDIOよりも吉良吉影派です。 11月末に、Node学園祭で Introduction to Visual Regression Testing というLTをさせて頂きました。 この時は大分話題を絞っての発表でしたので、今日は弊社で実施しているフロントエンドの画像回帰テストについて、LTでは割愛した部分も含めてヌルっと書いていこうと思います。 そもそも、WACULのアドベントカレンダーでこのネタを書くのはこれが初めてではありません。 2016年にも、 @bokuweb が コンポーネント/単体テスト単位でのvisual regressionテストを行うためのツールを作った話し で、画像
皆さん、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
※ この資料はToKyoto.jsの発表資料として作成したものです Transformer is 何 2.1で導入された機能 TypeScriptのトランスパイル処理の本体 async/awaitやgeneratorといった複雑なdownpileを見通しよく実装するための内部改善的な意味合いが強かった1 ちなみに、Transformer導入以前(<= v2.0.x)は、単一のファイル(emitter.ts)にトランスパイル処理が全て記述されていた2。 Transformer動作イメージ 例: Exponential Operator(ES2016)のdownpile
--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
絶対に忘れる自信があるので今のうちにメモっておく。 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 は下記を逐
はじめに さて、前回の使ってみよう編で、TypeScript 2.3 のLanguage Service Pluginの概要や使い方について記載しました。 Language Serviceにpluginが差し込めるようになったといっても、plugin自体が数える程度しか出回っていません。 無いなら作ればいいじゃない、ということで、今日はLanguage Service Pluginの実装方法を解説していきたいと思います。前半で基本的なpluginの構造を、後半で多少実践的な内容をtipsとして取り上げます。 なお、tipsの方については自作のLanguage Service Pluginが元ネタです。 はじめてのLanguage Service Plugin Pluginのエントリポイントを作成する Language Service Pluginのエントリポイントは次のような形式になります
はじめに どうも、 @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される すなわち、
array = new Uint8Array(1000 * 1000 * 256); // ★ worker.postMessage({ array: array }); しかし、WebWorkersのpostMessageは参照ではなく、データの実体をコピーして飛ばすため、arrayのサイズがデカくなってくると、workers間のデータ転送のオーバヘッドが馬鹿にならない. 重たい処理をUIから分離するためにWebWorkersを活躍させたい時に困ってしまう. そこで、登場するのがpostMessageの第2引数. ここにTransferableなオブジェクト(Uint8ArrayやFloat32ArrayがもつArrayBufferはTransferable実装)を喰わせると、データ実体ではなく、データの参照が送信されるため、転送オーバヘッドは限りなく小さくなる.
どうも @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のコードを書いて
@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や
どうも。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自体が決まったデータストアを持ってい
どうも @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 プロパテ
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
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
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか? とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
次のページ
このページを最初にブックマークしてみませんか?
『@Quramyのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く