新規投稿
フォローする

（再）フィールドの値をサブテーブル内にコピーしたい

Avatar
nekoko

お世話になっております。

コードが変わったため再度、質問させていただきます。

テーブルに支払日の入力が終わったタイミングでテーブル外にある数値をテーブル内にコピーしたく、初心者の為、複数のサイト等を参考にジャバを組んでみたのですがうまく作動せずに困っています。どなたかご教示いただけないでしょうか。

(やりたいこと)

支払日を入力したタイミングで、左下に表示される残高を入力した行の支払時点残高にコピー及び保存したい。

（コード）

(function() {
'use strict';
　　var events = ['app.record.create.show', 'app.record.edit.show'];
kintone.events.on(events, (copy)
var rec = kintone.app.record.get();
var record = rec.record;
var table = record['残高'].value;
var contents = [];
if(row.value['支払日'].value.indexOf('有') )
{(row.value['テーブル文字列'].value)}
});
record['支払時点残高'].value = contents.join(', ');
kintone.app.record.set(rec);
};
return event;
});
})();

0

39件のコメント

Avatar
新屋　育男

nekoko 様

こんにちは。

プログラミングは難しいですよね。

最初の頃から見ていて、一生懸命されてるようなので問題解決を一緒にやらせて頂ければ幸いでございます。

また、一番最初から投稿されていたものを実現されるまで nekoko 様とこちらで対応しようと思いますが、それ以外や以上の回答は控える場合がありますので、ご了承をお願いいたします。

答えだけお伝えするのはしておりませんので、あくまで考え方をお伝えするような感じになるかと思います。

今回の問題点としては、

 

> (やりたいこと)

> 支払日を入力したタイミングで、左下に表示される残高を入力した行の支払時点残高にコピー及び保存したい。

ということですよね？

 

そうすると、まずイベントのタイミングが違うかと思います。

サブテーブルの支払日に入力された時に発動するイベントは、

kintone JavaScript API（イベント）一覧 – cybozu developer network

この辺りにある、レコード追加画面・レコード編集画面にある『フィールド値変更』のイベントを使うことになります。

フィールドコードに指定するものは、サブテーブルのフィールドコードとサブテーブルの支払日のフィールドコードを追加するのが今後のことも考えて良いかと思います。

 

kintone.events.on の第二引数に指定している (copy) は、まず機能しておりません。

その原因は、ここには handler が入ります。

イベント処理の記述方法 – cybozu developer network

記述方法は、この辺りが勉強になるかと思います。

 

あとはとりあえずのデバックの知識ですね。

動かない？そんな時はデバッグをしてみよう！入門編 – cybozu developer network

まずは、この辺りの知識をしっかりしてみましょう。

 

サブテーブルの値のコントロールは、通常のフィールドの値のコントロールより難易度は高いので、ひとつひとつ丁寧に理解していかないと、他の方が書かれている記述も理解できず迷走してしまう可能性が高いのです。

大変失礼かと思いますが、いったん nekoko 様が記述された内容は忘れて一つ一つ丁寧にやっていきましょう。

 

まずは簡単なところで、イベントの内容を events に代入して、kintone.events.on 後に、console.log でレコード情報を確認できる記述からしてみて下さい。

それが終わったら、今回の議題に上がっている

> 支払日を入力したタイミングで、左下に表示される残高を入力した行の支払時点残高にコピー及び保存したい。

こちらについて解説をしていきたいと思います。

その後、最初に投稿されていた内容に近づくには多くの問題を含みますので少し長くなりますのでお付き合い頂ければ幸いでございます。

0
Avatar
nekoko

新屋　育男様

１つ１つ丁寧にリンク付きでの説明ありがとうございます。

リンクに目を通しながら知識を付けつつ

＞イベントの内容を events に代入して、kintone.events.on 後に、console.log でレコード情報を確認できる記述からしてみて下さい。

を行ってみようと思います。

お時間及びご迷惑をお掛けすることもあるかと思いますが宜しくお願い致します。

0
Avatar
新屋　育男

nekoko 様

こんにちは。

自分で見て、ちょっと目標がわかりにくいですね。

 

console.log でレコード情報が確認できる ＝ デバッガー（開発者ツール）のコンソールタブで情報を確認できる状態を指しています。

言葉足らずで申し訳ございませんが頑張ってみて下さい。

開発者ツールの便利な機能 – cybozu developer network

