回答編集履歴

4

N進数の説明追加

2016/05/03 02:55

投稿

think49
think49

スコア18156

test CHANGED
@@ -1,3 +1,7 @@
1
+ ### 桁落ちの問題
2
+
3
+
4
+
1
5
  - [RGB値からHTMLカラーコードに変換する:humming bird](http://yas-hummingbird.blogspot.jp/2009/09/rgbhtml.html)
2
6
 
3
7
 
@@ -26,7 +30,11 @@
26
30
 
27
31
 
28
32
 
33
+ ### 桁落ちの回避策
34
+
35
+
36
+
29
- それを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
37
+ 桁落ちを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
30
38
 
31
39
  256 を加算すると9bit目に1を置く事になります。
32
40
 
@@ -45,6 +53,62 @@
45
53
  console.log((0x100 + r).toString(16)); // "10f"
46
54
 
47
55
  ```
56
+
57
+
58
+
59
+ ### N進数
60
+
61
+
62
+
63
+ Nを基数とするN進数には各桁となる数字に明確な計算法があります。
64
+
65
+ 10進数で例えるなら、`148` は次のように分解する事が出来ます。
66
+
67
+
68
+
69
+ ```JavaScript
70
+
71
+ console.log(Math.pow(10, 0) * 8); // 8 … 1桁目は 10^0*8 (10の0乗の8倍)
72
+
73
+ console.log(Math.pow(10, 1) * 4); // 40 … 2桁目は 10^1*4 (10の1乗の4倍)
74
+
75
+ console.log(Math.pow(10, 2 * 1)); // 100 … 3桁目は 10^2*1 (10の2乗の1倍)
76
+
77
+ console.log(Math.pow(10, 2) * 1 + Math.pow(10, 1) * 4 + Math.pow(10, 0) * 8); // 148
78
+
79
+ ```
80
+
81
+
82
+
83
+ 同じ事を16進数で考えればこうなります。
84
+
85
+
86
+
87
+ ```JavaScript
88
+
89
+ console.log((Math.pow(16, 2) * 1).toString(16)); // 100 … 3桁目は 16^2*1 (16の2乗の1倍)
90
+
91
+ console.log((Math.pow(16, 2) * 1)); // 256 … 10進数なら 256
92
+
93
+ ```
94
+
95
+
96
+
97
+ 従って、256 を加算するという事は16進数でいうところの「`0x100` (16進数表記)」を加算する事と同義です。
98
+
99
+ 「`0x100` (16進数表記)」は2進数に換算すると「`0b100000000` (2進数表記)」になります。
100
+
101
+ 「`0b100000000` (2進数表記)」は9bit目に1がある数字です。
102
+
103
+ 2進数についてはご自身で計算(検証)してみてください。
104
+
105
+
106
+
107
+ - [ネットワークの勉強をはじめから - 2進数と16進数の変換方法](http://www.infraexpert.com/study/ip2.html)
108
+
109
+
110
+
111
+ ### 別解コード
48
112
 
49
113
 
50
114
 
@@ -76,4 +140,16 @@
76
140
 
77
141
 
78
142
 
143
+ ### 更新履歴
144
+
145
+
146
+
147
+ - 2016/05/02 11:24 256加算のロジックの説明追加
148
+
149
+ - 2016/05/02 11:59 256加算のロジックの説明が誤っていたので修正
150
+
151
+ - 2016/05/03 11:55 N進数の説明追加
152
+
153
+
154
+
79
155
  Re: re97 さん

3

ゼロパディングのロジック\(説明修正\)

2016/05/03 02:55

投稿

think49
think49

スコア18156

test CHANGED
@@ -28,7 +28,23 @@
28
28
 
29
29
  それを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
30
30
 
31
+ 256 を加算すると9bit目に1を置く事になります。
32
+
33
+ 10進数で例えるなら「9 + 100 = 109」で2桁目をゼロパディングしているようなものですね。
34
+
35
+
36
+
37
+ ```JavaScript
38
+
39
+ var r = 15;
40
+
31
- 255 を加算する事で8bitシフトしますが、桁を繰り上げた場所に1があって欲しいので 255 + 1 256 を加算しています。その後、8bitシフトする事で16bitシフトしているわけです。
41
+ console.log(r.toString(16)); // "f"
42
+
43
+ console.log((256 + r).toString(16)); // "10f"
44
+
45
+ console.log((0x100 + r).toString(16)); // "10f"
46
+
47
+ ```
32
48
 
33
49
 
34
50
 

2

256加算のロジックの説明

2016/05/02 02:59

投稿

think49
think49

スコア18156

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- console.log(toColorCode(255, 255, 255)); // "#ffffff"
21
+ console.log(toColorCode(255, 255, 255)); // "ffffff"
22
22
 
23
23
  console.log(toColorCode(0, 0, 128)); // "#80"
24
24
 
@@ -27,6 +27,10 @@
27
27
 
28
28
 
29
29
  それを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
30
+
31
+ 255 を加算する事で8bitシフトしますが、桁を繰り上げた場所に1があって欲しいので 255 + 1 で 256 を加算しています。その後、8bitシフトする事で16bitシフトしているわけです。
32
+
33
+
30
34
 
31
35
  私なら次のようにコードを書きます。
32
36
 
@@ -44,7 +48,7 @@
44
48
 
45
49
 
46
50
 
47
- console.log(toColorCode(255, 255, 255)); // "#ffffff"
51
+ console.log(toColorCode(255, 255, 255)); // "ffffff"
48
52
 
49
53
  console.log(toColorCode(0, 0, 128)); // "#000080"
50
54
 

1

ffffff -> #ffffff

2016/05/02 02:24

投稿

think49
think49

スコア18156

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- console.log(toColorCode(255, 255, 255)); // "ffffff"
21
+ console.log(toColorCode(255, 255, 255)); // "#ffffff"
22
22
 
23
23
  console.log(toColorCode(0, 0, 128)); // "#80"
24
24
 
@@ -44,7 +44,7 @@
44
44
 
45
45
 
46
46
 
47
- console.log(toColorCode(255, 255, 255)); // "ffffff"
47
+ console.log(toColorCode(255, 255, 255)); // "#ffffff"
48
48
 
49
49
  console.log(toColorCode(0, 0, 128)); // "#000080"
50
50