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で動かした。 基本 まず、呼び出される側のファイルで、モジュール化…

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

詳しくは下記を参照。