Higher-Order Components と Recompose の初歩

Higher-Order Components(以下、HOC)は、Reactのコンポーネントを作る際のパターン。 HOCを使うことで、複数のコンポーネントで使っている処理を共通化したり、SFCにライフサイクルメソッドを追加したりすることが出来る。 基本的な構造 HOCは、以下のような…

Fetch API を Stub にしてテストする

SPAなどは特にそうだと思うけど、fetchを使って非同期にAPIを叩き、その結果に基いて部分的にビューを書き換える、というのはよく行われる。 そういう時に面倒なのがテスト。 fetchはwindowオブジェクトに入っているからテスト環境には存在しないし、そもそ…

Enzymeのv3でshallowすると自動的にcomponentDidMountが呼ばれる

Reactのバージョンを16に上げるのに伴いEnzymeのバージョンを3にしたら、一部のテストが壊れた。 調べたところ、v3からshallowの挙動が変わったことが原因だった。 https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md#life…

Reactのコンポーネントにpropsを渡さない場合のFlowの書き方

Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Compo…

『わかばちゃんと学ぶ Git使い方入門』を読んだ

同僚にお借りして読んだ。 わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 全くの初心者向けに、GitやGitHubの使い方を解説した本。 漫画の主人公も、プログラマではなく「Web業界に憧れる大学生」。 コマンドラインではなくGUIで操作…

Node.jsで任意のサイズの画像を生成するスクリプトを書いた

縦横サイズかバイト数、あるいはその両方を指定できる。 画像を操作するプログラムを書いていて、その検証用の画像を簡単に用意できるようにしたい、というのが作った動機。 既に似たようなツールは存在するのかもしれないが、勉強になりそうだから自分で作…

async/awaitを使った非同期処理の書き方

ES2017で仕様に入ったAsyncFunctionとawait単項演算子。 これらを使うと非同期処理を同期的に書くことができ、非同期処理のループもシンプルに書けるようになる。 この記事の内容は全てNode.jsのv8.6.0で動作確認している。 非同期処理の基礎はこちら。 Asyn…

ReactとCanvasで画像のリサイズや回転を行う

Canvasを学ぶ必要があり、その練習として作ってみた。 ただの習作だから別に公開する必要はないのだが、いろいろあり、仕事以外でもコードを書いて公開していこうと思うようになった。 そのほうがちゃんと続けられるだろうし。 職場では他のホスティングサー…

定数に対してFlowの型を設定する

定数に対してFlowの型を設定する場合、工夫というか、トリッキーな書き方をしないと上手く動かない。 業務で必要になり調べ、GitHubのIssueで解決策を見つけたのだが、日本語の資料や記事は見当たらなかった。 ちょっとした小ネタだが、誰かの役に立つかもし…

入社からの半年間でコードレビューで指摘されたことのまとめ

実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我…

Flowのnullチェックとanyへのキャスト

Flowはnullに対するチェックが厳しく、nullを想定していない場所にnullを渡したり、nullが渡される可能性があったりすると、エラーを出してくれる。 例えば以下のコードでFlowを実行すると、エラーが出る。 // @flow type Owner = { name: string, age: numb…

ReactのコンポーネントにFlowの型をつける

以前の記事でFlowの導入が完了し、Reactを使って書いたコードに型を付けることが出来るようになった。 ここからは実際に、Reactのコンポーネントに型を付けていく。 Flow導入の記事はこちら。 なお、この記事を書いている環境のFlowのバージョンは、0.46.0。…

配列の最大値を取得する ES2015版

JavaScriptで、配列の最大値を取得する方法について。 最初に答えを書いておくと、Math.max(...targetArray)。 旧来はapplyを使うのが主流だった? Math.max()を使うと、数値の中から最大のものを取得できる。 Math.max(6, 8, 9, 7); // 9 しかしこれは、一…

nodebrewの再インストール

経緯 最近リリースされたnpm v5を試したくて、試行錯誤していた。 特にpackage-lock.jsonの挙動について、今までのnpm shrinkwrapと比較しながら勉強したかったので、$ npm i -g npm@4.0.0みたいな感じで、手元のnpmのバージョンをころころ変えていた。 そし…

ReactにFlowを導入して型チェックを行う

JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…

React Router v4 の基本的な考え方と使い方

React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: …

webpack-dev-serverで開発用サーバを立てる

