駆け出しエンジニアのつぶやきホームブログHTML/CSSJavaScriptVue.jsPHPLaravelMySQLJavaCUILinuxMacWindowsつぶやきプロフィールお問い合わせこのブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。機能の基本的な使い方を把握しましょうがコンセプトだったのでしょうがないのです。コードをテキストエディタにコピペしてファイルを作成してください。タグなどは省略してるので個々で追加しておいてください。関する要素とコードは省略してますので見た目は動画と異なります。解説では!コードの解説をしていきます!まず前回のコードのイケてない部分を認識しましょう。・値を1つずつ取得して計算しているため無駄に長いこれはただコードの見た目で言ってるわけではないです。連番をつけて識別させてましたがこんなこと言われたらどうしましょう?「計算式の行をいっぱい追加してほしい。」するとこんな手間が発生します。同じ処理の繰り返しなのにどんどん長くなるのは回避したいですよね。こんな風に改善するといいと思います。要素を一括で取得する・計算はループで簡潔にするこれなら後から追加しても編集の工程が減ると思います。要素を一括で取得するのには命名規則にちょっと工夫してあげるといいです。名前を統一しちゃいましょう。コードを参照してください。ちなみに、もともと連番を使った理由は同じ名前の変数はどんどん新しい値に上書きされてしまうからです。この考えがそもそも間違ってました。変数名を一緒にしても配列にすればよかったのです。配列の形式での要素の取得方法をみてみましょう。developer.mozilla.orgこれで指定した全ての要素を配列で取得してくれます。指定した要素を1つ取得しますのでついでに一緒に覚えちゃいましょう。まとめるとこんな感じです。この部分で使ってます。document.querySelector('input[name=all_total]');ブラウザのコンソールで取得できてるか確認してみましょう。そのままコンソールに貼り付け以下の結果が返っていることが確認できます。縦一列の6つの要素が全て配列で取得できてます。確実にこっちの方が楽ですね。あとは同じように要素を取得して、おきまりの配列をループで回していけばいけそうな感じがしますね!配列をループで取得するループは以下のように使用します。ini_val;}ループをテーブルの行数分回して、一つずつ配列に納める→入力値か空(0)のどちらかを条件分岐させて計算を行うという処理を繰り返しています。それだと4行目からのセレクトボックスにループの値を保存しておく場所が無くなってしまいますね。文は場合によってはプログラマーに嫌われがちだったりします。文とかドン引きされます。合コンの最初の自己紹介でエグい下ネタぶちこむくらいにはドン引きされると思います。;明らかに簡潔に記述できるかと思います。今回のコードでは以下の部分です。index1;配列で要素を取得してますのでインデックスを指定すればテーブルごとの合計値を求められます。最後に前回の記事と同じくイベントリスナーでボタンクリックをしたら総合計を求めるようにする。});これで完成です。おわりに最後まで読んでいただきありがとうございます!今回のはちょっとできた気分になれるプログラミングかとは思います。使用してますが、この関数ちょっと落とし穴があるのでそこら辺も改善案を考えてシェアしていきたいと思います。ほとんど使わないで同じアプリを作ってみようかと思います。要素生成の部分になります。操作はだいぶ理解が深まるかと思います。元キャバクラ店長から未経験でエンジニアに転職した異端児。「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。Transitionでクロスフェードなスライダーをつくる方法Vue.jsを使用したスライドの実装方法を解説。ボタンクリックで切り替わるスライドでなく、時間経過で自動で画像がスライドするホームページのヘッダーなどで使用する想定で作りました。Mixでフロントエンドの画面遷移を行う方法VueRouter×LaravelMixを使ったフロントエンドでの画面遷移の方法。Laravelでサーバー処理を画面はVue.jsと処理を分けてSPAサイトを構築したい人のための基礎知識を書きました。元キャバクラ店長から未経験でエンジニアに転職した異端児。「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。転職して半年たって思うこと。元キャバクラ店長から未経験でエンジニアに転職した異端児。「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。転職して半年たって思うこと。Transitionでクロスフェードなスライダーをつくる方法2019.07.21。