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

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

2016-01-01から1年間の記事一覧

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…

アクセサプロパティ(getterとsetter)

アクセサプロパティの基本 プロパティには、データプロパティとアクセサプロパティの2種類がある。 必ずどちらかに分類でき、両方の性質を兼ね備えることは出来ない。 データプロパティには値が格納される。 アクセサプロパティは、値は持たず、getterやsett…

this, call(), apply(), bind()

JavaScriptの言語仕様を勉強していくことにした。 いい技術書に巡り合ったこともあり、それなりに理解できるようにはなったが、まだまだ身についてはいない。 あくまでも、技術書の説明を読めば理解できる、というレベルに過ぎない。 これでは実際のコーディ…

Cloud Vision API を利用した画像認識ゲームを制作

目標 ミーハーなので、アルファ碁を見て人工知能や機械学習に関心を持った。 この技術を使って何か出来ないかと調べていたところ、Googleが画像認識技術を提供していることを知り、本作を作ることにした。 本作を通じて、以下の2つの目標を達成したかった。 …

Node.jsの概要(1) モジュール機能

Node.js = サーバーサイドプログラミング? 最近Node.jsの勉強を始めたので、Node.jsの概要や全体像について、学んだことを記録していく。 どうもNode.jsは、自分が当初抱いていたイメージよりも、かなり広くて深い概念のような気がする。 当初、Node.jsは単…

QUnitでTDDの実践(DOM編)

以前、QUnitを使ってTDD(テスト駆動開発)を実践してみた。 その時に残った課題として、DOMをテストする方法が分からない、というのがあった。 numb86-tech.hatenablog.com その後DOMやイベントをテストする方法を学んだので、ドラッグアンドドロップを題材…

Drag & Drop APIの基本

HTML5には、ブラウザ上でのドラッグアンドドロップを実現するためのDrag & Drop API(以下、DnD API)が用意されている。 draggable属性 まずはHTMLの要素にdraggable属性を設定して、その要素がドラッグ可能かどうかを指定する。 真偽値で設定。 <div id="box1" draggable="true">box1</div> <div id="box2" draggable="false">box2</div>…

QUnitでDOM操作やクリックイベントをテストする方法

前回の記事で、DOM操作をテストする方法が分かっていないことに気付いた。 現実的に考えて、クライアントサイドJavaScriptでコーディングしていく上で、DOM要素やそれに紐付いたイベントを避けて通ることは出来ない。 これらをテストできなければ、テストで…

QUnitでTDD(テスト駆動開発)を実践してみる

QUnitやTDDの概要は分かったが、まだまだ、テストのためのテストをやっている段階。 どうやって実務に活かせばいいのかは分かっていない。 そこで、このページの内容を読んでみた。 実践TDD! テスト駆動開発入門 : アシアルブログ 非常に分かりやすくて、実…

ブラウザにデータを保存できるHTML5のAPI、Web Storageの基本

HTML5で実装されたAPIの一つである、Web Storageについて。 HTML5について そもそもHTML5とは何か。 現行のHTMLのバージョンのことで、その大きな特徴は、様々なAPIが実装されたこと。 これまでのように文書作成だけに主眼を置くのではなく、ウェブアプリケ…

QUnitの最も基本的な使い方

前回の続き。 テスト駆動開発の考え方は、なんとなく分かった。 だが、具体的なことはまだ何も分かっていない。 その考え方をどのように実現するのか、という部分。 テスト駆動開発の考え方は分かったし、本当にそれが実現できるなら素晴らしいと思う。だが…

テスト駆動開発の概要

テスト、という言葉はよく聞くし、何となくのニュアンスは分かるのだが、実際のところは理解していない。 だから当然、実践もしていない。 テストとは何か。 どんなメリットがあり、なぜ推奨されているのか。 自分もやるべきなのか。 実際にやるためには、具…

ソフトウェア開発という巨大な山

思うことあって、本格的にプログラミングを勉強することにした。 だが、学ぶべきことは山ほどある。 プログラミング言語そのものや、そのフレームワークやライブラリを学ぶのは当然だが、それだけでは恐らく、一端のエンジニアにはなれない。 Gitなどのバー…