JavaScriptの関数を使いこなす

名前のない関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
名前のない関数は変数に入れて呼び出すことができます。
講師:
07:41

字幕

このレッスンでは 名前のない関数― 匿名関数ともいいますが その使い方についてご説明をします 今 Dreamweaver で開いている HTML ドキュメントには script 要素に 関数の定義がされています そしてその関数の呼び出しですね どのような関数かというと getRandom という名前がついている通り ランダムな数値を返します Math.random で 0 から 1 の間の ランダムな少数値を出して 6 を掛け Math.floor で その少数値を切り捨てます そして 1 を足すと サイコロと同じ― 1 から 6 までのランダムな数値が 変数に入って返されます その結果が こちらの変数 result に入って console.log で結果が出る と― 1 から 6 までのサイコロを振った数字が でてくるということです では確認してみましょう ファイルからブラウザでプレビューします そしてJavaScript コンソールを 表示しましょう 3 と出ていますね ではもう一回ぐらいリロードしてみましょう 1 になりました サイコロの目が出ている ということですね コンソールは一回クリアしておきます では名前のない関数というのを 定めてみましょう 早速関数定義の名前を消してしまいます そうすると まずどうやって呼び出したいか 困りますね それから実はもう一つ 名前があると その名前でメモリに確保されます メモリに保管されます 名前がないとメモリに残らないんですね 消えてしまいます ではメモリを残すには どうしたらいいかというと 名前を付ける以外― 変数ありましたね 変数 func という名前を付け ここに入れてしまえばいいです function その後に続けて書きます 名前はないままですけれども 変数に入ります そしてこの function というのは― この塊がすべて一つの値としてみなされます それが代入されるので 代入文ですから セミコロンを付けます さて呼び出しはというと 名前はないですが func という変数に入っています ですから func という変数を ここで― 参照して呼び出せという変数と function 名前ではないですが func に入っている function を 取り出して 実行するということになります そしてその結果を result という 変数に入れるということで よさそうですが ちょっとここにはまだ問題があります 保存して確認してみましょう ブラウザで ページのリロードを行います そうすると エラーが出ていますね func これ変数ですが function ではないですよ と 言っています これは言いがかりではありません 確かに function ではないです その意味をちょっとご説明します 関数の定義というのは― JavaScript コードを実行する時に 最初にメモリに取られます けれども― このイコールですね 代入というのは― スクリプトのこのコードの行順に実行されます ですからいくら function は定義されていても func という変数に代入するのは 呼び出した後になっているわけです ですから呼び出した時には func には 何も function が入っていません― というエラーなんです ですから実行順序を 変えないといけないことになります ですから― この二行をドラッグして 下に移動してしまいます これでしたら代入が行われて 関数が入っていますので 呼び出しも可能です あらためて保存します そしてブラウザで確認しましょう ブラウザのページをリロードします 今度は数字が出てきました 毎回ランダムで出てくるはずなので もう一回確認します 1 に変わりましたね 確かにランダムな数字が出ていますので 関数が正しく実行されているということです コンソールはクリアしておきます 名前のない関数というのは 記述が簡単になる反面 今の実行順序のように― ちょっとした所でトラブルが出たり 或いは分かりにくくなるという難点はあります けれども変数に入れるということなので ということは値を書き換えることが可能です ではこのコードはそのままにして 更に書き換えをしてみましょう まず この func ですね func に― また代入します ということは上書きされるわけですね function を また名前のない形で書きます どうするかというと では円の面積でも出しましょう 引数に― radius を受け取って 半径を受け取って そして― 円の面積 CircleArea という変数にしましょう そこに この半径の面積― 円の面積を計算します 二乗しますので power この radius ですね 半径の値を― コピーして持ってきて 二乗します そして円周率 パイを掛ける これで円の面積が出ましたので 値を返します return で戻り値が定められますので 値が返ります ではその結果を また― result に入れることにしましょう コピーして持ってきます そしてどうするかというと ここに半径の値を入れますが result としてしまいます そうするとランダムな値が 1 から 6 までのランダムな値が 入っていますので それを半径として面積を計算して 改めて result に入れ直します 上書きするわけですね 結果を見てみたいと思いますが― では console.log を持ってきて そしてもう一個やってしまいましょう 代入しています 関数を代入していますよね ということはこの変数の中を 空っぽにすることができます func = null と null というのは値がありません という特別な値ですが ここで本当になくなったかどうかをですね― console.log(func) ということで確認してみます 保存をして― ブラウザで見てみましょう ページをリロードします 半径出てきました そして 6 の二乗 × 3.14 大体こんなもんでしょう 核の null というのは func という変数に入っている値です つまり関数はもう変数には残っていません 残っているのはこの円の面積だけです このレッスンでは 名前のない関数についてご説明しました 名前のない関数は 変数に入れて呼び出すことができます そして 変数ですから 関数の内容を 書き換えることができたということです 更にその変数を空にしてしまえば 関数がメモリに残らないということで ちょっと実行してすぐ消してしまう という所で使うといいでしょう

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

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

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

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

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