リンク先のgifのようにレコードの内容が確認出来たらOKですが、gifと同じように開発ツールに直接 kintone.app.record.get() を直接打ち込んで確認するのではなく、kintone.events.on より自動的に開発ツールのコンソールに表示されるようになるように頑張ってください。

余談ですが、開発ツールで直接 kintone.app.record.get() を打ち込んで確認するのもやってみると勉強になるかもしれませんのでやってみると良いかもしれません。

ただ今回のゴールは違いますので、そちらは履違えがないようにお願い致します。

 

追記

イベントタイプについてですが、

'app.record.create.show', 'app.record.edit.show'

上記も含めておいてください。

※上記のイベント画面で、開発ツールのコンソールでレコードの詳細が確認できるようにしてみて下さい。

新屋　育男により編集されました
0
Avatar
nekoko

新屋　育男様

追加でのアドバイス並びに目標の再提示ありがとうございます。

コードの修正が出来ましたら、デバッカーを持ちいて確認をしてみます。　

 

分からないことや行き詰った際にはご質問させて頂きます。

 

1
Avatar
新屋　育男

nekoko 様

とんでもございません。

この内容で分からないことはどんどん聞いて頂ければと思います。

 

課題に対して思考されていたら良い時間かと思います。

kintoneカスタマイズの基本的なデバッグの流れを身につけよう – cybozu developer network

上記のリンクにほぼ今回の議題の答えが記述されている箇所があります。

こちらも読んでみて頂ければ幸いでございます。

0
Avatar
nekoko

新屋　育男様

お世話になっております。

リンクを用いてのご説明有難うございます。

質問なのですがイベントタイミングを修正するのには下記のコードを追加すればよろしいのでしょうか。

 

app.record.create.change.<支払日>

 

0
Avatar
新屋　育男

nekoko 様

こんにちは。

はい、追加致します。

 

少し記述が違うので、そこだけ修正すれば大丈夫です。

 

画像の様に、仮にフィールドコードが支払日だった場合は、

app.record.create.change.支払日

上記のような記述になります。

新屋　育男により編集されました
0
Avatar
nekoko

新屋　育男様

こんにちは、お世話になっております。

画像付きでのご説明ありがとうございます。

＜＞は分かりやすくするための表記だったのですね。

 

今後ともよろしくお願いいたします。

1
Avatar
新屋　育男

nokoko 様

はい、その認識で大丈夫かと思います。

こういった記述は、見慣れない人には難しいですよね。

 

気になった点は、どんどん質問して頂ければ幸いでございます。

0
Avatar
nekoko

新屋　育男様

ありがとうございます。

パット見、必要なのかなとおもってしまいました。

コードを組めたと思い確認したところ、定義がされておらずエラーが起きたのですがエラーを直すことが出来なかったのでヒントを頂けないでしょうか。

 

エラー箇所は下から2行目です。

(function(handler){ 
'use strict';
app.record.create.change.支払日.
var,events = [`app.record.create.show``app.record.edit.show`]
kintone.events.on(events, (handler));var
rec = kintone.app.record.get();
var record = rec.record.残高;
var table = record支払時点残高.value;
var contents = [];
if (row.value.支払日.value.indexOf('有')) {
(row.value.支払時点残高.value);
}
});
record.handler.value = contents.join(支払時点残高);
kintone.app.record.set(rec);
0
Avatar
新屋　育男

nekoko 様

修正箇所は沢山ありますが、一番気になっていたコンソールからのエラー確認ができているので安心しました。

今回のコードの内容ですと、下から2行目（14行目）がエラーで正解です。

エラーになった原因は、record や contents が即時関数のスコープの外にあるのが原因で undefind になってしまっています。

 

ちょっと字は汚いですが、簡易的に注釈を入れておきます。

 

また即時関数は、

(function() {
  // ここに実行したい内容を記述
})();　// ()を抜くと即時関数は実行されない

上記の中の　 (function() { 　…　})() 　この太字のかっこでくくられた部分を即時関数だと認識して頂ければと思います。

即時関数は cybozu 様の推奨ですので、この即時関数内で実行内容を記述するようにしましょう。

また、最初の方でスコープ外とお伝えしましたが、とりあえず今回は即時関数の外にある認識ぐらいで良いかと思います。

※スコープですが、実際はもう少しこまかいですが取り急ぎの認識でお願い致します。

 

イベントタイプの入れ方ですが、

var events = ['app.record.create.show', 'app.record.edit.show', 'app.record.create.change.支払日'];
// 上記の　[ …この中にイベントタイプを記述する…]　

