2017-01-01から1年間の記事一覧
SPAなどは特にそうだと思うけど、fetchを使って非同期にAPIを叩き、その結果に基いて部分的にビューを書き換える、というのはよく行われる。 そういう時に面倒なのがテスト。 fetchはwindowオブジェクトに入っているからテスト環境には存在しないし、そもそ…
Reactのバージョンを16に上げるのに伴いEnzymeのバージョンを3にしたら、一部のテストが壊れた。 調べたところ、v3からshallowの挙動が変わったことが原因だった。 https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md#life…
Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Compo…
同僚にお借りして読んだ。 わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 全くの初心者向けに、GitやGitHubの使い方を解説した本。 漫画の主人公も、プログラマではなく「Web業界に憧れる大学生」。 コマンドラインではなくGUIで操作…
縦横サイズかバイト数、あるいはその両方を指定できる。 画像を操作するプログラムを書いていて、その検証用の画像を簡単に用意できるようにしたい、というのが作った動機。 既に似たようなツールは存在するのかもしれないが、勉強になりそうだから自分で作…
ES2017で仕様に入ったAsyncFunctionとawait単項演算子。 これらを使うと非同期処理を同期的に書くことができ、非同期処理のループもシンプルに書けるようになる。 この記事の内容は全てNode.jsのv8.6.0で動作確認している。 非同期処理の基礎はこちら。 Asyn…
Canvasを学ぶ必要があり、その練習として作ってみた。 ただの習作だから別に公開する必要はないのだが、いろいろあり、仕事以外でもコードを書いて公開していこうと思うようになった。 そのほうがちゃんと続けられるだろうし。 職場では他のホスティングサー…
定数に対してFlowの型を設定する場合、工夫というか、トリッキーな書き方をしないと上手く動かない。 業務で必要になり調べ、GitHubのIssueで解決策を見つけたのだが、日本語の資料や記事は見当たらなかった。 ちょっとした小ネタだが、誰かの役に立つかもし…
実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我…
Flowはnullに対するチェックが厳しく、nullを想定していない場所にnullを渡したり、nullが渡される可能性があったりすると、エラーを出してくれる。 例えば以下のコードでFlowを実行すると、エラーが出る。 // @flow type Owner = { name: string, age: numb…
以前の記事でFlowの導入が完了し、Reactを使って書いたコードに型を付けることが出来るようになった。 ここからは実際に、Reactのコンポーネントに型を付けていく。 Flow導入の記事はこちら。 なお、この記事を書いている環境のFlowのバージョンは、0.46.0。…
JavaScriptで、配列の最大値を取得する方法について。 最初に答えを書いておくと、Math.max(...targetArray)。 旧来はapplyを使うのが主流だった？ Math.max()を使うと、数値の中から最大のものを取得できる。 Math.max(6, 8, 9, 7); // 9 しかしこれは、一…
経緯 最近リリースされたnpm v5を試したくて、試行錯誤していた。 特にpackage-lock.jsonの挙動について、今までのnpm shrinkwrapと比較しながら勉強したかったので、$ npm i -g npm@4.0.0みたいな感じで、手元のnpmのバージョンをころころ変えていた。 そし…
JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…
React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: …
webpackでは、開発用サーバを簡単に立てることが出来る。 前回の記事でwebpack2の導入に成功したので、今度はそこにwebpack-dev-serverを導入してみる。 前回の記事の最後で、Reactをビルドできる状態になった。 その時はhtmlファイルを直接開いていたが、ロ…
今まで、複数のファイルのバンドルにはbrowserifyを使っていた。 特に不満はなかったのだが、webpackに乗り換えていくことにした。 ネット上の記事を見てもwebpackを使っているケースは多いし、webpack-dev-serverという開発用サーバーも簡単に立てられるら…
Sinon.jsというライブラリを利用することで、テストダブルを用いたテストを書くことが出来る。 テストを書く際、そのテストが依存している特定の処理を書き換えることで、テストが書きやすくなるケースがある。 APIを叩いたり、データベースと接続したりする…
ES2015を使ってmochaのテストコードを書きたい。 具体的には、importとexport。 他の仕様には概ね対応していると思うが、これらモジュール機能は、現在のところmochaでは使えない。 そのため、テストコードのなかでこれらを使うとエラーになってしまう。 テ…
テストフレームワークmochaでの、非同期のテストの書き方について。 mochaの導入方法などはこちらを参照。 1年近く前のエントリだが、そんなに間違ったことは書いていないはず。 なぜ非同期のテストには工夫が必要なのか mochaでは、doneを使うことで、簡単…
今までGitでタグを使うことはなかったが、勤務先で使っているので、勉強。 Git自体の理解（特に考え方や概念に対する理解）がかなり怪しいので、最初はよく分からなかった。備忘録としてまとめておく。 そもそもタグとは何か コミットのエイリアス、という認…
TwitterAPIの認証を行うために必要な署名を、簡単に作成できる。 APIキーなどの必要な情報を渡せばエンドポイントとリクエストヘッダを返すので、それを使ってリクエストするだけで済む。 このモジュールを作成した目的 OSSの実践。その練習として。 他人が…
先日、初めてPull Request（以下、PR）をしてMergeされる機会があったので、流れをまとめておく。 この話題については既にたくさんの記事が存在するが、備忘録として、書いておく。 ホスティングサービスはGitHubを使っている前提で書いているが、他のホステ…
ほとんどのプログラミング言語には、ANDやORを表す論理演算子が用意されている。 そして、左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価（短絡評価）という。 例えば、A AND Bという論理式があっ…
経験を重ねることでテストの書き方にも少しずつ慣れてきたのだが、非同期のテストには未だに苦手意識がある。 今回書いた内容についても、これがベストプラクティスだとは思わない。 実戦でやろうとすると、いろいろと課題が出てくると思う。 ただ、自分なり…
年末年始を挟んで1ヶ月半くらい就職活動をしていたのだが、そこで、現役のエンジニアの方々と話すことが出来た。 大学生のとき「就職活動は様々な業界の社会人と話せるチャンス！」みたいなことを言われて「うるせえ」としか思えなかったが、今回は実際に、…
去年の年末からチマチマとCommon Lispを勉強しており、その練習として作成した。 元ネタはこれ。 いろいろイロハな皆様へ | 衆議院議員 河野太郎公式サイト 全国の年金事務所では、五十音順ではなく「いろは順」で資料を管理しているとのこと。 しかも、規則…
同じソースコード、同じアプリケーションでも、デプロイによって設定が異なるものがある。 各種APIキーや、データベースの設定など。本番環境と開発環境では異なる設定を使うことが多い。 こういったものをハードコーディングするべきではない。 また、GitHu…
クリックイベントのテスト方法は以前書いた。 JestでReactのテストをする(2) クリックイベントのテスト 今回は、テキストボックスやテキストエリアのチェンジイベントのテスト方法について書く。 テストの対象となるコードを準備する まず、サンプルとして以…
JavaScriptには、再帰が実装されている。 再帰とは、関数のなかでその関数自身を呼び出すこと。 下記のrecursion()では、再帰を行っている。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++; recursion(num, limit…
