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

変数の宣言と使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptの基本となる変数の宣言と使い方についてご説明します。
講師:
06:11

字幕

このレッスンでは JavaScript の基本となる変数の宣言と、 その使い方について ご説明をします。 今開いている Animate の ドキュメントなんですが 真っ新なままです。 一応ファイル名は付いていますけど 何も書かれていません 白いキャンバスのままですし フレームも空っぽです。 ライブラリも何もありません。 では今回は、ここでJavaScript のコードを 書いてみたいと思いますので コードを書くのはキーフレームです。 そこを選んで右クリックで アクションパネルを表示しましょう。 ここに JavaScript が書けます。 例えば、 2の2乗を計算したいとしましょう。 その時には 2*2 アスタリスク「*」が 掛ける「×」です。 そして JavaScript のコードを書く時 あまり詰まってると見にくいので 数字や記号の間に半角のスペースを入れて 見やすくすることができます。 これでコンピューターは 2*2 つまり2の2乗を計算してくれますけれど 計算したら、すぐ忘れてしまいます。 忘れないようにするには ここで使うのは変数です。 変数というのは メモリーです。 メモリーに入れておけば コンピューターが忘れない Animate が忘れない ということになります。 では変数というのは、どのように まず宣言と言いますけど メモリーの領域を作ったらいいか、というと ここで一回改行を入れますけれど var というキーワードを使います。 変数の英語の呼び方 variable の頭を取ったんですね。 そして、1スペース 半角スペースです。 メモリーはいくらでも作れますので 名前を付けなければいけません。 基本的には英数字で 付けることになります。 今回は無精をして x にします。 そして = 詰まっていると見にくいようでしたら 半角スペースで空けて結構です。 そして、2 * 2 と これは JavaScript のコードですから 最後には ; で ここまでで終了ということになります。 ここはちょっと消してしまいますけど これでコンピューターは 2×2 を計算して x という名前の付いたメモリーに その値を入れました。 覚えました、けれども 私たちには見えません。 見えるようにしてほしいですね。 何かやはり命令を書かないといけません。 今回は alert と これは JavaScript 一般に使われますけど 警告のダイアログを出して そこに結果を示してくれます。 この x の中に入っているものを 知りたかったら alert の括弧の中に x を入れます。 これで「制御」>「プレビュー」で 確認することができます。 ブラウザーのウィンドウが開いて 警告ダイアログがでますので 確認してみましょう。 ダイアログでましたね 2×2=4 です。 この上のタイトルの所は、今 サーバーがローカルで立ち上がっているので それがでてるだけですから 気にしなくて結構です。 この数字の部分 4ということで OK をクリックしましょう。 さて、今度は3の2乗 ついでに4の2乗も足して その合計を求めてみましょう。 その時、もちろん この x に全部書いても良いですが それも面倒です。 こういう場合には x には 3 だけを入れると。 変数はいくら作っても平気ですから メモリーがパンクしない限りですね。 今度、y には4を入れる、と。 2乗の合計なので また変数を設けて square と ここに x の 同士の掛け算ですね。 + Y 同士の掛け算と いう風にすれば もし数字が変わっても 2か所変えればいいですね。 全部変えていたら 4か所書き直さなければいけませんので 手間が一応 半分に減ります。 ではこの結果 square は どうなったかというと これをコピーして alert の中にペーストします。 結果を見てみましょう。 「制御」>「プレビュー」です。 25 合ってますね。 x の2乗と y の2乗を足し算すると 何故か平方根がとりたくなります。 3平方の定理ですね。 3平方の定理で 3と4という座標と原点との 距離を求めてみましょう。 また距離を変数にとります。 距離ですから distance と そして、この square ですね。 タイプミスすると嫌なので これをコピーして ペーストしましょう。 平方根というのは JavaScript の中に math というクラス、まあライブラリの 様なものだと考えてもいいでしょうね。 math という中に 平方根をとるという関数があります。 math. と そして sqrt square root です。 square というのは 平方です。 root は根っこですね ということで、文字通り 平方根ということになります。 ではこの結果はどうなったか またこれをコピーして square の代わりに 上書きペーストします。 確認してみましょう。 「制御」>「プレビュー」をします。 そうすると、直角三角形 一辺が3,4 なると斜辺が5というのは 昔習った覚えがあるかもしれませんけど 確かに正解です。 このレッスンでは変数の宣言と その使い方についてご説明しました。 変数は var というキーワードで その後に変数名を付ける これでメモリーが 確保されますので そこに値を入れる 代入というのですけど その場合には = と書いて値を入れればいいです。 そして変数に値を入れてしまうと その変数があたかも その数字の様に使える ということですね。 それを更に別の変数にということで 変数をどんどん使うと 計算がシステマティックになって わかりやすくなるということです。

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

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

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

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

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

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