idやclassを使ってテストを書くのは、もはやアンチパターンである 上記の記事を書いたところ、様々な反応があり非常に勉強になりました。 中でも気になったのが、class名に規約を設け、test-というプレフィックスを付けるものです。 個人的には、カスタムデータ属性の方が分離する際の見通しが良く、またCSSinJSにも適用できるのでこちらを推しますが、チーム内で共通の理解がある場合は、クラス名で制約を付けるのは良い解決作だと思います😆 さらに言えば、この問題の本質は、いかにチーム内で同意が得られるかに尽きます(data-testを書いたところで共通認識がなければ意味がないですから) さて、class名のよるtest-プレフィックスについて、ちょっと見たところプロダクション時に取り除くプラグインはないようでした。 なのでちょっと作ってみました。 akameco/babel-plugin-r

いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと

ツイッターが英語で280文字書けるようになりました🎉 つまり、ツイッター上でコードを書くのが現実的になったということですね。 せっかくなので、ツイートをライブラリとして使ってみましょう。適当に呟いて、import hello from 'twitter:あなたのツイート'と書いたら、Babelをつかってツイートをコンパイルして実行です。 How to Use babel-plugin-twitterをインストールして、create-babelrcで.babelrcを生成します。 $ yarn add --dev babel-{cli,preset-env,plugin-twitter} $ npx create-babelrc -o Created .babelrc { presets: [ 'env' ], plugins: [ 'twitter' ] }

グローバルからコンポーネントベースのid管理へ サービスを海外展開したい場合、国際化対応を行う必要性があります。これをi18n対応と呼びます。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがありますが、ダウンロード数的にyahoo製のreact-intl が最も使われているライブラリです。react-intlを実際に使っている例としては、スター15000を超えるReactボイラープレートであるreact-boilerplate やSNSの マストドンがあります。 react-boilerplate/react-boilerplate: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best

なぜreducerのテストが重要か？ flow環境で型によって返るStateが担保されていたとしても、依然としてreducerのテストは重要です。 簡単な例をあげると、INCREMENTでcountが+1されるロジックがあるとき、number型であると保証されていたとしても、+1されているのか-1されているのか、はたまた+100000されているのかについては保証されていないからです。 そのロジックを担保するのがテストの役割です。 reducerのテストの書き方 flow環境とそれ以外でテストの書き方が違います。 トラディショナルなテストだと{type: ACTION}の形式でテストを書くことが多いと思いますが、flow環境だとActionが型で担保されているためアクションクリエイターをそのまま実行して書きます。 トラディショナルな書き方でもいいですが、この方が補完も効くのでオススメします。

まだアクションクリエイターを自分で書いているの？ reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか？ しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード

// @flow import { Actions, type Action } from './actions' export type State = { count: number, other: string, } const initialState: State = { count: 0, other: 'test' } export default function(state: State = initialState, action: Action): State { switch (action.type) { case Actions.INCREMENT: return { ...state, counter: state.count + 1 } default: return state } } 一見正しいように見えます。 flowの型エラーはでません。 しかし、よ

'use strict' const parse = require('mri') // or require('minimist') // node cli.js --name tj const { name } = parse(process.argv.slice(2)) // 適当なJSON const jsers = { tj: ['express', 'koa', 'mocha', 'stylus', 'co'], sindersorhus: ['ava', 'chalk', 'xo', 'yaomen'], rauchg: ['socket.io', 'next.js'], kittens: ['babel', 'yarn'], gaearon: ['redux', 'creaet-react-app'], substack: ['browserify', 'tape'], }

async/awaitのエラーハンドリングはtry/catchで行うのが一般的です。 しかし、これは複数のawaitを使い、それぞれ別のエラーハンドリングを行いたい場合など、冗長になりがちです。 そして、特に気に入らないのが、tryのスコープ外で非同期関数の戻り値を使う場合、letを使う必要があるところです。

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

prettierとはコードフォーマッタである。 コードのフォーマットを完全に自動化してくれる恩恵は大きく、現状prettierを使わない理由はない。 go fmtみたいなものでユーザが設定を書くのではなくライブラリ側で一意に決まる。 Atomの設定をしていれば、保存するたびに修正されるので何も考えずに導入すればいいと思う。 Reactのjsxやflowも対応している。 すでにeslintよりもgithubのスターが多いのは驚くが。 prettier/prettier: Prettier is an opinionated JavaScript formatter. しかし、問題はeslintと役割が一部かぶることだ。 prettierが直すそばからeslintがそれを直すようにエラーを出し、そのeslintのruleを無効化したり見直したりする作業を繰り返すのはしんどい。 そこでeslin

