25
Code-Golf with JS デジタル時計 Code 2013 2日目

Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Embed Size (px)

Citation preview

Page 1: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Code-Golf with JSデジタル時計

Code 2013 2日目

Page 2: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

問題:

デジタル時計を出力するclock.jsをできるだけ少ないバイト数で記述せよ!

GitHubに問題のリポジトリを公開中https://github.com/yoshiakist/codegolf

Page 3: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

チーム分け

A 坂本さん、今野さん、牧野さん

B normalianさん、前鼻さん、zeclさん

C tokibitoさん、柴田さん、Drewさん

D ももさん、サスケさん、chakさん

E 清野さん、工藤さん、石坂さん、長田さん

Page 4: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Let’s Code!!A 坂本さん、今野さん、牧野さん

B normalianさん、前鼻さん、zeclさん

C tokibitoさん、柴田さん、Drewさん

D ももさん、サスケさん、chakさん

E 清野さん、工藤さん、石坂さん、長田さん

   制限時間:20分!!

Page 5: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Time up!!

お疲れ様でした!

Page 6: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

問題の確認

clock.js の特徴:

- setTimeout(func, 1000) を再帰呼び出し

- sec を分秒に変換

- pattern[‘■ ■’,’■ ■’,’■■■’, ...] から文字列を

 生成(この配列が非常に冗長)

Page 7: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

JSのショートコーディング

・var 宣言の省略、変数名の短縮

・for文のインクリメントをデクリメントに

・Math.floor関数の代替

・setTimeout()を短縮

Page 8: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

JSのショートコーディング

・var 宣言の省略、変数名の短縮

・for文のインクリメントをデクリメントに

・Math.floor関数の代替

・setTimeout()を短縮

・”■ ■” 文字列をどう生成するか!?

Page 9: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

var宣言の省略/変数名の短縮

var result = “”;

↓ ↓ ↓

r=“”;

※ var 無しの変数はグローバルオブジェクトを汚染するので、業務では使用厳禁!!

Page 10: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

for文の ++ / --for(var i = 0; i < 10; i++){ … }

↓ ↓ ↓

for(i=10;i--;){ … }

※ 業務でも場合によっては有用!

(数値との比較より、0との比較の方が高速)

Page 11: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Math.floor関数の代替

Math.floor(3.5) // 3と出力

↓ ↓ ↓

0|3.5 // 3と出力

※ | はビットごとのORを取る

Page 12: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

setTimeout関数の短縮ot()を短縮

var repeatFunc = function(){// 処理

setTimeout(repeatFunc(), 1000);}    ↓ ↓ ↓

setInterval(function(){// 処理

}, 1000);

Page 13: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

AAの文字列”■ ■”の生成

メインディッシュ

 “■■■”, “■_■”, “■_■”, → これを何バイトで表現するか

 “■_■”, “■■■”,

Page 14: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case1. 数字を5バイトで表現

 7: “■■■”, 5: “■_■”, 5: “■_■”, 5: “■_■”, 7: “■■■”

 →75557

 5: “■_■”, 5: “■_■”, 7: “■■■”, 4: “__■”, 4: “__■”,

 →55744

Page 15: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case1. 数字を5バイトで表現

str = “”;for (var i = 0; i<3; i++) { str += 5&Math.pow(2,(i)) ? '■' : '_' ;}

//  str += (5&1) ? '■' : '_' ; //  str += (5&2) ? '■' : '_' ; //  str += (5&4) ? '■' : '_' ;  →  '■_■'

Page 16: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case2. 数字を4バイトで表現

数字の「4」の場合

“■_■”,”■_■”,”■■■”,”__■”,”__■”      ↓“■_■■_■■■■__■__■” 

Page 17: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case2. 数字を4バイトで表現

数字の「4」の場合

“■_■”,”■_■”,”■■■”,”__■”,”__■”      ↓“■_■■_■■■■__■__■”      ↓(2進数だと)101101111001001

Page 18: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case2. 数字を4バイトで表現

数字の「4」の場合

“■_■”,”■_■”,”■■■”,”__■”,”__■”      ↓“■_■■_■■■■__■__■”      ↓(2進数だと)101101111001001      ↓(16進数だと)5BC9  

Page 19: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case2. 数字を4バイトで表現

var bit16 = '5BC9';var number = parseInt(bit16, 16);

console.log(number); //23497

23497 => 101101111001001

Page 20: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case3. 数字を2バイトで表現

A

B

CD

E

FG

7セグを使うと...

Page 21: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case3. 数字を2バイトで表現

A

B

C DE

FG

7セグを使うと...

A B C D E F G

4F

1 0 0 1 1 1 1

Page 22: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

Case3. 数字を2バイトで表現

7セグを使うと...

ここからの逆変換の実装は

ご想像にお任せ致しますm(_ _)m

Page 23: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

結果発表!!

第2位: Dチーム(ももさん、サスケさん、chakさん)

容量:361文字

http://jsfiddle.net/yJ4Pp/1/

Page 24: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

結果発表!!

第1位: Bチームnormalianさん、前鼻さん、zecl

さん容量:359文字

http://jsfiddle.net/fjsCd/2/

Page 25: Code2013 コードゴルフ大会「JavaScriptでデジタル時計」

お疲れ様でした!

・それぞれの得意な言語だったらどう記述できるか?

・今日紹介したアプローチを試すとどうなるか?

沢山、Codeで語ってみてください!