jQueryのユーティリティ関数(each,map,merge,extend)

jQueryには便利なユーティリティ関数(jQueryクラスのメソッド)があります。ここでは、「grep each map」「inArray」「merge extend」について紹介します。

grep each map

配列の各要素ごとに処理をする関数として、grep each mapがあります。それぞれの概要は次のようになります。

項目 grep each map
概要 要素の選別 要素の個別処理 要素の個別処理をして新しい配列を取得
動作イメージ var bfdata = [3, 2, 4, 1];

2より大きい値を選別
[3, 4]
var bfdata = [3, 2, 4, 1];

各要素ごとに処理を実行
bfdata[0]を扱った処理
bfdata[1]を扱った処理
bfdata[2]を扱った処理
bfdata[3]を扱った処理
var bfdata = [3, 2, 4, 1];

各要素を2倍にした新しい配列を取得
[6, 4, 8, 2]

使い方は以下の通りです。

grep

jQuery.grep( 配列, function (要素の値, インデックス番号){
    return 条件;
}

条件でtrueを返した要素のみを選別した配列を戻り値として取得。

var bfdata = [3, 2, 4, 1];
var afdata = $.grep(bfdata, function (val, index) {
    return val > 2;
});
console.log(afdata);  // [object Array][3, 4]

each

jQuery.each( array[object], function (インデックス番号, 要素の値){
    任意の処理
}

returnでfalseを返すと処理が中断して、それ以降の要素の処理を行わない。

var bfdata = [3, 2, 4, 1];
var afdata = $.each(bfdata, function (index, val) {
    console.log(index + ':' + val);
    return val !== 4;
});
// 0:3
// 1:2
// 2:4
 
 
var bfdata = {name: "山田", height: 180, weight: 70};
var afdata = $.each(bfdata, function (index, val) {
    console.log(index + ':' + val);
});
// name:山田
// height:180
// weight:70

map

jQuery.map( array[object], function (要素の値, インデックス番号){
    任意の処理
    return 処理した要素の値 or null;
}

return で返した値を配列に追加。nullを返した場合は配列に追加しない。

var bfdata = [3, 2, 4, 1];
var afdata = $.map(bfdata, function (val, index) {
    if (val > 1) {
        return val * 2;
    } else {
        return null;
    }
});
console.log(afdata);  //  [object Array][6, 4, 8]

inArray

inArrayを利用することで、指定した値が配列中にあるか判定することができます。

jQuery.inArray( 値, 配列 )

指定した値が配列中にあれば、インデックスを返す。
値が配列中にない場合は、-1を返す。

var arr = ["鈴木", "佐藤", "山田"];
console.log(jQuery.inArray("山田", arr));  // 2
console.log(jQuery.inArray("室伏", arr));  // -1

merge extend

  • 2つの配列の内容をマージするには、merge関数を利用します。
  • 複数のオブジェクトをマージするには、extend関数を利用します。

merge

jQuery.merge( 配列1, 配列2 )
var first = ["a", "d", "c"];
var second = ["d", "a", "f", "h"];
$.merge(first, second);
console.log(first);  
// [object Array]["a", "d", "c", "d", "a", "f", "h"]

extend

jQuery.extend( [deep,] target [,object_1] [,object_N] )

「deep」にtrueを設定すると、再帰的に階層の深いプロパティも連結。

var a = {
    id: 1,
    name: '山田'
};
 
var b = {
    name: '山田隆',
    old: 20
};
$.extend(a, b);
console.log(a);  // [object Object]{id: 1, name: "山田隆", old: 20}
var a = {
    name: '山田',
    score: {
        english: 72,
        math: 90,
        science: 88
    }
};
var b = {
    name: '山田',
    score: {
        society: 69
    }
};
$.extend(a, b);
console.log(a);
// {
//    name: "山田", 
//    score: { 
//      society: 69
//    }
// }
var a = {
    name: '山田',
    score: {
        english: 72,
        math: 90,
        science: 88
    }
};
var b = {
    name: '山田',
    score: {
        society: 69
    }
};
$.extend(true, a, b);
console.log(a);
// {
//    name: "山田", 
//    score: { 
//      english: 72,
//      math: 90,
//      science: 88,
//      society: 69
//    }
// }
【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。