はてなブックマーク

Circle-CIでいつのまにcron実行する機能が追加されていたので試した。 https://circleci.com/docs/2.0/configuration-reference/#triggers https://circleci.com/blog/manual-job-approval-and-scheduled-workflow-runs/ TravisCIには少し前から入っていた機能。 https://docs.travis-ci.com/user/cron-jobs/ Circle-CIの場合、TravisCIほとさくっと使える感じではなかったのでメモ どんな時に使えるか？ 例えばこんなユースケースが思いつく E2Eなど重くて全branchで実行するには辛いもの 外部のAPIに引きづられて落ちてないかのテスト masterを定期的にstagingと同期するdeploy処理

前置き CircleCIのworkflowで上手いことdocker-composeの重い処理をなんとかするのをやってみた。 今回はdocker-composeのbuild処理が重くてtest並列化するとそこがボトルネックになるような場合を想定している。 build自体が重くない場合や並列化が不要な場合は、むしろcache生成・呼び出しで遅くなるパターンもある。 Enabling Docker Layer Cachingなど公式のdockerキャッシュもあるが、machineモードでないとdocker-composeがフルに利用できない（volumesが利用できない）のでsave_cache / restore_cacheを使うやり方を色々ひねった。 手始めにdockerをcacheしてみる docker-composeに飛びつく前に、docker単体のpullとtestをworkflowで

printf '#!/bin/sh\nXvfb :99 -screen 0 1280x1024x24 &\nexec "$@"\n' > /tmp/entrypoint && chmod +x /tmp/entrypoint && sudo mv /tmp/entrypoint /docker-entrypoint.sh # (nop) ENV DISPLAY=:99 export CHROMEDRIVER_RELEASE=$(curl --location --fail --retry 3 http://chromedriver.storage.googleapis.com/LATEST_RELEASE) && curl --silent --show-error --location --fail --retry 3 --output /tmp/chromedriver_linux64

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

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

Help us understand the problem. What is going on with this article?

typescript-eslint-parser を入れようとしてちょいちょいハマった やんごとなき事情でJavaScriptとTypeScriptが混ざっている場合前提なので、TypeScriptオンリーであればここまで困らないと考えられる TL;DR jsとtsが混在している場合、に--ext .js .tsみたいにjsファイルも一緒に食わせると色々コケて上手く使えない typescript用のコマンドにして、configを別途渡そう 一部のルールは上手く動かない 仕方ないけどdisableしよう // eslint-disable-lineとか// eslint-disable-next-line行単位の無効化が上手く動いてない ファイル先頭での指定に切り替えていこう 詳細 Typescript用に別途設定ファイルを用意する だいたいこんな感じで.eslintrc.jsがあると思う。

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

