読者です 読者をやめる 読者になる 読者になる

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…

Object.creat()とプロトタイプチェーン

Object.creat()を使うと、[[Prototype]]を指定した上で、オブジェクトを生成できる。 リテラルで生成したオブジェクトの[[Prototype]]はObject.prototypeになるが、Object.creat()を使えば、任意のオブジェクトを[[Prototype]]に設定できる。 Object.creat()…

プロトタイプの基礎

Prototypeプロパティ JavaScriptのオブジェクトは、自身が持っているプロパティだけでなく、プロトタイプのプロパティにもアクセスすることが出来る。 オブジェクトがどんなプロトタイプを持っているかは、[[Prototype]]プロパティを見れば分かる。 [[Protot…

new演算子による、インスタンスの作成

関数に対してnew演算子を使うことで、オブジェクトを新しく作ることが出来る。 この関数をコンストラクタ、生成されるオブジェクトをインスタンスと呼ぶ。 コンストラクタにおけるthisは、new演算子によって生成されるインスタンスを指す。 function Person(…

オブジェクトの変更防止

オブジェクトも内部属性を持っている。 その一つが、[[Extensible]]。 これはオブジェクトが拡張可能かどうかを示し、これを使うことで、プロパティの追加や変更を制御できる。 Extensible [[Extensible]]はデフォルトではtrueになっている。 この状態だと自…

プロパティの内部属性

JavaScriptには様々な内部属性があり、それは二重ブラケット([[]])に囲まれて表現される。 プロパティも、いくつかの内部属性を持っている。 Object.getOwnPropertyDescriptor()とプロパティディスクリプタ まずは、内部属性にアクセスする方法について。 …

mochaとchaiの最も基本的な使い方

以前、テストについて調べていて、mochaというのものが広く使われていることを知った。 だがその時はNode.jsに触ったことがなく、コマンドラインにも強い苦手意識があったので、導入できなかった。 結局QUnitを使ってみることになり、それに対して強い不満が…

プロパティの操作,確認,列挙

プロパティ操作の基本 オブジェクトのプロパティは原則的に、いつでもその内容を変更できる。 後から新しいプロパティを追加したり、既存のプロパティを削除することも出来る。 var person = { name: 'Tom' }; person.age = 30; // プロパティを追加 console…