すべてのカテゴリ

はじめに Javascriptには便利な配列用のメソッドがたくさんありますが、いざ、イメージ通りの処理を行おうとすると、自分で実装しなくてはならないことが多いです。よく使いそうなものからニッチなものまでいくつかのロジックサンプルを紹介します。前提として、共通の引数として使用する一次元配列は以下とします。 const array01 = [1,6,2,5,8,7,3,4,9,2,6,8,1,3,5]; const array02 = [10,15,20,5,35,25,30];なお、二次元配列やその他多次元配列の場合、別途処理内容が異なりますので、今回は考慮していません。■比較的よく使いそうな処理1. 配列の要素をランダムに並べる Array.reduceを使っている例も見受けられますが、無駄な配列を生成しない分、Array.forEachを使うほうがシンプルかと思います。実際の処理内容も、先頭から順次、Math.randomによって生成されたインデックス番号の要素と入替えているだけです。const arrayRandom = arr => {    arr.forEach((_, i) => {         const j = Math.floor(Math.random() * (i + 1));         [arr[i], arr[j]] = [arr[j], arr[i]];     });     return arr; };console.log(arrayRandom(array01));// 出力例　[6,8,9,8,4,3,1,5,2,6,

プログラミングでは配列操作という難しいワードがよく使われる。配列ってなに？難しそう、データ操作？？と疑問を抱く声も少なくない。今回は学習にこの配列操作有名なjavascriptのmapとfilterの事を挙げて解説していますので学習の参考に是非どうぞ！1 配列とは何かを確認 配列は 複数の値をまとめて扱うための箱。例const scores = [50, 70, 90];ここからが今日の本題。2 map 形を変える map は配列の中身を 一つずつ変換して 新しい配列を作る。元の配列は変わらない。例const numbers = [1, 2, 3];const doubled = numbers.map(num => {  return num * 2;});// 結果 [2, 4, 6]ポイント入力の数と 出力の数は必ず同じ。Web制作でよくある例商品データを 表示用の文字列に変換する。const items = [  { name: "りんご", price: 100 },  { name: "みかん", price: 80 }];const texts = items.map(item => {  return item.name + " は " + item.price + " 円です";});3 filter 必要なものだけ残す filter は条件に合うものだけを取り出す。例const numbers = [1, 2, 3, 4];const even = numbers.filter(num => {  return num % 2 === 0;

Vue 公式チュートリアル　〜　データの一覧を表示するVue 公式チュートリアル　〜　データの一覧を表示するVue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。前回までのポイントは？前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。今回学ぶのは？今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列（array）の中に入っているデータをまとめて表示するやり方です。例題では、「todo（やる事）」の一覧を表示するという内容になっています。<script>// give each todo a unique idlet id = 0;export default {  data() {    return {      newTodo: "",      todos: [        { id: id++, text: "Learn HTML" },        { id: id++,