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

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を活用することで、クラスのような機能を実現することが出来ていた。 そしてクラス構文は、こういった機能の…

APIを自作する際の検討事項

7月に公開を開始した食品栄養素検索サービス『Food Health』、そのAPIを作った。 今後もAPIを作ることがあるかもしれないので、設計作業の流れを備忘録としてまとめておく。 機能を決める まず、そのAPIでどんな機能を提供するのか、それを決める。 日本食品…

分割代入とスプレッド演算子

分割代入 分割代入とは、配列やオブジェクトから値を取り出し、それを個別の変数に代入すること。 デストラクチャリング、Destructuring assignmentとも呼ばれる。 まずは配列を分割代入する方法から見ていく。 let [a,b] = [1,9]; console.log(a,b); // 1 9…

ES2015の関数(アロー関数、this、残余引数など)

ES2015で加わった、関数に関する仕様について。 引数のデフォルト値 関数の定義時に、引数のデフォルト値を指定できるようになった。 関数を呼び出す際に引数が渡された場合はそれを、渡されなかった場合はデフォルト値を、使用する。 function addFunc(x = …

var,let,constの違いは、ブロックスコープと巻き上げ

JavaScriptにおける変数宣言はvarによって行われてきたが、ES2015で、letとconstが加わった。 varとの違いは、ブロックスコープを作るということと、変数の巻き上げの挙動が異なる、ということである。 このことについて、varとletを比較することで説明して…

JavaScriptやejsにおけるエスケープについて

JavaScriptやejsでエスケープを実現する方法としてencodeURIComponent()や<%= %>があるが、その挙動を正確には理解していなかったので、調べてみた。 まず、具体的にどんな機能なのかを調べ、次に、どのようなケースで使うのかを確認する。 機能 encodeURI()…

食品栄養素検索サービス『Food Health』を公開

食品名を検索することでその食品に含まれる成分を調べることが出来る。 それだけの、とてもシンプルなウェブアプリケーション。 そもそも、元データを提供している文部科学省が、同様のウェブサービスを既に公開している。 それでも、このウェブアプリケーシ…

Node.jsのexportsについて

Node.jsにはモジュール機能があり、他のファイルの内容を読み込むことが出来る。 だが、何となくでしか使い方を理解していなかったので、調べてみた。 このエントリのコードは全て、v4.4.3で動かした。 基本 まず、呼び出される側のファイルで、モジュール化…

複式簿記を学べるブラウザゲームを公開

詳しくは下記を参照。

スコープとクロージャ

2016.8.27追記 ES2015で登場したletとconstはブロックスコープを持つので、そちらも参照されたい。 var,let,constの違いは、ブロックスコープと巻き上げ グローバルスコープとローカルスコープ スコープとは、変数を参照できる範囲のこと。 スコープ外の変数…

関数のTips

関数の定義方法 JavaScriptで関数を定義する方法は、関数宣言と関数式の2つ。 本当はもう一つあるが、それは非推奨のものなので、ここでは省略する。 // 関数宣言 function myFunc1(){}; // 関数式 var myFunc2 = function(){}; どちらでも同じように関数が…

プライベート変数

通常、オブジェクトのプロパティには、どこからでもアクセスできる。 このままだと、状態管理が大変になってしまう。 管理が煩雑になるし、予期していない箇所で値が書き換えられる恐れがあり、バグの温床にもなる。 特定の方法でのみアクセスできる変数を作…

JavaScriptにおける、継承の方法

以下、継承を実装していくにあたり、この記事では、次の2つのコンストラクタを用意する。 まず、Personコンストラクタ。プロパティは、nameとageを持つ。そしてプロトタイプに、sayName()とsayMyself()という、2つのメソッドを持つ。 そして、Personコンスト…

instanceof演算子について

instanceof演算子を使うことで、あるオブジェクトが、対象となるオブジェクトのインスタンスかどうかを調べることが出来る。 function Person(){}; var person1 = new Person(); console.log(person1 instanceof Person); //true 上記の例では、person1は、P…

constructorプロパティについて

JavaScriptの関数は原則的に、生成された瞬間にprototypeプロパティを持つ。 その中身はオブジェクトであり、constructorプロパティのみを持つ。このプロパティは、関数自身を参照している。 function myFunc(){}; console.log(Object.getOwnPropertyNames(m…