ちょっと他に今までの記事を移行したいと思った時は、以下のコマンドでバックアップするとよい。 認証すれば、http://qiita.com/api/v2/docs#get-apiv2authenticated_useritems を見ればわかるとおりGET /api/v2/authenticated_user/itemsで自分の記事を取得できる。 しかし、認証は面倒なので、/api/v2/itemsでユーザ名を指定することで、上記と同等の結果を認証せずに取得できる。

さっと自分のレポジトリを取得してghqで管理する方法です。(macOS) 準備 ghqの他にjqを使います。 インストールしてない場合はbrewでインストール レポジトリの取得 curlを使ってレポジトリの取得を行います。 なおprivateなレポジトリの場合は、認証挟む必要があります。 your_nameを適宜、自分のアカウント名に書き換えてください。 また、今回は、100個のレポジトリかつ更新順に取得しています。 パラメータを変えることでいい感じに調整してください。 パラメータは以下のリンクを参照してください。 GitHub API v3 | GitHub Developer Guide $ curl 'https://api.github.com/users/${your_name}/repos?per_page=100&sort=updated' | jq -r '.[] | .f

yarnを使ってないプロジェクトで雑にyarn叩いてオアアってなりたくないので、yarn.lockがある場合のみnpm installの代わりにyarnを叩くcliツール書いた。

2016年12月現在、Reactを使ってるみなさんにおかれましては、必ずFlowを使っているとおもいます。 Flow | A static type checker for JavaScript 使ってない？本当ですか？ あなたの.babelrcは以下のようになっていませんか？ ここで、React presetの内容を確認してみましょう。 React preset · Babel よく見てください。 もう、おわかりですね。 React presetを入れた時点でflowを使う準備は終わっているのです。 もうあとは２つほどコマンドを叩くだけです。

使い方 リンクかアドベントカレンダーのidを引数にとり、{date: ?string, user: ?string, title: ?string, url: ?string}のオブジェクト25個の配列を返します。 adventar('1536').then(res => { const {date, user, title, url} = res[2]; console.log(`今日(${date})は${user}さんの「${title}」です\n${url}`); }); // => 今日(12/03)はatsuo1203さんの「岩井研残留日誌 - あつおの日常~あつおと過ごした365日~」です // => http://atsuocps.hatenablog.com/entry/zanryuDiary

reduxとflowtypeを組み合わせたサンプルはreduxのサンプルにあるが、redux-thunkとの組み合わせの例はない。この記事では、reduxとflowtypeのサンプルを示したあと、redux-thunkで型の恩恵を受ける方法を紹介する。 redux公式のflowtypeサンプル redux/examples/todos-flow at bc3f2aeb669f4ad5e424f6a711fd588e9bd3462e · reactjs/redux types以下はこうなっている。 // @flow import type { Store as ReduxStore, Dispatch as ReduxDispatch } from 'redux' export type Id = number; export type Text = string; export type

必要なことはシンプルだ。 以下の2つをすればいい。 必要ない情報は極力なくす 必要な情報は広く大きく見せる で、そのスクリーンショットがこれ。 インストールはStylishが入っていればInstall with Stylishを押すだけ。入っていなければ先にインストールが必要だ。 SimpleQiita - Themes and Skins for Qiita - userstyles.org 以下は妄言であるので、必要があっても読む必要はまったくない。 バイアスの除去 2000コントリビュート。30コントリビュート。0コントリビュート。 うんこれほど意味がないのに記事を見る前からバイアスがかかる情報もあるまい。 他の人はどうだか知らないが、Qiitaの使い方としてQiita内から色々探すことはない。わからないことをググって、その結果Qiitaにやってくる。 その時邪魔になるのがバイアス、

Stateless Functions Components(SFC)とは、インスタンスも状態も持たないただの関数である。 界隈的には、コンポーネントの組み立てには基本SFCを使うとのこと。 利点については、以下のスライドがくわしい。 Reactの最新動向とベストプラクティス // Speaker Deck flowtypeで、SFCの型推論を利用するには、普通の関数に型を付けるのと同様にするのでよい。それで、コンポーネント使用時に型推論が効くようになる。 どうやら今年の2月には利用可能だったようだが、ドキュメントに反映されたのが6月だったので気づかなかった。 type Props = { name: string }; const Hello = ({name}: Props) => ( <div>Hello {name}</div> ); ReactDOM.render(<Hello

【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくったflowpixivReactElectronredux electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sort