Yoppy's Blog

主に何でもない日常の事や技術ネタを更新します

【JavaScript】配列ライクなオブジェクトで配列メソッドを使うときのメモ

 

JavaScript】配列ライクなオブジェクトで配列メソッドを使うときのメモ

突然ですがJavaScriptは配列ライク(配列ではないけど配列のような)オブジェクトが結構あるのご存知でしたか?

もちろん自分も存在は知ってたんですが...そんな配列ライクなオブジェクトで配列メソッドを使うときにコケたのでめも。

配列ライクなオブジェクトの例

ん?何故エラーなんだ?

ここでlengthプロパティの存在と、オブジェクトの種類を判定

なんじゃこりゃ...

lengthプロパティはあるのにArrayオブジェクトじゃない...

これこそが

配列ライクなオブジェクトです。

対処方法

  • for文を使う
  • 配列メソッドのthisArgをapply, callとかを使ってバインド

for文を使う

lengthプロパティがあるのを逆手にfor文でグルっと回しましょう。

配列メソッドのthisArgをapply, callとかを使ってバインド

Array.prototype.forEachなのがアレですが配列ライクなオブジェクトで配列メソッドを使いたいならこれがベストかも

以上!こんな感じでいかがでしょうか?

ちなみに自分は今までfor文使ってて配列メソッドが使えない事に気づかなかって最近気づいたって感じでした。。。


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

JavaScriptでアルファベットの配列をスマートに作る

JavaScriptでアルファベットの配列をスマートに作る

さて、突然ですが皆さんは

JavaScriptでA-Zの配列を作れ

と言われたらどうしますか?

直感的に


var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

これもありですね。ですが今回はもうちょっとスマートにA-Zの配列を作成する方法を紹介します。

早速ですがコード


function Range(first, last) {
	var first = first.charCodeAt(0);
	var last = last.charCodeAt(0);
	var result = new Array();
	for(var i = first; i <= last; i++) {
            result.push(String.fromCodePoint(i));
	}
	return result;
}
    
var alphabet = Range('A', 'Z');

これは何をしているかというと、Unicode(ユニコード)のコードポイントを用いて引数の文字列をUnicodeのコードポイントの数値に変換します。

そしてそれをループで回してコードポイントをfromCodePointで文字列に再変換しているという流れです。

どうでしたか?手動でA-Zで入力するのはプログラミングらしくないので紹介してみました。


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

JavaScriptで素数かどうかを判定する関数

JavaScript素数かどうかを判定する関数

すごい今更感ありますが、素数に関するドキュメンタリーを見て(某リーマン予想のドキュメンタリー)急にやりたくなったのと思った以上にハマったので書きます。

素数の性質

ここで改めて素数の性質(判定では以外と重要だったりする)を思い出しましょう。

  • 1とその数以外に約数をもたない自然数

でしたよね。

=>このことから「素数の約数は2つである。」事がわかります。

コード

index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Prime Number</title>
</head>
<body>
	<script type="text/javascript" src="./script.js"></script>
</body>
</html>
script.js

function isPrimeNum(num) {
	var cnt = 0;
	var numbersArray = new Array();
	if(isNaN(num)) {
		throw new TypeError();
	}
	for(var i = 0; i <= num; i++) {
		numbersArray[i] = i;
	}
	for(var i = 0; i < numbersArray.length; i++) {
		if(i == 0) {
			continue;
		}
		if((num % numbersArray[i]) == 0) {
			cnt++;
		}
	}
	return cnt == 2;
}

とまあこんな感じです。

改めて思いましたが素数ってすごい神秘ですよね...不思議です。


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

【JavaScript】アロー関数の使い方

JavaScript】アロー関数の使い方

今回はタイトルの通りES6(2015)にて実装された、アロー関数についてやります。はい。

アロー関数って何?(What)

ずばり、アロー関数とは...

  • 匿名関数の省略系。
  • しかしargumentsオブジェクトを持たない。
  • thisキーワードを束縛しない。
  • thisキーワードを束縛しない。

匿名関数の省略形

まずは見慣れた書き方。


window.addEventListener('click', function(e) { 
    console.log(e.clientX);
    console.log(e.clientY); 
});

アロー関数を使って匿名関数を省略形にした書き方。


window.addEventListener('click', e => {
    console.log(e.clientX);
    console.log(e.clientY);
});

argumentsオブジェクトを持たない


var sum = arguments => {
    //code...
}
// ↑これは、エラー

thisキーワードを束縛しない。

JavaScriptの仕様でthisキーワードの参照がwindowオブジェクトに変わってしまい、思うように動かないコード


function person(name) {
    this.name = name || '';
}

person.prototype.addSayNameEvent = function() {
    window.addEventListener('click', function() {
        console.log('My name is ' + this.name);
    });
}

