30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

ES2015(ES6)

React のクラスコンポーネントの bind は何を解決しているのか

クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決しているのか。 Hooks が登場したことで今後はクラスコンポーネント…

ArrayBuffer と TypedArray でバイナリデータを扱う

ArrayBufferとTypedArrayはバイナリデータを扱うためのオブジェクトで、ES2015で標準化された。 この記事では、これらのオブジェクトの概要について述べたあと、Node.js でバイナリファイルを読み書きする方法についても説明する。 動作確認は Node.js のv10…

配列の最大値を取得する ES2015版

JavaScriptで、配列の最大値を取得する方法について。 最初に答えを書いておくと、Math.max(...targetArray)。 旧来はapplyを使うのが主流だった? Math.max()を使うと、数値の中から最大のものを取得できる。 Math.max(6, 8, 9, 7); // 9 しかしこれは、一…

mochaでimportやexportを使ったテストコードを書く

ES2015を使ってmochaのテストコードを書きたい。 具体的には、importとexport。 他の仕様には概ね対応していると思うが、これらモジュール機能は、現在のところmochaでは使えない。 そのため、テストコードのなかでこれらを使うとエラーになってしまう。 テ…

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…

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

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

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

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

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

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

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

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

クラス構文(ES2015)の基本

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

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

分割代入 分割代入とは、配列やオブジェクトから値を取り出し、それを個別の変数に代入すること。 デストラクチャリング、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を比較することで説明して…