// 記述するイベントタイプが多くなって長くなる場合
var events = [
  'app.record.create.show',
  'app.record.edit.show',
  'app.record.create.change.支払日'
];
// このように一行ごとにイベントタイプを記述していく方法もあります。

上記で作成した events変数ですが、こちらを kintone.events.on の第一引数に設定すると実行する内容のトリガーとなります。

kintone.events.on(events, handler) // events変数を設置したので、events に設定した内容のイベントで handler が実行される

handler は主に実行する内容を関数として記述したものです。

 

関数とは function から始まるような奴がだいたい関数と今は認識すれば大丈夫かと思います。

今回お伝えしている内容は、開発ツールのコンソールにレコードの内容を表示すること。

という内容ですので、handler として以下の様に関数を記述することができます。

function(event) {
  console.log(event.record);
}

// 上記を handler変数へ代入する場合
var handler = function(event) {
  console.log(event.record);
}

// handler変数を定義したので kintone.event.on の第二引数で利用できる状態になりました。
// events変数も定義されていると仮定して

kintone.events.on(events, handler);
// これでレコードの内容が表示されるということになります。

// 関数を変数に代入しない場合（今回は、handler変数に代入しない場合）
// kintone.events.on の第二引数へ直接関数を記述する方法があります。
kintone.events.on(events, function(event) {
  console.log(event.record);
}

このような記述の仕方ですね。

 

ちょっと難しいかもしれません。

おそらく頭があっちこっちへ行ってると思いますので、いままでお伝えした内容をまとめると、

// 即時関数
(function() {
  'use strict'; // ストリックモード

  // イベントタイプの定義
  var events = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.支払日'
  ];

  // イベントタイプが ture の時にレコードの内容をコンソールに表示する。
  kintone.events.on(events, function(event) {
    console.log(event.record);
  });
})();

少し認識が違う部分があるかもしれませんが、この説明で理解ができない部分などありましたらご質問下さい。

0
Avatar
nekoko

新屋　育男様

おはようございます。

 

即時関数をいまいち理解しきれていなかったのですが丁寧に説明をして頂けたので理解することが出来ました。

理解してから見ると素人目に見ても酷いですね…

 

各箇所に注釈を入れて頂きありがとうございます。

一つ一つの意味を多少ではありますが理解しながらコード入れれるようになってきました。

4行目に

Uncaught ReferenceError: varevents is not defined
at <anonymous>:4:13
at <anonymous>:16:2

というエラーが出てきてしまいます。

この様子だとまだまだエラーがありそうなので出来る限り直ししてみます。

 

（コード）

// 即時関数
(function() {
'use strict'; // ストリックモード
app.record.create.change.支払日.
varevents = [`app.record.create.show`,`app.record.edit.show`];
kintone.events.on(events, handler); // events変数を設置したので、events に設定した内容のイベントで handler が実行される
// イベントタイプの定義
var events = [
'app.record.create.show', 
'app.record.edit.show', 
'app.record.create.change.支払日'
];
// イベントタイプが ture の時にレコードの内容をコンソールに表示する。
kintone.events.on(events, function(event) {
console.log(event.record);
});
}());
record.handler.value = contents.join(支払時点残高);
kintone.app.record.set(rec);

お忙しいところ恐縮ですが引き続きよろしくお願いいたします。

0
Avatar
新屋　育男

nekoko 様

こんにちは。

エラーについてですが、varevents が定義されていません。

ということですね。

var は変数を定義するときに変数の前につけるのですが、var と events の間にスペースがないためエラーが発生している内容です。

 

私の説明が下手で申し訳ないのですが、4、5、6、18，19行名は不要でございます。

0
Avatar
nekoko

新屋　育男様

こんにちは。

 

is not defined　は変数が定義されていないと言う事なんですね。

改行のご指摘ありがとうございます。

 

引き続きエラーの対処をしていきたいと思います。

またつまずいた時、または完成した時にご質問させていただきます。

 

引き続きよろしくお願いいたします。

 

1
Avatar
nekoko

新屋　育男様

こんにちは、お世話になっております。

小さなミスの修正は終わったのですが「undefined」と言うエラー表示があり、未定義ということがわかったので

解決策を調べてみたのですがわからず、再度ご質問させていただきました。

 

お忙しいところ恐縮ですが何卒宜しくお願い致します。

