SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Yahoo! UI Library Ver.3 を使ってみよう

Yahoo! UI Library3(YUI3)の標準オブジェクト

Yahoo! UI Library Ver.3 を使ってみよう(3)

配列の操作

 配列に関する処理はモジュールyuiのクラスArrayにまとめられています。まず、配列処理の例題を見てみましょう。

クラスArrayの使い方

 配列を作成し、Arrayメソッドを使って指定要素番号以降を取り出します。リスト3を見てください。

[リスト3]クラスArrayのArrayメソッド(array0.html)
YUI().use('node', function(Y) {
    var list = new Array("日","月","火","水","木","金","土");
    var p = Y.Array(list,3);    (1)
    alert(p);
});

 (1)でlistのデータの3番目以降(水から)を取得します。以下の図1が実行結果です(要素番号は0から始まります)。

図1:array0.htmlの実行結果
図1:array0.htmlの実行結果

 構文を示します。

[構文]クラスArrayのArrayメソッド
Y.Array(a,i)
  a:配列オブジェクト
  i:取り出す開始要素番号

 クラスArrayには他にどんなメソッドがあるのでしょうか。

Arrayメソッドの一覧表

 Arrayメソッド以外のメソッドの一覧表を示します。

Arrayのメソッド
メソッド 引数 概要
each(a,f) a:配列,f:処理関数 配列内のデータを順番に取り出す
indexOf(a,val) a:配列,val:値 配列のなかの文字列を検索して見つかった要素番号を返す
test() なし 配列か、リストかをチェック

 表に挙げたメソッドの使い方を紹介したいと思います。

[リスト4]表のメソッドの使い方(array1.html)
    YUI().use('node', function(Y) {
        var a =10;
        var b = new Array("月","火","水","木","金","土","日");
        var c = new Array(3,5,1,8,2);

        Y.Array.each(b, function(v, k) {    //(1)ループ毎に月から火、水と表示
            alert(v);
        });
        
        var n = Y.Array.indexOf(b,'水');    //(2)2
        alert(n);

           var n0 = Y.Array.test(a);        //(3)0(配列ではない)
        alert(n0);

        var n1 = Y.Array.test(b);        //(4)1(配列)
        alert(n1);

        var n2 = Y.Array.test(c);        //(5)1(配列)
        alert(n2);

        var n3 = Y.Array.test(list);    //(6)0: リスト( Y.on  Y.allで取得したリスト)
        alert(n3);
    });
}

 (1)のeachは配列の値を最初から順番に取り出します。処理関数の引数vは配列データの内容を、引数kは配列の要素番号になります。

 (2)はindexOfで、指定した値が入っている要素番号を返します。

 (3)以降はtestメソッドの例題です。配列ではないか、Y.on、Y.allで取得したリストの時は0を返し、Arrayで取得した配列は1を返します。

 リストと配列は、ほとんど同じ使い方ができます。たとえば、「他の人が開発したプログラムに処理を追加しなくてはいけなくなったとき、リストと配列ではプログラムの書き方が違うので、確認のためY.Array.test()を使ってみると、追加するための処理メソッドが見えてくる」という使い方もできると思います。

次のページ
オプション設定

この記事は参考になりましたか?

Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5005 2010/04/07 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー