Ohotech 特盛#5で発表したスライド

1. CodeJP2013で行った
ショートコーディング
について

2. Who am I ?
@tututen (momo_*)
業務→vim + C言語（ not C++ )
趣味→アセンブラを読む
パネポンを１人２役でやれる！

3. Who am I ?
@tututen (momo_*)
業務→vim + C言語（ not C++ )
趣味→アセンブラを読む
パネポンを１人２役でやれる！

10. 次回
2014/07/19,20 の予定！

11. ショートコーディングとは
ソースコードを短く書くこと
打数の少なさを競うのに似てることから
コードゴルフと呼ばれることも

12. 日本語に例えるなら
略語（ネットスラングやギャル語？）に近い
例：
微レ存→
とりま→

13. 日本語に例えるなら
略語（ネットスラングやギャル語？）に近い
例：
微レ存→⃝⃝である可能性が微粒子レベ
ルで存在している
とりま→

14. 日本語に例えるなら
略語（ネットスラングやギャル語？）に近い
例：
微レ存→⃝⃝である可能性が微粒子レベ
ルで存在している
とりま→とりあえず、まぁ

15. ここで簡単な問題！

16. http://jsfiddle.net/kQ4rD/

17. http://jsfiddle.net/kQ4rD/

18. １．100byte代

19. １．100byte代
２．80byte代

20. １．100byte代
２．80byte代
３．70byte代

21. １．100byte代
２．80byte代
３．70byte代
４．もっと短くできる

22. 発表中に70byte未満に
もれなく景品があります！

23. CodeJPのお題

24. 2380 byte の
JSコードを

25. できるだけ短く書き直し
時計を動かす！

26. ルール
index.htmlを編集するのはNG
動作するブラウザの種類は問わない
詳しくは「資料」を参照
https://github.com/yoshiakist/codegolf

27. チーム編成
２−３人１チーム
A、B、C、D、Eチームの計５チーム

28. クリア基準
800 byte 台 : もっと頑張りましょう

29. クリア基準
800 byte 台 : もっと頑張りましょう
500 byte 台 : よくできました

30. クリア基準
800 byte 台 : もっと頑張りましょう
500 byte 台 : よくできました
400 byte 台 : たいへんよくできました

31. クリア基準
800 byte 台 : もっと頑張りましょう
500 byte 台 : よくできました
400 byte 台 : たいへんよくできました
300 byte 台 : 次回、このコーナー担当

32. クリア基準
800 byte 台 : もっと頑張りましょう
500 byte 台 : よくできました
400 byte 台 : たいへんよくできました
300 byte 台 : 次回、このコーナー担当
200 byte 台 : あなたが神か

33. 今回の課題の肝
変数宣言の省略
for文のデクリメント化
Math.floor(切り捨て)の代替
デジタル数字表記の省略

34. 変数宣言の省略

35. 変数宣言の省略
変数の長さを極力１文字に
varの省略（変数のグローバル化）
業務での使用、ダメ、絶対！！
minifyツールを使用することで対応可能

36. for文のデクリメント化

37. for文のデクリメント化
for (初期化; 継続条件; 変数更新）
変数の更新と継続条件が同時に出来る
これで3 byteは美味しいですね！

38. Math.floorを使わずに切り捨て

39. Math.floorを使わずに切り捨て
ビット演算をすると強制的に整数値に
これを式中で使う場合は演算子優先順位に注意
~演算子は優先順位高め
|演算子は優先順位低め
or演算子を使うかnor演算子どちらを使っても
byte 数は変わらない

40. Math.floorを使わずに切り捨て

41. デジタル数値表記の省略
http://jsfiddle.net/8D2c4/

42. デジタル数値表記の省略
今回短くする上で一番のミソ
最終的にここの発想次第

43. デジタル数値表記の省略
今回短くする上で一番のミソ
最終的にここの発想次第
以降、他人のソースコードを垣間見つつ

44. 第２位

45. 2位のチームのソース
うちの率いるチームです(362文字)
当初は上手い方法だと思っていました
運営者曰く「ソースを見ただけではやっ
てることがわかりませんでした」

46. ソース

47. ソース

48. 解説
“■■■”,”□□■”,”■□■”,”■□□”
の4パターンというのを
利用
多次元配列を使ってい
たが、最終的に1次元が
有効手

49. 解説
(m/10|0)(m%10):(s/10|0)(s%10)
Sは一時的に０１の文字列保持（br含）
：（コロン）は4パターン外なので三項
演算子で対応

50. 改善点
forのデクリメント化
P配列の並びを逆順にするだけで対応可能
replace関数を2度使うのがそもそもナンセンス
これ以外即思いつかない時点で将来性がない
コード

51. 第１位

52. 優勝チームのソース
@sandinist さんの率いるチームです
（359文字）
運営側曰く「圧倒的な圧縮力とアルゴリズ
ムでの優勝！！その圧縮方法はまさにド変
態のそれと表現していいでしょう。」

53. 皆さん！この人です！！

54. ソース

55. ソース

56. 個人的な感想
運営も評してる通り変態
JSに慣れてないのがとても惜しい
噛めば噛むほど味がでるソース

57. 解説（できるかな…

58. 解説（できるかな…

59. 解説（できるかな…

60. 解説（できるかな…

61. 解説（できるかな…

62. 改善点
var いらない
[(“”+parseInt(...)).slice(
eの初期化いらない
→ (“”+parseInt(...))[e]
e,e+1) ]
b=h++ はf,gの初期化時
innerHTMLへの代入方
に代入すればいらない
法
<br/> → <br>
ファイル末尾のセミコ
ロン排除

63. 改善後（328文字）
http://jsfiddle.net/ptU46/

64. 改善後（315文字）
http://jsfiddle.net/ptU46/2/

65. 如何でしたでしょうか？

66. 2380byte → 320byte前後

67. 2050byteのスリム化

68. ド変態！！
すばらしい

69. http://jsfiddle.net/kQ4rD/

71. 進
どうですか？

72. http://jsfiddle.net/kQ4rD/

73. １．100byte代
２．80byte代
３．70byte代
４．もっと短くできる

74. http://jsfiddle.net/gHLzq/

75. http://jsfiddle.net/VarcL/

76. おまけ

77. ネットの人々は
もっとすごかった

78. みんなの力を合わせたら
http://jsfiddle.net/3vegp/

79. みんなの力を合わせたら
http://jsfiddle.net/3vegp/

80. 対戦しましょ？

81. 対戦しましょ？
ご静聴
ありがとう
ございました