順次、選択、そして繰り返し

プログラミングのことやITのこと、たまに演劇のことも書きます。

JavaScriptのエラー　その1

去年の冬コミで買ったものがある。
↓
JavaScriptで 実行時エラーを起こす 100+の技法

JavaScriptのエラーだけを延々と書き綴られた本である。

確かにエラーを知ることでデバックの効率や言語に対する
知識がつくと思い、即購入。

そして、今日から少しずつ読んで試していこうと思う。

今日は

  1. 投げっぱなしスロー
  2. 未定義
  3. 参照

の3つを試してみる。

1.投げっぱなしスロー

エラーをスローしたはいいが、キャッチしなかった場合に
発生するエラー。

16行目でthrowしているがcatchしていないので、エラーとなる。
なので、下記のようにcatchしてあげれば良い

2.未定義

定義していない変数を使用するとエラー

3.参照

nullやundefinedにはpropertyが無いため、
参照できずエラーになる


とりあえず例外処理の方法だけでも知れて良かった。

JSONとJavaScriptオブジェクトの違い

勘違いしてたことだったのでメモ。

サーバー(Java)でMap型のオブジェクトをGSONやJSONICでJSONに変換し、
そのデータをクライアント(JavaScript)に渡したときに、JSON.parse()することにある疑問が浮かんだ。

あれ？サーバー側でJSON形式にしてるんだからパースする必要あるの？という疑問だ。


今までのJSONに対するイメージ↓

連想配列みたいな形でデータを表現する(JavaScriptのオブジェクトと同じ)

調べてみたら、全然違った。

{key:'value'}

↑これはオブジェクト。

{'key':'value'}

↑これもオブジェクト。

{"key":'value'}

↑これもオブジェクト。

{'key':"value"}

↑これもオブジェクト。

{"key":"value"}

↑これがJSON(オブジェクトでもある)

JSONはキー値がダブルクォーテーションで囲われていないといけないということ。
そしてデータ部分が文字列の場合はデータ部分もダブルクォーテーションで
囲わなければいけないということ。
(シングルクォーテーションではJSONで文字列を表せない。
しかし、数値型やboolean型は囲わない)

なので、これからはJSONを
連想配列みたいな形でデータを表現する(JavaScriptのオブジェクトと同じ)
※キー値がダブルクォーテーションで囲われている必要がある。
さらにデータ部が文字列の場合は文字列にもダブルクォーテーションが必要。
と認識していく。


そう考えるとJavaScriptのオブジェクトとJSONの変換にJSON.parse()とJSON.stringify()の意味がわかってきた。

Node.jsでサーバーを作り、フォームデータを送信してみた

専門学校の卒業研究以降全く触っていなかったNode.jsを久々に触ってみようと思う。

インストール方法は下記を参照して行った。
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜

NVMというのはNode.jsのバージョン管理ができるものみたい。

パーミッション関係でエラーが出たが、chmodで無理矢理エラーを解消。

EJSを使用するため下記のコマンドでインストールする。

npm install ejs

あとは、下記のサイトを参考にしまして。
ビギナーのための Node.jsプログラミング入門

スクリプトレットで書くところがJSPと同じで書きやすかったなという印象を
受けました。

やっぱり、ただサイトを見るだけではなく真似でもいいから実際に
書いた方が理解しやすいなと思ったり。

次は socket.ioを用いてWebSocketによる通信を実装したいと思う。

年末JavaScript祭ゆく年くる年に参加してきた

12月26日に年末JavaScript祭ゆく年くる年に参加してきました。

年末JavaScript祭2015 ゆく年くる年

聞いてきた内容は下記の通り

  • React.jsでHow Many pizza?
  • さあ！Javascriptでデバイスとやりとりするよ！
  • 改造指向プログラミング
  • Angular2で何が変わるのか
  • bowerに何があったのか
  • Canvas系ライブラリのあれやこれや 2015
  • ライトニングトーク

JavaScriptは専門学校の卒業研究と
今の業務ぐらいでしか使用したことがないぐらいのレベル......。

なので、理解できた範囲でまとめてみる。

React.jsでHow Many pizza?

How Many pizza?というアプリを
React.jsで作り直してみたというお話。
React.jsはMVCモデルのVのライブラリ。
JSXとComponentがキーワード。

さあ！Javascriptでデバイスとやりとりするよ！

IoTの話。Node.jsとか。
JavaScriptでデバイスとのやり取りがしやすくなったよね。
デバイスから情報を取得し、収集することで新たな可能性が生まれるかも。

改造指向プログラミング

一からプログラミングをして、ページ１枚を作るのは難しい。
そこで、既存のものを改造してみるのも一つの方法というお話。
stylebotでCSSの改造、CustomJavaScriptでJavaScriptの改造ができる。
改造を行うことで知識がつきやすくなる。

Angular2で何が変わるのか

AngularとAngular2は別物ってお話。

bowerに何があったのか

これは後で調べる......。
(全くわからなかった。)

Canvas系ライブラリのあれやこれや 2015

enchant.jsやtmlib.jsなど、専門学校時代に聞いたことがある
ライブラリが出てきて懐かしかった。
話の結末としては「flashは死なない」

