ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

JavaScriptの記事一覧

Labels:  JavaScript 投稿者:yokoi

TestCafeでのE2EテストをBrowserStackでやろう

ランサーズCTOの横井です。 最近、個人でE2Eの画面テストを書く際にSeleniumからTestCafeに乗り換えつつあります。導入が(個人的には)Seleniumより楽っていうのと、要素の出現とかをよしなに待ってくれるので、テスト書くときにあんまりその辺を …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

mocha のテスト実行前にグローバル変数をセットする方法

森です。 mocha のテスト実行前にグローバル変数をセットする方法を調べました。 コマンド引数か mocha.opts で、設定ファイルを require することで、うまくゆきました。以下の例では、–require ./test/setup.j …

thumbnail

Labels:  JavaScript 投稿者:takepo

React × Redux で action 発行時に確認ダイアログを挟む middleware の実装例

pookチームのtakepoです。 今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。 その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示す …

thumbnail

Labels:  JavaScript, ツール/ライブラリ 投稿者:tsuyoshi

レスポンシブ対応の LP を簡単に作れるツールを React Redux で作った。ソースコードあり

pook チームの tsuyoshi です。レスポンシブ対応の LP を簡単に作れるツールへのニーズが社内で高まってきたので React Redux の練習がてら先日の開発合宿で作りました。社内でもランディングページの制作を依頼されたり、発注したりするわけです …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

redux-persist でブラウザストレージに一部のデータを保存しつつ、ストアに復旧するまで render を防ぐには

森です。 課題 redux-persist を使っていて、ブラウザリロード時にブラウザストレージからストアにデータを復旧する前に render されるのを防ぎたい。ストアに値があることが前提のコンポーネントでエラーになるから。公式ドキュメントとしてレシピがあっ …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

React コンポーネントで自分の子要素を取得するときのイディオム

森です。 課題 React コンポーネントで自分の子要素を取得するときに、ref=”payjpCheckoutRef” などと指定しておいて、findDOMNode(this.refs.payjpCheckoutRef) していたら、e …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

redux アプリで定期実行処理を書くには

森です。redux アプリで redux-saga を使って定期実行処理を書いてみました。 要件 redux-saga で以下を実装する方法を検討しました。 定期的にステート(本稿では reducer で分割したストア)の値をチェックして何かする 定期的に A …

thumbnail

Labels:  JavaScript, SEO 投稿者:ota

SEOフレンドリーな無限スクロールの実装方法

飲み物は常温派のota(@purratto)です。自動販売機で常温のものも販売してくれればいいのになあ、と常々思っています。 ランサーズストアでSEOフレンドリーな無限スクロールをjQueryで実装しました。 サンプル向けに一部修正したコードを公開します。参考 …

thumbnail

Labels:  JavaScript, ツール/ライブラリ 投稿者:mori-dev

Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

コールバックスタイルの外部ライブラリなどの関数を redux-saga で使うには

森です。本日の課題とその対処です。 課題 外部ライブラリの関数が、コールバックスタイルのため、redux-saga の自前実装部分との実装の統一感がない。たとえば、navigator.geolocation.getCurrentPosition で現在地を取得 …