// 即時関数
(function() {
'use strict'; // ストリックモード
// イベントタイプの定義
var events = [
'app.record.create.show', 
'app.record.edit.show', 
'app.record.create.change.支払日'];
// イベントタイプが ture の時にレコードの内容をコンソールに表示する。
kintone.events.on(events, function(event) {
console.log(event.record);
});
}());
0
Avatar
新屋　育男

nokoko 様

こんにちは。

特に問題なさそうでが、エラーが表示されていますでしょうか？

表示されてないようでしたら、コンソールにレコードの情報が表示されていると思います。

 

問題ないようでしたら次に進みたいと思います。

その場合は、今イベントタイプに指定されているものが、

・レコード新規追加時

・レコード更新時

・レコード新規追加時にフィールドコード支払日に変更があった場合

と指定されておりますが、更に追加で＜レコード更新時にフィールドコード支払日に変更があった場合＞を追加して頂けますでしょうか？

また、kintone.event.on の中の console.log(event.record) の直下に console.log(event) を新に記述の追加ををお願いいたします。

新屋　育男により編集されました
0
Avatar
nekoko

新屋　育男様

お世話になっております。

確認したところコンソールに表示されたので次に進みたいと思います。

 

＜レコード更新時にフィールドコード支払日に変更があった場合＞を追加

 console.log(event) を新に記述の追加

上記二つを行い、再度ご連絡させていただきます。

エラーが表示された場合は、修正を試みてからご連絡させていただきます。

1
Avatar
新屋　育男

nekoko 様

良かったです。

今後は、コンソールに表示された event オブジェクトを理解しながら進めていきます。

こちらは基本の基の部分ですので、しっかりと理解をしていきましょう。

修正が終わり正常に機能しましたら、また改めてご連絡下さい。

0
Avatar
nekoko

新屋　育男様　

こんにちは。お世話になっております。

９行目にて

Uncaught SyntaxError: Unexpected string

というエラーが出ており、綴りの間違いやセミコロン等の抜けかと思ったのですがそのような間違いもなく八方塞がりになってしまっています。

9行目を追加する前まではエラーが出ていなかったので原因は9行目で確定と思っております。

そもそもで入力したコードが間違っておりエラーが出ているのでしょうか。

// 即時関数
(function() {
'use strict'; // ストリックモード
// イベントタイプの定義
var events = [
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.支払日'
'app.record.create.submit.支払日'
];
// イベントタイプが ture の時にレコードの内容をコンソールに表示する。
kintone.events.on(events, function(event) {
console.log(event.record)
console.log(event)
});
}());

 

0
Avatar
新屋　育男

nekoko 様

こんにちは。

いい感じに追加されていますが、非常に惜しいですね。

今回の原因は、カンマが抜けているのが原因のエラーです。

’app.record.create.change.支払日’ の後ろに『,』が抜けています。（8行目後ろ、カンマが抜けている。）

 

別件ですが、’app.record.create.submit.支払日’ は間違っています。

これをそのまま追加した場合は、特にエラー表示もなく対象のイベントもないため≪何も起こらない≫ということになるかと思います。

正しくは、’app.record.create.submit’ ですが、これは新規追加時に保存をした場合に機能するイベントタイプです。

私が指定している＜レコード更新時にフィールドコード支払日に変更があった場合＞とは異なります。

もう一度、イベントタイプも見直して頂ければ幸いでございます。

0
Avatar
nekoko

新屋　育男様

 

8行目カンマだったのですね。ありがとうございます。

9行目と表示されていたとしても必ずしも表示されている行とはかぎらないんですね。

勉強になりました。ありがとうございます。

 

質問なのですが、　’app.record.create.submit’　を追加する際に「支払日」等の文字（？）はいらないと言う事でしょうか。

 

修正したのが下記コードで、エラー等が出なかったのでこちらが正しいコードになるのでしょうか。

 

今一度イベントタイプをサイトを見ながら見直してみます。

// 即時関数
(function() {
'use strict'; // ストリックモード
// イベントタイプの定義
var events = [
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.支払日',
'app.record.changes.field',
];
// イベントタイプが ture の時にレコードの内容をコンソールに表示する。
kintone.events.on(events, function(event) {
console.log(event.record)
console.log(event)
});
}());

 

0
Avatar
新屋　育男

nekoko 様

９行目の構文エラーで間違いはないですよ。

９行目が構文がおかしいので認識できません。ということですかね。

逆に言うと８行目までは認識できています。

