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

関数の定義と呼び出し方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptの基本となる関数の定義と呼び出し方についてご説明します。
講師:
08:12

字幕

この レッスンでは変数と並ぶ JavaScript の基本である 関数の定義と呼び出しについて 説明します。 今アクションパネルには変数を使った 計算が書いてあります。 X という変数に 3 を入れ Y に 4 を入れ その2乗ですね。2乗を足し算して square という変数に入れています。 更に平方根、ルートをとって distance という変数に入れています。 文字通り原点0から (3,4)という XY 座標への距離を 求めているということです。 一応結果を見ておきましょう。 「制御」>「プレビュー」で 3の二乗と4の二乗の足したルートは 5になりますので 距離が5ということで これで合っています。 さて、距離を求めるという計算は 何度も使いたいかもしれません。 何度も使いたい 沢山行数があるような処理 でも関数にしてしまえば 何度でもその関数1個を呼び出せば その纏まった処理が全て 1度でできてしまうんですね。 では関数はどういう風に? まず定義をしなければいけないんですが ここに1回改行を入れて キーワードは function です。 変数は var でしたけれど 関数の場合は function で その後に名前を付けるのは 変数と一緒です。 では距離を求めるので getDistance と。 そして関数の場合は必ず ( ) が付きます。 ( ) の中に何か入れることもあれば 入れないこともありますけれど 今はとりあえず入れないでおきます。 そして { } この間にやりたいことを入れるわけです。 沢山入ることがありますので ここは改行しておきましょう。 JavaScript では半角スペース以外に 改行やタブも スクリプトとしては無いものとされるので 見やすいように整形して構いません。 フォーマットという言い方もしますけれど。 この間にやりたい事を入れるんですが とりあえず全部入れちゃいましょう。 カットします。 そしてここで ペーストします。 } が後ろに行っちゃいましたね。 改行を戻します。 それから見やすいようにと言った 先程のタブですが 関数の中はタブを入れて ここは関数の中で纏めて getDistance という処理に 定義してるんだよ、ということを 見やすくします。 インデントと言ったりもしますけど インデントを入れておきます。 これで関数の中に全ての処理が まとめられました。 そうしたら関数を実行します。 関数を定義して実行する、と。 これは、例えばサウンドを ダウンロードして聞くというのと似ています。 ダウンロードは1回すれば大丈夫ですね。 そうすれば何回でも聞けます。 関数の場合も1回定義をすれば 何度でも呼び出して その処理を実行できます。 それが便利な所です。 では再生、呼び出しはどうするかというと この関数名 ( ) をそのまま使っちゃいます。 コピーしちゃいましょう。 「ペースト」 これで関数の呼び出しです。 関数の呼び出し、再生と さっき言いましたけれど 関数の場合には 普通「呼び出し」と言います。 或いは「実行」と言ってもいいでしょう。 これも1つの命令ですので 最後にはセミコロンを打つことに なっています。 尚、関数の { } の後には 通常はセミコロンは打ちません。 これで実行されますので 確認してみましょう。 「制御」>「プレビュー」です。 5と同じ結果が出てきますね。 合っていますのでOK 関数が実行されたということです。 ただ、何度でも実行できると言っても これではつまりませんね。 常に3と4の倍の距離を求めていると いう事になります。 たまには違う数字を使いたいという時 関数では使えます。 ではこれをなくしましょう。 無くす場合に削除しても結構ですが // を打つと この1行はスクリプトとしては 無いものとされます。 「コメント行区切り記号」と 言ったりするんですが コメントという名前の通り メモ書きを書く事もありますし このように1回あった処理を 一時的に無くしてみる、 後でまた戻すかもしれないという時に 使うこともできます。 でも、 X と Y をどうやって 決定したらいいのかと言うと ここの ( ) の中に x, y と入れてあげます。 すると呼び出しの時 この ( ) の中に 3, 4 と入れてあげると 3 が X に、4 が y に この順番で入ります。 ですから var 宣言して ここで入れたのと同じ結果が起こります。 但し、 var 宣言の場合には ここで固定になってしまいますけれども この、引数と言うんですけれども 引っ張る数と書いて引数と言うんですが 引数にしてあげると 呼び出す時に数字を変えてしまうことができて その変えた数字に基いて計算が行われます。 3と4はもう分かってるよ、ということなので では1と1にしましょう。 この場合も結構有名な長さになりますね。 1:1:斜辺の長さというのは 見てみましょう。 プレビューを確認します。 1:1: ルート 2 ですね。 「一夜一夜に...」という数字になりました。 正解です。 さて、ここまで行くと ちょっと欲が出てきます。 この行 命令文、ステートメントと言ったりもしますが これは Math のクラスの中の sqrt という関数を呼び出して そこに square という この変数の値を入れています。 そうすると計算結果を 変数の中に入れることができるんですね。 これを計算結果を返すと言います。 計算結果を返すので 変数に入れることができる。 なので、ここで alert は又 // でコメントにしてしまって ここで新たに var として 例えば value にしましょうか。 =とした時に ここに結果が入るようにしたいと。 どうしたらいいかと言うと もう1行加えてあげます。 「結果を返す」と言ったんですが 文字通り、return と。 そして返す結果が入っている変数 distance ですね。 これをコピーして ペーストしてあげれば 結果が返ってきます。 本当でしょうか。 数字を又元に戻して3、4にしましょう。 この方が数字分かりやすいので。 そして alert その中に value と いう風にします。 そうすると function を呼び出して その結果を返してくれたものを 変数 value に入れて alert でそれを確認する という形になりますので 確認します。 「制御」>「プレビュー」です。 5と出てきましたね。正解です。 尚、この関数の呼び出しですが これは関数の定義の前にあっても 構いません。 カットして いちいち実行してみませんけれど ペーストしますね。 これでも問題なく実行されます。 先程の音楽の例で言うと ダウンロードの前に再生できないでしょう、と 思うかもしれませんが この function というキーワードの 付いた関数定義は スクリプトを1行1行実行する前に メモリにとられます。 ということなので、内部的には function が先に読み込まれて そして、再生というか実行が 行われるようになります。 このレッスンでは関数の定義と その呼び出しの仕方について説明しました。 関数は function というキーワードで 関数名を付ける。 ( ) の中に引数を加えることができます。 この場合には呼び出す時に その引数に応じた数字を 入れることができます。 更にその結果を返して貰うという時には return で結果を返して貰えるので 変数に又代入することができると いう事です。

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

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

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

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

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

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