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) クリックイベントのテスト 今回は、テキストボックスやテキストエリアのチェンジイベントのテスト方法について書く。 テストの対象となるコードを準備する まず、サンプルとして以…

JavaScriptの末尾呼び出し最適化(TCO)

JavaScriptには、再帰が実装されている。 再帰とは、関数のなかでその関数自身を呼び出すこと。 下記のrecursion()では、再帰を行っている。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++; recursion(num, limit…

Promiseによる非同期処理の書き方

JavaScriptは基本的に逐次処理、同期処理であり、上から順番にプログラムが実行されていく。 x行目の処理が終わってからx+1行目の処理を行う、という具合に、一つ一つ実行していく。 非同期処理を行うための方法も以前から用意されていたが、ES2015で導入さ…

ES2015で追加されたプリミティブ型、シンボル

JavaScriptのプリミティブ型は文字列、数値、真偽値、undefined、nullの5つだったが、ES2015からシンボルが加わった。 Symbol()を使うことで作成できる。引数は必須ではない。 const mySymbol = Symbol(); const mySymbol2 = Symbol('name'); const mySymbol…

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

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

ES2015で書かれたNode.jsをデーモン化する

最新版のNode.jsでは、ES2015の機能のほとんどがサポートされており、別段トランスパイルを行わなくても使うことが出来る。 しかし、サポートが行われていない機能もある。 例えばモジュール機能がそれだ。 そういった機能を利用するためには、トランスパイ…

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

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

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

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

Node.jsでTwitterAPIのリクエストトークンを取得

Node.jsでTwitterAPIを弄っており、認証機能を作りたいと思っている。 まずはリクエストトークンを取得する必要がある、というところまでは分かったが、その先で苦労した。 検索してみても、Node.jsでTwitterのOAuth認証をやっている記事は少なく、あまり見…

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のテスト方法を探し…

オブジェクトの値をコピーするObject.assign()

JavaScriptでは、オブジェクトが格納されている変数を他の変数にコピーすると、そのオブジェクトへの参照がコピーされる。 そのため、元となるオブジェクトの値を変更すると、コピー先のオブジェクトにも変更が反映されてしまう。逆も然り。 let obj1 = {val…

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

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

ECMAScript(ES2015,Babel)におけるモジュールについて

JavaScriptには元来、モジュール機能が存在しなかった。 そこで、Node.jsではmodule.exportsという機能を導入してモジュール機能を実現し、さらに、その機能をブラウザでも利用できるようにするためのツールとしてbrowserifyなどが開発された。 そういった話…

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

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

Food Health API のデモを公開

http://numb86.net/tech/food-health-demo/ 先日公開したAPIのデモを作った。 取り敢えずAPIを使って動くものを作る、というのが目的だったので、実用性はあまりない。 ただ、このAPIを使って何が出来るか、は表現できていると思う。 これをもっと機能拡張し…

クラス構文(ES2015)による継承とプロトタイプチェーン

クラス構文の基礎は、下記を参照。 クラス構文(ES2015)の基本 クラス構文には、継承を行うための方法も用意されている。 class サブクラス extends スーパークラス{ サブクラスの定義 }; メソッドの追加、オーバーライド サブクラスでメソッドを定義すると…

クラス構文(ES2015)の基本

ES2015で追加された構文に、クラスがある。 これを用いることで、JavaScriptでもクラスを使うことが出来る。 ただ、これまでもnew演算子やprototypeを活用することで、クラスのような機能を実現することが出来ていた。 そしてクラス構文は、こういった機能の…