といことですので、今回の場合はその接続の仕方に問題があったわけです。

 

イベントタイプも非常に惜しいですね。

でも、'app.record.changes.field' は間違いですので、nekoko 様の仰る通りイベントタイプの一覧を見てもう少し考えて頂けますと幸いでございます。

0
Avatar
nekoko

新屋　育男様

ご説明ありがとうございます。

今後同じようなエラー表示があった場合はその行だけではなく接続の仕方なども確認するようにします。

 

もう一度、1からゆっくりと考え直してみます。

1
Avatar
nekoko

新屋　育男様　

お世話になっております。

コードを修正いたしましたので確認の程を宜しくお願い致します。

 

// 即時関数
(function() {
'use strict'; // ストリックモード
// イベントタイプの定義
var events = [
'app.record.create.show',//レコード追加画面表示後
'app.record.edit.show',//レコード編集画面表示後
'app.record.create.change.支払日',//レコード追加画面、フィールド値変更
'app.record.index.edit.change.支払日',//レコード更新時にフィールドコード支払日に変更があった場合
];
// イベントタイプが ture の時にレコードの内容をコンソールに表示する。
kintone.events.on(events, function(event) {
console.log(event.record);
console.log(event);
});
}());
0
Avatar
新屋　育男

nekoko 様

おはようございます。

非常に惜しかったですね。

 

app.record.index.edit.change.支払日 ですが、index が多いですね。

このイベントタイプですが、よく見るとわかりますけど

ドット区切りで、意味合いが変わるように作られています。

app(第一) .record(第二) .create(第三) .show(第四) と仮定して見ていくと動きがわかると思います。

 

第一、第二は、ほとんど変わらないので無視して、第三、第四に意味合いがあるのでそれを見ればどのイベントタイプかがわかるようになっています。

第三・・・　index (一覧) , detail (詳細) , create (追加) , edit (変更) , などで、どの画面かが主になってると思います。

第四・・・　show (画面を開いた時) , change (値に変更があった時) , sbumit (確定処理がされた時) , などで、主に動作がトリガーになっています。

※上記はざっくりした覚え方と思って下さい。

 

というところで、なかなか進んで来ているので次に行きましょう。

 

次は、本題の

> 支払日を入力したタイミングで、左下に表示される残高を入力した行の支払時点残高にコピー及び保存したい。

まず支払日を入力したタイミングということですが、こちらはイベントタイプを設定しているので動作の確認だけして頂ければと思います。

支払日を入力したときに、コンソールに改めてレコードの情報が表示されるかですが、レコード情報が改めて表示されればOKです。

 

その次へ行き、左下に表示される残高を入力した行の支払時点残高に値を入力で良いですかね。

ということですので、この値が取れているか確認しなければいけません。

 

まずコンソールに表示されているレコード情報から、残高のフィールドコードの value に 必要な値が入っているか確認をしてみて下さい。

この値の使い方ですが、console.log を今回２つ作って頂きました。

その中に、event.record と event と２つ作って頂きました。

この違いについてですが、event のログを見て頂いて、今回の場合はコンソールに表示される２つ目のオブジェクトです。

それを開いたら（▶をクリック）appId: , record: , recordId: , type: とその他にも続いて画面にでてきていればOKです。

この event オブジェクトの record を表示したものが event.record です。

ですので、event オブジェクトに表示されている record の内容と event.record の内容はまったく同じものが表示されているということです。

この record の中から対象の値を取得したい場合は、変数に代入をするということをしていきます。

 

例えばレコード番号の場合は

// 変数を作成してレコード番号を取得する
var number = event.record.レコード番号.value;
// 変数にレコード番号が入っているかコンソールで確認する
console.log(number);

というように記述していきます。

 

これは、そのオブジェクトの中（▶を開いて確認）をしていくと、その順番通りにプロパティを指定した値を取得することができます。

今回のレコード番号の場合、プロパティの順番を追っていくと record.レコード番号.value となっていることが確認できれば大丈夫です。

ざっくりですが、今回のプロパティとはオブジェクトの中で【 : （コロン）】の前にあるモノがプロパティなんだぐらいの認識で大丈夫です。

逆にその後ろにあるものが、値だと思って頂ければ大丈夫かと思います。

 

もうひとつ例を出します。appId の値を変数に代入する場合ですが、

var appId = event.appId;
console.log(appId) // 私のコンソール画像の場合は　158 と表示される。

というふうになります。

 