🎉🎉 React Router v4 beta! 🎉🎉 Docs: https://t.co/xEsQD8H38v Code: https://t.co/VULptzNaQs Try it: npm i react-router@next We 😍 @reactnative! — MICHAEL JACKSON (@mjackson) 2017年1月30日 ということでreact-router@v4がalphaからbetaになった。 かなりアグレッシブに変更されていて色々変える所あったのでメモ 1 2 packageの分離 react-routerは下記の3パッケージに分離した react-router コア部分。 react-routerの利用者がこのパッケージをインストールする機会は無いかもしれない。 このパッケージに含まれるもの <Router> (多分直で使う事はないロー

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). This can impact web performance. Assets: my-file.min.js (251 kB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance. Entrypoints: main (251 kB) my-file.min.js WARNING in webpack performance recommendat

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

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

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

Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任

babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた の続編・追加調査。 使い分け的なのわかったものの、未だにどうにも困りごとが多いので、更に深掘りしてみた。 それぞれのおさらい & 困りごと polyfillのページで改めておさらいしつつ、それぞれの困りごとを書いてみる babel-polyfill core-jsとregenerator-runtimeを読み込んでいる polyfillとして、windowグローバルを拡張する仕組み 困りごと 複数ファイルからロードするとthrow errorされてしまうので、うっかりしてるとハマるので気を使う 上記のような問題のため、ブラウザの場合は、別途dist/polyfill.jsなど、別管理してを読み込む。 require('babel-polyfill')の様にコードベース上から読み込むことは推奨されてない。

Help us understand the problem. What is going on with this article?

{ "test": "NODE_ENV=test mocha test/", "coverage": "nyc -c npm test" } /srcにソースディレクトリ /testにテストディレクトリ MISC jsdom-global使って色々小細工していた。 mocha -> jestにするモチベーション 興味本位 Jestがv15.0.0でAutomockingを捨てて本気を出してきたのでちょっと使ってみたかった気持ち Railsプロジェクトにjavascriptプロジェクトを混ぜようとしたとき、mochaのテストディレクトリに悩んでしまうぐらいなら、Jestのテストフでやってみようかと思った jestでは、/srcなどのコードに対して、/src/__tests__というディレクトリを作るか、some.test.jsという名前をつけるのがデフォルト設定になっている。 mochaでも

CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考

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

2016/10/07追記：StorybookとStoryShotsについて説明してくれている記事が出てきたため、こちらの記事はもう少し深入りした部分にフォーカスするように（install関連のとこなどを主にばっさり削除）しました React Storybook で変わるUI開発フロー (Redux Flavor) Storybookとは Reactのためのスタイルガイドジェネレータ。 基本的な所は結構先人が記事を残してくれている。 特に今回この記事ではstoriesそのものの記載については言及しないので、そこらへんは下記の記事などを参考にするのが良いだろう react-storybookを用いたReactコンポーネント開発 React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境 だいぶ手に馴染んできてたので、自分がよく使う部分中

Help us understand the problem. What is going on with this article?

CSS in JSの基礎 原点はこちらのスライドがよく挙げられる。 いわゆる「CSSのあらゆる問題をJSで解決する」という感じのもの。 先行の記事としてはこのような感じ CSS in JS(Elm)したら想像以上に良かった Free-Style のススメ ~ CSS Modules は解決策ではない とりあえず今回はReactと一緒に使う前提のことを考える CSS in JS ライブラリの実装系統 CSS in JSライブラリもかなり色々あるが、だいたい下記の観点で分類できそうだった。 スタイルの再現に関する実装 <style>タグを生成して、<head>にinsertする実装パターン 昨今のスタンダードなライブラリの使っている手法 CSSの疑似要素や@media queryもだいたい使える InlineにCSSを展開する実装パターン わりと絶滅危惧種っぽい（開発止まっていたり） そもそも

2016/09/15 現在の情報。 出たばっかりなので今後変わる可能性大。 今まで個人的にはreact上のroutingはあんま使って来てなかったので、あんまりちゃんとした比較はできてない 死んだと言われたり復活したと言われたり、必要ないよ！と言われたりと不安定感すごかったので見送ってた。 あんまり好きじゃなかったし、そこ飲んでまで使うほどの要件も無かった v4のドキュメントのページ見たら可能性感じたのでとりあえず眺め回してみることにした。 twitter上からも歓喜の声が聞こえてくる ドキュメントのサンプルは素晴らしいのだが、APIやQuickStartは、何故かスクロールが変な感じなので、githubを直接見るほうが良いかもしれない https://github.com/ReactTraining/react-router/tree/v4/website 現行のstableは2、3はa

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

import React from 'react' import ReactDom from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { createEpicMiddleware } from 'redux-observable' import { connect, Provider } from 'react-redux' // rxjsハマり部分。後述 import 'rxjs/add/operator/mapTo' import 'rxjs/add/operator/filter' import 'rxjs/add/operator/delay' // sampleにあるreducer const pingReducer = (state = { isPinging: false

入力フォームを利用するとやっぱり大事になってくるValidationについてあれこれ悩んだ。 結論が完全に自分の中でも出てないが、とりあえず考え尽くした所まで 前提など validation validationとひとくちに言っても色々考える事がある 出力するエラーは一つ？複数？ エラーが出たフォームを赤くしたいとかある？ 複数の値を見てvalidationしたいとかある？ validateするタイミングは随時？ボタン押されたら？ 今回の話 Redux + Reactを使う 簡易なTodoリストを想定する Actionの形式はFlux Standad Actionを使う 一旦細かいことは脇に置きつつ、下記のvalidationを想定して実装してみる エラーメッセージは一つ Todoのinputが空だったらエラーとする Todoの追加ボタンが押されたタイミングでvalidateする redu

先日やらかしたので、その問題と対処 問題について 何が起きたか？ browserifyでbundleしたファイル結果にES2015でのみ動く記述（constやarrow function）が混ざって動かなくなった。 結合しているファイルがParse Errorによりごっそり全部動かない事態に。 babelifyも組み合わせていたが、node_modules以下はtranspile対処ではないので、変換されなかった（2016/08/10追記) なぜ起きたか？ browser対応してないパッケージを利用してしまっていた 依存するパッケージのソースが、ES2015で書かれていた NodeJSは既にES2015で問題なく書ける パッケージ提供側は全く悪くない。利用者側（＝自分）のミス 同じ機能を持つブラウザ向けのパッケージがあるのを見逃していた なぜすぐ発見が出来なかったのか？ chromeなどで

npmrcのドキュメントを読みなおしていたら、.npmrcは/path/to/my/project/.npmrcのようにプロジェクト毎に配置することが出来る事に気づいて、ちょっと使ってみたら便利だった。 globalやhomeディレクトリへの設定を前提としたnpm configの記事は結構あるが、プロジェクト毎でnpm-configについて書かれている記事があんまり無かったのでまとめてみる。 npm-configの何が良いのか？ project毎に出来ると何が良いのか？ npm-configの設定をすると、色々コマンドを省略出来たりして良い事がある。 (参考:2016年版 Node.jsで幸せになれる10の習慣) npmrcやnpm-configは、個人開発用であれば、$HOME/.npmrcへの設定だったりnpm config setでの設定で十分。 また、npm registryに登録