var person1 = new person('john');

person1.addSayNameEvent();

アロー関数を使うと...


function person(name) {
    this.name = name || '';
}

person.prototype.addSayNameEvent = function() {
    window.addEventListener('click', () => {
        console.log('My name is ' + this.name);
    });
}

var person1 = new person('john');

person1.addSayNameEvent();

なんとこれ思い通りの挙動をするんですね。はい。

まとめ

アロー関数とは、

  • 匿名関数の省略系。
  • しかしargumentsオブジェクトを持たない。
  • thisキーワードを束縛しない。

というJavaScriptのthisキーワードにおけるジャイアニズムを実現する事のできる関数でしたねw

「お前のthisは、俺のthis。」

みたいな...ね?w


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

情報処理(プログラミング)部に入ってカルチャーショックを受けたお話。

情報処理(プログラミング)部に入ってカルチャーショックを受けたお話。

今日はタイトルのまんまなんですが、部活に入ってカルチャーショックを受けたお話をしたいと思います。

まずこの話の導入として、私の去年(2016年)の軽い振り返りをしたいと思います。

4月-5月

      • 無事中学三年生になるも、クラスに馴染めない。
      • 某プログラミングレッスン動画のサイトを見て、JavaScriptを書き始める。

一つ目は毎年の事なので特に触れなくてもいいです()

二つ目は今の高専生活に割と影響しています。

元々、自分はPCをずっとやっているような人間でした(小5、6ぐらいから)

そして小学生の頃すでに、HTML / CSSに出会っています。

しかし、劣等生の小学生の自分に到底JavaScriptは理解出来ませんでした。

しかし、なぜか中三になって書き始めました...

6月-8月

  • サイ本を買う
  • Node.jsの本を買う
  • JavaScript(jQuery)で簡単なWebページは書けるようになる
  • アニメにどっぷりハマる。

一つ目のサイ本は買って大正解でした。今も大活躍です。

二つ目のNode.jsの書籍は主に機械学習、Webサーバーについての内容でした。こちらは見事に挫折しています。

三つ目については、JavaScriptというよりjQuery + jQueryのPluginですね。

タブメニューなんかを搭載したWebサイトを書いていた事を記憶しています。

四つ目はもう触れなくてもいいよね...w

ただ、受験を控えて真面目になって行く周りよりどんどん私は不真面目になっていました。

そして、ここで大切なのは、二つ目です。この時点では私にはサーバーサイドの道が閉ざされてしまいました。

やっぱりプログラミングも何事もそうですが、出来なければつまらないですよね...

9月-12月

  • みんなが受験勉強ラストスパートに対して全く何もしていない。
  • 挙句の果てには、受験前日までネット三昧

本当に酷い生活です。

危機感はあるのに手は動かない。

この過去からわかる通り私は根っからのWeb系です。


とまぁ酷い生活を送ってきた2016年ですが振り返りはこのぐらいにしたいと思いますw

(実際はこの後3D(Three.js / WebGL)にも手を出すものの2D(HTML5 Canvas)もままならいので当然の事ながら挫折です)

そしてこの後運命のような選択をします。

情報処理(プログラミング)部に入部する。

まず部室に入って一言、

「多様すぎる。」

これまで、ずっとWeb世界に引き籠ってた自分には想像もつかないような光景でした。

ある人はAOJでC言語を学び

ある人はゲーム開発をしていて

またある人はPythonを書いている。

これを、この光景を見たとき正直カルチャーショックを受けました。

こんな多様な場所で自分の培ってきた、Web技術は本当に生かされるのだろうか。

もしかした1年間やってきた事が全て無駄になるのではないだろうか。

とさえ思ってしまいました。

なのでこれを機にWebプログラミングから一旦離れて(少し身を引いて)幅広く技術を持っていきたいと改めて思いました。

今日も知識欲は止まらない。


Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

Hello, World!

Hello, World!

はじめまして。ということで今日からブログを書き始めます。

「よっぴー」という者です。

まず、記事には以下の要素があります。

  • 更新頻度は気まぐれ
  • 語彙力 / Zero
  • 間違え / ∞

そしてこれらは、

改善の兆し無し

です。

更新の方はと言いますと、主に日々の出来事や、技術ネタを更新していく予定です。

何かと至らないと思いますが、これからよろしくお願いします。

そういえば私の方はといいますと、ゴールデンウィークですね(唐突)

この五日間はしっかりと引き籠りたい休みたいと思います。

では、一回目の更新はこんな感じで失礼します。

まとめ

  • 更新頻度は気まぐれ
  • 語彙力 / Zero
  • 間違え / ∞

そういえば、Twitter、ホームページもあるのでよければどうぞ。

Twitter: @GochiUser

HP: http://yoppy.webcrow.jp

制作物等はHPにて公開しています。