AnimateでHTML5 Canvasコンテンツをつくる

配列とは

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数の値を整数インデックスで納められる配列の使い方についてご説明します。
講師:
07:34

字幕

このレッスンでは複数の値を 整数のインデックスで収められる 配列とその使い方について ご説明しましょう。 まず、今開いているのは 真っ新な何も置かれていない Animate のドキュメントですけれど アクションパネルを開きましょう。 右クリックで「アクション」です。 ここで配列というオブジェクトを 作ってみたいと思います。 オブジェクトを作ったら それを変数に入れないと 扱いができませんので、まず変数 array としましょう。 配列は英語では array という風に言います。 そして、array のつくり方 幾つか方法はあるんですが 一番簡単な方法で ご説明をします。 角括弧 2つ[ ] 向き合わせで書きます。 配列というのは 入れ物のようなオブジェクトです。 変数には1つの値 データしか入れられません。 けれども、配列というオブジェクトは 配列の中にプロパティのような形で 複数の値を含めることが出来ます。 ですから、1つの変数で 複数の値を使いたいという場合には 配列を使うと良いでしょう。 今、この [ ] で作った配列には まだ何も入っていません。 何か入れたい時には この変数に対して 何番目に入れたいのか、ということで それを [ ] に指定します。 これをインデックスというのですけど インデックスは0番からの整数番号です。 最初の値を、じゃあ 0番に入れましょう。 後は、普通に変数に入れる時と同じように = 3 とします。 0番に3が入りました。 では次は2番目は 1になります。 角括弧で1 ではここには 1と入れましょう。 もう一個入れましょうか。 array の3番目は インデックスは2になります。 では2とします。 これがどんな風に値が収められているか console.log のメソッドで調べてみましょう。 console.log この中に 調べたい値 変数 array に入っている 配列のオブジェクト これを確認してみたいと思います。 ブラウザーで確認しますので 「制御」>「プレビュー」です。 そして、Chrome ですけど その場合には 「表示」>「開発管理」> 「JavaScript コンソール」です。 そうすると、array[3]と書いてあります。 これは3が入っているよという意味ではなくて 3個入っています、と 個数を示しています。 そして、この三角をクリックすると 中が表示されるのですけど 0番に3 1番に1 2番に2が入っていると length というのは この3という表示と一緒なんですが 個数になります。 確かに先ほど入れた値が入っていて 全部で3つある、ということですね。 さて、値を書き換えたいとします。 例えば インデックスの2は2じゃなくて やっぱり4がいいな、と ここで4と書いてしまっても良いのですが 一旦2を入れておいて 後から4に書き換える ということはできます。 ですから、一旦2を入れた上で もう一度 array[2] = 4 とすれば 新たに4が入りますね。 ここは ; です。 4が入って、2は上書きされて 4に変わります。 確認してみます。 「制御」>「プレビュー」です。 そして「表示」>「開発管理」> 「JavaScript コンソール」 後から入れた方が有効です。 ですから個数は3のまま変わっていませんけど 3、1、2が上書きされて 4になっている、ということです。 配列には、数値だけではなくて 言ってみれば何でも入れられます。 あるいは、この1個1個のことを 配列の要素と言ったり あるいはエレメントと言うんですが エレメントごとにバラバラなデータを 入れることも出来ます。 では、ここの二度手間の処理は 無駄なので消してしまいます。 Delete で消します。 ではこのインデックス1に対して 文字を入れましょう。 文字の場合にはクォテーション ' で囲んで 例えば、私の名前ですけど fumio という風に入れます。 これでまた確認してみましょう。 「制御」>「プレビュー」で確認して そして「表示」>「開発管理」> 「JavaScript コンソール」で 個数は変わりませんが 中身は数字の3が0番 それから文字の fumio が1番 数字の4が2番に入っています。 入れる値が、初めに決まっている場合には 値が入った状態で 初めから配列を作ることもできます。 ですから、後から入れるのではなくて ここは消してしまいます。 例えば3、1、4が 0、1、2のインデックスに 入った状態で配列を作りたいとしたら 3, 1, 4 と、この数字の 順番がそのままインデックスになります。 0番、1番、2番ということで この3つ値が入った配列が 初めから出来上がります。 確認してみましょう。 「制御」>「プレビュー」です。 そして「表示」>「開発管理」> 「JavaScript コンソール」 3個入っていますね。 値を見てみると 3、1、4と 正しく数値が入っています。 配列から値を取り出す場合も [ ] のインデックスで指定をします。 例えば エレメント 0と 0番目が欲しい場合には array[0] とすれば 0番目が取り出せます。 それから、[ ] の中に指定する インデックスなんですが これは変数を使うことも もちろん可能です。 index としておいて 今度は2としましょう。 2番目には4が入っていますね。 ですから element[2] に array の [ ] の中に 変数を指定しますね。 index という風にしてあげまして console.log の中に element0, element2 ということで確認してみましょう。 「制御」>「プレビュー」です。 そして「表示」>「開発管理」> 「JavaScript コンソール」と いうことで見てみると 3と4が取り出せました。 このレッスンでは複数の値を 整数のインデックスで収められる 配列の作り方、使い方について ご説明しました。 作り方は [ ] ですね。 その中に初めから値を カンマ区切りで入れることもできます。 あと、値を書き換えたい場合とか あるいは取り出したい場合には 変数に対して [ ] で インデックスを指定すればいい ということでした。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。