webpackでは、開発用サーバを簡単に立てることが出来る。 前回の記事でwebpack2の導入に成功したので、今度はそこにwebpack-dev-serverを導入してみる。 前回の記事の最後で、Reactをビルドできる状態になった。 その時はhtmlファイルを直接開いていたが、ロ…

webpack2の初歩

今まで、複数のファイルのバンドルにはbrowserifyを使っていた。 特に不満はなかったのだが、webpackに乗り換えていくことにした。 ネット上の記事を見てもwebpackを使っているケースは多いし、webpack-dev-serverという開発用サーバーも簡単に立てられるら…

Sinon.jsでspy,stub,mockを使う

Sinon.jsというライブラリを利用することで、テストダブルを用いたテストを書くことが出来る。 テストを書く際、そのテストが依存している特定の処理を書き換えることで、テストが書きやすくなるケースがある。 APIを叩いたり、データベースと接続したりする…

mochaでimportやexportを使ったテストコードを書く

ES2015を使ってmochaのテストコードを書きたい。 具体的には、importとexport。 他の仕様には概ね対応していると思うが、これらモジュール機能は、現在のところmochaでは使えない。 そのため、テストコードのなかでこれらを使うとエラーになってしまう。 テ…

mochaによる非同期のテストの書き方

テストフレームワークmochaでの、非同期のテストの書き方について。 mochaの導入方法などはこちらを参照。 1年近く前のエントリだが、そんなに間違ったことは書いていないはず。 なぜ非同期のテストには工夫が必要なのか mochaでは、doneを使うことで、簡単…

GitのTagの使い方

今までGitでタグを使うことはなかったが、勤務先で使っているので、勉強。 Git自体の理解(特に考え方や概念に対する理解)がかなり怪しいので、最初はよく分からなかった。備忘録としてまとめておく。 そもそもタグとは何か コミットのエイリアス、という認…

簡単にTwitterAPIの認証を行えるnpmモジュールを公開した

TwitterAPIの認証を行うために必要な署名を、簡単に作成できる。 APIキーなどの必要な情報を渡せばエンドポイントとリクエストヘッダを返すので、それを使ってリクエストするだけで済む。 このモジュールを作成した目的 OSSの実践。その練習として。 他人が…

ForkからPull Requestまでの大まかな流れ

先日、初めてPull Request(以下、PR)をしてMergeされる機会があったので、流れをまとめておく。 この話題については既にたくさんの記事が存在するが、備忘録として、書いておく。 ホスティングサービスはGitHubを使っている前提で書いているが、他のホステ…

JavaScriptのショートサーキット評価

ほとんどのプログラミング言語には、ANDやORを表す論理演算子が用意されている。 そして、左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価(短絡評価)という。 例えば、A AND Bという論理式があっ…

JestでReactのテストをする(6) 非同期のテスト

経験を重ねることでテストの書き方にも少しずつ慣れてきたのだが、非同期のテストには未だに苦手意識がある。 今回書いた内容についても、これがベストプラクティスだとは思わない。 実戦でやろうとすると、いろいろと課題が出てくると思う。 ただ、自分なり…

就職活動の際に現役エンジニアの方々から聞いたこと

年末年始を挟んで1ヶ月半くらい就職活動をしていたのだが、そこで、現役のエンジニアの方々と話すことが出来た。 大学生のとき「就職活動は様々な業界の社会人と話せるチャンス!」みたいなことを言われて「うるせえ」としか思えなかったが、今回は実際に、…

Common Lisp で「いろは順」にソートする

去年の年末からチマチマとCommon Lispを勉強しており、その練習として作成した。 元ネタはこれ。 いろいろイロハな皆様へ | 衆議院議員 河野太郎公式サイト 全国の年金事務所では、五十音順ではなく「いろは順」で資料を管理しているとのこと。 しかも、規則…

Node.jsでの環境変数の使い方

同じソースコード、同じアプリケーションでも、デプロイによって設定が異なるものがある。 各種APIキーや、データベースの設定など。本番環境と開発環境では異なる設定を使うことが多い。 こういったものをハードコーディングするべきではない。 また、GitHu…

JestでReactのテストをする(5) テキストボックスやテキストエリアのテスト

クリックイベントのテスト方法は以前書いた。 JestでReactのテストをする(2) クリックイベントのテスト 今回は、テキストボックスやテキストエリアのチェンジイベントのテスト方法について書く。 テストの対象となるコードを準備する まず、サンプルとして以…