teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

15

微妙な言い回しの修正

2017/10/10 15:57

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  しかしながら`console.log(file_length);//ここのグローバル変数を加算していきたい!`はそもそも**`change`イベントが行われた後には実行されません**。
94
94
 
95
- このコードが実行されるのは**`change`イベントを`input`要素に付与した直後のみ**ですから、`0`が出力されるんです。先ほど「ちなみに」として発言したのはこれをさしてのことです。
95
+ このコードが実行されるのは**`change`イベントのリスナーを`input`要素に付与した直後のみ**ですから、`0`が出力されるんです。先ほど「ちなみに」として発言したのはこれをさしてのことです。
96
96
 
97
97
  決してグローバル変数の値が更新されないから`0`が出力されるのではありません。
98
98
 

14

コード内の文言の変更

2017/10/10 15:57

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -115,12 +115,12 @@
115
115
 
116
116
  $(function(){
117
117
  $('button').click(function(){
118
- console.log('グローバルに保存されていないならば "" のはず : ' + hoge);
118
+ console.log('ちゃんとグローバルに保存されてい : ' + hoge);
119
119
  });
120
120
  });
121
121
  </script>
122
122
  ```
123
- [サンプル](https://jsfiddle.net/bof256qz/)
123
+ [サンプル](https://jsfiddle.net/mcLsarpy/)
124
124
 
125
125
  サンプルを試していただければわかると思いますが`console.log(file_length);//ここのグローバル変数を加算していきたい!`に当たる場所は最初に一回実行されているだけです。
126
126
 

13

追記

2017/10/10 15:46

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -80,4 +80,50 @@
80
80
 
81
81
  上記サンプルでは足していく値(step)をオブジェクト内に保存しています。
82
82
 
