jest-circus と jest.retryTimes(n) で成功するまでリトライする - Qiita
import assert from "assert"; jest.retryTimes(3); it("retry", () => { console.log("xxx", Date.now()); assert.ok(Math.random() > 0.3); }); ❯ yarn jest --testRunner='jest-circus/runner' src yarn run v1.17.3 PASS src/__tests__/retrySpecCheck.test.ts ● Console console.log src/__tests__/retrySpecCheck.test.ts:5 xxx 1568271139936 console.log src/__tests__/retrySpecCheck.test.ts:5 xxx 1568271139949 consol
Webpack チャンク最適 テクニック - Qiita
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
GitHub Actions の matrix と cache 使ってe2eワークフローを作る - Qiita
動いてるリポジトリはここ https://github.com/mizchi/frontend-gh-action-playground やったこと 発想は https://qiita.com/mizchi/items/9c03df347748ba5f5a11 の続き job 間の依存を明示して build => {各種e2e} というステップでタスクを流す 新たに導入された actions/cache を使って node_modules と dist (webpack 出力ディレクトリ) を cache して次のジョブに渡す node_modules は package.json の ハッシュ値をキーに、 dist は GITHUB_SHA(コミットハッシュ)をキーにした safaridriver が仕様変更で動かなくなったので一旦止めた(サポートにこれ先月動いてたのに今動かないの？って
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
fly.io で React アプリケーションの SSR を行う - Qiita
import React, { Dispatch, useContext, useReducer, useState, useCallback } from "react"; import { Route, Switch, Link } from "react-router-dom"; import styled, { createGlobalStyle } from "styled-components"; import { Action, reducer, RootState } from "./reducer"; import * as actions from "./reducer"; // RootState context export const RootContext = React.createContext<RootState>(null as any); export
TypeScript で既にある型から一部を nullable にする型を作る - Qiita
type Article = {id: string, value: number} type ArticleDraft = {id: string | null, value: number} ORM などで一度保存するまでidが振られない、みたいな時によくある型ですね。 これは簡単な例ですが、フィールドが多くなると同じような型を２つ書くのが面倒くさいし、何よりバグを仕込みそうなので、今回はなんとかして Article 型から ArtcileDraft 型を最小限の手数で生成したい、と思います。 案1: Draft を先に定義して、 extends して絞り込む interface ArticleDraft {id: null | string, value: number} interface Article extends ArticleDraft { id: string }
Type Friendly な Reducer 定義を考えて実装してみた - Qiita
https://qiita.com/mizchi/items/0e2db7c56541c46a7785 を考え直す。 このパターン、明らかにまだ冗長で、しかもFlowもTSもこれでは推論器がよく落ちるという問題があった。 なのでそもそも型が自明なラッパーを定義するのがいいのでは、という発想からスタートしている。 追記: hard-reducer という名前で実装した 既存の reducer 定義の何が面倒臭いか 自明なことを何度も書く 定数値を何度も書いているようで結局 case 文で 一意に紐付いている Action の Union Type の推論が失敗こけやすい (flow も ts もすぐ型をロストする) 巨大 switch case 守るべき reducer の spec とは reducer の (State, Action) => State というインターフェース 最終的に
AMP/PWA をどこで/いつ使うか - Qiita
某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み
react-apollo と next.js を使った最速 GraphQLアプリケーション(+モックサーバー)実装 - Qiita
react-apollo を試しながらガチャガチャやっていると、モックサーバーなどを含め、なかなか体験が良かったので、紹介します。 こっちも参照 世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita 今回書くコードの動いてる例は https://github.com/mizchi-sandbox/graphql-playground を参考にしてください。 git clone して yarn install; yarn start で動くはず。 ゴール 最終的にこんな感じのクライアント実装(next.js)が動くようになります。 import React from "react"; import { Query } from "react-apollo"; import gql from "graphql-tag"; const GET_USER = gql
Next.js を Firebase hosting で動かしてSSRする - Qiita
いわゆるサーバーレス。 TL;DR すべてのリクエストを Firebase Functions に流して next.js に食わせた結果を返すとSSRになる。最高。 概要 Firebase Hosting は index.html を上げたら動いてくれる静的サイトホスティングだと思っていたが、 全てのルーティングを Firebase functions に全て受けさせる。こともできた GCP知らない人向けに 一応解説しておくと Firebase Function = Google Cloud Function ≒ AWS Lambda そんでもって、React で SSR したいとき、スクラッチでもいいけど、一番簡単なのは next.js。next.js 公式にも exmaples があり、読んでみたら勉強になったので解説してみる。 Firebase Hosting の設定 { "func
俺が考えた最強の Reactのステートレスコンポーネントの書き方 - Qiita
最近自分はこう書いてるという例。意見が欲しい。 この記事に redux は出てこない。 参考: https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a 構成要素 React flow styled-components recompose 以下 SFC = Stateless Functional Component /* @flow */ import React from "react" import styled from "styled-components" import pure from "recompose/pure" type Props = {| value: string |} export default pure(function Example(props: Props) { const { value } = p
next.js で lighthouse 満点を目指した - Qiita
なぜやるか 普通にやってても満点は難しい。まずは無で100点を目指す。 Google が Mobile First Index やりだしたら多分 lighthouse のスコアも使うだろうという予想 next.js というある程度現実的なフレームワークを使うことで適度に YakShaving もこなせるだろうという予想 使ったもの next.js: export mode workbox 結果 コード https://github.com/mizchi/next-pwa-boilerplate デプロイ先(netlify) https://eloquent-spence-e8f2bb.netlify.com/ PWA 91点は、 netlify 使っている制限で、HTTP to HTTPS のリダイレクトを設定するにはカスタムドメインを設定する必要があり、金を払いたくないので諦めた。設定す
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
Flowtype導入のための指針・実際の運用について - Qiita
このドキュメントの目的 自分は趣味でFlowをずっと使っていて、またプロダクションでも今まで3プロジェクトほどにFlowを導入した。その知見。 「Flow は便利そうだけど、怖い」「いれてみたら色々ハマったからクソ」「わからん、なにもかも…」という人に対し、自分がいままで出くわしたパターンや、聞かれた疑問について、メジャーな解法を提示する。 なぜFlowを導入するか Babel から段階的に導入することが出来る React の JSX にも推論を入れることができる 部分的に適用できる ASTがES準拠であり、ESLintなどがツールが使える(TSは独自AST) それ自身ランタイムに全く影響はないので落とすのも簡単 実際にはReactと一緒に使うのが、エコシステムもユースケースも揃っていて、一番効果を発揮するだろう。それか、小さい npm モジュールを自分で書くとき。 型のメリット/デメリッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
