TECH CAMP体験記㊴ 58日目 JSの画像投稿で１日終わる

TECH CAMP大阪の80期（2020年６月22日〜）としてプログラミングを学ぶ体験談です。これから受講する方や考えている方の参考になれば幸いです。

前：TECH CAMP体験記㊳ 57日目キャリア面談２回目
次：TECH CAMP体験記㊵ 59日目 JSの画像投稿機能で1日終わる2

勉強内容

最終課題に入っています。
・JavaScriptによる画像の複数投稿

JavaScriptによる画像の複数投稿

何日かかってんだって、自分でも思います。この機能の実装のための参考カリキュラムがあります。それを終えてからが地獄の始まりみたいなものです💦参考カリキュラムで作ったミニアプリを応用し、フリマアプリにも実装していきます

ですが、次のようになってしまいます。

①投稿ボタンが複製される。
②その複製されたボタンを使わないと、新しく投稿できない。
③画像を投稿し続けると、横からはみ出る。
④スクショ画像ではわかりませんが、画像が投稿されるたびに他の要素が下に押し出される。
⑤画像が縦に並ぶ。（解決済み）

と、単純に投稿１つとっても、いくつもの壁が現れます。最終課題をクリアしていった方々の凄さを改めて感じます。

解決方法

①投稿ボタンが複製される。
→検証ツールを使って、投稿ボタンのクラス名を探します。そして
displey : none;
をすればOKでした。念のため、大きさは０にして誤クリックを防ぎます。

  $('.js').on('change', '.js-file', function(e) {
    const targetIndex = $(this).parent().data('index');
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('url', blobUrl);
    } else {
      $('.js').append(buildImg(targetIndex, blobUrl));
      $('.js-file_group').append(buildFileField(fileIndex[0]));
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
      console.log("test3")
    }
  });

②その複製されたボタンを使わないと、新しく投稿できない。
→決められた部分がクリックされたら、投稿機能が発火するようにしました。

  let fileIndex = [1,2,3,4,5,6,7,8,9,10];
  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);
  $('.hidden-destroy').hide();

  $(".pic-up").on('click', function() {
    const file_field = $(".js-file:last"); // 一番最後のfile_field（新規でアップロードする箇所）を取得
    file_field.trigger("click"); // file_fieldをクリックさせる。
  })

改行から後の部分を見てみます。
$(".pic-up").on('click', function() {
pic-upクラスがクリックされた時の動作を決めます。

const file_field = $(".js-file:last");
js-file の last（最後）を file_field と名付けます。

file_field.trigger("click")
file_field（追加されたjs-fileの最後）をクリックしたら発火します。

という流れです。

③画像を投稿し続けると、横からはみ出る。
→ボックス内で折り返しをすれば良さそうですが、これはまた明日。

④スクショ画像ではわかりませんが、画像が投稿されるたびに他の要素が下に押し出される。
→画像表示ボックスの大きさ指定をなくすことで解決でした。
画像表示ボックスを画像とは別で作っていました。画像投稿のたびにボックスが作られ、そして他の要素を押し出すようになっていました。検証ツールで新規作成されたボックスのクラスを調べ、大きさの指定を消しました。

⑤画像が縦に並ぶ。（解決済み）
→disply :flex; で解決。

やってて思うこと

JavaScriptでもHTMLでも思うのですが、

①難しい
②慣れて流れがわかったらサクサクできそう
③Excelと同じで、困難は分割すれば良さそう

①難しい
→プログラミング初学者・初心者の方には特に同意してもらえるかと思います。実際、教室でも「難しい😓」という声を何度も耳にしました。

②慣れて流れがわかったらサクサクできそう
→料理にも似てると思います。最初はレシピ本を見ながらでもたどたどしく、時間もかかります。野菜の切り方も下手です。でも、慣れるとレシピを見なくても手順が思い浮かびます。塩の量とかは多少違ってても、ある程度の完成度で作ることができます。慣れ・作成回数が割と物を言うのかもしれません。まぁ。JSなんてまだ2〜３回しか使ってません。それで理解できる理解力があれば、僕はもっと成績が良かったはずです😑

③Excelと同じで、困難は分割すれば良さそう
→僕はExcelが得意です。小学校教員の中では無双できるぐらいには。（学校の先生は新しい技術に超絶弱いので、井の中の蛙ですが😅）

Excelで何かデータを作る時、その後の入力が少なくなるように設計します。その際には関数を組み合わせますが、これがややこしいのです。３〜４つの関数を組み合わせるとエラーが出た時に、どう対処すればいいのかが見えにくくなります。

ですので、
関数が組み合わさった式を分解します。
Aの関数の結果を表示。
その結果にBの関数をかける。
その結果にCに関数を・・・。

としていけば、最終的には多くの関数を組み合わせた結果が表示されます。
最後に不要な部分を見えなくしたら設計完了です😃

というのに似てるなと思います。
コードを書く時にも、一気に全部をやるとエラー箇所の特定が難しくなります。ですので、コメントアウトを使って必要な部分だけが動くようにする。動作しなかったら修正。この繰り返し。