TECH CAMP大阪の80期(2020年6月22日〜)としてプログラミングを学ぶ体験談です。これから受講する方や考えている方の参考になれば幸いです。
前:TECH CAMP体験記㊳ 57日目 キャリア面談2回目
次:TECH CAMP体験記㊵ 59日目 JSの画像投稿機能で1日終わる2
勉強内容
最終課題に入っています。
・JavaScriptによる画像の複数投稿
JavaScriptによる画像の複数投稿
何日かかってんだって、自分でも思います。この機能の実装のための参考カリキュラムがあります。それを終えてからが地獄の始まりみたいなものです💦参考カリキュラムで作ったミニアプリを応用し、フリマアプリにも実装していきます
ですが、次のようになってしまいます。
①投稿ボタンが複製される。
②その複製されたボタンを使わないと、新しく投稿できない。
③画像を投稿し続けると、横からはみ出る。
④スクショ画像ではわかりませんが、画像が投稿されるたびに他の要素が下に押し出される。
⑤画像が縦に並ぶ。(解決済み)
と、単純に投稿1つとっても、いくつもの壁が現れます。最終課題をクリアしていった方々の凄さを改めて感じます。
解決方法
①投稿ボタンが複製される。
→検証ツールを使って、投稿ボタンのクラス名を探します。そして
displey : none;
をすればOKでした。念のため、大きさは0にして誤クリックを防ぎます。
$('.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〜3回しか使ってません。それで理解できる理解力があれば、僕はもっと成績が良かったはずです😑
③Excelと同じで、困難は分割すれば良さそう
→僕はExcelが得意です。小学校教員の中では無双できるぐらいには。(学校の先生は新しい技術に超絶弱いので、井の中の蛙ですが😅)
Excelで何かデータを作る時、その後の入力が少なくなるように設計します。その際には関数を組み合わせますが、これがややこしいのです。3〜4つの関数を組み合わせるとエラーが出た時に、どう対処すればいいのかが見えにくくなります。
ですので、
関数が組み合わさった式を分解します。
Aの関数の結果を表示。
その結果にBの関数をかける。
その結果にCに関数を・・・。
としていけば、最終的には多くの関数を組み合わせた結果が表示されます。
最後に不要な部分を見えなくしたら設計完了です😃
というのに似てるなと思います。
コードを書く時にも、一気に全部をやるとエラー箇所の特定が難しくなります。ですので、コメントアウトを使って必要な部分だけが動くようにする。動作しなかったら修正。この繰り返し。
「困難は分割せよ。」
ルロイ修道士の言葉です。中3の国語で勉強された方も多いと思います。
(※元々はフランスの哲学者フロイトが発した言葉だそうです。)
一度に大量のコードをみると、「難しそう💦」となってしまいます。
ですが、1行だけだったら理解できることがあります。1歩ずつがんばっていきましょう!
TECH CAMPの受講料を最大2万円お得にする方法はこちら
前:TECH CAMP体験記㊳ 57日目 キャリア面談2回目
次:TECH CAMP体験記㊵ 59日目 JSの画像投稿機能で1日終わる2
「困難は分割せよ。」
物事を進める時の基本かも知れませんが、行き詰まったときにはつい忘れがちになってしまいます。「難しいな💦」と思った時こそ、気持ちを落ち着けて冷静に対処しなくては、、、と思いました😃