第一回開発で指導をもらった点（変数宣言や三項演算子、undefinedの処理など）

変数宣言

letとconst var は古いJSの記法だと思ってください。使うのは let か const で、変数を再代入しない場合はconstを使うと、意図しない書き換えが起こらず、少し安心です。

実際、変数の中身を丸ごと再代入することってあまりないので、9割方 const になります。稀に let が登場するくらいです。

三項演算子

(service && service.serviceName==='youtube')? true: false;

↓

service && service.serviceName==='youtube'　と書き換えられえ雨

 (movietype)? imageurl = "http://i.ytimg.com/vi/"+ id +"/default.jpg" : imageurl = "https://i.vimeocdn.com/video/"+id+"_640.webp";
 (movietype)? imagetype = ".jpg" : imagetype = ".webp";

↓

const imageurl = isYoutube
  ? `http://i.ytimg.com/vi/${id}/default.jpg`
  : `https://i.vimeocdn.com/video/${id}_640.webp`;
const imagetype = isYoutube ? ".jpg" : ".webp";

const frame = imagetype === ".jpg" ? "data/frame.png" : "data/frame2.png";

json書き出し(reduce((a, b) => [...a, ...b], []))

[
  [
    { id: "xxx" },
    { id: "xxx_line" }
  ],
  [
    { id: "yyy" },
    { id: "yyy_line" }
  ]
]

目指したいのはこっち

[
  { id: "xxx" },
  { id: "xxx_line" },
  { id: "yyy" },
  { id: "yyy_line" }
]

なので以下のようにしてフラットにします。コードの下の方にある

}])) の部分をこうしてください。

}])).reduce((a, b) => [...a, ...b], [])

原田コメント： https://qiita.com/Nossa/items/f348ce9a143d8f3a69d1 にある「配列の入れ子を平坦化する」の項目に近いのでしょうか。あるいは、https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce にある「スプレッド演算子と initialValue を使ってオブジェクトの配列に含まれる配列を結合させる」から学習できました。

.reduce

「配列の各要素に対して（引数で与えられた）reducer 関数を実行して、単一の値にします。
」

*アロー関数
functionの代わりに=>を使うことができる。

(引数,...)=>{...関数の本体...}

arr.reduce(callback[, initialValue])
callback：
　accumulator：蓄積
　currentValue：現在の値
　currentIndex：現在のインデックス
　array：配列
initialValue 初期値

つまり、この場合以下であっているのでしょうか。 }])).reduce((a(←id), b(←id_line)) => [...a, ...b](←aとbを並列にするという命令?), [](←出力結果の初期値。ここに何か文字を入れていたら、出力結果のindex0番目にその文字がくる?))

回答： [[1, 2], [3, 4, 5]].reduce((a, b) => [...a, ...b], []) を考えると、(a, b) => [...a, ...b]の関数は二度実行されます。第二引数の内容 [] が最初の a に渡ります。

1回目：a = [], b = [1, 2]となり、[...a, ...b] = [...[], ...[1, 2]] = [1, 2]が関数の結果になります。 [1, 2]が次のaに渡ります。 2回目：a = [1, 2], b = [3, 4, 5] となり、[...a, ...b] = [...[1, 2], ...[3, 4, 5]] = [1, 2, 3, 4, 5]が関数の結果になります。

最終的な結果は [1, 2, 3, 4, 5] となり、無事フラットになりました。

undefined

movie.latlng の型は LatLng | undefined、つまりundefinedになる可能性があるのです。

そこで、movie.latlng が undefinedでないことを確認してから、lat・lngを入れる形にしましょう。

position: movie.latlng ? {
      cartographicDegrees: [movie.latlng.lng, movie.latlng.lat, 150]
} : undefined

sumakokima2 / resium-sample2