Canvasを使うためのJavaScript入門

関数を定義して呼出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のステートメントをまとめて、何度も実行したいときには、関数として定めます。その定義と呼出し方について学びます。
講師:
09:48

字幕

ここでは関数を学習します 関数というのは複数の script のステートメントをメモリして それをいつでも呼びだして 実行できるようにする仕組みのことです この html ドキュメントの script 要素には 2行の JavaScript の ステートメントが書かれています ランダムな数値を Math.random 関数で 取り出し それを変数に入れます そして2つ目のステートメントでは alert メソッドにその変数を渡しますから 結果として警告ダイアログが開いて そこにランダムな数字が表示されます 確認してみましょう 「ブラウザでプレビュー」をします 警告ダイアログにランダムな 小数値が表示されました OK ボタンをクリックします このドキュメントには特に ボタンはありません もう1度この html ドキュメントを リロードすると また異なったランダムな小数値が表示されます さて この毎回ランダムな 小数値が表示されるという処理を 先程の2行のステートメントで 行っているわけですが ボタンを置いてボタンを押すたびに 先程の2つのステートメントを実行し 警告ダイアログに毎回異なった小数値を 表示するようにしたいと思います そのためには関数を 理解する必要があります 関数には定義と呼びだしの 2つのステップがあります まず定義の仕方からご説明しましょう 関数の定義は function という キーワードでスタートします そしてその後に関数名を付けます これは変数名と同じく 識別子を使います そして () { で始まり } で終わります そしてこの { } の間に 実行したい script のステートメントを 何行でも書き加えることができます 関数の呼び出しは簡単です 関数名の後に () を 向かい合わせて付けます これで関数が呼びだされ 実行されます 例えば Math.random も () で実行されましたね 一般に JavaScript では 関数あるいはメソッドは その後に () を2つ向かい合わせて 呼びだすことになっています 引数がありませんけれど 関数を定義する時 引数をとるように定義することも可能です 関数の定義というのは 処理をメモリする操作です これは一度だけ行う必要があります 次に関数の呼び出しというのは 処理を実行する操作で これは何度でも好きな時に 行うことができます 但し処理をメモリする 関数の定義が先になります これは言ってみればサウンドを ダウンロードして再生するのに似ています ダウンロードは最初に1回行う必要があります これが関数の定義に相当します そして一旦ダウンロードしてしまった サウンドは何度でも再生できますね これが関数の呼び出しです では script 要素に書いた 2行のステートメントを 関数として定義したいと思います その前に script を書く量が 段々増えてきます DreamWeaver では 「ウィンドウ」メニューの 「パネルの非表示」で 他のパネルを隠すことができます これで script の画面が 広く使えるでしょう 関数の定義は function キーワードでスタートします そして名前は showRandomNumber としましょう そして ( ) { で始まり } で閉じます そしてステートメントは インデントを入れた方が見やすくなります 次に body 要素に button を加えます button の要素を加えて type は単純な button です そして onclick 属性に script を書くわけですが この場合は関数の呼び出しですから 関数名 ( ) これを onclick 属性に定めます そしてボタンのラベルと script の閉じタグということになります ブラウザで結果を確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」をいたします ボタンがでました ランダムな数字の警告ダイアログが まだでていません ボタンをクリックすると警告ダイアログに ランダムな小数値がだされます OK ボタンを押して 「ランダム数」のボタンをもう1度押すと 異なったランダムな数字がでます つまり関数が毎回毎回 実行されるので 毎回異なったランダムの数字を だしているということです もっともランダムな0以上1未満の小数値 なんて欲しいことはあまりないですね 普通は欲しいのは整数でしょう 例えばサイコロを振るのであれば 1から6までの整数が必要になるはずです その場合には この右辺を変更します まずは結果の式からお見せしてしまいます Math.floor これは小数以下を切り捨てるメソッドです 後でまたもう少し 詳しく説明します そして × のサイコロの目の6です そして + ことの1 これはサイコロの小さい方の目ですね ブラウザで確かめてみましょう 「ファイル」から 「ブラウザでプレビュー」です ドキュメントの見た目は 先程と変わりません 「ランダム数」のボタンを押してみます すると整数がでました しかもサイコロの1から6の間の ランダムな目です もう1回クリックしてみましょう 3 4 この辺にしておきますけれど ちゃんと 1から6の間の数字がでているようですね 問題はこの式で何故 1から6までのランダムな数字が 取り出せたか ということです とりあえず式の計算方法だけ 見ておきましょう Math.random 関数に 6をかけ それを Math.floor 関数に 渡しています この Math.floor 関数というのは 引数の小数点以下を切り捨てます その結果に対して1を足す ということなのですが 何故これで1から6までの ランダムな整数が出せたのか それをもう少し詳しく説明します さて この式で何故1から6までの ランダムな整数が得られたのか 4つのステップで考えてみたいと思います まずステップ1 これは Math.random 関数そのままです 定義から0以上1未満の 小数値が得られています そこでステップ2 この関数の戻り値 返された値に6を掛け算します すると得られる数値は 0以上6未満の小数値になります さて この結果を Math.floor 関数に渡して 小数値 小数点以下を 切り捨てました そうすると結果 得られてくるのは 0 1 2 3 4 5 の 6つの整数のうちのいずれかです もう1歩ですね 1を足してしまいました すると 1 2 3 4 5 6 の 1から6までの整数の いずれかを得られることになりました サイコロの1から6までの目 以外の場合も知りたいですね 例えば1月から12月までの いずれかの月を 取り出したいなどといった場合は 1から12になります 一般にはこのように考えます Math.random 関数に かけ合わせるのは 「最大値 - 最小値 + 1」です 先ほどのサイコロの場合で言うと サイコロの目が6つあったので 6を掛けました サイコロの目の最大値6から 最小値1を引くと 5になってしまいますね というのは小さい 一番小さい1を引いてしまうと 1のぶん足りなくなります ですから最小値の1を引いた後 1を足しこんで 6 - 1 + 1 で × 6 ということになります そして Math.floor 関数で 小数値を切り捨てた後 最小値を足しこむということになります これで任意の整数のランダムな 取り出し方ができるようになります 最後に1つ 用語の確認をしておきます button の onclick 属性に 関数を定めました このようにクリックした時 何かをした時 実行するよう定められた処理のことを 「イベントハンドラ」というふうに呼びます マウスクリックなどの ブラウザの中で起こる― プログラム上 意味のあるできごとを 「イベント」と呼びます イベントハンドラというのは イベントが起こった時に 実行するよう定められた処理です 関数の定義と その呼び出しについて学びました あと おまけとして ランダムな整数の取り出し方 これも覚えておくと良いでしょう

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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