ということで少し長くなりましが、残高の値を変数に代入してコンソールに表示するようにしてみて下さい。

 

上記が終わったら、支払日が変更された時に eventオブジェクトの中に changes というプロパティがあるのでそちら中を確認して下さい。

changes の中に、row というプロパティがありますが、それが変更があったサブテーブルの行を取得しています。

そのサブテーブルの行の中にフィールドコードが入っている部分が valueプロパティです。

今回の内容は、そのvalueプロパティにある【支払時点残高】の書き換えができた時にいちようは終了ということです。

 

あともう少しです、頑張りましょう。

新屋　育男により編集されました
0
Avatar
nekoko

新屋　育男様

こんにちは。

一つ一つ丁寧にご説明して頂きありがとうございます。

動作確認を終え、教えていただいたコードを入力する段階なのですが、下記コードの　レコード番号　を残高に書き換えて入力すればよろしいのでしょうか。

// 変数を作成してレコード番号を取得する
var number = event.record.レコード番号.value;
// 変数にレコード番号が入っているかコンソールで確認する
console.log(number);

あと少し頑張りたいと思います。

0
Avatar
新屋　育男

nekoko 様

仰られる通りで、レコード番号を残高のフィールドコードに書き換えて、残高の数値がコンソールで確認できれば成功です。

 

そちらはすぐ終わると思いますので、それが確認出来たらそれ以降の上記が終わったら、以降の内容にとりかかって頂ければと思います。

おそらく疑問が出てくると思います。

その時は質問をしてみて下さい。

0
Avatar
nekoko

新屋　育男様

ありがとうございます。

 

上記が終わったら、以降の内容にとりかかってみようと思います。

疑問が出てきたら一度、自分自身の力で解決を試みて、解決に至らなさそうと判断しましたらご質問させていただきます。

1
Avatar
nekoko

新屋　育男様

こんにちは。

 

疑問点が二つほど出てきましたのでご質問させていただきます。

 

１．IDはnullでよろしいのでしょうか。

　　以前に調べたことがあるのですが、その際に変数が定義されていない場合に表示されると記載されていました。

row: {id: null, value: {…}}

 

２． valueプロパティとvalueofは同じものなのでしょうか。

  1. valueOf: ƒ valueOf()
    1. length: 0
    2. name: "valueOf"
    3. arguments: (...)
    4. caller: (...)

       

    5. （書き換え後のコード）

      // 即時関数
      (function() {
        'use strict'; // ストリックモード
        // イベントタイプの定義
        var events = [
          'app.record.create.show',//レコード追加画面表示後
          'app.record.edit.show',//レコード編集画面表示後
          'app.record.create.change.支払日',//レコード追加画面、フィールド値変更
          'app.record.edit.change.支払日',//レコード更新時にフィールドコード支払日に変更があった場合
      ];
        kintone.events.on(events, function(event) {
          console.log(event.record);
          console.log(event);
        　// 変数を作成してレコード番号を取得する
      　　var number = event.record.残高.value;
      　　// 変数にレコード番号が入っているかコンソールで確認する
      　　console.log(number);
        });
      }());
0
Avatar
新屋　育男

nekoko 様

こんにちは。

> １．IDはnullでよろしいのでしょうか。

はい、大丈夫です。

サブテーブルのIDは、保存されるまではIDは保持していないため。

新に作成された時には、null になるようになっています。

 

> ２． valueプロパティとvalueofは同じものなのでしょうか。

別物でございます。

概念がプロトタイプに行っているので、そこは基礎知識が抜けてると難しいので割愛します。

Object のプロトタイプ - ウェブ開発を学ぶ | MDN (mozilla.org)

標準組み込みオブジェクト - JavaScript | MDN (mozilla.org)

取り急ぎ、そのあたりの関数や prototype にあるオブジェクトは JavaScript が自動的に作成するオブジェクトぐらいの認識で大丈夫かと思います。

 

気になるのは、どこの length が 0 で何を聞きたいかですかね？

Array.length - JavaScript | MDN (mozilla.org)

String length - JavaScript | MDN (mozilla.org)

 

上記の様に、配列の要素数を数えるものと文字数を数えるものの2通りの使い方があります。

オブジェクトの中で表記されている length については、ほぼ配列の要素数を示しているので、この配列にはなにもありませんよ。

的な感じになってるだけですね。

 

書き換え後のコードは特に問題ないようです。

新屋　育男により編集されました
0
サインインしてコメントを残してください。