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

JavaScriptの記事一覧

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 で現在地を取得 …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

react-redux v5.0.0でredux-form, material-uiを併用時、フォームの日本語入力が1文字目で確定される問題の対策

森です。しばらく日々のこまごまとした課題とその解決をブログに書き残しておくことにしました。 現象 redux-form の入力欄(Field)を material-ui(TextField)で作成しています。react-redux の v5.0.0-rc.1 …

thumbnail

Labels:  JavaScript 投稿者:mori-dev

react.js/redux/webpack/flowtype なプロジェクトでの stylelint の導入手順

こんにちは。森です。 最近コードレビューで「CSS の `:` のあとにスペースがあったりなかったりします」と指摘され、つい悲しくなって stylelint を導入しました。react.js/redux/webpack/flowtype なプロジェクトです。こ …

Labels:  JavaScript, ツール/ライブラリ 投稿者:上野諒一

チャットワークをもっと使いやすくする拡張機能を作った

こんにちはエンジニアの上野です。 2016年のAdventCalendar も残すところあと僅か! 12/5の投稿(githubのissue, pull request 検索をハックする!)に引き続き、今日はチャットワークの拡張プラグインのご紹介です。エンジニ …