83
- 私の方こそ質問をよく理解していないかもしれません。。もし欲しい答えでなければすみません。。m(_ _)m
83
+ 私の方こそ質問をよく理解していないかもしれません。。もし欲しい答えでなければすみません。。m(_ _)m
84
+
85
+ ##
86
+
87
+ ようやく質問者様のおっしゃりたいことがわかってきたような気がするので改めて追記させてください。
88
+
89
+ > 当然グローバルでは加算されていないため、0が出力されてしまいます。
90
+
91
+ 違います。ローカルスコープにおいてすでに参照されている変数はグローバル変数ですから、**`change`イベントが行われたあとにはちゃんとグローバル変数である`file_length`に新しい値が代入されています。**
92
+
93
+ しかしながら`console.log(file_length);//ここのグローバル変数を加算していきたい!`はそもそも**`change`イベントが行われた後には実行されません**。
94
+
95
+ このコードが実行されるのは**`change`イベントを`input`要素に付与した直後のみ**ですから、`0`が出力されるんです。先ほど「ちなみに」として発言したのはこれをさしてのことです。
96
+
97
+ 決してグローバル変数の値が更新されないから`0`が出力されるのではありません。
98
+
99
+ むしろ`//console.log(file_length); ここじゃない!`が正しい変更後の値を示す場所です。ここで出力される値は**グローバル変数のものです**。ローカル変数ではありません。
100
+
101
+ 証拠としてもう一つサンプルを挙げようと思います。
102
+
103
+ ```html
104
+ <input type="text" /> <button>hogeの中身</button>
105
+ <script>
106
+ var hoge = '';
107
+
108
+ $(function(){
109
+ $('input').on('change',function(e){
110
+ hoge = e.target.value;
111
+ console.log('ここじゃない!の場所 : ' + hoge);
112
+ })
113
+ console.log('ここのグローバル変数を加算していきたい!の場所 : ' + hoge);
114
+ });
115
+
116
+ $(function(){
117
+ $('button').click(function(){
118
+ console.log('グローバルに保存されていないならば "" のはず : ' + hoge);
119
+ });
120
+ });
121
+ </script>
122
+ ```
123
+ [サンプル](https://jsfiddle.net/bof256qz/)
124
+
125
+ サンプルを試していただければわかると思いますが`console.log(file_length);//ここのグローバル変数を加算していきたい!`に当たる場所は最初に一回実行されているだけです。
126
+
127
+ 追記のために非常に長くなってしまいました。。すみません。。
128
+
129
+ 不明点等あればまた返信ください。m(_ _)m

12

コード等の編集

2017/10/10 15:40

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -55,26 +55,28 @@
55
55
  どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。
56
56
 
57
57
  ```html
58
- <button id="btn">btn</button> step : <input type="number" id="step" value="10"></input>
58
+ <button>btn</button> step : <input type="number" value="10" />
59
59
  <script>
60
+ $(function(){
60
- var glbl = 5;
61
+ var glbl = 5;
61
62
 
62
- var lcl = new (function(){
63
+ var lcl = new (function(){
63
- this.step = 10;
64
+ this.step = 10;
64
- this.add = function(){
65
+ this.add = function(){
65
- glbl += this.step;
66
+ glbl += this.step;
66
- alert(glbl);
67
+ alert(glbl);
67
- };
68
+ };
68
- })();
69
+ })();
69
70
 
70
- document.getElementById("btn").addEventListener("click",function(){lcl.add();},false);
71
+ $("button").click(function(){lcl.add();});
71
- document.getElementById("step").addEventListener("change",function(e){
72
+ $("input").on("change",function(e){
72
- lcl.step = parseInt(e.target.value);
73
+ lcl.step = parseInt(e.target.value);
73
- },false);
74
+ });
75
+ });
74
76
  </script>
75
77
  ```
76
78
 
77
- [サンプル](https://jsfiddle.net/vnghakx5/)
79
+ [サンプル](https://jsfiddle.net/L683bkj5/)
78
80
 
79
81
  上記サンプルでは足していく値(step)をオブジェクト内に保存しています。
80
82
 

11

語弊回避のため編集

2017/10/10 14:34

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -10,7 +10,7 @@
10
10
  ##
11
11
  追記:
12
12
 
13
- 繰り返しになりますがpythonじゃあるまいしローカルスコープでグローバル変数が使えないなんて事は無いですよ?
13
+ 繰り返しになりますがpythonじゃあるまいし(pythonの場合は`global`の明示が必要)ローカルスコープでグローバル変数が使えないなんて事は無いですよ?
14
14
 
15
15
  [サンプル](https://jsfiddle.net/c8gyxcc0/)
16
16
 

10

太字範囲の修正。なんどもすみません。。

2017/10/10 14:23

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  とのことですが、今回の処理の場合は全部グローバル変数で管理する方がいいと思いますよ?
27
27
 
28
- 関数内で`var`を使ってローカル変数を宣言された場合、**関数を抜けた段階で値がリセット**されてしまいますから、そもそも**ローカル変数に値を保存する**ということ自体がまず不可能です。
28
+ 関数内で`var`を使ってローカル変数を宣言された場合、**関数を抜けた段階で値がリセット**されてしまいますから、そもそも**ローカル変数に値を保存するということ自体がまず不可能**です。
29
29
 
30
30
  ```javascript
31
31
  var glbl;

9

文言の追加

2017/10/10 14:13

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -48,8 +48,10 @@
48
48
  console.log(glbl); // 期待する値 : 30 実際 : 10
49
49
  ```
50
50
 
51
- ですから関数内でもグローバル変数のみを用いる、という方法のままでいいと思います。使い捨てのローカル変数を用意するだけ無駄です。
51
+ ですから関数内でもグローバル変数のみを用いる、という方法のままでいいと思います。
52
52
 
53
+ その直後(グローバル変数に保存した直後)に`element.files.length`で得られた値を使って別な処理をしたいわけでも無い限り、使い捨てのローカル変数を用意するだけ無駄です。
54
+
53
55
  どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。
54
56
 
55
57
  ```html

8

コードの追加

2017/10/10 14:12

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -52,8 +52,28 @@
52
52
 
53
53
  どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。
54
54
 
55
+ ```html
55
- [オブジェクト指向のサンプル](https://jsfiddle.net/vnghakx5/)
56
+ <button id="btn">btn</button> step : <input type="number" id="step" value="10"></input>
57
+ <script>
58
+ var glbl = 5;
56
59
 
60
+ var lcl = new (function(){
61
+ this.step = 10;
62
+ this.add = function(){
63
+ glbl += this.step;
64
+ alert(glbl);
65
+ };
66
+ })();
67
+
68
+ document.getElementById("btn").addEventListener("click",function(){lcl.add();},false);
69
+ document.getElementById("step").addEventListener("change",function(e){
70
+ lcl.step = parseInt(e.target.value);
71
+ },false);
72
+ </script>
73
+ ```
74
+
75
+ [サンプル](https://jsfiddle.net/vnghakx5/)
76
+
57
77
  上記サンプルでは足していく値(step)をオブジェクト内に保存しています。
58
78
 
59
79
  私の方こそ質問をよく理解していないかもしれません。。もし欲しい答えでなければすみません。。m(_ _)m

7

コメントアウトの追加

2017/10/10 13:30

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -32,6 +32,8 @@
32
32
 
33
33
  var lcl = function(n){
34
34
  var val = 0;
35
+  // ↑ここで0を代入してしまっている時点で、、あっ、ふ〜ん(察し)という感じですが(^ ^;
36
+  // しかし入れないわけには行きません。
35
37
  val += n;
36
38
  console.log(val);
37
39
 

6

文言の追加

2017/10/10 13:20

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -46,8 +46,12 @@
46
46
  console.log(glbl); // 期待する値 : 30 実際 : 10
47
47
  ```
48
48
 
49
+ ですから関数内でもグローバル変数のみを用いる、という方法のままでいいと思います。使い捨てのローカル変数を用意するだけ無駄です。
50
+
49
51
  どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。
50
52
 
51
53
  [オブジェクト指向のサンプル](https://jsfiddle.net/vnghakx5/)
52
54
 
53
- 上記サンプルでは足していく値(step)をオブジェクト内に保存しています。
55
+ 上記サンプルでは足していく値(step)をオブジェクト内に保存しています。
56
+
57
+ 私の方こそ質問をよく理解していないかもしれません。。もし欲しい答えでなければすみません。。m(_ _)m

5

文言の編集

2017/10/10 13:16

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  とのことですが、今回の処理の場合は全部グローバル変数で管理する方がいいと思いますよ?
27
27
 
28
- 関数内で`var`を使って宣言された場合、**関数を抜けた段階で値がリセット**されてしまいますから、そもそも**ローカル変数に値を保存する**ということ自体がまず不可能です。
28
+ 関数内で`var`を使ってローカル変数を宣言された場合、**関数を抜けた段階で値がリセット**されてしまいますから、そもそも**ローカル変数に値を保存する**ということ自体がまず不可能です。
29
29
 
30
30
  ```javascript
31
31
  var glbl;

4

追記

2017/10/10 13:05

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -16,4 +16,38 @@
16
16
 
17
17
  もしずっと0なのでしたら、そもそも`element.files.length`の値が0だったりしませんか?
18
18
 
19
- ちなみに実行タイミング的に`console.log(file_length);//ここのグローバル変数を加算していきたい!`における出力は`0`が正しいです。
19
+ ちなみに実行タイミング的に`console.log(file_length);//ここのグローバル変数を加算していきたい!`における出力は`0`が正しいです。
20
+
21
+ ##
22
+ さらに追記:
23
+
24
+ > ローカルで変化した変数をグローバルで参照したい
25
+
26
+ とのことですが、今回の処理の場合は全部グローバル変数で管理する方がいいと思いますよ?
27
+
28
+ 関数内で`var`を使って宣言された場合、**関数を抜けた段階で値がリセット**されてしまいますから、そもそも**ローカル変数に値を保存する**ということ自体がまず不可能です。
29
+
30
+ ```javascript
31
+ var glbl;
32
+
33
+ var lcl = function(n){
34
+ var val = 0;
35
+ val += n;
36
+ console.log(val);
37
+
38
+ glbl = val; // 質問者様が行いたいと考えておられること
39
+ }
40
+
41
+ lcl(10); // 期待する値 : 10 実際 : 10
42
+ console.log(glbl); // 期待する値 : 10 実際 : 10
43
+ lcl(10); // 期待する値 : 20 実際 : 10
44
+ console.log(glbl); // 期待する値 : 20 実際 : 10
45
+ lcl(10); // 期待する値 : 30 実際 : 10
46
+ console.log(glbl); // 期待する値 : 30 実際 : 10
47
+ ```
48
+
49
+ どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。
50
+
51
+ [オブジェクト指向のサンプル](https://jsfiddle.net/vnghakx5/)
52
+
53
+ 上記サンプルでは足していく値(step)をオブジェクト内に保存しています。

3

追記

2017/10/10 13:03

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -5,4 +5,15 @@
5
5
  ##
6
6
  [加筆]に対し追記:
7
7
 
8
- javascriptの場合、外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。
8
+ javascriptの場合、外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。
9
+
10
+ ##
11
+ 追記:
12
+
13
+ 繰り返しになりますがpythonじゃあるまいしローカルスコープでグローバル変数が使えないなんて事は無いですよ?
14
+
15
+ [サンプル](https://jsfiddle.net/c8gyxcc0/)
16
+
17
+ もしずっと0なのでしたら、そもそも`element.files.length`の値が0だったりしませんか?
18
+
19
+ ちなみに実行タイミング的に`console.log(file_length);//ここのグローバル変数を加算していきたい!`における出力は`0`が正しいです。

2

文言の編集

2017/10/10 11:06

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -3,6 +3,6 @@
3
3
  `var file_length = 0;`とするべきです。
4
4
 
5
5
  ##
6
- 追記:
6
+ [加筆]に対し追記:
7
7
 
8
- javascriptの場合、一番外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。
8
+ javascriptの場合、外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。

1

追記

2017/10/10 10:49

投稿

namnium1125
namnium1125

スコア2045

answer CHANGED
@@ -1,3 +1,8 @@
1
1
  変数宣言時に`file_length`に値を代入していないからではないでしょうか?
2
2
 
3
- `var file_length = 0;`とするべきです。
3
+ `var file_length = 0;`とするべきです。
4
+
5
+ ##
6
+ 追記:
7
+
8
+ javascriptの場合、一番外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。