はてなブックマーク

こんにちわ。Openlogi Advent Calendar 18日目です。 前回、前々回と、GraphQLの実装について書きました。引き続きGraphQLについてです。 GraphQL で一番語られがちなのは、REST APIではできない柔軟なクエリについてですが、実際にアプリケーションで利用するにはいくつか超えなければならないハードルがあります。 個人的に上げるとするならば、認証、認可、パフォーマンスといったところでしょうか。本記事ではこのうちパフォーマンス周りのアプローチについて紹介していこうと思います。 さて、RESTの場合、特定のエンドポイントについて、取得するデータ量や、どの程度の時間がかかるかを想定するのは特に困難ではありません。しかし、GraphQLではクライアントサイドで取得すべきデータを定義するため、非常に高負荷なクエリが実行される可能性があります。 例えば、前回の記事

こんにちわ。 OPENLOGI AdventCalendar 4日目です。 普段は倉庫の管理システム（WMS）の開発をしています。 今回はロジスティクスと全く関係ありませんが、とある社内システムをGraphQLを用いて実装したのでGraphQLについて書きます。 2015年にFacebookがGraphQLを公開してはや2年。公開当時は衝撃を受けた記憶がありますが、まだまだ潮流にはなっていないというところでしょうか。 GitHubを始め少しづつAPIとしてGraphQLを利用しているサービスが増えてきた中、GraphQL自体は何となく何をするか浸透している気がします。でも一方で、実際の実装のイメージを持っている人は割と少ないイメージがあり、ハードルが高いような気がしてます。ということで、このハードル、「どうやって実装すんの？」というところが何となく分かってもらえれれば幸いです。 Graph

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

こんにちわ。 OPENLOGI AdventCalendar 11日目です。 前回はGraphQLを使って実装してみようを書きましたが、主にサーバーサイドの話でしたので、今回はその続きとしてクライアント編を書こうと思います。 よく分からないという噂のGraphqlについて、クライアントサイドのライブラリってどうすればいいの？というのをできるだけ噛み砕いてみたいという趣旨です。 （サンプルのコードを書いていこうと思っていたら思ったより読み物になってしまった） さて、GraphqlはFacebookがRelayというライブラリと共に出したということで、比較的Reactと利用されることが多いですが、GraphqlはReactのためだけのものではありません。 そもそもGraphql自体はGETリクエストやPOSTリクエストでサーバーサイドに問い合わせを行うので、クライアントライブラリなんてなくても

Parcelがめちゃめちゃ便利かもしれない。 Parcelとは 詳しくは急上昇のこれ を見てみると良いかも。 Reactを使っていたのでWebpackは当然使ってたんですが、ちょっと開発するにはどうしても面倒で自分用にboilerplate用意したりしていました。それでもWebpackのバージョンが上がったら使えなくなったりするし、出回ってる情報も古くなっていたして、、割とハードルがある気がしています。 Parcelでは、設定ファイルも不要。Webpackであったようなloaderなどのpluginとかも基本は不要。開発用の配信サーバーも含まれているオールインワン。 内容チラ裏的な感じですが、ちょっと感動したので書いてみる。 boilerplate的なあれ https://github.com/haradakunihiko/parcel-boilerplate に、いくつか作って見たので、

Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。 Reactを導入して開発環境を整えると、当然のようについてくるので使う分には意識する必要もないですが、、 で、これって何なんだっけ？というのを整理しました。 HMRは、Websocket通信と、ソースコードに注入されたいくつかのRuntimeと呼ばれるスクリプトによって実現されます。ソースコードの変更をコンパイラが検知し、WebSocketでブラウザに通知、通知を受け取ったRuntimeはサーバーから変更分のスクリプトを取得してモジュールを置き換えます。 前述

HMR（Hot Module Replacement）はWebpackが提供する、ブラウザのリロードをすること無くアプリケーションのJSを更新する開発ツールです。 ReactではBabelやWebpackのプラグインでアプリケーションコードに注入することで実現していますが、React以外でもHMRを行うことができます。ただし、HMRに対応させるためにはいくつかモジュールやアプリケーションに合わせた実装が必要です。 ReactがどうやってHMRに対応しているかを理解するため、Reactでないアプリケーションで必要な実装について、そしてReactの場合何をやっているかをまとめました。 このエントリの内容については、（そのままではありませんが）githubにあげているので参考にして下さい。 また、HMRを含めた環境のセットアップはReact開発環境を構築する時に出てくるbabelやwebpack

Reactを開発するときに、babelやwebpackの設定をしますが、 すでに古い情報が多かったり、結局何のためにどの指定が必要なのかがわかりづらいため、改めて何を何のためにやっているのか整理します。 本記事は基本的にはReactの利用有無にかかわらず参考にできます。 また、セットアップ済みのプロジェクトはgithubに上げてるので試してみたい場合はそちらを。 https://github.com/haradakunihiko/devserver-boilerplate 前提 ES2015ベースで、webアプリ開発をしたいので開発環境を準備します。 ここでは以下のバージョンを使用します。 node@4 npm@2 babel@6 npm@2を利用している場合は特定のライブラリをinstallすると、それが依存しているライブラリは併せてインストールされますが、npm@3の場合は明示的に入れ

はじめに 業務システムを作っているとバーコードを使いたいことがよくあるんですが、 iphone × ブラウザでバーコードを読み取るには以下の様な方法があります。 画像の写真をとってサーバーサイドで解析する 画像の写真をとってjsで解析する getUserMediaを利用して画像を読み取り、jsで解析する ネイティブアプリを呼び出す (アプリではなく)バーコードリーダーを繋いで使う（本題） これらについて少しづつ補足しつつ、本題としてはバーコードリーダーの読み取りの、RxJSを用いた実装を簡単に解説します。 1. 画像の写真をとってサーバーサイドで処理する そのままですね。。 2. 画像の写真をとってjsで解析する こんなライブラリがあるので利用しましょう。 http://serratus.github.io/quaggaJS/examples/ ただ、単に写真をとって解析させるだけなのであ