graphql-codegen で型定義を生成する (React, Apollo, TypeScript) - Qiita
graphql-codegen で型定義を生成する (React, Apollo, TypeScript)TypeScriptReactGraphQLapollo 本記事はこのリポジトリでやったことのまとめです。 GraphQL + TypeScript への課題感 TypeScript(に限らず他の静的型付の言語) と GraphQL を使うと、型の二重定義が発生がちです。折角 GraphQL に通信規約としての型を書いているのに、それを多重定義することで、運用の面倒臭さやバグの温床になりかねない、という懸念がありました。 今回は、graphql のスキーマとクエリを書くと、サーバー向けに resolver の型定義、クライアント向けにクエリの型定義を生成し、それによってできるかぎり型安全なコードを扱うのをゴールとします。 やり方 graphql-code-generator を使います
Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想 - Qiita
Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想npmYARNyarnpkg berry(yarn v2) がそろそろリリースということで、使い込んでみた。その感想や yak-shaving などについて。 このリポジトリ https://github.com/mizchi/berry-typescript-project 日本語での網羅的な解説はこちらの記事がくわしい https://qiita.com/dojineko/items/6f65fde3c47aed8b6318 本記事は pnp の仕組みと webpack, jest, typescript を設定する泥臭い話がメイン。 使ってみた感想 npm とは完全に別系統に進化しつつある。互換があんまりない。 今対応するのは時期尚早でアーリーアダプターだけでよい
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - Qiita
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かすSeleniumselenium-webdriver 最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは？」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。 今回は node で。 name: xbrowser on: [push] jobs: e2e-ie: runs-on: windows-latest steps: - uses: actions/checkout@v1 - uses: warrenbuckley/Setup-Nuget@
AMP で任意の JS を実行できる amp-script を試してみた - Qiita
明日の AMP Conf のための事前に動かしてみた。 amp-script とは何か 今まで https://github.com/ampproject/amphtml に登録された一部のJSしか出来なかったAMPだが、amp-script を使うと任意の JS を実行できる。ただし、 WebWorker コンテキストの中でのみ。 本来ならDOMが存在しないWebWorkerだが、しかしDOMに触れないわけではない。 WebWorker の中に DOM と似たようなオブジェクトが実装されており、それを操作することでメインスレッドのJSに反映される。 この DOM がすごい2018: worker-dom - mizchi's blog amp-script を導入する <head> <!-- ... --> <script async src="https://cdn.ampprojec
trans-loader: node/webpack なしではじめるフロントエンドプロジェクト - Qiita
フロントエンドはツールチェイン多くて大変ですね。何から初めていいかわからないと思います。 というわけで、 babel や webpack, というかもはや node の インストールすら不要でフロントエンドを始めることができるプロジェクトを作りました。 git clone git@github.com:mizchi/frontend-starter.git --depth 1 --single-branch master cd frontend-starter ruby -run -e httpd . -p 8000 # 好きな静的サーバー This is App を何か書き換えてリロードしてみてください。適用されるはずです。 最後に一つ注意。裏側はとても富豪的に動いているので、本番環境では使わないでください ここで動くコードはちょっと微調整を加えると webpack でビルドできます。
Expo ではじめる ReactNative 開発環境 - Qiita
某所で調べた資料 Expo とは ReactNative上で、JS のみで ios/android アプリを作る開発/ビルド環境。ネイティブプラグインが使えないという縛りを受け入れることで、アプリをQRコード経由で簡単に公開したり、共有したりできる。 ios/android のコードを書かなくていい、というか一切書けない。 参考: expo.ioを使ってリアルタイムにReact Nativeアプリを開発する http://amagitakayosi.hatenablog.com/entry/2017/04/18/120000 Hello World $ npm install -g exp $ exp init my-native-app $ exp start # 開発用ビルドの開始 $ exp build:ios # 本番用ビルド
prisma - 最速 GraphQL Server実装
react-apollo の調査で GraphQL サーバーをさっくり実装する必要があり、 今 graphqool どうなってるんだっけ、と見に行ったら prisma が推奨されていました。 日本語情報がまったくなかったので、調査した結果をまとめておきます。 prisma とはなにか GraphQL の形をした ORM MySQL/Postgre への マイグレーションヘルパー付き モデル定義からインデックス自動生成 CRUD自動生成 graphqoolの次期版? PaaS に依存せず、自分でデプロイ可能なマイクロサービス 自分も最初よくわからなかったのですが、 使ってみた感じでは、 GraphQL の形をとった ORM + Migration Helper です。 $ npm i -g prisma $ prisma init my-graphql-server # REPL で実装を選
npmにライブラリをアップロードするときに.npmignoreで生成物を公開/制限するパターン - Qiita
やっと理解したのでメモ 何がしたいか npmパッケージを登録する時にcoffeeやtypescriptのコードをコミットせず生成したjsだけをアップロードしたい 自動生成したjsをgitで管理したくない どうやるか src/** にソース、lib/** に実体があるとする .npmignore に npm にアップロードしたくないものを書く
真に Universal な ReactComponent を書く - Qiita
ややお気持ち多め。 前置き 最近の個人的な考えとして、React 書く人は ReactNative 側にスキルを寄せたほうが良いのではないか、と思っている。 ReactNative の需要の高まりは凄い。最初はプロトタイピング採用だったのが、徐々にプロダクションに出始めている。今年末には新規プロジェクトの10~20%は ReactNative になるんじゃないか？という感すらある。 僕はデスクトップのブラウザは好きだけども、残念ながら、世の中の趨勢はモバイル側にある。その上でフロントエンドにロックインすることをリスクに感じている。PWAのアプリケーションも来そうではあるが、直近の需要を賄うためにやはりReactNativeに習熟しておきたい。 大事なのは、「考え方として」 ReactNative に軸足を移したほうが色々といいということだ。 Web は基本的に動きが少ない。見栄えをよくした
続・JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita
やりたかったこと： Reactから子に関数参照を渡すのを綺麗に実装したい 前回からの変化 lit-extended を使えば、テンプレートにコールバックを渡せることを知った 子に対して関数参照を渡すのではなく、 CustomEvent を生成するようにして dispatchEvent するようにした 一旦変換用のイベント定義辞書を渡すようにした WebComponent定義 /* @flow */ import { html, render } from 'lit-html/lib/lit-extended' type Props = { onClick?: Function, text: string } const template = (props: Props) => { return html` <button on-click=${props.onClick}>${props.
universal-router で react-router を倒す - Qiita
Universal Router とは isomorphicガチ勢の kriasoft 先生作の Router ライブラリ。 内部的には path-to-regexp だから express と同じルール import UniversalRouter from 'universal-router' const routes = [ { path: '', // optional action: () => `<h1>Home</h1>`, }, { path: '/posts', action: () => console.log('checking child routes for /posts'), children: [ { path: '', // optional, matches both "/posts" and "/posts/" action: () => `<h1>Po
Web Animations API を使ってみる - Qiita
Animation周りが苦手だったので、Flash のタイムラインアニメーションエディタみたいなものを練習がてら作ってみたい、ということで勉強した。 本記事は勉強ログ気味。 Web Animations API とは CSS Animation の keyframe 制御を JS から可能にしたようなもの。 CSS Animation は 自分で止まったり再開したりできないし、フレーム制御も出来ない。 JS から制御できないのでコントロールしづらかったが、その問題を解決する。 Web Animations 実装具合と Polyfill Can I Use 見る限りは Firefox で 実装済み、 Chrome で実装中 https://caniuse.com/#feat=web-animation polyfill なしで試した結果、chrome で elem.animate(...)
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
Reason ML + bucklescript で最高の React アプリ開発体験を目指すぞ！ - Qiita
これは Reason ML Advent Calendar の1日目です。時を遡って1日目です。思い立ったんでカレンダーごと作りました。 注意点として、基本的に、多少コンパイラとかメタプロが好きな程度のJSプログラマとしての視点で書いています。 ocaml ユーザーではありませんので、間違いがあったら編集リクエストやコメント欄などでご指摘ください。 Facebook の chenglou 氏が作ってる ocaml の言語拡張で、1方言という位置づけです。chenglou氏は react-motion の人というと React界隈では通りがいいと思います。 Reason の一番の特色は ocaml に js っぽいフレーバーの構文にしつつ、React.js の JSX 構文に対応していて、 BuckleScript をバックエンドしながら JS を生成して、 React アプリを簡単に作れる
Puppeteer で FirstMeaningfulPaint を取得する - Qiita
概要 パフォーマンスメトリクスのAPIを有効化する setTimeout ループで FMP取得まで待つ コード npm install -S puppeteer const puppeteer = require('puppeteer') async function getPerformanceMetrics(page) { const { metrics } = await page._client.send('Performance.getMetrics') return metrics.reduce((acc, i) => ({ ...acc, [i.name]: i.value }), {}) } async function waitForFMP(page) { let doneMet = null while (true) { const data = await getPe
React on 現場 ~ あるいは Modern JavaScript on Rails ~ - Qiita
これは何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料。特に理由はないが公開するのを忘れていた。 スライドモードのリリースにあたって公開する 近況(2016/01/16) 昨年9月 Kobito for Windows => Qiita開発チーム モダンなJS(当社比)を導入しようとした モダンなJSとは(mizchi主観2016版) npm/browserifyで依存を解決 Babel/ES2015 React/Flux Testable No More jQuery plugins ※これらの基準について今回は割愛 現実(2015) CoffeeScript Sprockets / グローバル名前空間渡し Backbone JSのテストはjasmineで数件 (※request specは豊富) jQuery plugins
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita
想定しているシチュエーション 非SPA環境で個別にマウントされるコンポーネントがそれぞれで小さくFluxするような環境。 SPAガッツリ組むのでないなら、Fluxフレームワークは不要だと思っていて、とは言えオレオレ構成も行き過ぎると害になる。 その辺のバランスをとって、次のような構成がいいのではないか、と考えてみた。 考え方 コンテナがEventEmitterを1つ保持する コンテナはEventEmitterの各種イベントをListenする コンテナはpropsとstateを区別して扱い、stateを更新する コンテナはコンポーネントを一つだけ描画する コンポーネントはpropsとして渡されたEventEmitterを発火させる コンポーネントはEventEmitterをListenしない コンポーネントはpropsのみ扱う コード // src/components/header.js
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書く - Qiita
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書くNightmareElectron 自分の開発環境では, nodeで単体テストと分離してモデル層を抽出出来たが、e2eほどではないがブラウザ上でテストしたいコードというのは結構ある。モーダル制御とか、ブラウザ上のイベントに依存する奴とか。 それらを Nightmare でテストするアプローチを紹介する。 概要 Nightmare はヘッドレステストランナーとそのDSLを提供する。v2でランナーがphontomjsから Electronになった。 コードはbabel/commonjsで書かれており、本番環境でJSは1つにまとまっているが、Electron の nodeIntegration を有効化して走らせることで、ビルド前のコードを個別にrequireできる。グロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flow で型が書かれた React.Component から storybook を自動生成してみた - Qiita