ライトニングトーク

Node.jsやElectron、ECMAScript6の話が出てきて
面白かった。
とりあえずHTAでツール作りましたって話が出た時、会場が
どよめいていた気がする。

以上。

JavaScriptのObjectクラスについて(プロトタイプ)

JavaScriptのObjectクラスで特にプロトタイプについて
分からなかったので、少しだけ調べてみた。

まず、理解するためにソースコードを書いてみる。

「プロトタイプとは実体化済みのオブジェクトのことをいう。」らしい……。

Javaはクラスベースの言語なのでその反対だと思えばいいのかな。
確かにJavaはクラスという未実装なものを基礎にして実体化するし。

JavaScriptでは関数が作成された時点でプロトタイプが作成される。
なので、ソースコード10行目の

hoge.prototype.num1 = 10;

は、hogeという関数(オブジェクト)の中にあるプロトタイプにnum1という
プロパティを設定して10を代入してることになる。

そして、16行目から22行目の

  //obj1にnum1を定義する
  obj1.num1 = 100;
  
  //定義したnum1の値が表示される
  console.log("obj1:" + obj1.num1);
  //プロトタイプで宣言された値が表示される
  console.log("obj2:" + obj2.num1);

で、暗黙の参照が行われている。

暗黙の参照とは、そのオブジェクト自身に指定したプロパティがない場合
生成元のオブジェクトにプロパティがないか参照を行うこと。

なので、obj1.num1ではオブジェクト自身にnum1というプロパティ(17行目で設定)が
存在するので100を出力する。
しかし、obj2にはnum1というプロパティを設定していないので
10行目で設定したプロトタイプ内のnum1を出力する。


少し調べたけど、これはもっと調べる必要があるな……。

参考サイト

Java8のラムダ式とそれに関連する知識

少し前に偶然Java8のラムダ式に遭遇したことがあった。(確かWebSocketを調べてた時)

それからラムダ式について関わることをしなかったので関わってみることにする。

ラムダ(lambda)式

関数型インターフェースのメソッドを実装するときに使用できる記述法。
ラムダ式を使用することで記述を簡略化することができる。

ん？関数型インターフェース？

関数型インターフェース

ラムダ式やメソッド参照の代入先になれるインターフェースのこと。
関数型インターフェースの条件としては抽象メソッドが1つだけある
インターフェースであること。
(staticメソッドやデフォルトメソッドが含まれていてもOK)

※ちなみにデフォルトメソッドはインターフェースの中にある抽象メソッドではない
メソッドのこと……らしい。(処理が実装されている)

ん？メソッド参照？

メソッド参照

関数型インターフェースの変数にメソッドそのものを代入すること。


ラムダ式を調べようとするだけで芋づる式のように関数型インターフェースと
メソッド参照というキーワードが出てきてしまった。

出てきたしまった以上仕方がないので実際にソースコードを書いてみる。

まずは関数型インターフェースから

package lambda.java;

//関数型インターフェースとは
//1.定義されている抽象メソッドが1つしかないインターフェース
//2.ラムダ式やメソッドの参照の代入先になれるインターフェース
@FunctionalInterface
public interface TestFunction {
	public abstract int apply(int a, int b, int c);

}

アノテーションで@FunctionalInterfaceを付加すると関数型インターフェースと認識するらしい。

そしてラムダ式。

package lambda.java;

public class Lambda {

	public static void main(String[] args) {
                
　　　　　　　　//ラムダ式
　　　　　　　　//3つのint型引数を左から順に引き算して答えを返す
		TestFunction testFunction = (a,b,c) -> a - b - c;

　　　　　　　　//答えを標準出力
		System.out.println(testFunction.apply(50, 30, 10));


	}

}

とりあえずここに注目。

//ラムダ式
//3つのint型引数を左から順に引き算して答えを返す
TestFunction testFunction = (a,b,c) -> a - b - c;

Testfunctionというインターフェースにはapplyという3つのint型引数があるので
(a,b,c)と書いて->の先に実際の処理を書く。
これでapplyメソッドの実装が済んでいるので

//答えを標準出力
System.out.println(testFunction.apply(50, 30, 10));

applyメソッドを呼び出すと引き算した結果を出力してくれる。

次にメソッド参照。

package lambda.java;

public class TestClass {

	//staticメソッド 3つの引数を足した結果を返す
	public static int sum(int a, int b, int c){

		return a + b + c;
	}
}

package lambda.java;

public class Lambda {

	public static void main(String[] args) {
                //メソッド参照
　　　　　　　　//TestClassクラスのsumメソッドを参照している
		TestFunction testFunction = TestClass::sum;

		System.out.println(testFunction.apply(50, 30, 10));

	}

}

とりあえずここに注目。

//メソッド参照
//TestClassクラスのsumメソッドを参照している
TestFunction testFunction = TestClass::sum;

"::"がポイント
クラス名::メソッド名と書くことで指定したクラスのメソッドを
参照することができる。
staticメソッドではないときはインスタンス変数::メソッド名で
メソッドを参照できる。


これでラムダ式で書かれたソースも読めるようになった気がする……。

参考サイト