React

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

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

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

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

webpack2の初歩

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

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

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

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

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

Node.js+React+ReduxでTwitterクライアントを作った

ReactとReduxの習作として、ブラウザで動くTwitterクライアントを作った。 サーバーサイドはNode.js。Expressも使っている。 JavaScriptだけでこういったものが作れるのだからすごい。 APIとやり取りをして情報を送受信し、それを元にビューを構築。 ユーザ…

React+Reduxの最もシンプルな構成

最近、Reduxの勉強を始めた。 Reduxとは、状態の管理を行うためのフレームワーク。 詳しいことは、ネットで検索すれば色々と出てくる。 自分もネットを使って勉強したわけであり、大いに参考になったのだが、出てくるサンプルに複雑なものが多いのが気になっ…

JestでReactのテストをする(4) propsの値をテストする

Reactのコンポーネントには、属性として値を渡すことができ、渡された値にはthis.props.xxxでアクセスできる。 propsの他に、自身で管理する値であるstateというものもあるが、Reactの思想的にstateはあまり使わないほうがいいのだろう。 コンポーネントはた…

Reactでシンプルなブラウザゲームを作った

http://numb86.net/tech/react-runner/ クリックするとジャンプするので、ひたすら障害物を避けていく。 今回の技術的な目的は、Reactに慣れること、Jestによるテストの実践、Gitのよりスマートな利用、といったあたり。 Reactではアニメーションをどうする…

Reactのサーバーサイドレンダリング

Reactでは、サーバーサイドレンダリングを行うことが出来る。 これは、サーバーサイドでReactのコンポーネントをhtmlとして展開し、それをクライアントに返す、というもの。 これを利用することで、初期ロードの遅さ、SEOの弱さ、などの問題を解決できる。 …

JestでReactのテストをする(3) 仮想DOMのテスト

前回はクリックイベントのテストを行った。 今回は、DOMが正しくレンダリングされているかのテストを行う。 正確には、DOMではなくて、仮想DOMであり、コンポーネントと言ったほうがいいのだと思う。 テストの対象となるコード まずは、テストの対象となるコ…

JestでReactのテストをする(2) クリックイベントのテスト

前回の記事はこちら。 JestでReactのテストをする(1) 導入編 前回で、JestとReactの環境構築が終わった。 以降は、個人的に特に習得したいと思っている、イベントとDOMのテストに取り組む。 今回は、イベントのテストについて。 クリックイベントの挙動をテ…

JestでReactのテストをする(1) 導入編

先日、以下の記事を見つけた。 Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita 非常に分かりやすくまとまっており、「これなら自分にも出来るかも」と思えた。 この記事では例としてReactをテストしており、丁度Reactのテスト方法を探し…

Reactで Food Health API のデモを作成した

http://numb86.net/tech/food-health-react/ 3週間ほど前、Food Health APIに栄養素のデータを追加した。 これで、食品データと組み合わせることで例えば、1日の食事の内容を入力して不足している栄養素は何か調べる、ということも一応可能になった。 また、…

react.min.jsだとpropTypesは効かない

Reactでは、propsを使って値の受け渡しが出来るが、その値の型をチェックする仕組みが用意されている。 それがpropTypesである。 詳しくは下記を参照。 再利用可能なコンポーネント | React React.jsのProp - Qiita 誤った型のデータが渡された場合、コンソ…